trent_larson/crowd-funder-for-time-pwa
4
1
Fork 2
Code Issues Pull Requests 22 Releases 5 Wiki Activity

Merge branch 'build-improvement' into units-mocking

Browse Source
This commit is contained in:
Matthew Raymer
2025-07-30 06:17:24 +00:00
parent 6302147907 07c5c6fd31
commit 8e0b339095
15 changed files with 219 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/ActivityListItem.vue
View File

@@ -52,7 +52,7 @@
<a
class="cursor-pointer"
data-testid="circle-info-link"
@click="$emit('loadClaim', record.jwtId)"
@click="emitLoadClaim(record.jwtId)"
>
<font-awesome icon="circle-info" class="fa-fw text-slate-500" />
</a>
@@ -67,7 +67,7 @@
>
<a
class="block bg-slate-100/50 backdrop-blur-md px-6 py-4 cursor-pointer"
@click="$emit('viewImage', record.image)"
@click="emitViewImage(record.image)"
>
<img
class="w-full h-auto max-w-lg max-h-96 object-contain mx-auto drop-shadow-md"
@@ -80,7 +80,7 @@
<!-- Description -->
<p class="font-medium">
<a class="cursor-pointer" @click="$emit('loadClaim', record.jwtId)">
<a class="cursor-pointer" @click="emitLoadClaim(record.jwtId)">
{{ description }}
</a>
</p>
@@ -248,7 +248,7 @@
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-facing-decorator";
import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
import { GiveRecordWithContactInfo } from "@/interfaces/give";
import EntityIcon from "./EntityIcon.vue";
import { isGiveClaimType, notifyWhyCannotConfirm } from "../libs/util";
@@ -340,7 +340,19 @@ export default class ActivityListItem extends Vue {
return true;
}
handleConfirmClick() {
// Emit methods using @Emit decorator
@Emit("viewImage")
emitViewImage(imageUrl: string) {
return imageUrl;
}
@Emit("loadClaim")
emitLoadClaim(jwtId: string) {
return jwtId;
}
@Emit("confirmClaim")
emitConfirmClaim() {
if (!this.canConfirm) {
notifyWhyCannotConfirm(
(msg, timeout) => this.notify.info(msg.text ?? "", timeout),
@@ -352,7 +364,11 @@ export default class ActivityListItem extends Vue {
);
return;
}
this.$emit("confirmClaim", this.record);
return this.record;
}
handleConfirmClick() {
this.emitConfirmClaim();
}
get friendlyDate(): string {

17
src/components/ContactBulkActions.vue
View File

@@ -6,13 +6,13 @@
:checked="allContactsSelected"
class="align-middle ml-2 h-6 w-6"
data-testId="contactCheckAllBottom"
@click="$emit('toggle-all-selection')"
@click="emitToggleAllSelection"
/>
<button
v-if="!showGiveNumbers"
:class="copyButtonClass"
:disabled="copyButtonDisabled"
@click="$emit('copy-selected')"
@click="emitCopySelected"
>
Copy
</button>
@@ -20,7 +20,7 @@
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-facing-decorator";
import { Component, Vue, Prop, Emit } from "vue-facing-decorator";
/**
* ContactBulkActions - Contact bulk actions component
@@ -38,5 +38,16 @@ export default class ContactBulkActions extends Vue {
@Prop({ required: true }) allContactsSelected!: boolean;
@Prop({ required: true }) copyButtonClass!: string;
@Prop({ required: true }) copyButtonDisabled!: boolean;
// Emit methods using @Emit decorator
@Emit("toggle-all-selection")
emitToggleAllSelection() {
// No parameters needed
}
@Emit("copy-selected")
emitCopySelected() {
// No parameters needed
}
}
</script>

4
src/components/ContactInputForm.vue
View File

@@ -64,7 +64,7 @@
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-facing-decorator";
import { Component, Vue, Prop, Emit } from "vue-facing-decorator";
/**
* ContactInputForm - Contact input form component
@@ -165,9 +165,9 @@ export default class ContactInputForm extends Vue {
* Handle QR scan button click
* Emits qr-scan event for parent handling
*/
@Emit("qr-scan")
private handleQRScan(): void {
console.log("[ContactInputForm] QR scan button clicked");
this.$emit("qr-scan");
}
}
</script>

38
src/components/ContactListHeader.vue
View File

@@ -8,21 +8,21 @@
:checked="allContactsSelected"
class="align-middle ml-2 h-6 w-6"
data-testId="contactCheckAllTop"
@click="$emit('toggle-all-selection')"
@click="emitToggleAllSelection"
/>
<button
v-if="!showGiveNumbers"
:class="copyButtonClass"
:disabled="copyButtonDisabled"
data-testId="copySelectedContactsButtonTop"
@click="$emit('copy-selected')"
@click="emitCopySelected"
>
Copy
</button>
<font-awesome
icon="circle-info"
class="text-2xl text-blue-500 ml-2"
@click="$emit('show-copy-info')"
@click="emitShowCopyInfo"
/>
</div>
</div>
@@ -33,7 +33,7 @@
v-if="showGiveNumbers"
class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
:class="giveAmountsButtonClass"
@click="$emit('toggle-give-totals')"
@click="emitToggleGiveTotals"
>
{{ giveAmountsButtonText }}
<font-awesome icon="left-right" class="fa-fw" />
@@ -41,7 +41,7 @@
<button
class="text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
@click="$emit('toggle-show-actions')"
@click="emitToggleShowActions"
>
{{ showActionsButtonText }}
</button>
@@ -50,7 +50,7 @@
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-facing-decorator";
import { Component, Vue, Prop, Emit } from "vue-facing-decorator";
/**
* ContactListHeader - Contact list header component
@@ -71,5 +71,31 @@ export default class ContactListHeader extends Vue {
@Prop({ required: true }) giveAmountsButtonText!: string;
@Prop({ required: true }) showActionsButtonText!: string;
@Prop({ required: true }) giveAmountsButtonClass!: Record<string, boolean>;
// Emit methods using @Emit decorator
@Emit("toggle-all-selection")
emitToggleAllSelection() {
// No parameters needed
}
@Emit("copy-selected")
emitCopySelected() {
// No parameters needed
}
@Emit("show-copy-info")
emitShowCopyInfo() {
// No parameters needed
}
@Emit("toggle-give-totals")
emitToggleGiveTotals() {
// No parameters needed
}
@Emit("toggle-show-actions")
emitToggleShowActions() {
// No parameters needed
}
}
</script>

33
src/components/ContactListItem.vue
View File

@@ -9,14 +9,14 @@
:checked="isSelected"
class="ml-2 h-6 w-6 flex-shrink-0"
data-testId="contactCheckOne"
@click="$emit('toggle-selection', contact.did)"
@click="emitToggleSelection(contact.did)"
/>
<EntityIcon
:contact="contact"
:icon-size="48"
class="shrink-0 align-text-bottom border border-slate-300 rounded cursor-pointer overflow-hidden"
@click="$emit('show-identicon', contact)"
@click="emitShowIdenticon(contact)"
/>
<div class="overflow-hidden">
@@ -63,7 +63,7 @@
<button
class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2.5 py-1.5 rounded-l-md"
:title="getGiveDescriptionForContact(contact.did, true)"
@click="$emit('show-gifted-dialog', contact.did, activeDid)"
@click="emitShowGiftedDialog(contact.did, activeDid)"
>
{{ getGiveAmountForContact(contact.did, true) }}
</button>
@@ -71,7 +71,7 @@
<button
class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2.5 py-1.5 rounded-r-md border-l"
:title="getGiveDescriptionForContact(contact.did, false)"
@click="$emit('show-gifted-dialog', activeDid, contact.did)"
@click="emitShowGiftedDialog(activeDid, contact.did)"
>
{{ getGiveAmountForContact(contact.did, false) }}
</button>
@@ -81,7 +81,7 @@
<button
class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-md"
data-testId="offerButton"
@click="$emit('open-offer-dialog', contact.did, contact.name)"
@click="emitOpenOfferDialog(contact.did, contact.name)"
>
Offer
</button>
@@ -102,7 +102,7 @@
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-facing-decorator";
import { Component, Vue, Prop, Emit } from "vue-facing-decorator";
import EntityIcon from "./EntityIcon.vue";
import { Contact } from "../db/tables/contacts";
import { AppString } from "../constants/app";
@@ -140,6 +140,27 @@ export default class ContactListItem extends Vue {
// Constants
AppString = AppString;
// Emit methods using @Emit decorator
@Emit("toggle-selection")
emitToggleSelection(did: string) {
return did;
}
@Emit("show-identicon")
emitShowIdenticon(contact: Contact) {
return contact;
}
@Emit("show-gifted-dialog")
emitShowGiftedDialog(fromDid: string, toDid: string) {
return { fromDid, toDid };
}
@Emit("open-offer-dialog")
emitOpenOfferDialog(did: string, name: string | undefined) {
return { did, name };
}
/**
* Format contact name with non-breaking spaces
*/

2
src/components/ImageViewer.vue
View File

@@ -25,7 +25,7 @@
<div class="flex-1 flex items-center justify-center p-2">
<div class="w-full h-full flex items-center justify-center">
<img
:src="transformedImageUrl"
:src="imageUrl"
class="max-h-[calc(100vh-5rem)] w-full h-full object-contain"
alt="expanded shared content"
@click="close"

10
src/components/LargeIdenticonModal.vue
View File

@@ -7,14 +7,14 @@
:contact="contact"
:icon-size="512"
class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
@click="$emit('close')"
@click="emitClose"
/>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-facing-decorator";
import { Component, Vue, Prop, Emit } from "vue-facing-decorator";
import EntityIcon from "./EntityIcon.vue";
import { Contact } from "../db/tables/contacts";
@@ -34,5 +34,11 @@ import { Contact } from "../db/tables/contacts";
})
export default class LargeIdenticonModal extends Vue {
@Prop({ required: true }) contact!: Contact | undefined;
// Emit methods using @Emit decorator
@Emit("close")
emitClose() {
// No parameters needed
}
}
</script>

16
src/components/MembersList.vue
View File

@@ -178,7 +178,7 @@
// Validation: Passes lint checks and TypeScript compilation
// Navigation: Contacts → Chair Icon → Start/Join Meeting → Members List
import { Component, Vue, Prop } from "vue-facing-decorator";
import { Component, Vue, Prop, Emit } from "vue-facing-decorator";
import {
errorStringForLog,
@@ -222,6 +222,12 @@ export default class MembersList extends Vue {
@Prop({ required: true }) password!: string;
@Prop({ default: false }) showOrganizerTools!: boolean;
// Emit methods using @Emit decorator
@Emit("error")
emitError(message: string) {
return message;
}
decryptedMembers: DecryptedMember[] = [];
firstName = "";
isLoading = true;
@@ -262,10 +268,7 @@ export default class MembersList extends Vue {
"Error fetching members: " + errorStringForLog(error),
true,
);
this.$emit(
"error",
serverMessageForUser(error) || "Failed to fetch members.",
);
this.emitError(serverMessageForUser(error) || "Failed to fetch members.");
} finally {
this.isLoading = false;
}
@@ -478,8 +481,7 @@ export default class MembersList extends Vue {
"Error toggling admission: " + errorStringForLog(error),
true,
);
this.$emit(
"error",
this.emitError(
serverMessageForUser(error) ||
"Failed to update member admission status.",
);

2
src/components/OnboardingDialog.vue
View File

@@ -180,7 +180,7 @@
>
Let's go!
<br />
See & record gratitude.
See & record things you've received.
</button>
<button
type="button"

2
src/components/UsageLimitsSection.vue
View File

@@ -67,7 +67,7 @@
out of <b>{{ imageLimits?.maxImagesPerWeek ?? "?" }}</b> for this week.
Your image counter resets at
<b class="whitespace-nowrap">{{
readableDate(imageLimits?.nextWeekBeginDateTime || "")
readableDate(imageLimits?.nextWeekBeginDateTime)
}}</b>
</p>
</div>

4
src/db/tables/contacts.ts
View File

@@ -6,7 +6,9 @@ export type ContactMethod = {
export type Contact = {
//
// When adding a property, consider whether it should be added when exporting & sharing contacts, eg. DataExportSection
// When adding a property:
// - Consider whether it should be added when exporting & sharing contacts, eg. DataExportSection
// - If it's a boolean, it should be converted from a 0/1 integer in PlatformServiceMixin._mapColumnsToValues
did: string;
contactMethods?: Array<ContactMethod>;

1
src/libs/util.ts
View File

@@ -34,6 +34,7 @@ import { PlatformServiceFactory } from "../services/PlatformServiceFactory";
import { IIdentifier } from "@veramo/core";
import { DEFAULT_ROOT_DERIVATION_PATH } from "./crypto";
// Consolidate this with src/utils/PlatformServiceMixin._parseJsonField
function parseJsonField<T>(value: unknown, defaultValue: T): T {
if (typeof value === "string") {
try {

190
src/utils/PlatformServiceMixin.ts
View File

@@ -59,14 +59,14 @@ import {
// TYPESCRIPT INTERFACES
// =================================================
/**
* Cache entry interface for storing data with TTL
*/
interface CacheEntry<T> {
data: T;
timestamp: number;
ttl: number; // milliseconds
}
// /**
// * Cache entry interface for storing data with TTL
// */
// interface CacheEntry<T> {
// data: T;
// timestamp: number;
// ttl: number; // milliseconds
// }
/**
* Vue component interface that uses the PlatformServiceMixin
@@ -79,21 +79,21 @@ interface VueComponentWithMixin {
platformService(): PlatformService;
}
/**
* Global cache store for mixin instances
* Uses WeakMap to avoid memory leaks when components are destroyed
*/
const componentCaches = new WeakMap<
VueComponentWithMixin,
Map<string, CacheEntry<unknown>>
>();
/**
* Cache configuration constants
*/
const CACHE_DEFAULTS = {
default: 15000, // 15 seconds default TTL
} as const;
// /**
// * Global cache store for mixin instances
// * Uses WeakMap to avoid memory leaks when components are destroyed
// */
// const componentCaches = new WeakMap<
// VueComponentWithMixin,
// Map<string, CacheEntry<unknown>>
// >();
//
// /**
// * Cache configuration constants
// */
// const CACHE_DEFAULTS = {
// default: 15000, // 15 seconds default TTL
// } as const;
const _memoryLogs: string[] = [];
@@ -178,8 +178,8 @@ export const PlatformServiceMixin = {
logger.debug(
`[PlatformServiceMixin] ActiveDid changed from ${oldDid} to ${newDid}`,
);
// Clear caches that might be affected by the change
(this as any).$clearAllCaches();
// // Clear caches that might be affected by the change
// (this as any).$clearAllCaches();
}
},
immediate: true,
@@ -203,8 +203,8 @@ export const PlatformServiceMixin = {
logger.debug(
`[PlatformServiceMixin] ActiveDid updated from ${oldDid} to ${newDid}`,
);
// Clear caches that might be affected by the change
this.$clearAllCaches();
// // Clear caches that might be affected by the change
// this.$clearAllCaches();
}
},
@@ -251,6 +251,8 @@ export const PlatformServiceMixin = {
/**
* Self-contained implementation of parseJsonField
* Safely parses JSON strings with fallback to default value
*
* Consolidate this with src/libs/util.ts parseJsonField
*/
_parseJsonField<T>(value: unknown, defaultValue: T): T {
if (typeof value === "string") {
@@ -263,71 +265,71 @@ export const PlatformServiceMixin = {
return (value as T) || defaultValue;
},
// =================================================
// CACHING UTILITY METHODS
// =================================================
// // =================================================
// // CACHING UTILITY METHODS
// // =================================================
/**
* Get or initialize cache for this component instance
*/
_getCache(): Map<string, CacheEntry<unknown>> {
let cache = componentCaches.get(this as unknown as VueComponentWithMixin);
if (!cache) {
cache = new Map();
componentCaches.set(this as unknown as VueComponentWithMixin, cache);
}
return cache;
},
// /**
// * Get or initialize cache for this component instance
// */
// _getCache(): Map<string, CacheEntry<unknown>> {
// let cache = componentCaches.get(this as unknown as VueComponentWithMixin);
// if (!cache) {
// cache = new Map();
// componentCaches.set(this as unknown as VueComponentWithMixin, cache);
// }
// return cache;
// },
/**
* Check if cache entry is valid (not expired)
*/
_isCacheValid(entry: CacheEntry<unknown>): boolean {
return Date.now() - entry.timestamp < entry.ttl;
},
// /**
// * Check if cache entry is valid (not expired)
// */
// _isCacheValid(entry: CacheEntry<unknown>): boolean {
// return Date.now() - entry.timestamp < entry.ttl;
// },
/**
* Get data from cache if valid, otherwise return null
*/
_getCached<T>(key: string): T | null {
const cache = this._getCache();
const entry = cache.get(key);
if (entry && this._isCacheValid(entry)) {
return entry.data as T;
}
cache.delete(key); // Clean up expired entries
return null;
},
// /**
// * Get data from cache if valid, otherwise return null
// */
// _getCached<T>(key: string): T | null {
// const cache = this._getCache();
// const entry = cache.get(key);
// if (entry && this._isCacheValid(entry)) {
// return entry.data as T;
// }
// cache.delete(key); // Clean up expired entries
// return null;
// },
/**
* Store data in cache with TTL
*/
_setCached<T>(key: string, data: T, ttl?: number): T {
const cache = this._getCache();
const actualTtl = ttl || CACHE_DEFAULTS.default;
cache.set(key, {
data,
timestamp: Date.now(),
ttl: actualTtl,
});
return data;
},
// /**
// * Store data in cache with TTL
// */
// _setCached<T>(key: string, data: T, ttl?: number): T {
// const cache = this._getCache();
// const actualTtl = ttl || CACHE_DEFAULTS.default;
// cache.set(key, {
// data,
// timestamp: Date.now(),
// ttl: actualTtl,
// });
// return data;
// },
/**
* Invalidate specific cache entry
*/
_invalidateCache(key: string): void {
const cache = this._getCache();
cache.delete(key);
},
// /**
// * Invalidate specific cache entry
// */
// _invalidateCache(key: string): void {
// const cache = this._getCache();
// cache.delete(key);
// },
/**
* Clear all cache entries for this component
*/
_clearCache(): void {
const cache = this._getCache();
cache.clear();
},
// /**
// * Clear all cache entries for this component
// */
// _clearCache(): void {
// const cache = this._getCache();
// cache.clear();
// },
// =================================================
// ENHANCED DATABASE METHODS (with error handling)
@@ -879,13 +881,13 @@ export const PlatformServiceMixin = {
return await this.$contacts();
},
/**
* Clear all caches for this component - $clearAllCaches()
* Useful for manual cache management
*/
$clearAllCaches(): void {
this._clearCache();
},
// /**
// * Clear all caches for this component - $clearAllCaches()
// * Useful for manual cache management
// */
// $clearAllCaches(): void {
// this._clearCache();
// },
// =================================================
// HIGH-LEVEL ENTITY OPERATIONS (eliminate verbose SQL patterns)
@@ -1657,7 +1659,7 @@ declare module "@vue/runtime-core" {
// Cache management methods
$refreshSettings(): Promise<Settings>;
$refreshContacts(): Promise<Contact[]>;
$clearAllCaches(): void;
// $clearAllCaches(): void;
// High-level entity operations (eliminate verbose SQL patterns)
$mapResults<T>(

10
src/views/AccountViewView.vue
View File

@@ -1396,10 +1396,6 @@ export default class AccountViewView extends Vue {
if (imageResp.status === 200) {
this.imageLimits = imageResp.data;
} else {
await this.$saveSettings({
profileImageUrl: "",
});
this.profileImageUrl = "";
this.limitsMessage = ACCOUNT_VIEW_CONSTANTS.LIMITS.NO_IMAGE_ACCESS;
this.notify.warning(ACCOUNT_VIEW_CONSTANTS.LIMITS.CANNOT_UPLOAD_IMAGES);
return;
@@ -1414,10 +1410,6 @@ export default class AccountViewView extends Vue {
if (endorserResp.status === 200) {
this.endorserLimits = endorserResp.data;
} else {
await this.$saveSettings({
profileImageUrl: "",
});
this.profileImageUrl = "";
this.limitsMessage = ACCOUNT_VIEW_CONSTANTS.LIMITS.NO_LIMITS_FOUND;
this.notify.warning(ACCOUNT_VIEW_CONSTANTS.LIMITS.BAD_SERVER_RESPONSE);
return;
@@ -1425,7 +1417,7 @@ export default class AccountViewView extends Vue {
} catch (error) {
this.limitsMessage =
ACCOUNT_VIEW_CONSTANTS.LIMITS.ERROR_RETRIEVING_LIMITS;
console.log("error: ", error);
logger.error("Error retrieving limits: ", error);
// this.notify.error(this.limitsMessage, TIMEOUTS.STANDARD);
} finally {
this.loadingLimits = false;

1
src/views/HomeView.vue
View File

@@ -314,6 +314,7 @@ import {
} from "@/constants/notifications";
import * as Package from "../../package.json";
// consolidate this with GiveActionClaim in src/interfaces/claims.ts
interface Claim {
claim?: Claim; // For nested claims in Verifiable Credentials
agent?: {