From bceedc8cdc1a302b39cda30fe7b590d1b6df41c6 Mon Sep 17 00:00:00 2001 From: Wilson Wong Date: Thu, 12 Sep 2024 15:10:55 -0700 Subject: [PATCH] Disable initial validation on loading drafts, fix heading highlights --- .../housing/enquiry/EnquiryIntakeForm.vue | 10 +- .../submission/SubmissionIntakeForm.vue | 211 +++++++++--------- .../shasIntake/EnquiryIntakeForm.spec.ts | 21 +- 3 files changed, 135 insertions(+), 107 deletions(-) diff --git a/frontend/src/components/housing/enquiry/EnquiryIntakeForm.vue b/frontend/src/components/housing/enquiry/EnquiryIntakeForm.vue index af6894f7..ac5a9bcf 100644 --- a/frontend/src/components/housing/enquiry/EnquiryIntakeForm.vue +++ b/frontend/src/components/housing/enquiry/EnquiryIntakeForm.vue @@ -59,6 +59,8 @@ const assignedActivityId: Ref = ref(undefined); const editable: Ref = ref(true); const filteredProjectActivityIds: Ref> = ref([]); const formRef: Ref | null> = ref(null); +const loadForm: Ref = ref(false); +const initialFormValues: Ref = ref(undefined); const projectActivityIds: Ref> = ref([]); const submissions: Ref> = ref([]); const validationErrors: Ref = ref([]); @@ -230,7 +232,7 @@ async function loadEnquiry(enquiryId: string) { router.replace({ name: RouteName.HOUSING_ENQUIRY_INTAKE }); } - formRef.value?.setValues({ + initialFormValues.value = { activityId: formVal?.activityId, enquiryId: formVal?.enquiryId, applicant: { @@ -247,7 +249,7 @@ async function loadEnquiry(enquiryId: string) { enquiryDescription: formVal?.enquiryDescription, applyForPermitConnect: formVal?.applyForPermitConnect } - }); + }; } function onRelatedActivityInput(e: IInputEvent) { @@ -260,6 +262,8 @@ onBeforeMount(async () => { if (props.enquiryId) loadEnquiry(props.enquiryId); projectActivityIds.value = filteredProjectActivityIds.value = (await submissionService.getActivityIds()).data; submissions.value = (await submissionService.getSubmissions()).data; + + loadForm.value = true; }); async function emailConfirmation(activityId: string, enquiryId: string) { @@ -309,9 +313,11 @@ async function emailConfirmation(activityId: string, enquiryId: string) {
= ref(undefined); const editable: Ref = ref(true); const formRef: Ref | null> = ref(null); const geomarkAccordionIndex: Ref = ref(undefined); +const initialFormValues: Ref = ref(undefined); +const loadForm: Ref = ref(false); const mapLatitude: Ref = ref(undefined); const mapLongitude: Ref = ref(undefined); const mapRef: Ref | null> = ref(null); const isSubmittable: Ref = ref(false); const orgBookOptions: Ref> = ref([]); const parcelAccordionIndex: Ref = ref(undefined); -const validationErrors: Ref = ref([]); -const formModified: Ref = ref(false); +const validationErrors = computed(() => { + // Parse errors from vee-validate into a string[] of category headings + if (!formRef?.value?.errors) return []; + else return Array.from(new Set(Object.keys(formRef.value.errors).flatMap((x) => x.split('.')[0].split('[')[0]))); +}); const { formUpdated, stopAutoSave } = useAutoSave(() => { const values = formRef.value?.values; @@ -247,9 +252,7 @@ const onLatLongInputClick = async () => { } }; -async function onInvalidSubmit(e: any) { - validationErrors.value = Array.from(new Set(e.errors ? Object.keys(e.errors).map((x) => x.split('.')[0]) : [])); - +async function onInvalidSubmit() { switch (validationErrors.value[0]) { case IntakeFormCategory.APPLICANT: case IntakeFormCategory.BASIC: @@ -272,8 +275,6 @@ async function onInvalidSubmit(e: any) { await nextTick(); document.querySelector('.p-card.p-component:has(.p-invalid)')?.scrollIntoView({ behavior: 'smooth' }); - - formModified.value = false; } function onPermitsHasAppliedChange(e: BasicResponse, fieldsLength: number, push: Function, setFieldValue: Function) { @@ -395,85 +396,92 @@ async function onRegisteredNameInput(e: AutoCompleteCompleteEvent) { } } -async function loadSubmission(submissionId: string, activityId: string) { - let response, - permits: Array = [], - documents: Array = []; - try { - response = (await submissionService.getSubmission(submissionId)).data; - permits = (await permitService.listPermits(activityId)).data; - documents = (await documentService.listDocuments(activityId)).data; - submissionStore.setDocuments(documents); - editable.value = response.intakeStatus === IntakeStatus.DRAFT; - - formRef.value?.setValues({ - activityId: response?.activityId, - submissionId: response?.submissionId, - applicant: { - contactFirstName: response?.contactFirstName, - contactLastName: response?.contactLastName, - contactPhoneNumber: response?.contactPhoneNumber, - contactEmail: response?.contactEmail, - contactApplicantRelationship: response?.contactApplicantRelationship, - contactPreference: response?.contactPreference - }, - basic: { - isDevelopedByCompanyOrOrg: response?.isDevelopedByCompanyOrOrg, - isDevelopedInBC: response?.isDevelopedInBC, - registeredName: response?.companyNameRegistered - }, - housing: { - projectName: response?.projectName, - projectDescription: response?.projectDescription, - singleFamilySelected: !!response?.singleFamilyUnits, - multiFamilySelected: !!response?.multiFamilyUnits, - singleFamilyUnits: response?.singleFamilyUnits, - multiFamilyUnits: response?.multiFamilyUnits, - otherSelected: !!response?.otherUnits, - otherUnitsDescription: response?.otherUnitsDescription, - otherUnits: response?.otherUnits, - hasRentalUnits: response?.hasRentalUnits, - rentalUnits: response?.rentalUnits, - financiallySupportedBC: response?.financiallySupportedBC, - financiallySupportedIndigenous: response?.financiallySupportedIndigenous, - indigenousDescription: response?.indigenousDescription, - financiallySupportedNonProfit: response?.financiallySupportedNonProfit, - nonProfitDescription: response?.nonProfitDescription, - financiallySupportedHousingCoop: response?.financiallySupportedHousingCoop, - housingCoopDescription: response?.housingCoopDescription - }, - location: { - naturalDisaster: response?.naturalDisaster, - projectLocation: response?.projectLocation, - streetAddress: response?.streetAddress, - locality: response?.locality, - province: response?.province, - latitude: response?.latitude, - longitude: response?.longitude, - ltsaPIDLookup: response?.locationPIDs, - geomarkUrl: response?.geomarkUrl, - projectLocationDescription: response?.projectLocationDescription - }, - appliedPermits: permits - .filter((x: Permit) => x.status === PermitStatus.APPLIED) - .map((x: Permit) => ({ - ...x, - statusLastVerified: x.statusLastVerified ? new Date(x.statusLastVerified) : undefined - })), - permits: { - hasAppliedProvincialPermits: response?.hasAppliedProvincialPermits - }, - investigatePermits: permits.filter((x: Permit) => x.needed === PermitNeeded.UNDER_INVESTIGATION) - }); - // Move map pin - onLatLongInputClick(); - } catch { - router.push({ name: RouteName.HOUSING_SUBMISSION_INTAKE }); - } -} - onBeforeMount(async () => { - if (props.submissionId && props.activityId) loadSubmission(props.submissionId, props.activityId); + if (props.submissionId && props.activityId) { + let response, + permits: Array = [], + documents: Array = [], + submissionId = props.submissionId, + activityId = props.activityId; + + try { + response = (await submissionService.getSubmission(submissionId)).data; + permits = (await permitService.listPermits(activityId)).data; + documents = (await documentService.listDocuments(activityId)).data; + submissionStore.setDocuments(documents); + editable.value = response.intakeStatus === IntakeStatus.DRAFT; + + initialFormValues.value = { + activityId: response?.activityId, + submissionId: response?.submissionId, + applicant: { + contactFirstName: response?.contactFirstName, + contactLastName: response?.contactLastName, + contactPhoneNumber: response?.contactPhoneNumber, + contactEmail: response?.contactEmail, + contactApplicantRelationship: response?.contactApplicantRelationship, + contactPreference: response?.contactPreference + }, + basic: { + isDevelopedByCompanyOrOrg: response?.isDevelopedByCompanyOrOrg, + isDevelopedInBC: response?.isDevelopedInBC, + registeredName: response?.companyNameRegistered + }, + housing: { + projectName: response?.projectName, + projectDescription: response?.projectDescription, + singleFamilySelected: !!response?.singleFamilyUnits, + multiFamilySelected: !!response?.multiFamilyUnits, + singleFamilyUnits: response?.singleFamilyUnits, + multiFamilyUnits: response?.multiFamilyUnits, + otherSelected: !!response?.otherUnits, + otherUnitsDescription: response?.otherUnitsDescription, + otherUnits: response?.otherUnits, + hasRentalUnits: response?.hasRentalUnits, + rentalUnits: response?.rentalUnits, + financiallySupportedBC: response?.financiallySupportedBC, + financiallySupportedIndigenous: response?.financiallySupportedIndigenous, + indigenousDescription: response?.indigenousDescription, + financiallySupportedNonProfit: response?.financiallySupportedNonProfit, + nonProfitDescription: response?.nonProfitDescription, + financiallySupportedHousingCoop: response?.financiallySupportedHousingCoop, + housingCoopDescription: response?.housingCoopDescription + }, + location: { + naturalDisaster: response?.naturalDisaster, + projectLocation: response?.projectLocation, + streetAddress: response?.streetAddress, + locality: response?.locality, + province: response?.province, + latitude: response?.latitude, + longitude: response?.longitude, + ltsaPIDLookup: response?.locationPIDs, + geomarkUrl: response?.geomarkUrl, + projectLocationDescription: response?.projectLocationDescription + }, + appliedPermits: permits + .filter((x: Permit) => x.status === PermitStatus.APPLIED) + .map((x: Permit) => ({ + ...x, + statusLastVerified: x.statusLastVerified ? new Date(x.statusLastVerified) : undefined + })), + permits: { + hasAppliedProvincialPermits: response?.hasAppliedProvincialPermits + }, + investigatePermits: permits.filter((x: Permit) => x.needed === PermitNeeded.UNDER_INVESTIGATION) + }; + + await nextTick(); + // Move map pin + onLatLongInputClick(); + loadForm.value = true; + } catch { + router.push({ name: RouteName.HOUSING_SUBMISSION_INTAKE }); + } + } else { + initialFormValues.value = {}; + loadForm.value = true; + } // clearing the document store on page load submissionStore.setDocuments([]); }); @@ -493,18 +501,15 @@ onBeforeMount(async () => { { icon="fa-user" :class="{ 'app-error-color': - (validationErrors.includes(IntakeFormCategory.APPLICANT) || - validationErrors.includes(IntakeFormCategory.BASIC)) && - !formModified + validationErrors.includes(IntakeFormCategory.APPLICANT) || + validationErrors.includes(IntakeFormCategory.BASIC) }" /> @@ -550,7 +554,7 @@ onBeforeMount(async () => { { title="Housing" icon="fa-house" :class="{ - 'app-error-color': validationErrors.includes(IntakeFormCategory.HOUSING) && !formModified + 'app-error-color': validationErrors.includes(IntakeFormCategory.HOUSING) }" @click=" () => { @@ -728,7 +732,7 @@ onBeforeMount(async () => {