Browse Source

refactor: convert GiftDetailsStep update handlers from emits to function props

- Replace @Emit("update:description"), @Emit("update:amount"), @Emit("update:unitCode") with function props
- Add onUpdateDescription, onUpdateAmount, onUpdateUnitCode function props with TypeScript typing
- Update GiftedDialog to use new function prop interface for update handlers
- Remove emit decorators and methods for update events
- Keep emit pattern for non-update events (edit-entity, explain-data, submit, cancel)
- Improve component documentation to reflect new architecture

This change provides better parent control over validation and update behavior
for form fields while maintaining existing functionality for other events.
web-serve-fix
Matthew Raymer 1 week ago
parent
commit
f6107cb7bb
  1. 54
      src/components/GiftDetailsStep.vue
  2. 6
      src/components/GiftedDialog.vue

54
src/components/GiftDetailsStep.vue

@ -5,7 +5,8 @@ with edit capability * - Gift description input with placeholder support * -
Amount input with increment/decrement controls * - Unit code selection (HUR,
USD, BTC, etc.) * - Photo & more options navigation * - Conflict detection and
warning display * - Form validation and submission * - Cancel functionality * -
Template streamlined with computed CSS properties * * @author Matthew Raymer */
Template streamlined with computed CSS properties * - Function props for parent
control over updates and validation * * @author Matthew Raymer */
<template>
<div id="sectionGiftedGift">
<!-- Entity Summary Buttons -->
@ -130,6 +131,7 @@ interface EntityData {
* - Form validation and submission
* - Cancel functionality
* - Template streamlined with computed CSS properties
* - Function props for parent control over updates and validation
*/
@Component({
components: {
@ -190,6 +192,27 @@ export default class GiftDetailsStep extends Vue {
@Prop({ default: "" })
toProjectId!: string;
/**
* Function prop for handling description updates
* Called when the description input changes, allowing parent to control validation
*/
@Prop({ type: Function, default: () => {} })
onUpdateDescription!: (description: string) => void | Promise<void>;
/**
* Function prop for handling amount updates
* Called when the amount changes, allowing parent to control validation
*/
@Prop({ type: Function, default: () => {} })
onUpdateAmount!: (amount: number) => void | Promise<void>;
/**
* Function prop for handling unit code updates
* Called when the unit code selection changes, allowing parent to control validation
*/
@Prop({ type: Function, default: () => {} })
onUpdateUnitCode!: (unitCode: string) => void | Promise<void>;
/** Local reactive copies of props for v-model */
private localDescription: string = "";
private localAmount: number = 0;
@ -310,13 +333,15 @@ export default class GiftDetailsStep extends Vue {
/**
* Handle description input changes
* Calls the onUpdateDescription function prop for parent control
*/
handleDescriptionChange(): void {
this.emitUpdateDescription(this.localDescription);
this.onUpdateDescription(this.localDescription);
}
/**
* Handle amount input changes
* Calls the onUpdateAmount function prop for parent control
*/
handleAmountChange(newAmount: number): void {
logger.debug("[GiftDetailsStep] handleAmountChange() called", {
@ -324,14 +349,15 @@ export default class GiftDetailsStep extends Vue {
newAmount,
});
this.localAmount = newAmount;
this.emitUpdateAmount(newAmount);
this.onUpdateAmount(newAmount);
}
/**
* Handle unit code selection changes
* Calls the onUpdateUnitCode function prop for parent control
*/
handleUnitCodeChange(): void {
this.emitUpdateUnitCode(this.localUnitCode);
this.onUpdateUnitCode(this.localUnitCode);
}
/**
@ -381,25 +407,7 @@ export default class GiftDetailsStep extends Vue {
this.emitCancel();
}
// Emit methods using @Emit decorator
@Emit("update:description")
emitUpdateDescription(description: string): string {
return description;
}
@Emit("update:amount")
emitUpdateAmount(amount: number): number {
logger.debug("[GiftDetailsStep] emitUpdateAmount() - emitting amount", {
amount,
});
return amount;
}
@Emit("update:unitCode")
emitUpdateUnitCode(unitCode: string): string {
return unitCode;
}
// Emit methods using @Emit decorator (keeping these for non-update events)
@Emit("edit-entity")
emitEditEntity(data: {

6
src/components/GiftedDialog.vue

@ -39,9 +39,9 @@
:offer-id="offerId"
:from-project-id="fromProjectId"
:to-project-id="toProjectId"
@update:description="description = $event"
@update:amount="handleAmountUpdate"
@update:unit-code="unitCode = $event"
:on-update-description="(desc: string) => (description = desc)"
:on-update-amount="handleAmountUpdate"
:on-update-unit-code="(code: string) => (unitCode = code)"
@edit-entity="handleEditEntity"
@explain-data="explainData"
@submit="handleSubmit"

Loading…
Cancel
Save