forked from trent_larson/crowd-funder-for-time-pwa
Add form field preservation in gifting flow
- Preserve description, amount, and unit code when navigating between gifting steps - Add form field props to EntitySelectionStep and GiftedDialog components - Update ContactGiftingView to handle form state persistence in URL parameters
This commit is contained in:
@@ -136,6 +136,16 @@ export default class EntitySelectionStep extends Vue {
|
||||
@Prop()
|
||||
receiver?: EntityData | null;
|
||||
|
||||
/** Form field values to preserve when navigating to "Show All" */
|
||||
@Prop({ default: "" })
|
||||
description!: string;
|
||||
|
||||
@Prop({ default: "0" })
|
||||
amountInput!: string;
|
||||
|
||||
@Prop({ default: "HUR" })
|
||||
unitCode!: string;
|
||||
|
||||
/** Notification function from parent component */
|
||||
@Prop()
|
||||
notify?: (notification: NotificationIface, timeout?: number) => void;
|
||||
@@ -228,6 +238,10 @@ export default class EntitySelectionStep extends Vue {
|
||||
stepType: this.stepType,
|
||||
giverEntityType: this.giverEntityType,
|
||||
recipientEntityType: this.recipientEntityType,
|
||||
// Form field values to preserve
|
||||
description: this.description,
|
||||
amountInput: this.amountInput,
|
||||
unitCode: this.unitCode,
|
||||
...(this.stepType === "giver"
|
||||
? {
|
||||
recipientProjectId: this.toProjectId || "",
|
||||
|
||||
@@ -18,6 +18,9 @@
|
||||
:to-project-id="toProjectId"
|
||||
:giver="giver"
|
||||
:receiver="receiver"
|
||||
:description="description"
|
||||
:amount-input="amountInput"
|
||||
:unit-code="unitCode"
|
||||
:notify="$notify"
|
||||
@entity-selected="handleEntitySelected"
|
||||
@cancel="cancel"
|
||||
|
||||
@@ -102,9 +102,11 @@ export default class ContactGiftingView extends Vue {
|
||||
activeDid = "";
|
||||
allContacts: Array<Contact> = [];
|
||||
apiServer = "";
|
||||
description = "";
|
||||
projectId = "";
|
||||
prompt = "";
|
||||
description = "";
|
||||
amountInput = "0";
|
||||
unitCode = "HUR";
|
||||
recipientProjectName = "";
|
||||
recipientProjectImage = "";
|
||||
recipientProjectHandleId = "";
|
||||
@@ -143,6 +145,9 @@ export default class ContactGiftingView extends Vue {
|
||||
this.recipientProjectHandleId =
|
||||
(this.$route.query["recipientProjectHandleId"] as string) || "";
|
||||
this.prompt = (this.$route.query["prompt"] as string) ?? this.prompt;
|
||||
this.description = (this.$route.query["description"] as string) || "";
|
||||
this.amountInput = (this.$route.query["amountInput"] as string) || "0";
|
||||
this.unitCode = (this.$route.query["unitCode"] as string) || "HUR";
|
||||
|
||||
// Read new context parameters
|
||||
this.stepType = (this.$route.query["stepType"] as string) || "giver";
|
||||
@@ -182,7 +187,7 @@ export default class ContactGiftingView extends Vue {
|
||||
|
||||
openDialog(contact?: GiverReceiverInputInfo | "Unnamed") {
|
||||
if (contact === "Unnamed") {
|
||||
// Special case: Pass undefined to trigger Step 1, but with "Unnamed" pre-selected
|
||||
// Special case: Handle "Unnamed" contacts for both givers and recipients
|
||||
let recipient: GiverReceiverInputInfo;
|
||||
let giver: GiverReceiverInputInfo | undefined;
|
||||
|
||||
@@ -226,9 +231,17 @@ export default class ContactGiftingView extends Vue {
|
||||
recipient,
|
||||
undefined,
|
||||
this.prompt,
|
||||
this.description,
|
||||
this.amountInput,
|
||||
this.unitCode,
|
||||
);
|
||||
// Immediately select "Unnamed" and move to Step 2
|
||||
(this.$refs.giftedDialog as GiftedDialog).selectGiver();
|
||||
|
||||
// Immediately select "Unnamed" and move to Step 2 based on stepType
|
||||
if (this.stepType === "giver") {
|
||||
(this.$refs.giftedDialog as GiftedDialog).selectGiver();
|
||||
} else {
|
||||
(this.$refs.giftedDialog as GiftedDialog).selectRecipient();
|
||||
}
|
||||
} else {
|
||||
// Regular case: contact is a GiverReceiverInputInfo
|
||||
let giver: GiverReceiverInputInfo;
|
||||
@@ -276,6 +289,9 @@ export default class ContactGiftingView extends Vue {
|
||||
recipient,
|
||||
undefined,
|
||||
this.prompt,
|
||||
this.description,
|
||||
this.amountInput,
|
||||
this.unitCode,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user