Merge pull request #123 from bcgov/feature/intake-from-autosave

Implemented autosave functionality for intake forms that utilize a save draft feature
bcgov · Aug 2, 2024 · 45fe69b · 45fe69b
2 parents 41caf2f + fdbe68e
commit 45fe69b
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 16 deletions.
diff --git a/frontend/src/components/housing/enquiry/EnquiryIntakeForm.vue b/frontend/src/components/housing/enquiry/EnquiryIntakeForm.vue
@@ -5,10 +5,11 @@ import { onBeforeMount, ref, toRaw } from 'vue';
 import { useRouter } from 'vue-router';
 import { object, string } from 'yup';
 
-import { Dropdown, InputMask, RadioList, InputText, StepperNavigation, TextArea } from '@/components/form';
+import { Dropdown, InputMask, InputText, RadioList, StepperNavigation, TextArea } from '@/components/form';
 import CollectionDisclaimer from '@/components/housing/CollectionDisclaimer.vue';
 import EnquiryIntakeConfirmation from '@/components/housing/enquiry/EnquiryIntakeConfirmation.vue';
 import { Button, Card, Divider, useConfirm, useToast } from '@/lib/primevue';
+import { useAutoSave } from '@/composables/formAutoSave';
 import { activityService, enquiryService, submissionService } from '@/services';
 import { useConfigStore } from '@/store';
 import { ACTIVITY_ID_LENGTH, YES_NO_LIST } from '@/utils/constants/application';
@@ -19,6 +20,13 @@ import { confirmationTemplate } from '@/utils/templates';
 
 import type { Ref } from 'vue';
 
+const { formUpdated, stopAutoSave } = useAutoSave(async () => {
+  const values = formRef.value?.values;
+  if (values) {
+    await onSaveDraft(values, true);
+  }
+});
+
 // Props
 type Props = {
   activityId?: string;
@@ -115,7 +123,7 @@ function onInvalidSubmit(e: any) {
   document.getElementById('form')?.scrollIntoView({ behavior: 'smooth' });
 }
 
-async function onSaveDraft(data: any) {
+async function onSaveDraft(data: any, isAutoSave = false) {
   editable.value = false;
 
   try {
@@ -133,7 +141,12 @@ async function onSaveDraft(data: any) {
       throw new Error('Failed to retrieve correct draft data');
     }
 
-    toast.success('Draft saved');
+    if (isAutoSave) {
+      toast.success('Draft autosaved');
+    } else {
+      toast.success('Draft saved');
+      formUpdated.value = false;
+    }
   } catch (e: any) {
     toast.error('Failed to save draft', e);
   } finally {
@@ -169,6 +182,7 @@ async function onSubmit(data: any) {
       formRef.value?.setFieldValue('enquiryId', enquiryResponse.data.enquiryId);
       // Send confirmation email
       emailConfirmation(enquiryResponse.data.activityId);
+      stopAutoSave();
     } else {
       throw new Error('Failed to retrieve correct enquiry draft data');
     }
@@ -278,6 +292,7 @@ async function checkActivityIdValidity(event: Event) {
       :validation-schema="formSchema"
       @invalid-submit="(e) => onInvalidSubmit(e)"
       @submit="confirmSubmit"
+      @change="formUpdated = true"
     >
       <input
         type="hidden"

diff --git a/frontend/src/components/housing/submission/SubmissionIntakeForm.vue b/frontend/src/components/housing/submission/SubmissionIntakeForm.vue
@@ -37,6 +37,7 @@ import {
   useConfirm,
   useToast
 } from '@/lib/primevue';
+import { useAutoSave } from '@/composables/formAutoSave';
 import { externalApiService, permitService, submissionService } from '@/services';
 import { useConfigStore, useTypeStore } from '@/store';
 import { YES_NO_LIST, YES_NO_UNSURE_LIST } from '@/utils/constants/application';
@@ -99,7 +100,12 @@ const orgBookOptions: Ref<Array<any>> = ref([]);
 const parcelAccordionIndex: Ref<number | undefined> = ref(undefined);
 const spacialAccordionIndex: Ref<number | undefined> = ref(undefined);
 const validationErrors: Ref<string[]> = ref([]);
-const formUpdated: Ref<boolean> = ref(false);
+const formModified: Ref<boolean> = ref(false);
+
+const { formUpdated, stopAutoSave } = useAutoSave(() => {
+  const values = formRef.value?.values;
+  if (values) onSaveDraft(values, true);
+});
 
 // Actions
 const confirm = useConfirm();
@@ -174,7 +180,7 @@ const onLatLongInputClick = async () => {
 function onInvalidSubmit(e: any) {
   validationErrors.value = Array.from(new Set(e.errors ? Object.keys(e.errors).map((x) => x.split('.')[0]) : []));
   document.getElementById('form')?.scrollIntoView({ behavior: 'smooth' });
-  formUpdated.value = false;
+  formModified.value = false;
 }
 
 function onPermitsHasAppliedChange(e: BasicResponse, fieldsLength: number, push: Function, setFieldValue: Function) {
@@ -191,7 +197,7 @@ function onPermitsHasAppliedChange(e: BasicResponse, fieldsLength: number, push:
   }
 }
 
-async function onSaveDraft(data: any) {
+async function onSaveDraft(data: any, isAutoSave = false) {
   editable.value = false;
 
   const tempData = Object.assign({}, data);
@@ -212,7 +218,12 @@ async function onSaveDraft(data: any) {
       throw new Error('Failed to retrieve correct draft data');
     }
 
-    toast.success('Draft saved');
+    if (isAutoSave) {
+      toast.success('Draft autosaved');
+    } else {
+      toast.success('Draft saved');
+      formUpdated.value = false;
+    }
   } catch (e: any) {
     toast.error('Failed to save draft', e);
   } finally {
@@ -235,6 +246,7 @@ async function onSubmit(data: any) {
       formRef.value?.setFieldValue('activityId', response.data.activityId);
       // Send confirmation email
       emailConfirmation(response.data.activityId);
+      stopAutoSave();
     } else {
       throw new Error('Failed to retrieve correct draft data');
     }
@@ -370,7 +382,12 @@ onBeforeMount(async () => {
       :validation-schema="submissionIntakeSchema"
       @invalid-submit="(e) => onInvalidSubmit(e)"
       @submit="confirmSubmit"
-      @change="formUpdated = true"
+      @change="
+        () => {
+          formUpdated = true;
+          formModified = true;
+        }
+      "
     >
       <SubmissionAssistance
         :form-errors="errors"
@@ -407,15 +424,15 @@ onBeforeMount(async () => {
                 'app-error-color':
                   (validationErrors.includes(IntakeFormCategory.APPLICANT) ||
                     validationErrors.includes(IntakeFormCategory.BASIC)) &&
-                  !formUpdated
+                  !formModified
               }"
             />
           </template>
           <template #content="{ nextCallback }">
             <CollectionDisclaimer />
 
             <Message
-              v-if="validationErrors.length && !formUpdated"
+              v-if="validationErrors.length && !formModified"
               severity="error"
               icon="pi pi-exclamation-circle"
               :closable="false"
@@ -571,12 +588,14 @@ onBeforeMount(async () => {
               :click-callback="clickCallback"
               title="Housing"
               icon="fa-house"
-              :class="{ 'app-error-color': validationErrors.includes(IntakeFormCategory.HOUSING) && !formUpdated }"
+              :class="{
+                'app-error-color': validationErrors.includes(IntakeFormCategory.HOUSING) && !formModified
+              }"
             />
           </template>
           <template #content="{ prevCallback, nextCallback }">
             <Message
-              v-if="validationErrors.length && !formUpdated"
+              v-if="validationErrors.length && !formModified"
               severity="error"
               icon="pi pi-exclamation-circle"
               :closable="false"
@@ -918,13 +937,13 @@ onBeforeMount(async () => {
               title="Location"
               icon="fa-location-dot"
               :class="{
-                'app-error-color': validationErrors.includes(IntakeFormCategory.LOCATION) && !formUpdated
+                'app-error-color': validationErrors.includes(IntakeFormCategory.LOCATION) && !formModified
               }"
             />
           </template>
           <template #content="{ prevCallback, nextCallback }">
             <Message
-              v-if="validationErrors.length && !formUpdated"
+              v-if="validationErrors.length && !formModified"
               severity="error"
               icon="pi pi-exclamation-circle"
               :closable="false"
@@ -1233,13 +1252,13 @@ onBeforeMount(async () => {
                 'app-error-color':
                   (validationErrors.includes(IntakeFormCategory.PERMITS) ||
                     validationErrors.includes(IntakeFormCategory.APPLIED_PERMITS)) &&
-                  !formUpdated
+                  !formModified
               }"
             />
           </template>
           <template #content="{ prevCallback }">
             <Message
-              v-if="validationErrors.length && !formUpdated"
+              v-if="validationErrors.length && !formModified"
               severity="error"
               icon="pi pi-exclamation-circle"
               :closable="false"

diff --git a/frontend/src/composables/formAutoSave.ts b/frontend/src/composables/formAutoSave.ts
@@ -0,0 +1,49 @@
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+
+import type { Ref } from 'vue';
+
+// autosave functionality for forms, saves on inactivity after the delay (default 10 seconds)
+export function useAutoSave(saveCallback: () => void, delay: number = 10000) {
+  const formUpdated: Ref<Boolean> = ref(false);
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+  const startTimer = () => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(async () => {
+      if (formUpdated.value) {
+        await saveCallback();
+        formUpdated.value = false;
+        timeoutId = null;
+      }
+    }, delay);
+  };
+
+  const onActivity = () => {
+    startTimer();
+  };
+
+  onMounted(() => {
+    window.addEventListener('keydown', onActivity);
+    window.addEventListener('focus', onActivity);
+    window.addEventListener('click', onActivity);
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('keydown', onActivity);
+    window.removeEventListener('focus', onActivity);
+    window.removeEventListener('click', onActivity);
+    if (timeoutId) clearTimeout(timeoutId);
+  });
+
+  return {
+    formUpdated,
+    stopAutoSave: () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
+      }
+    }
+  };
+}