Add BC OrgBook and BC Geocoder Lookups to SHAS Intake Form

.github/environments/values.dev.yaml

@@ -6,6 +6,8 @@ config:
     FRONTEND_CHES_BCC: [email protected]
     FRONTEND_COMS_APIPATH: https://coms-dev.api.gov.bc.ca/api/v1
     FRONTEND_COMS_BUCKETID: 1f9e1451-c130-4804-aeb0-b78b5b109c47
+    FRONTEND_GEOCODER_APIPATH: https://geocoder.api.gov.bc.ca
+    FRONTEND_ORGBOOK_APIPATH: https://orgbook.gov.bc.ca/api/v4
     FRONTEND_OIDC_AUTHORITY: https://dev.loginproxy.gov.bc.ca/auth/realms/standard
     FRONTEND_OIDC_CLIENTID: nr-permit-connect-navigator-service-5188
     SERVER_APIPATH: /api/v1

.github/environments/values.prod.yaml

@@ -6,6 +6,8 @@ config:
     FRONTEND_CHES_BCC: [email protected]
     FRONTEND_COMS_APIPATH: https://coms.api.gov.bc.ca/api/v1
     FRONTEND_COMS_BUCKETID: 0089d041-5aab-485e-842d-8875475d0ed6
+    FRONTEND_GEOCODER_APIPATH: https://geocoder.api.gov.bc.ca
+    FRONTEND_ORGBOOK_APIPATH: https://orgbook.gov.bc.ca/api/v4
     FRONTEND_OIDC_AUTHORITY: https://loginproxy.gov.bc.ca/auth/realms/standard
     FRONTEND_OIDC_CLIENTID: nr-permit-connect-navigator-service-5188
     SERVER_APIPATH: /api/v1

.github/environments/values.test.yaml

@@ -6,6 +6,8 @@ config:
     FRONTEND_CHES_BCC: [email protected]
     FRONTEND_COMS_APIPATH: https://coms-test.api.gov.bc.ca/api/v1
     FRONTEND_COMS_BUCKETID: a9eabd1d-5f77-4c60-bf6b-83ffa0e21c59
+    FRONTEND_GEOCODER_APIPATH: https://geocoder.api.gov.bc.ca
+    FRONTEND_ORGBOOK_APIPATH: https://orgbook.gov.bc.ca/api/v4
     FRONTEND_OIDC_AUTHORITY: https://test.loginproxy.gov.bc.ca/auth/realms/standard
     FRONTEND_OIDC_CLIENTID: nr-permit-connect-navigator-service-5188
     SERVER_APIPATH: /api/v1

app/config/custom-environment-variables.json

@@ -8,6 +8,10 @@
       "apiPath": "FRONTEND_COMS_APIPATH",
       "bucketId": "FRONTEND_COMS_BUCKETID"
     },
+    "externalApi": {
+      "geocoderApi": "FRONTEND_GEOCODER_APIPATH",
+      "orgBookApi": "FRONTEND_ORGBOOK_APIPATH"
+    },
     "notificationBanner": "FRONTEND_NOTIFICATION_BANNER",
     "oidc": {
       "authority": "FRONTEND_OIDC_AUTHORITY",

app/src/routes/v1/submission.ts

@@ -23,7 +23,7 @@ router.get(
 );
 
 // Submission create draft endpoint
-router.put('/draft', submissionValidator.createDraft, (req: Request, res: Response, next: NextFunction): void => {
+router.put('/draft', (req: Request, res: Response, next: NextFunction): void => {
   submissionController.createDraft(req, res, next);
 });
 

charts/pcns/values.yaml

@@ -135,6 +135,8 @@ config:
     FRONTEND_CHES_BCC: ~
     FRONTEND_COMS_APIPATH: ~
     FRONTEND_COMS_BUCKETID: ~
+    FRONTEND_GEOCODER_APIPATH: ~
+    FRONTEND_ORGBOOK_APIPATH: ~
     FRONTEND_OIDC_AUTHORITY: ~
     FRONTEND_OIDC_CLIENTID: ~
 

frontend/src/components/form/AutoComplete.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { toRef } from 'vue';
+import { useField, ErrorMessage } from 'vee-validate';
+
+import { AutoComplete } from '@/lib/primevue';
+
+import type { IInputEvent } from '@/interfaces';
+import type { AutoCompleteChangeEvent, AutoCompleteCompleteEvent } from 'primevue/autocomplete';
+
+// Props
+type Props = {
+  helpText?: string;
+  label?: string;
+  name: string;
+  placeholder?: string;
+  disabled?: boolean;
+  suggestions: Array<unknown>;
+  getOptionLabel: Function;
+  bold?: boolean;
+  forceSelection?: boolean;
+  loading?: boolean;
+  editable?: boolean;
+  delay?: number;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  helpText: '',
+  type: 'text',
+  label: '',
+  placeholder: '',
+  disabled: false,
+  bold: true,
+  forceSelection: false,
+  loading: false,
+  editable: false,
+  delay: 300
+});
+
+// Emits
+const emit = defineEmits(['onChange', 'onComplete', 'onInput']);
+const { errorMessage, value } = useField<string>(toRef(props, 'name'));
+</script>
+
+<template>
+  <div class="field">
+    <label
+      :class="{ 'font-bold': bold }"
+      :for="name"
+    >
+      {{ label }}
+    </label>
+    <AutoComplete
+      v-model="value"
+      :aria-describedby="`${name}-help`"
+      class="w-full"
+      :class="{ 'p-invalid': errorMessage }"
+      :delay="delay"
+      :disabled="disabled"
+      :editable="editable"
+      :force-selection="forceSelection"
+      input-class="w-full"
+      :loading="false"
+      :name="name"
+      :option-label="(option: any) => props.getOptionLabel(option)"
+      :placeholder="placeholder"
+      :suggestions="props.suggestions"
+      @input="(e: IInputEvent) => emit('onInput', e)"
+      @change="(e: AutoCompleteChangeEvent) => emit('onChange', e)"
+      @complete="(e: AutoCompleteCompleteEvent) => emit('onComplete', e)"
+    />
+    <small :id="`${name}-help`">{{ helpText }}</small>
+    <div class="mt-2">
+      <ErrorMessage
+        :name="name"
+        class="app-error-message"
+      />
+    </div>
+  </div>
+</template>

frontend/src/components/form/index.ts

@@ -1,3 +1,4 @@
+export { default as AutoComplete } from './AutoComplete.vue';
 export { default as Calendar } from './Calendar.vue';
 export { default as Checkbox } from './Checkbox.vue';
 export { default as CopyToClipboard } from './CopyToClipboard.vue';

frontend/src/components/intake/ShasIntakeForm.vue

@@ -4,7 +4,10 @@ import { Form, FieldArray, ErrorMessage } from 'vee-validate';
 import { onBeforeMount, ref } from 'vue';
 
 import FileUpload from '@/components/file/FileUpload.vue';
+import { EditableDropdown } from '@/components/form';
+
 import {
+  AutoComplete,
   Calendar,
   Checkbox,
   Dropdown,
@@ -29,7 +32,7 @@ import {
   useConfirm,
   useToast
 } from '@/lib/primevue';
-import { permitService, submissionService } from '@/services';
+import { externalApiService, permitService, submissionService } from '@/services';
 import { useTypeStore } from '@/store';
 import {
   ContactPreferenceList,
@@ -42,7 +45,16 @@ import {
 } from '@/utils/constants';
 import { BASIC_RESPONSES, INTAKE_FORM_CATEGORIES, PROJECT_LOCATION } from '@/utils/enums';
 
+import type { IInputEvent } from '@/interfaces';
 import type { Ref } from 'vue';
+import type { DropdownChangeEvent } from 'primevue/dropdown';
+import type { AutoCompleteCompleteEvent } from 'primevue/autocomplete';
+
+// Types
+type GeocoderEntry = {
+  geometry: { coordinates: Array<number>; [key: string]: any };
+  properties: { [key: string]: string };
+};
 
 // Props
 type Props = {
@@ -65,12 +77,14 @@ const { getPermitTypes } = storeToRefs(typeStore);
 
 // State
 const activeStep: Ref<number> = ref(0);
+const addressGeocoderOptions: Ref<Array<any>> = ref([]);
 const assignedActivityId: Ref<string | undefined> = ref(undefined);
 const editable: Ref<boolean> = ref(true);
 const formRef: Ref<InstanceType<typeof Form> | null> = ref(null);
 const geomarkAccordionIndex: Ref<number | undefined> = ref(undefined);
 const isSubmittable: Ref<boolean> = ref(false);
 const initialFormValues: Ref<any | undefined> = ref(undefined);
+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([]);
@@ -89,15 +103,50 @@ function displayErrors(a: any) {
 }
 
 function confirmSubmit(data: any) {
+  const tempData = Object.assign({}, data);
+  delete tempData['addressSearch'];
+
   confirm.require({
     message: 'Are you sure you wish to submit this form? Please review the form before submitting.',
     header: 'Please confirm submission',
     acceptLabel: 'Confirm',
     rejectLabel: 'Cancel',
-    accept: () => onSubmit(data)
+    accept: () => onSubmit(tempData)
   });
 }
 
+const getAddressSearchLabel = (e: GeocoderEntry) => {
+  return e?.properties?.fullAddress;
+};
+
+function handleProjectLocationClick() {
+  formRef?.value?.setFieldValue('location.latitude', null);
+  formRef?.value?.setFieldValue('location.longitude', null);
+}
+
+const onAddressSearchInput = async (e: IInputEvent) => {
+  const input = e.target.value;
+  addressGeocoderOptions.value =
+    ((await externalApiService.searchAddressCoder(input))?.data?.features as Array<GeocoderEntry>) ?? [];
+};
+
+const onAddressSelect = async (e: DropdownChangeEvent) => {
+  if (e.originalEvent instanceof InputEvent) return;
+
+  if (e.value as GeocoderEntry) {
+    const properties = e.value?.properties;
+    const geometry = e.value?.geometry;
+
+    formRef.value?.setFieldValue(
+      'location.streetAddress',
+      `${properties?.civicNumber} ${properties?.streetName} ${properties?.streetType}`
+    );
+    formRef.value?.setFieldValue('location.locality', properties?.localityName);
+    formRef.value?.setFieldValue('location.latitude', geometry?.coordinates[1]);
+    formRef.value?.setFieldValue('location.longitude', geometry?.coordinates[0]);
+  }
+};
+
 function onPermitsHasAppliedChange(e: BASIC_RESPONSES, fieldsLength: number, push: Function, setFieldValue: Function) {
   if (e === BASIC_RESPONSES.YES || e === BASIC_RESPONSES.UNSURE) {
     if (fieldsLength === 0) {
@@ -115,12 +164,15 @@ function onPermitsHasAppliedChange(e: BASIC_RESPONSES, fieldsLength: number, pus
 async function onSaveDraft(data: any) {
   editable.value = false;
 
+  const tempData = Object.assign({}, data);
+  delete tempData['addressSearch'];
+
   try {
     let response;
     if (data.submissionId) {
-      response = await submissionService.updateDraft(data.submissionId, data);
+      response = await submissionService.updateDraft(tempData.submissionId, tempData);
     } else {
-      response = await submissionService.createDraft(data);
+      response = await submissionService.createDraft(tempData);
     }
 
     if (response.data.submissionId && response.data.activityId) {
@@ -161,6 +213,19 @@ async function onSubmit(data: any) {
   }
 }
 
+async function onRegisteredNameInput(e: AutoCompleteCompleteEvent) {
+  if (e?.query?.length >= 2) {
+    const results = (await externalApiService.searchOrgBook(e.query))?.data?.results ?? [];
+    orgBookOptions.value = results
+      .filter((x: { [key: string]: string }) => x.type === 'name')
+      .map((x: { [key: string]: string }) => x?.value);
+  }
+}
+
+function getRegisteredNameLabel(e: any) {
+  return e;
+}
+
 onBeforeMount(async () => {
   let response;
   if (props.activityId) {
@@ -333,16 +398,26 @@ onBeforeMount(async () => {
                       :bold="false"
                       :disabled="!editable"
                       :options="YesNo"
+                      @on-change="() => setFieldValue('basic.registeredName', null)"
+                    />
+                    <AutoComplete
+                      v-if="values.basic.isDevelopedInBC === BASIC_RESPONSES.YES"
+                      class="col-6 pl-0"
+                      name="basic.registeredName"
+                      :bold="false"
+                      :disabled="!editable"
+                      :editable="true"
+                      :force-selection="true"
+                      :get-option-label="getRegisteredNameLabel"
+                      :placeholder="'Type to search the B.C registered name'"
+                      :suggestions="orgBookOptions"
+                      @on-complete="onRegisteredNameInput"
                     />
                     <InputText
-                      v-if="values.basic.isDevelopedInBC"
+                      v-else-if="values.basic.isDevelopedInBC === BASIC_RESPONSES.NO"
                       class="col-6 pl-0"
                       name="basic.registeredName"
-                      :placeholder="
-                        values.basic.isDevelopedInBC === BASIC_RESPONSES.YES
-                          ? 'Type to search the B.C registered name'
-                          : 'Type the business/company/organization name'
-                      "
+                      :placeholder="'Type the business/company/organization name'"
                       :bold="false"
                       :disabled="!editable"
                     />
@@ -781,6 +856,7 @@ onBeforeMount(async () => {
                     :bold="false"
                     :disabled="!editable"
                     :options="ProjectLocation"
+                    @click="handleProjectLocationClick"
                   />
                   <div
                     v-if="values.location?.projectLocation === PROJECT_LOCATION.STREET_ADDRESS"
@@ -789,41 +865,46 @@ onBeforeMount(async () => {
                     <Card class="no-shadow">
                       <template #content>
                         <div class="grid nested-grid">
-                          <InputText
+                          <EditableDropdown
                             class="col-12"
-                            name="location.addressSearch"
+                            name="addressSearch"
+                            :get-option-label="getAddressSearchLabel"
+                            :options="addressGeocoderOptions"
+                            :placeholder="'Search the address of your housing project'"
+                            :bold="false"
                             :disabled="!editable"
-                            placeholder="Search the address of your housing project"
+                            @on-input="onAddressSearchInput"
+                            @on-change="onAddressSelect"
                           />
                           <InputText
                             class="col-4"
                             name="location.streetAddress"
-                            :disabled="!editable"
+                            disabled
                             placeholder="Street address"
                           />
                           <InputText
                             class="col-4"
                             name="location.locality"
-                            :disabled="!editable"
+                            disabled
                             placeholder="Locality"
                           />
                           <InputText
                             class="col-4"
                             name="location.province"
-                            :disabled="!editable"
+                            disabled
                             placeholder="Province"
                           />
                           <InputNumber
                             class="col-4"
                             name="location.latitude"
-                            :disabled="!editable"
+                            disabled
                             help-text="Provide a coordinate between 48 and 60"
                             placeholder="Latitude"
                           />
                           <InputNumber
                             class="col-4"
                             name="location.longitude"
-                            :disabled="!editable"
+                            disabled
                             help-text="Provide a coordinate between -114 and -139"
                             placeholder="Longitude"
                           />

frontend/src/lib/primevue/index.ts

@@ -1,6 +1,7 @@
 // Add imports as needed
 export { default as Accordion } from 'primevue/accordion';
 export { default as AccordionTab } from 'primevue/accordiontab';
+export { default as AutoComplete } from 'primevue/autocomplete';
 export { FilterMatchMode } from 'primevue/api';
 export { default as Breadcrumb } from 'primevue/breadcrumb';
 export { default as Button } from 'primevue/button';