forked from jsnbuchanan/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()
|
@Prop()
|
||||||
receiver?: EntityData | null;
|
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 */
|
/** Notification function from parent component */
|
||||||
@Prop()
|
@Prop()
|
||||||
notify?: (notification: NotificationIface, timeout?: number) => void;
|
notify?: (notification: NotificationIface, timeout?: number) => void;
|
||||||
@@ -228,6 +238,10 @@ export default class EntitySelectionStep extends Vue {
|
|||||||
stepType: this.stepType,
|
stepType: this.stepType,
|
||||||
giverEntityType: this.giverEntityType,
|
giverEntityType: this.giverEntityType,
|
||||||
recipientEntityType: this.recipientEntityType,
|
recipientEntityType: this.recipientEntityType,
|
||||||
|
// Form field values to preserve
|
||||||
|
description: this.description,
|
||||||
|
amountInput: this.amountInput,
|
||||||
|
unitCode: this.unitCode,
|
||||||
...(this.stepType === "giver"
|
...(this.stepType === "giver"
|
||||||
? {
|
? {
|
||||||
recipientProjectId: this.toProjectId || "",
|
recipientProjectId: this.toProjectId || "",
|
||||||
|
|||||||
@@ -18,6 +18,9 @@
|
|||||||
:to-project-id="toProjectId"
|
:to-project-id="toProjectId"
|
||||||
:giver="giver"
|
:giver="giver"
|
||||||
:receiver="receiver"
|
:receiver="receiver"
|
||||||
|
:description="description"
|
||||||
|
:amount-input="amountInput"
|
||||||
|
:unit-code="unitCode"
|
||||||
:notify="$notify"
|
:notify="$notify"
|
||||||
@entity-selected="handleEntitySelected"
|
@entity-selected="handleEntitySelected"
|
||||||
@cancel="cancel"
|
@cancel="cancel"
|
||||||
|
|||||||
@@ -102,9 +102,11 @@ export default class ContactGiftingView extends Vue {
|
|||||||
activeDid = "";
|
activeDid = "";
|
||||||
allContacts: Array<Contact> = [];
|
allContacts: Array<Contact> = [];
|
||||||
apiServer = "";
|
apiServer = "";
|
||||||
description = "";
|
|
||||||
projectId = "";
|
projectId = "";
|
||||||
prompt = "";
|
prompt = "";
|
||||||
|
description = "";
|
||||||
|
amountInput = "0";
|
||||||
|
unitCode = "HUR";
|
||||||
recipientProjectName = "";
|
recipientProjectName = "";
|
||||||
recipientProjectImage = "";
|
recipientProjectImage = "";
|
||||||
recipientProjectHandleId = "";
|
recipientProjectHandleId = "";
|
||||||
@@ -143,6 +145,9 @@ export default class ContactGiftingView extends Vue {
|
|||||||
this.recipientProjectHandleId =
|
this.recipientProjectHandleId =
|
||||||
(this.$route.query["recipientProjectHandleId"] as string) || "";
|
(this.$route.query["recipientProjectHandleId"] as string) || "";
|
||||||
this.prompt = (this.$route.query["prompt"] as string) ?? this.prompt;
|
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
|
// Read new context parameters
|
||||||
this.stepType = (this.$route.query["stepType"] as string) || "giver";
|
this.stepType = (this.$route.query["stepType"] as string) || "giver";
|
||||||
@@ -182,7 +187,7 @@ export default class ContactGiftingView extends Vue {
|
|||||||
|
|
||||||
openDialog(contact?: GiverReceiverInputInfo | "Unnamed") {
|
openDialog(contact?: GiverReceiverInputInfo | "Unnamed") {
|
||||||
if (contact === "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 recipient: GiverReceiverInputInfo;
|
||||||
let giver: GiverReceiverInputInfo | undefined;
|
let giver: GiverReceiverInputInfo | undefined;
|
||||||
|
|
||||||
@@ -226,9 +231,17 @@ export default class ContactGiftingView extends Vue {
|
|||||||
recipient,
|
recipient,
|
||||||
undefined,
|
undefined,
|
||||||
this.prompt,
|
this.prompt,
|
||||||
|
this.description,
|
||||||
|
this.amountInput,
|
||||||
|
this.unitCode,
|
||||||
);
|
);
|
||||||
// Immediately select "Unnamed" and move to Step 2
|
|
||||||
|
// Immediately select "Unnamed" and move to Step 2 based on stepType
|
||||||
|
if (this.stepType === "giver") {
|
||||||
(this.$refs.giftedDialog as GiftedDialog).selectGiver();
|
(this.$refs.giftedDialog as GiftedDialog).selectGiver();
|
||||||
|
} else {
|
||||||
|
(this.$refs.giftedDialog as GiftedDialog).selectRecipient();
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
// Regular case: contact is a GiverReceiverInputInfo
|
// Regular case: contact is a GiverReceiverInputInfo
|
||||||
let giver: GiverReceiverInputInfo;
|
let giver: GiverReceiverInputInfo;
|
||||||
@@ -276,6 +289,9 @@ export default class ContactGiftingView extends Vue {
|
|||||||
recipient,
|
recipient,
|
||||||
undefined,
|
undefined,
|
||||||
this.prompt,
|
this.prompt,
|
||||||
|
this.description,
|
||||||
|
this.amountInput,
|
||||||
|
this.unitCode,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user