Merge pull request #173 from bcgov/chore/use-FormNavigationGuard

Use FormNavigationGuard in intake forms
bcgov · Sep 23, 2024 · 0b47aba · 0b47aba
2 parents e832958 + 2e9eb1a
commit 0b47aba
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 8 deletions.
diff --git a/frontend/src/components/housing/enquiry/EnquiryIntakeForm.vue b/frontend/src/components/housing/enquiry/EnquiryIntakeForm.vue
@@ -9,6 +9,7 @@ import BackButton from '@/components/common/BackButton.vue';
 import {
   EditableDropdown,
   Dropdown,
+  FormNavigationGuard,
   InputMask,
   InputText,
   RadioList,
@@ -293,9 +294,6 @@ async function emailConfirmation(activityId: string, enquiryId: string) {
   <div v-if="!assignedActivityId">
     <div class="mb-2 p-0">
       <BackButton
-        :confirm-leave="editable && !!formUpdated"
-        confirm-message="Are you sure you want to leave this page?
-      Any unsaved changes will be lost. Please save as draft first."
         :route-name="getBackButtonConfig.routeName"
         :text="getBackButtonConfig.text"
       />
@@ -317,6 +315,8 @@ async function emailConfirmation(activityId: string, enquiryId: string) {
       @submit="confirmSubmit"
       @change="formUpdated = true"
     >
+      <FormNavigationGuard v-if="editable && !!formUpdated" />
+
       <input
         type="hidden"
         name="activityId"

diff --git a/frontend/src/components/housing/submission/SubmissionIntakeForm.vue b/frontend/src/components/housing/submission/SubmissionIntakeForm.vue
@@ -13,6 +13,7 @@ import {
   Calendar,
   Checkbox,
   Dropdown,
+  FormNavigationGuard,
   InputMask,
   InputNumber,
   RadioList,
@@ -307,7 +308,6 @@ async function onSaveDraft(
   let response;
   try {
     if (data.submissionId) {
-      console.log('save draft');
       response = await submissionService.updateDraft(draftData.submissionId, draftData);
     } else {
       response = await submissionService.createDraft(draftData);
@@ -485,12 +485,10 @@ onBeforeMount(async () => {
 <template>
   <div v-if="!assignedActivityId && !assistanceAssignedActivityId">
     <BackButton
-      :confirm-leave="editable && !!formUpdated"
-      confirm-message="Are you sure you want to leave this page?
-      Any unsaved changes will be lost. Please save as draft first."
       :route-name="getBackButtonConfig.routeName"
       :text="getBackButtonConfig.text"
     />
+
     <div class="flex justify-content-center app-primary-color mt-3">
       <h3>Project Investigation Form</h3>
     </div>
@@ -506,6 +504,8 @@ onBeforeMount(async () => {
       @submit="confirmSubmit"
       @change="() => (formUpdated = true)"
     >
+      <FormNavigationGuard v-if="editable && !!formUpdated" />
+
       <SubmissionAssistance
         v-if="editable && values?.applicant"
         :form-errors="errors"

diff --git a/frontend/tests/unit/components/shasIntake/EnquiryIntakeForm.spec.ts b/frontend/tests/unit/components/shasIntake/EnquiryIntakeForm.spec.ts
@@ -20,7 +20,8 @@ vi.mock('vue-router', () => ({
     params: {},
     query: {}
   }),
-  onBeforeRouteUpdate: vi.fn()
+  onBeforeRouteUpdate: vi.fn(),
+  onBeforeRouteLeave: vi.fn()
 }));
 
 const getActivityIds = vi.spyOn(submissionService, 'getActivityIds');