@@ -908,9 +955,24 @@ const formRef: Ref
| null> = ref(null);
:click-callback="clickCallback"
title="Permits & Reports"
icon="fa-file"
+ :class="{
+ 'p-red':
+ validationErrors.includes(INTAKE_FORM_CATEGORIES.PERMITS) ||
+ validationErrors.includes(INTAKE_FORM_CATEGORIES.APPLIED_PERMITS)
+ }"
/>
+
+ One of more of the required fields are missing or contains invalid data. Please check the highlighted
+ fields.
+
@@ -1101,6 +1163,7 @@ const formRef: Ref | null> = ref(null);
class="col-4"
:name="`investigatePermits[${idx}].permitTypeId`"
placeholder="Select Permit type"
+ `
:options="getPermitTypes"
:option-label="(e) => `${e.businessDomain}: ${e.name}`"
option-value="permitTypeId"
@@ -1169,7 +1232,7 @@ const formRef: Ref | null> = ref(null);
label="Submit"
type="submit"
icon="pi pi-upload"
- :disabled="!editable || activeStep !== 3"
+ :disabled="!editable || !isSubmittable"
/>
@@ -1197,6 +1260,15 @@ const formRef: Ref | null> = ref(null);
box-shadow: none;
}
+:deep(.p-red) {
+ color: $app-error;
+}
+
+:deep(.p-invalid),
+:deep(.p-card.p-component:has(.p-invalid)) {
+ border-color: $app-error !important;
+}
+
.p-card {
border-color: rgb(242, 241, 241);
border-radius: 8px;
diff --git a/frontend/src/components/intake/ShasIntakeSchema.ts b/frontend/src/components/intake/ShasIntakeSchema.ts
index 3b76f5dd..06422bb8 100644
--- a/frontend/src/components/intake/ShasIntakeSchema.ts
+++ b/frontend/src/components/intake/ShasIntakeSchema.ts
@@ -4,38 +4,38 @@ import {
ContactPreferenceList,
NumResidentialUnits,
ProjectRelationshipList,
+ Regex,
YesNo,
YesNoUnsure
} from '@/utils/constants';
-import { BASIC_RESPONSES } from '@/utils/enums';
+import { BASIC_RESPONSES, INTAKE_FORM_CATEGORIES, PROJECT_LOCATION } from '@/utils/enums';
// Form validation schema
const YesNoUnsureSchema = string().required().oneOf(YesNoUnsure);
-const prevYesSelected = (prevQuestion: string) => prevQuestion === BASIC_RESPONSES.YES;
const stringRequired = string().required().max(255);
-export const getIntakeSchema = (ProjectLocation: Array) =>
- object({
- applicant: object({
- firstName: stringRequired.label('First name'),
- lastName: stringRequired.label('Last name'),
- phoneNumber: stringRequired.label('Phone number'),
- email: stringRequired.label('Email'),
- relationshipToProject: string().required().oneOf(ProjectRelationshipList).label('Relationship to project'),
- contactPreference: string().required().oneOf(ContactPreferenceList).label('Contact Preference')
+export const intakeSchema = object({
+ [INTAKE_FORM_CATEGORIES.APPLICANT]: object({
+ firstName: stringRequired.label('First name'),
+ lastName: stringRequired.label('Last name'),
+ phoneNumber: stringRequired.label('Phone number'),
+ email: string().matches(new RegExp(Regex.EMAIL), 'Email must be valid').required().label('Email'),
+ relationshipToProject: string().required().oneOf(ProjectRelationshipList).label('Relationship to project'),
+ contactPreference: string().required().oneOf(ContactPreferenceList).label('Contact Preference')
+ }),
+ [INTAKE_FORM_CATEGORIES.BASIC]: object({
+ isDevelopedByCompanyOrOrg: string().required().oneOf(YesNo).label('Project developed'),
+ isDevelopedInBC: string().when('isDevelopedByCompanyOrOrg', {
+ is: (previousQuestion: string) => previousQuestion === BASIC_RESPONSES.YES,
+ then: (schema) => schema.required().oneOf(YesNo).label('Registered in BC')
}),
- basic: object({
- isDevelopedByCompanyOrOrg: string().required().oneOf(YesNo).label('Project developed'),
- isDevelopedInBC: string().when('isDevelopedByCompanyOrOrg', {
- is: (previousQuestion: string) => previousQuestion === BASIC_RESPONSES.YES,
- then: (schema) => schema.required().oneOf(YesNo).label('Registered in BC')
- }),
- registeredName: string().when('isDevelopedInBC', {
- is: (previousQuestion: string) => previousQuestion,
- then: (schema) => schema.required().max(255).label('Business name')
- })
- }),
- housing: object({
+ registeredName: string().when('isDevelopedInBC', {
+ is: (previousQuestion: string) => previousQuestion,
+ then: (schema) => schema.required().max(255).label('Business name')
+ })
+ }),
+ [INTAKE_FORM_CATEGORIES.HOUSING]: object().shape(
+ {
projectName: stringRequired.label('Project name'),
projectDescription: string().required().label('Project description'),
hasRentalUnits: YesNoUnsureSchema.label('Rental units'),
@@ -44,38 +44,65 @@ export const getIntakeSchema = (ProjectLocation: Array) =>
financiallySupportedNonProfit: YesNoUnsureSchema.label('Non-profit housing society'),
financiallySupportedHousingCoop: YesNoUnsureSchema.label('Housing co-operative'),
rentalUnits: string().when('hasRentalUnits', {
- is: prevYesSelected,
+ is: (value: string) => value === BASIC_RESPONSES.YES,
then: () => string().oneOf(NumResidentialUnits).required().label('Expected rental units'),
otherwise: () => string().nullable()
}),
indigenousDescription: string().when('financiallySupportedIndigenous', {
- is: prevYesSelected,
+ is: (value: string) => value === BASIC_RESPONSES.YES,
then: () => stringRequired.label('Indigenous housing provider'),
otherwise: () => string().nullable()
}),
nonProfitDescription: string().when('financiallySupportedNonProfit', {
- is: prevYesSelected,
+ is: (value: string) => value === BASIC_RESPONSES.YES,
then: () => stringRequired.label('Non-profit housing society'),
otherwise: () => string().nullable()
}),
housingCoopDescription: string().when('financiallySupportedHousingCoop', {
- is: prevYesSelected,
+ is: (value: string) => value === BASIC_RESPONSES.YES,
then: () => stringRequired.label('Housing co-operative'),
otherwise: () => string().nullable()
}),
- singleFamilySelected: boolean(),
+ singleFamilySelected: boolean().when(['multiFamilySelected', 'otherSelected'], {
+ is: (multi: boolean, other: boolean) => !(multi || other),
+ then: (schema) => {
+ return schema.test('housing-checkbox-test', '\n', function (value) {
+ if (value) return true;
+ else return false;
+ });
+ },
+ otherwise: (schema) => schema.notRequired()
+ }),
singleFamilyUnits: string().when('singleFamilySelected', {
is: (prev: boolean) => prev,
then: (schema) => schema.required().oneOf(NumResidentialUnits).label('Expected number of single-family units'),
otherwise: () => string().nullable()
}),
- multiFamilySelected: boolean(),
+ multiFamilySelected: boolean().when(['singleFamilySelected', 'otherSelected'], {
+ is: (single: boolean, other: boolean) => !(single || other),
+ then: (schema) => {
+ return schema.test('housing-checkbox-test', '\n', function (value) {
+ if (value) return true;
+ else return false;
+ });
+ },
+ otherwise: (schema) => schema.notRequired()
+ }),
multiFamilyUnits: string().when('multiFamilySelected', {
is: (prev: boolean) => prev,
then: (schema) => schema.required().oneOf(NumResidentialUnits).label('Expected number of multi-family units'),
otherwise: () => string().nullable()
}),
- otherSelected: boolean(),
+ otherSelected: boolean().when(['singleFamilySelected', 'multiFamilySelected'], {
+ is: (single: boolean, multi: boolean) => !(single || multi),
+ then: (schema) => {
+ return schema.test('housing-checkbox-test', '\n', function (value) {
+ if (value) return true;
+ else return false;
+ });
+ },
+ otherwise: (schema) => schema.notRequired()
+ }),
otherUnitsDescription: string().when('otherSelected', {
is: (prev: boolean) => prev,
then: (schema) => schema.required().label('Description of units'),
@@ -86,59 +113,63 @@ export const getIntakeSchema = (ProjectLocation: Array) =>
then: (schema) => schema.required().oneOf(NumResidentialUnits).label('Expected number of other units'),
otherwise: () => string().nullable()
})
- }).test('housing-checkbox-test', 'At least one residential type must be selected', (value, context) => {
- return (
- context.originalValue.singleFamilySelected ||
- context.originalValue.multiFamilySelected ||
- context.originalValue.otherSelected
- );
+ },
+ [
+ ['multiFamilySelected', 'otherSelected'],
+ ['singleFamilySelected', 'otherSelected'],
+ ['singleFamilySelected', 'multiFamilySelected']
+ ]
+ ),
+ [INTAKE_FORM_CATEGORIES.LOCATION]: object({
+ naturalDisaster: string().oneOf(YesNo).required().label('Natural disaster'),
+ projectLocation: string().required().label('Location'),
+ streetAddress: string().when('projectLocation', {
+ is: (value: string) => value === PROJECT_LOCATION.STREET_ADDRESS,
+ then: () => stringRequired.label('Street address'),
+ otherwise: () => string().nullable()
}),
- location: object({
- projectLocation: string().required().label('Location'),
- streetAddress: string().when('projectLocation', {
- is: (prevQuestion: string) => prevQuestion === ProjectLocation[0],
- then: () => stringRequired.label('Street address'),
- otherwise: () => string().nullable()
- }),
- locality: string().when('projectLocation', {
- is: (prevQuestion: string) => prevQuestion === ProjectLocation[0],
- then: () => stringRequired.label('Locality'),
- otherwise: () => string().nullable()
- }),
- province: string().when('projectLocation', {
- is: (prevQuestion: string) => prevQuestion === ProjectLocation[0],
- then: () => stringRequired.label('Province'),
- otherwise: () => string().nullable()
- }),
- latitude: number().when('projectLocation', {
- is: (prevQuestion: string) => prevQuestion === ProjectLocation[1],
- then: () => number().required().min(48).max(60).label('Latitude'),
- otherwise: () => string().nullable()
- }),
- longitude: number().when('projectLocation', {
- is: (prevQuestion: string) => prevQuestion === ProjectLocation[1],
- then: () => number().required().min(-139).max(-114).label('Longitude'),
- otherwise: () => string().nullable()
- }),
- ltsaPIDLookup: string().max(255).label('Parcel ID'),
- geomarkUrl: string().max(255).label('Geomark web service url')
+ locality: string().when('projectLocation', {
+ is: (value: string) => value === PROJECT_LOCATION.STREET_ADDRESS,
+ then: () => stringRequired.label('Locality'),
+ otherwise: () => string().nullable()
}),
- permits: object({
- hasAppliedProvincialPermits: string().oneOf(YesNoUnsure).required().label('Applied permits'),
- checkProvincialPermits: string().when('hasAppliedProvincialPermits', {
- is: (prevQuestion: string) => prevQuestion === BASIC_RESPONSES.YES || prevQuestion === BASIC_RESPONSES.UNSURE,
- then: (schema) => schema.oneOf(YesNo).required().label('Check permits'),
- otherwise: (schema) => schema.nullable()
- })
+ province: string().when('projectLocation', {
+ is: (value: string) => value === PROJECT_LOCATION.STREET_ADDRESS,
+ then: () => stringRequired.label('Province'),
+ otherwise: () => string().nullable()
}),
- appliedPermits: array().of(
- object({
- permitTypeId: number().required().max(255).label('Permit type'),
- statusLastVerified: mixed()
- .test('verified-date', 'Verified date must be valid', (val) => val instanceof Date)
- .required()
- .label('Last verified date'),
- trackingId: string().max(255).label('Tracking ID')
- })
- )
- });
+ latitude: number().when('projectLocation', {
+ is: (value: string) => value === PROJECT_LOCATION.LOCATION_COORDINATES,
+ then: () => number().required().min(48).max(60).label('Latitude'),
+ otherwise: () => number().nullable().min(48).max(60).label('Latitude')
+ }),
+ longitude: number().when('projectLocation', {
+ is: (value: string) => value === PROJECT_LOCATION.LOCATION_COORDINATES,
+ then: () => number().required().min(-139).max(-114).label('Longitude'),
+ otherwise: () => number().nullable().min(-139).max(-114).label('Longitude')
+ }),
+ ltsaPIDLookup: string().max(255).label('Parcel ID'),
+ geomarkUrl: string().max(255).label('Geomark web service url')
+ }),
+ [INTAKE_FORM_CATEGORIES.PERMITS]: object({
+ hasAppliedProvincialPermits: string().oneOf(YesNoUnsure).required().label('Applied permits'),
+ checkProvincialPermits: string().when('hasAppliedProvincialPermits', {
+ is: (value: string) => value === BASIC_RESPONSES.YES || value === BASIC_RESPONSES.UNSURE,
+ then: (schema) => schema.oneOf(YesNo).required().label('Check permits'),
+ otherwise: (schema) => schema.nullable()
+ })
+ }),
+ [INTAKE_FORM_CATEGORIES.APPLIED_PERMITS]: array().of(
+ object({
+ permitTypeId: number().required().label('Permit type'),
+ statusLastVerified: mixed()
+ .test(
+ 'verified-date',
+ 'Verified date must be valid or empty',
+ (val) => val instanceof Date || val === undefined
+ )
+ .label('Last verified date'),
+ trackingId: string().max(255).label('Tracking ID')
+ })
+ )
+});
diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts
index a4b6dd21..0380577c 100644
--- a/frontend/src/utils/constants.ts
+++ b/frontend/src/utils/constants.ts
@@ -13,6 +13,7 @@ import {
PERMIT_STATUS,
PERMIT_NEEDED,
PERMIT_AUTHORIZATION_STATUS,
+ PROJECT_LOCATION,
PROJECT_RELATIONSHIP_LIST
} from '@/utils/enums';
@@ -168,3 +169,9 @@ export const NumResidentialUnits = [
NUM_RESIDENTIAL_UNITS.GREATER_THAN_FIVE_HUNDRED,
NUM_RESIDENTIAL_UNITS.UNSURE
];
+
+/**
+ * Project location
+ */
+
+export const ProjectLocation = [PROJECT_LOCATION.LOCATION_COORDINATES, PROJECT_LOCATION.STREET_ADDRESS];
diff --git a/frontend/src/utils/enums.ts b/frontend/src/utils/enums.ts
index 36f2c598..7dad45c5 100644
--- a/frontend/src/utils/enums.ts
+++ b/frontend/src/utils/enums.ts
@@ -37,6 +37,15 @@ export const enum APPLICATION_STATUS_LIST {
COMPLETED = 'Completed'
}
+export const enum INTAKE_FORM_CATEGORIES {
+ APPLICANT = 'applicant',
+ BASIC = 'basic',
+ HOUSING = 'housing',
+ LOCATION = 'location',
+ PERMITS = 'permits',
+ APPLIED_PERMITS = 'appliedPermits'
+}
+
export const enum INTAKE_STATUS_LIST {
SUBMITTED = 'Submitted',
ASSIGNED = 'Assigned',
@@ -111,3 +120,11 @@ export const enum NUM_RESIDENTIAL_UNITS {
GREATER_THAN_FIVE_HUNDRED = '>500',
UNSURE = 'Unsure'
}
+
+/**
+ * Project location selection
+ */
+export const enum PROJECT_LOCATION {
+ STREET_ADDRESS = 'Street address',
+ LOCATION_COORDINATES = 'Location coordinates'
+}
diff --git a/frontend/tests/unit/components/shasIntake/ShasIntakeForm.spec.ts b/frontend/tests/unit/components/shasIntake/ShasIntakeForm.spec.ts
index 61f3492e..4362f0f2 100644
--- a/frontend/tests/unit/components/shasIntake/ShasIntakeForm.spec.ts
+++ b/frontend/tests/unit/components/shasIntake/ShasIntakeForm.spec.ts
@@ -3,7 +3,7 @@ import { mount, RouterLinkStub } from '@vue/test-utils';
import { nextTick } from 'vue';
import ShasIntakeForm from '@/components/intake/ShasIntakeForm.vue';
-import { getIntakeSchema } from '@/components/intake/ShasIntakeSchema';
+import { intakeSchema } from '@/components/intake/ShasIntakeSchema';
import { permitService } from '@/services';
import { StorageKey } from '@/utils/constants';
@@ -129,21 +129,10 @@ describe('ShasIntakeForm tests', () => {
const submitButton = wrapper.find('[type="submit"]');
expect(submitButton.attributes('disabled')).toBeDefined();
-
- // @ts-ignore
- wrapper.vm.activeStep = 3;
- await nextTick();
-
- expect(submitButton.attributes('disabled')).not.toBeDefined();
});
it('checks categories for valid data', async () => {
- const wrapper = mount(ShasIntakeForm, wrapperSettings());
-
- // @ts-ignore
- const validationSchema = getIntakeSchema(wrapper.vm.ProjectLocation);
-
- const applicantTest = validationSchema.validateAt('applicant', {
+ const applicantTest = intakeSchema.validateAt('applicant', {
applicant: {
firstName: 'testFirstName',
lastName: 'testLastName',
@@ -154,7 +143,7 @@ describe('ShasIntakeForm tests', () => {
}
});
- const basicTest = validationSchema.validateAt('basic', {
+ const basicTest = intakeSchema.validateAt('basic', {
basic: {
isDevelopedByCompanyOrOrg: BASIC_RESPONSES.NO,
isDevelopedInBC: BASIC_RESPONSES.NO,
@@ -162,7 +151,7 @@ describe('ShasIntakeForm tests', () => {
}
});
- const housingTest = validationSchema.validateAt('housing', {
+ const housingTest = intakeSchema.validateAt('housing', {
housing: {
projectName: 'testString1',
projectDescription: 'testString2',
@@ -183,27 +172,28 @@ describe('ShasIntakeForm tests', () => {
}
});
- const locationTest = validationSchema.validateAt('location', {
+ const locationTest = intakeSchema.validateAt('location', {
location: {
+ naturalDisaster: 'Yes',
projectLocation: 'testString1',
streetAddress: 'testString2',
locality: 'testString3',
province: 'testString4',
- latitude: '12',
+ latitude: '51',
longitude: '-139',
ltsaPIDLookup: '',
geomarkUrl: ''
}
});
- const permitsTest = validationSchema.validateAt('permits', {
+ const permitsTest = intakeSchema.validateAt('permits', {
permits: {
hasAppliedProvincialPermits: BASIC_RESPONSES.NO,
checkProvincialPermits: 'testString2'
}
});
- const appliedPermitsTest = validationSchema.validateAt('appliedPermits', {
+ const appliedPermitsTest = intakeSchema.validateAt('appliedPermits', {
appliedPermits: [
{
permitTypeId: 1,
@@ -222,12 +212,7 @@ describe('ShasIntakeForm tests', () => {
});
it('checks categories for successful fail', async () => {
- const wrapper = mount(ShasIntakeForm, wrapperSettings());
-
- // @ts-ignore
- const validationSchema = getIntakeSchema(wrapper.vm.ProjectLocation);
-
- const applicantTestFail = validationSchema.validateAt('applicant', {
+ const applicantTestFail = intakeSchema.validateAt('applicant', {
applicant: {
firstName: '',
lastName: 'testLastName',
@@ -238,7 +223,7 @@ describe('ShasIntakeForm tests', () => {
}
});
- const basicTestFail = validationSchema.validateAt('basic', {
+ const basicTestFail = intakeSchema.validateAt('basic', {
basic: {
isDevelopedByCompanyOrOrg: 'testString1',
isDevelopedInBC: 'testString2',
@@ -246,7 +231,7 @@ describe('ShasIntakeForm tests', () => {
}
});
- const housingTestFail = validationSchema.validateAt('housing', {
+ const housingTestFail = intakeSchema.validateAt('housing', {
housing: {
projectName: 'testString1',
projectDescription: 'testString2',
@@ -266,7 +251,7 @@ describe('ShasIntakeForm tests', () => {
}
});
- const locationTestFail = validationSchema.validateAt('location', {
+ const locationTestFail = intakeSchema.validateAt('location', {
location: {
projectLocation: '',
streetAddress: 'testString2',
@@ -279,14 +264,14 @@ describe('ShasIntakeForm tests', () => {
}
});
- const permitsTestFail = validationSchema.validateAt('permits', {
+ const permitsTestFail = intakeSchema.validateAt('permits', {
permits: {
hasAppliedProvincialPermits: BASIC_RESPONSES.YES,
checkProvincialPermits: 'testString2'
}
});
- const appliedPermitsTestFail = validationSchema.validateAt('appliedPermits', {
+ const appliedPermitsTestFail = intakeSchema.validateAt('appliedPermits', {
appliedPermits: [
{
permitTypeId: '',