From 0bcf34c703da414dc4fde246de5a50cf82b30939 Mon Sep 17 00:00:00 2001 From: Matthew Raymer Date: Fri, 18 Jul 2025 06:40:08 +0000 Subject: [PATCH] fix: revert QR scanner to emit pattern after function prop binding fails - Revert ContactInputForm QR scanner from function props back to emit pattern - Remove problematic onQRScan function prop that wasn't resolving correctly - Update ContactsView to use @qr-scan event handler instead of function prop - Maintain debugging logs to track click events and method execution - Keep other function props intact for other event handlers The function prop approach for QR scanning failed due to Vue prop resolution issues, causing the default function to be called instead of the parent handler. Reverting to emits provides reliable parent-child communication for this case. --- src/components/ActivityListItem.vue | 5 +- src/components/ContactInputForm.vue | 99 +++++++++++++++++++++++++---- src/views/ContactsView.vue | 25 ++++++-- src/views/NewEditProjectView.vue | 8 +-- src/views/ProjectViewView.vue | 5 +- 5 files changed, 108 insertions(+), 34 deletions(-) diff --git a/src/components/ActivityListItem.vue b/src/components/ActivityListItem.vue index 82212576..82e46e7c 100644 --- a/src/components/ActivityListItem.vue +++ b/src/components/ActivityListItem.vue @@ -251,10 +251,7 @@ 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"; +import { isGiveClaimType, notifyWhyCannotConfirm } from "../libs/util"; import { containsHiddenDid, isHiddenDid } from "../libs/endorserServer"; import ProjectIcon from "./ProjectIcon.vue"; import { createNotifyHelpers } from "@/utils/notify"; diff --git a/src/components/ContactInputForm.vue b/src/components/ContactInputForm.vue index 4e121e31..0ef2ded4 100644 --- a/src/components/ContactInputForm.vue +++ b/src/components/ContactInputForm.vue @@ -11,7 +11,7 @@ @@ -23,7 +23,7 @@ @@ -40,7 +40,7 @@ @@ -56,7 +56,7 @@ @@ -71,25 +71,55 @@ import { Component, Vue, Prop } from "vue-facing-decorator"; * * Provides a form for adding new contacts with various input formats. * Includes action buttons for invites, meetings, and QR scanning. + * Uses function props for event handling to provide better parent control. * * @author Matthew Raymer */ @Component({ name: "ContactInputForm", - emits: [ - "submit", - "show-onboard-meeting", - "registration-required", - "navigate-onboard-meeting", - "qr-scan", - "update:modelValue", - ], }) export default class ContactInputForm extends Vue { @Prop({ required: true }) isRegistered!: boolean; @Prop({ type: String, default: "" }) modelValue!: string; + /** + * Function prop for handling contact submission + * Called when the add button is clicked with the current input value + */ + @Prop({ type: Function, default: () => {} }) + onSubmit!: (value: string) => void | Promise; + + /** + * Function prop for handling onboard meeting display + * Called when the onboard meeting button is clicked for registered users + */ + @Prop({ type: Function, default: () => {} }) + onShowOnboardMeeting!: () => void | Promise; + + /** + * Function prop for handling registration required notification + * Called when invite button is clicked for unregistered users + */ + @Prop({ type: Function, default: () => {} }) + onRegistrationRequired!: () => void | Promise; + + /** + * Function prop for handling onboard meeting navigation + * Called when onboard meeting button is clicked for unregistered users + */ + @Prop({ type: Function, default: () => {} }) + onNavigateOnboardMeeting!: () => void | Promise; + + + + /** + * Function prop for handling model value updates + * Called when the input value changes for v-model binding + */ + @Prop({ type: Function, default: () => {} }) + onUpdateModelValue!: (value: string) => void; + /** * Computed property for v-model binding */ @@ -98,7 +128,48 @@ export default class ContactInputForm extends Vue { } set inputValue(value: string) { - this.$emit("update:modelValue", value); + this.onUpdateModelValue(value); + } + + /** + * Handle submit button click + * Calls the onSubmit function prop with current input value + */ + private handleSubmit(): void { + this.onSubmit(this.inputValue); + } + + /** + * Handle show onboard meeting button click + * Calls the onShowOnboardMeeting function prop + */ + private handleShowOnboardMeeting(): void { + this.onShowOnboardMeeting(); + } + + /** + * Handle registration required notification + * Calls the onRegistrationRequired function prop + */ + private handleRegistrationRequired(): void { + this.onRegistrationRequired(); + } + + /** + * Handle navigate onboard meeting button click + * Calls the onNavigateOnboardMeeting function prop + */ + private handleNavigateOnboardMeeting(): void { + this.onNavigateOnboardMeeting(); + } + + /** + * Handle QR scan button click + * Emits qr-scan event for parent handling + */ + private handleQRScan(): void { + console.log("[ContactInputForm] QR scan button clicked"); + this.$emit("qr-scan"); } } diff --git a/src/views/ContactsView.vue b/src/views/ContactsView.vue index 41db35e5..4bb976b1 100644 --- a/src/views/ContactsView.vue +++ b/src/views/ContactsView.vue @@ -25,13 +25,19 @@ - +
- +