fixed autosave from triggering on empty forms

frontend/src/components/file/AdvancedFileUpload.vue

@@ -15,19 +15,22 @@ const {
   activityId = undefined,
   accept = undefined,
   disabled = false,
-  reject = undefined
+  reject = undefined,
+  generateActivityId
 } = defineProps<{
   activityId?: string;
   accept?: string[];
   reject?: string[];
   disabled?: boolean;
+  generateActivityId: () => Promise<string | undefined>;
 }>();
 
 // Store
 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);
 
@@ -54,13 +57,16 @@ const onFileUploadDragAndDrop = (event: FileUploadUploaderEvent) => {
 
 const onUpload = async (files: Array<File>) => {
   uploading.value = true;
+  let currentActivityId: string | undefined = activityId;
+
+  currentActivityId = activityId ? activityId : await generateActivityId();
 
   await Promise.allSettled(
     files.map((file: File) => {
       return new Promise((resolve, reject) => {
-        if (activityId) {
+        if (currentActivityId) {
           documentService
-            .createDocument(file, activityId, getConfig.value.coms.bucketId)
+            .createDocument(file, currentActivityId, getConfig.value.coms.bucketId)
             .then((response) => {
               if (response?.data) {
                 submissionStore.addDocument(response.data);
@@ -80,10 +86,10 @@ const onUpload = async (files: Array<File>) => {
   uploading.value = false;
 };
 
-// filter documents based on accept and reject props
-// if accept and reject are not provided, all documents are shown
-// if accept is provided, only documents with extensions in accept are shown
-// if reject is provided, only documents with extensions not in reject are shown
+// Filter documents based on accept and reject props
+// If accept and reject are not provided, all documents are shown
+// If accept is provided, only documents with extensions in accept are shown
+// If reject is provided, only documents with extensions not in reject are shown
 const filteredDocuments = computed(() => {
   let documents = submissionStore.getDocuments;
   return documents.filter(

frontend/src/components/form/internal/InputMaskInternal.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { useField } from 'vee-validate';
 
 import { InputMask } from '@/lib/primevue';
@@ -14,6 +15,15 @@ const { label, name, mask, placeholder, disabled, bold } = defineProps<{
 }>();
 
 const { errorMessage, value } = useField<string>(name);
+
+const normalizedValue = computed({
+  get: () => {
+    return value.value === '' ? undefined : value.value;
+  },
+  set: (val) => {
+    value.value = val === '' || val === undefined ? (undefined as unknown as string) : val;
+  }
+});
 </script>
 
 <template>
@@ -25,7 +35,7 @@ const { errorMessage, value } = useField<string>(name);
     {{ label }}
   </label>
   <InputMask
-    v-model="value"
+    v-model="normalizedValue"
     :aria-describedby="`${name}-help`"
     :aria-labelledby="`${name}-label`"
     :name="name"

frontend/src/components/housing/submission/SubmissionIntakeForm.vue

@@ -107,10 +107,10 @@ const editable: Ref<boolean> = ref(true);
 const formRef: Ref<InstanceType<typeof Form> | null> = ref(null);
 const geomarkAccordionIndex: Ref<number | undefined> = ref(undefined);
 const initialFormValues: Ref<any | undefined> = ref(undefined);
+const isSubmittable: Ref<boolean> = ref(false);
 const mapLatitude: Ref<number | undefined> = ref(undefined);
 const mapLongitude: Ref<number | undefined> = ref(undefined);
 const mapRef: Ref<InstanceType<typeof Map> | null> = ref(null);
-const isSubmittable: Ref<boolean> = ref(false);
 const orgBookOptions: Ref<Array<any>> = ref([]);
 const parcelAccordionIndex: Ref<number | undefined> = ref(undefined);
 const validationErrors = computed(() => {
@@ -151,6 +151,21 @@ function confirmSubmit(data: any) {
   });
 }
 
+async function generateActivityId() {
+  try {
+    const response = await submissionService.updateDraft({});
+    if (response.data?.activityId && response.data?.submissionId) {
+      syncFormAndRoute(response.data.activityId, response.data.submissionId);
+      return response.data.activityId;
+    } else {
+      return undefined;
+    }
+  } catch (error) {
+    toast.error('Failed to generate activity ID');
+    return undefined;
+  }
+}
+
 const getAddressSearchLabel = (e: GeocoderEntry) => {
   return e?.properties?.fullAddress;
 };
@@ -302,17 +317,7 @@ async function onSaveDraft(
     response = await submissionService.updateDraft(draftData);
 
     if (response.data.activityId && response.data.submissionId) {
-      formRef.value?.setFieldValue('activityId', response.data.activityId);
-      formRef.value?.setFieldValue('submissionId', response.data.submissionId);
-
-      // Update route query for refreshing
-      router.replace({
-        name: RouteName.HOUSING_SUBMISSION_INTAKE,
-        query: {
-          activityId: response.data.activityId,
-          submissionId: response.data.submissionId
-        }
-      });
+      syncFormAndRoute(response.data.activityId, response.data.submissionId);
     } else {
       throw new Error('Failed to retrieve correct draft data');
     }
@@ -336,12 +341,6 @@ function onStepChange(stepNumber: number) {
   // Map component misaligned if mounted while not visible. Trigger resize to fix on show
   if (stepNumber === 2) nextTick().then(() => mapRef?.value?.resizeMap());
   if (stepNumber === 3) isSubmittable.value = true;
-
-  // Save a draft on very first stepper navigation if no activityId yet
-  // Need this to generate an activityId for the file uploads
-  if (!formRef.value?.values.activityId) {
-    onSaveDraft(formRef.value?.values, true, false);
-  }
 }
 
 async function onSubmit(data: any) {
@@ -404,6 +403,25 @@ async function onRegisteredNameInput(e: AutoCompleteCompleteEvent) {
   }
 }
 
+function syncFormAndRoute(activityId: string, submissionId: string) {
+  formRef.value?.resetForm({
+    values: {
+      ...formRef.value?.values,
+      activityId: activityId,
+      submissionId: submissionId
+    }
+  });
+
+  // Update route query for refreshing
+  router.replace({
+    name: RouteName.HOUSING_SUBMISSION_INTAKE,
+    query: {
+      activityId: activityId,
+      submissionId: submissionId
+    }
+  });
+}
+
 onBeforeMount(async () => {
   try {
     let response,
@@ -787,6 +805,7 @@ onBeforeMount(async () => {
                   <AdvancedFileUpload
                     :activity-id="values.activityId"
                     :disabled="!editable"
+                    :generate-activity-id="generateActivityId"
                   />
                 </div>
               </template>