autosave doesn't remove error messages anymore, while still only trig…

…gering once
bcgov · Jan 15, 2025 · 43eece7 · 43eece7
1 parent 12fe61e
commit 43eece7
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 15 deletions.
diff --git a/frontend/src/components/file/AdvancedFileUpload.vue b/frontend/src/components/file/AdvancedFileUpload.vue
@@ -30,7 +30,6 @@ const { getConfig } = storeToRefs(useConfigStore());
 const submissionStore = useSubmissionStore();
 
 // State
-// const curActivityId: Ref<string | undefined> = ref(undefined);
 const fileInput: Ref<any> = ref(null);
 const uploading: Ref<Boolean> = ref(false);
 

diff --git a/frontend/src/components/form/FormAutosave.vue b/frontend/src/components/form/FormAutosave.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useFormValues, useIsFormDirty } from 'vee-validate';
+import { useField, useFormValues, useIsFormDirty } from 'vee-validate';
 import { onBeforeUnmount, ref, watch } from 'vue';
 
 import type { Ref } from 'vue';
@@ -17,6 +17,7 @@ const { callback, delay = DEFAULT_DELAY } = defineProps<{
 const isDirty = useIsFormDirty();
 const timeoutId: Ref<ReturnType<typeof setTimeout> | null> = ref(null);
 const values = useFormValues();
+const { value: activityId } = useField('activityId');
 
 // Actions
 defineExpose({ stopAutoSave });
@@ -32,18 +33,32 @@ onBeforeUnmount(() => {
   stopAutoSave();
 });
 
-watch(values.value, () => {
-  if (timeoutId.value) {
-    clearTimeout(timeoutId.value);
-  }
+watch(
+  [() => values.value, activityId],
+  ([newVals, newActId], [oldVals, oldActId]) => {
+    if (!isDirty.value) {
+      return;
+    }
+
+    // check to see if only activity id was changed, then skip autosave
+    if (
+      newActId !== oldActId &&
+      JSON.stringify({ ...newVals, activityId: undefined }) === JSON.stringify({ ...oldVals, activityId: undefined })
+    ) {
+      return;
+    }
+
+    if (timeoutId.value) {
+      clearTimeout(timeoutId.value);
+    }
 
-  if (isDirty.value) {
     timeoutId.value = setTimeout(async () => {
       await callback();
       timeoutId.value = null;
     }, delay);
-  }
-});
+  },
+  { deep: true }
+);
 </script>
 
 <template><div /></template>
diff --git a/frontend/src/components/housing/submission/SubmissionIntakeForm.vue b/frontend/src/components/housing/submission/SubmissionIntakeForm.vue
@@ -429,12 +429,7 @@ function syncFormAndRoute(actId: string, drftId: string) {
   }
 
   if (actId) {
-    formRef.value?.resetForm({
-      values: {
-        ...formRef.value?.values,
-        activityId: actId
-      }
-    });
+    formRef.value?.setFieldValue('activityId', actId);
   }
 }