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

@@ -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";

src/components/ContactInputForm.vue

@@ -11,7 +11,7 @@
 
       <button
         class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
-        @click="$emit('show-onboard-meeting')"
+        @click="handleShowOnboardMeeting"
       >
         <font-awesome icon="chair" class="fa-fw text-2xl" />
       </button>
@@ -23,7 +23,7 @@
         <font-awesome
           icon="envelope-open-text"
           class="fa-fw text-2xl"
-          @click="$emit('registration-required')"
+          @click="handleRegistrationRequired"
         />
       </span>
       <span
@@ -32,7 +32,7 @@
         <font-awesome
           icon="chair"
           class="fa-fw text-2xl"
-          @click="$emit('navigate-onboard-meeting')"
+          @click="handleNavigateOnboardMeeting"
         />
       </span>
     </span>
@@ -40,7 +40,7 @@
     <!-- QR Code Button -->
     <button
       class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
-      @click="$emit('qr-scan')"
+      @click="handleQRScan"
     >
       <font-awesome icon="qrcode" class="fa-fw text-2xl" />
     </button>
@@ -56,7 +56,7 @@
     <!-- Add Button -->
     <button
       class="px-4 rounded-r bg-green-200 border border-green-400"
-      @click="$emit('submit', inputValue)"
+      @click="handleSubmit"
     >
       <font-awesome icon="plus" class="fa-fw" />
     </button>
@@ -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<void>;
+
+  /**
+   * 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<void>;
+
+  /**
+   * Function prop for handling registration required notification
+   * Called when invite button is clicked for unregistered users
+   */
+  @Prop({ type: Function, default: () => {} })
+  onRegistrationRequired!: () => void | Promise<void>;
+
+  /**
+   * Function prop for handling onboard meeting navigation
+   * Called when onboard meeting button is clicked for unregistered users
+   */
+  @Prop({ type: Function, default: () => {} })
+  onNavigateOnboardMeeting!: () => void | Promise<void>;
+
+
+
+  /**
+   * 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");
   }
 }
 </script>

src/views/ContactsView.vue

@@ -25,13 +25,19 @@
     <ContactInputForm
       v-model="contactInput"
       :is-registered="isRegistered"
-      @submit="onClickNewContact"
-      @show-onboard-meeting="showOnboardMeetingDialog"
-      @registration-required="
-        notify.warning('You must get registered before you can create invites.')
+      :on-submit="onClickNewContact"
+      :on-show-onboard-meeting="showOnboardMeetingDialog"
+      :on-registration-required="
+        () =>
+          notify.warning(
+            'You must get registered before you can create invites.',
+          )
+      "
+      :on-navigate-onboard-meeting="
+        () => $router.push({ name: 'onboard-meeting-list' })
       "
-      @navigate-onboard-meeting="$router.push({ name: 'onboard-meeting-list' })"
       @qr-scan="handleQRCodeClick"
+      :on-update-model-value="(value: string) => (contactInput = value)"
     />
 
     <ContactListHeader
@@ -1236,10 +1242,17 @@ export default class ContactsView extends Vue {
    * Handle QR code button click - route to appropriate scanner
    * Uses native scanner on mobile platforms, web scanner otherwise
    */
-  private handleQRCodeClick() {
+  
+
+  public handleQRCodeClick() {
+    console.log("[ContactsView] handleQRCodeClick method called");
+    this.$logAndConsole("[ContactsView] handleQRCodeClick method called", false);
+    
     if (Capacitor.isNativePlatform()) {
+      console.log("[ContactsView] Navigating to contact-qr-scan-full");
       this.$router.push({ name: "contact-qr-scan-full" });
     } else {
+      console.log("[ContactsView] Navigating to contact-qr");
       this.$router.push({ name: "contact-qr" });
     }
   }

src/views/NewEditProjectView.vue

@@ -34,10 +34,7 @@
     <div class="flex justify-center mt-4">
       <span v-if="hasImage" class="flex justify-between">
         <a :href="imageUrl" target="_blank" class="text-blue-500 ml-4">
-          <img
-            :src="imageUrl"
-            class="h-24 rounded-xl"
-          />
+          <img :src="imageUrl" class="h-24 rounded-xl" />
         </a>
         <font-awesome
           icon="trash-can"
@@ -261,7 +258,7 @@ import {
 } from "../libs/endorserServer";
 import {
   retrieveAccountCount,
-  retrieveFullyDecryptedAccount
+  retrieveFullyDecryptedAccount,
 } from "../libs/util";
 
 import {
@@ -860,7 +857,6 @@ export default class NewEditProjectView extends Vue {
     this.longitude = event.latlng.lng;
   }
 
-
   /**
    * Computed property for character count display
    * Shows current description length and maximum character limit

src/views/ProjectViewView.vue

@@ -561,10 +561,7 @@
             </div>
             <div v-if="give.fullClaim.image" class="flex justify-center">
               <a :href="give.fullClaim.image" target="_blank">
-                <img
-                  :src="give.fullClaim.image"
-                  class="h-24 mt-2 rounded-xl"
-                />
+                <img :src="give.fullClaim.image" class="h-24 mt-2 rounded-xl" />
               </a>
             </div>
           </li>