Refactor EntitySummaryButton to use function props instead of events

Replace @Emit decorator with function prop pattern for better parent control over edit behavior. EntitySummaryButton now accepts onEditRequested function prop that parent components can use to handle edit requests with custom validation logic. Updated GiftDetailsStep to use new function prop interface with proper parameter handling.

src/components/EntitySummaryButton.vue

@@ -2,9 +2,9 @@
 * Extracted from GiftedDialog.vue to handle entity summary display in the gift *
 details step with edit functionality. * * Features: * - Shows entity avatar
 (person or project) * - Displays entity name and role label * - Handles editable
-vs locked states * - Emits edit events when clicked and editable * - Supports
-both person and project entity types * - Template streamlined with computed CSS
-properties * * @author Matthew Raymer */
+vs locked states * - Function props for parent control over edit behavior * -
+Supports both person and project entity types * - Template streamlined with
+computed CSS properties * * @author Matthew Raymer */
 <template>
   <component
     :is="editable ? 'button' : 'div'"
@@ -58,7 +58,7 @@ properties * * @author Matthew Raymer */
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
+import { Component, Prop, Vue } from "vue-facing-decorator";
 import EntityIcon from "./EntityIcon.vue";
 import ProjectIcon from "./ProjectIcon.vue";
 import { Contact } from "../db/tables/contacts";
@@ -80,7 +80,7 @@ interface EntityData {
  * - Shows entity avatar (person or project)
  * - Displays entity name and role label
  * - Handles editable vs locked states
- * - Emits edit events when clicked and editable
+ * - Function props for parent control over edit behavior
  * - Supports both person and project entity types
  * - Template streamlined with computed CSS properties
  */
@@ -107,6 +107,16 @@ export default class EntitySummaryButton extends Vue {
   @Prop({ default: true })
   editable!: boolean;
 
+  /**
+   * Function prop for handling edit requests
+   * Called when the button is clicked and editable, allowing parent to control edit behavior
+   */
+  @Prop({ type: Function, default: () => {} })
+  onEditRequested!: (data: {
+    entityType: string;
+    entity: EntityData | Contact | null;
+  }) => void | Promise<void>;
+
   /**
    * CSS classes for the main container
    */
@@ -129,26 +139,17 @@ export default class EntitySummaryButton extends Vue {
   }
 
   /**
-   * Handle click event - only emit if editable
+   * Handle click event - only call function prop if editable
+   * Allows parent to control edit behavior and validation
    */
   handleClick(): void {
     if (this.editable) {
-      this.emitEditRequested({
+      this.onEditRequested({
         entityType: this.entityType,
         entity: this.entity,
       });
     }
   }
-
-  // Emit methods using @Emit decorator
-
-  @Emit("edit-requested")
-  emitEditRequested(data: {
-    entityType: string;
-    entity: EntityData | Contact | null;
-  }): { entityType: string; entity: EntityData | Contact | null } {
-    return data;
-  }
 }
 </script>
 

src/components/GiftDetailsStep.vue

@@ -17,7 +17,7 @@ control over updates and validation * * @author Matthew Raymer */
         :entity-type="giverEntityType"
         :label="giverLabel"
         :editable="canEditGiver"
-        @edit-requested="handleEditGiver"
+        :on-edit-requested="handleEditGiver"
       />
 
       <!-- Recipient Button -->
@@ -26,7 +26,7 @@ control over updates and validation * * @author Matthew Raymer */
         :entity-type="recipientEntityType"
         :label="recipientLabel"
         :editable="canEditRecipient"
-        @edit-requested="handleEditRecipient"
+        :on-edit-requested="handleEditRecipient"
       />
     </div>
 
@@ -362,8 +362,12 @@ export default class GiftDetailsStep extends Vue {
 
   /**
    * Handle giver edit request
+   * Called by EntitySummaryButton function prop
    */
-  handleEditGiver(): void {
+  handleEditGiver(_data: {
+    entityType: string;
+    entity: EntityData | null;
+  }): void {
     this.emitEditEntity({
       entityType: "giver",
       currentEntity: this.giver,
@@ -372,8 +376,12 @@ export default class GiftDetailsStep extends Vue {
 
   /**
    * Handle recipient edit request
+   * Called by EntitySummaryButton function prop
    */
-  handleEditRecipient(): void {
+  handleEditRecipient(_data: {
+    entityType: string;
+    entity: EntityData | null;
+  }): void {
     this.emitEditEntity({
       entityType: "recipient",
       currentEntity: this.receiver,