kentbull/crowd-funder-for-time-pwa
1
0
Fork 0
forked from trent_larson/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

Convert Vue components to use @Emit decorator instead of manual emits declarations

Browse Source 
Replace manual emits declarations with proper @Emit decorator usage across components:
- ActivityListItem: Add @Emit methods for viewImage, loadClaim, confirmClaim
- ContactInputForm: Convert handleQRScan to use @Emit("qr-scan")
- ContactBulkActions: Add @Emit methods for toggle-all-selection, copy-selected
- ContactListHeader: Add @Emit methods for all 5 emitted events
- MembersList: Add @Emit("error") method for error handling
- LargeIdenticonModal: Add @Emit("close") method
- ContactListItem: Add @Emit methods for all 4 emitted events

Update all templates to call emit methods instead of direct $emit calls.
Fix TypeScript type issues with optional parameters.
Resolves Vue warning about undeclared emitted events.

Follows vue-facing-decorator best practices and improves code consistency.
This commit is contained in:
Matthew Raymer
2025-07-30 05:50:39 +00:00
parent 9136a9c622
commit 07c5c6fd31
13 changed files with 202 additions and 83 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
*/

5
src/components/IdentitySection.vue
View File

@@ -55,10 +55,7 @@
aria-label="Delete profile image"
@click="deleteImage"
>
<font-awesome
icon="trash-can"
aria-hidden="true"
/>
<font-awesome icon="trash-can" aria-hidden="true" />
</button>
</span>
<div v-else class="text-center">

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.",
);