forked from trent_larson/crowd-funder-for-time-pwa
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.
This commit is contained in:
@@ -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: {
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user