From 3103c4fc6be7935b17fc0b85657584159d553708 Mon Sep 17 00:00:00 2001
From: Matthew Raymer <matthew.raymer@anomalistdesign.com>
Date: Fri, 18 Jul 2025 07:34:04 +0000
Subject: [PATCH] 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 | 35 +++++++++++++-------------
 src/components/GiftDetailsStep.vue     | 16 +++++++++---
 2 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/src/components/EntitySummaryButton.vue b/src/components/EntitySummaryButton.vue
index 5f2d6753..50f25078 100644
--- a/src/components/EntitySummaryButton.vue
+++ b/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>
 
diff --git a/src/components/GiftDetailsStep.vue b/src/components/GiftDetailsStep.vue
index 26009d98..1841b4bb 100644
--- a/src/components/GiftDetailsStep.vue
+++ b/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,