[FEATURE][GWELLS-2094] Address autofill/autocomplete added to Well Owner and Well Location forms

app/backend/wells/urls.py

@@ -114,5 +114,9 @@
 
     # Well Licensing status endpoint from e-Licensing.
     url(api_path_prefix() + r'/wells/licensing$',
-        views.well_licensing, name='well-licensing')
+        views.well_licensing, name='well-licensing'),
+
+    # get geocoder address
+    url(api_path_prefix() + r'/wells/geocoder$',
+        views.AddressGeocoder.as_view(), name='address-geocoder'),
 ]

app/backend/wells/views.py

@@ -893,3 +893,15 @@ def get_queryset(self):
             qs = qs.filter(well_tag_number__in=wells)
 
         return qs
+class AddressGeocoder(APIView):
+    def get(self, request,**kwargs):
+        GEOCODER_ADDRESS_URL = get_env_variable('GEOCODER_ADDRESS_API_BASE') + self.request.query_params.get('searchTag')
+        response = requests.get(GEOCODER_ADDRESS_URL)
+        # Check if the request was successful (status code 200)
+        if response.status_code == 200:
+            data = response.json()
+            # Create a Django JsonResponse object and return it
+            return JsonResponse(data)
+        else:
+        # If the request was not successful, return an appropriate HTTP response
+            return JsonResponse({'error': f"Error: {response.status_code} - {response.text}"}, status=500)

app/frontend/src/common/services/ApiService.js

@@ -94,6 +94,9 @@ const ApiService = {
   incrementFileCount(resource, documentType){
     return axios.get(`${resource}/sum`, {params: { inc: true, documentType}})
   },
+  getAddresses(searchTag){
+    return axios.get(`wells/geocoder`, {params: { searchTag: searchTag }})
+  },
 }
 
 export default ApiService

app/frontend/src/submissions/components/SubmissionForm/Location.vue

@@ -38,10 +38,23 @@ Licensed under the Apache License, Version 2.0 (the "License");
             id="wellStreetAddress"
             type="text"
             label="Street address"
+            @input="fetchAddressSuggestions"
+            v-on:focus="showList(true)"
+            v-on:blur="showList(false)"
             :errors="errors['street_address']"
             :loaded="fieldsLoaded['street_address']"
             :disabled="sameAsOwnerAddress"
           ></form-input>
+           <!-- Display the address suggestions -->
+        <div v-if="addressSuggestions.length > 0" class="address-suggestions list-group list-group-flush border" id="location-address-suggestions-list">
+          <div v-for="(suggestion, index) in addressSuggestions" :key="index">
+            <button @mousedown="selectAddressSuggestion(suggestion)" class="list-group-item list-group-item-action border-0">{{ suggestion }}</button>
+          </div>
+        </div>
+        <!-- Display a loading indicator while fetching suggestions -->
+        <div v-if="isLoadingSuggestions" class="loading-indicator">
+          Loading...
+        </div>
         </b-col>
       </b-row>
       <b-row>
@@ -202,10 +215,9 @@ Licensed under the Apache License, Version 2.0 (the "License");
 </template>
 <script>
 import { mapGetters } from 'vuex'
-
 import inputBindingsMixin from '@/common/inputBindingsMixin.js'
-
 import BackToTopLink from '@/common/components/BackToTopLink.vue'
+import ApiService from '../../../common/services/ApiService'
 
 export default {
   name: 'Location',
@@ -255,7 +267,10 @@ export default {
   data () {
     return {
       wellAddressHints: [],
-      sameAsOwnerAddress: false
+      sameAsOwnerAddress: false,
+      addressSuggestions: [],
+      isLoadingSuggestions: false,
+      streetAddressInput: ''
     }
   },
   computed: {
@@ -285,6 +300,90 @@ export default {
       this.streetAddressInput = String(this.ownerMailingAddress)
       this.cityInput = String(this.ownerCity)
     }
+  },
+  methods: {
+      /**
+     * @desc Asynchronously fetches address suggestions based on the owner's address input.
+     * If no input is provided, it clears the current suggestions.
+     * On success, it maps the received data to full addresses and updates the addressSuggestions state.
+     * On failure, it logs the error and clears the current suggestions.
+     * Finally, sets the loading state to false.
+     */
+    async fetchAddressSuggestions() {
+      const MIN_QUERY_LENGTH = 3;
+      if (!this.streetAddressInput || this.streetAddressInput.length < MIN_QUERY_LENGTH) {
+        this.addressSuggestions = [];
+        return;
+      }
+      this.isLoadingSuggestions = true;
+      const params = {
+        minScore: 50,
+        maxResults: 5,
+        echo: 'false',
+        brief: true,
+        autoComplete: true,
+        addressString: this.streetAddressInput
+      };
+
+      const querystring = require('querystring');
+      const searchParams = querystring.stringify(params);
+      try {
+        ApiService.getAddresses(searchParams).then((response) => {
+        if (response.data) {
+          const data = response.data;
+          if (data && data.features) {
+            this.addressSuggestions = data.features.map(item => item.properties.fullAddress);
+          } else {
+            this.addressSuggestions = [];
+          }
+        }
+      })
+      } catch (error) {
+        console.error(error);
+        this.addressSuggestions = [];
+      } finally {
+        this.isLoadingSuggestions = false;
+      }
+    },
+
+    /**
+     * @desc Processes the selected address suggestion.
+     * Splits the suggestion into components and updates the owner's province, city, and address inputs accordingly.
+     * Clears the address suggestions afterward.
+     * @param {string} suggestion - The selected address suggestion. ("1234 Street Rd, Name of City, BC")
+     */
+    selectAddressSuggestion(suggestion) {
+      const wellAddressArray = suggestion.split(',');
+      switch (wellAddressArray.length) {
+        case 3: {
+          this.streetAddressInput = wellAddressArray[0];
+          this.cityInput = wellAddressArray[1];
+          break;
+        }
+        case 2: {
+          this.cityInput = wellAddressArray[0];
+          this.streetAddressInput = '';
+          break;
+        }
+      }
+    },
+
+    /**
+     * @desc Clears the current list of address suggestions.
+     */
+    clearAddressSuggestions () {
+      this.addressSuggestions = [];
+    },
+
+    /**
+     * @desc Shows or hides the address suggestions list in the UI.
+     * @param {boolean} show - a boolean which indicates whether to show or hide the element
+     */
+     showList(show) {
+      if(document.getElementById('location-address-suggestions-list')){
+        document.getElementById('location-address-suggestions-list').style.display =  show? 'block' : 'none';
+      }
+    }        
   }
 }
 </script>
@@ -293,4 +392,9 @@ export default {
 .dropdown-error-border {
   border-radius: 5px;
 }
+.address-suggestions {
+    list-style-type: none;
+    position: absolute;
+    z-index: 10;
+  }
 </style>

app/frontend/src/submissions/components/SubmissionForm/Owner.vue

@@ -27,10 +27,35 @@ Licensed under the Apache License, Version 2.0 (the "License");
 
     <b-row>
       <b-col cols="12" md="6">
-        <form-input id="ownerFullName" label="Well Owner Name" v-model="ownerFullNameInput" :errors="errors['owner_full_name']" :loaded="fieldsLoaded['owner_full_name']"></form-input>
+        <form-input 
+          id="ownerFullName" 
+          label="Well Owner Name" 
+          v-model="ownerFullNameInput" 
+          :errors="errors['owner_full_name']" 
+          :loaded="fieldsLoaded['owner_full_name']"
+        ></form-input>       
       </b-col>
       <b-col cols="12" md="6">
-        <form-input id="ownerMailingAddress" label="Owner Mailing Address" v-model="ownerAddressInput" :errors="errors['owner_mailing_address']" :loaded="fieldsLoaded['owner_mailing_address']"></form-input>
+        <form-input 
+          id="ownerMailingAddress" 
+          label="Owner Mailing Address" 
+          v-model="ownerAddressInput" 
+          @input="fetchAddressSuggestions" 
+          v-on:focus="showList(true)" 
+          v-on:blur="showList(false)" 
+          :errors="errors['owner_mailing_address']" 
+          :loaded="fieldsLoaded['owner_mailing_address']">
+        </form-input>
+        <!-- Display the address suggestions -->
+        <div v-if="addressSuggestions.length > 0" class="address-suggestions list-group list-group-flush border" id="owner-address-suggestions-list">
+          <div v-for="(suggestion, index) in addressSuggestions" :key="index">
+            <button @mousedown="selectAddressSuggestion(suggestion)" class="list-group-item list-group-item-action border-0">{{ suggestion }}</button>
+          </div>
+        </div>
+        <!-- Display a loading indicator while fetching suggestions -->
+        <div v-if="isLoadingSuggestions" class="loading-indicator">
+          Loading...
+        </div>
       </b-col>
     </b-row>
     <b-row>
@@ -85,11 +110,10 @@ Licensed under the Apache License, Version 2.0 (the "License");
 
 <script>
 import { mapGetters } from 'vuex'
-
 import inputBindingsMixin from '@/common/inputBindingsMixin.js'
 import inputFormatMixin from '@/common/inputFormatMixin.js'
-
 import BackToTopLink from '@/common/components/BackToTopLink.vue'
+import ApiService from '../../../common/services/ApiService'
 
 export default {
   mixins: [inputBindingsMixin, inputFormatMixin],
@@ -127,22 +151,121 @@ export default {
   },
   fields: {
     ownerFullNameInput: 'ownerFullName',
-    ownerAddressInput: 'ownerMailingAddress',
     ownerCityInput: 'ownerCity',
     ownerProvinceInput: 'ownerProvinceState',
     ownerPostalCodeInput: 'ownerPostalCode',
     ownerEmailInput: 'ownerEmail',
     ownerTelInput: 'ownerTel'
   },
   data () {
-    return {}
+    return {
+      addressSuggestions: [],
+      isLoadingSuggestions: false,
+      ownerAddressInput: ''
+    }
   },
   computed: {
     ...mapGetters(['codes'])
+  },
+  methods: {
+    /**
+     * @desc Asynchronously fetches address suggestions based on the owner's address input.
+     * If no input is provided, it clears the current suggestions.
+     * On success, it maps the received data to full addresses and updates the addressSuggestions state.
+     * On failure, it logs the error and clears the current suggestions.
+     * Finally, sets the loading state to false.
+     */
+    async fetchAddressSuggestions() {
+      const MIN_QUERY_LENGTH = 3;
+      if (!this.ownerAddressInput || this.ownerAddressInput.length < MIN_QUERY_LENGTH) {
+        this.addressSuggestions = [];
+        return;
+      } else {
+        this.isLoadingSuggestions = true;
+        const params = {
+          minScore: 50, //accuracy score of results compared to input
+          maxResults: 5,
+          echo: 'false',
+          brief: true,
+          autoComplete: true,
+          addressString: this.ownerAddressInput
+        };
+
+        const querystring = require('querystring');
+        const searchParams = querystring.stringify(params);
+        try {
+          ApiService.getAddresses(searchParams).then((response) => {
+        if (response.data) {
+          const data = response.data;
+          if (data && data.features) {
+            this.addressSuggestions = data.features.map(item => item.properties.fullAddress);
+          } else {
+            this.addressSuggestions = [];
+          }
+        }
+      })
+        } catch (error) {
+          console.error(error);
+          this.addressSuggestions = [];
+        } finally {
+          this.isLoadingSuggestions = false;
+        }
+      }   
+    },
+
+    /**
+     * @desc Processes the selected address suggestion.
+     * Splits the suggestion into components and updates the owner's province, city, and address inputs accordingly.
+     * Clears the address suggestions afterward.
+     * @param {string} suggestion - The selected address suggestion. ("1234 Street Rd, Name of City, BC")
+     */
+    selectAddressSuggestion(suggestion) {
+      console.log(suggestion);
+
+      const ownerAddressArray = suggestion.split(',');
+      if(ownerAddressArray){
+
+        const PROV_ARRAY_INDEX = ownerAddressArray.length -1;
+        const CITY_ARRAY_INDEX = ownerAddressArray.length -2;
+        const STREET_ARRAY_INDEX = ownerAddressArray.length -3;
+        let province = ownerAddressArray[PROV_ARRAY_INDEX].toUpperCase().trim();
+        if(province === 'BC' || province === 'BRITISH COLUMBIA'){
+          this.ownerProvinceInput = this.codes.province_codes[0].province_state_code;
+          this.ownerAddressInput = '';
+        }
+      else {
+        this.ownerProvinceInput = "";
+      }
+      this.ownerCityInput = ownerAddressArray[CITY_ARRAY_INDEX];
+      if(ownerAddressArray[STREET_ARRAY_INDEX]) this.ownerAddressInput = ownerAddressArray[STREET_ARRAY_INDEX];
+      }
+      this.clearAddressSuggestions();
+    },
+
+    /**
+     * @desc Clears the current list of address suggestions.
+     */
+    clearAddressSuggestions () {
+      this.addressSuggestions = [];
+    },
+
+    /**
+     * @desc Shows or hides the address suggestions list in the UI.
+     * @param {boolean} show - a boolean which indicates whether to show or hide the element
+     */
+     showList(show) {
+      if(document.getElementById('owner-address-suggestions-list')){
+        document.getElementById('owner-address-suggestions-list').style.display =  show? 'block' : 'none';
+      }
+    }        
   }
 }
 </script>
 
 <style>
-
+  .address-suggestions {
+    list-style-type: none;
+    position: absolute;
+    z-index: 10;
+  }
 </style>

docker-compose.yml

@@ -188,6 +188,7 @@ services:
       S3_WELL_EXPORT_BUCKET: gwells
       S3_USE_SECURE: 0
       EMAIL_NOTIFICATION_RECIPIENT: [email protected]
+      GEOCODER_ADDRESS_API_BASE: https://geocoder.api.gov.bc.ca/addresses.json?q=
     command: /bin/bash -c "
       sleep 3 &&
       set -x &&

openshift/backend.dc.json

@@ -733,6 +733,15 @@
                                     {
                                         "name": "ENFORCE_ENV_VARIABLES",
                                         "value": "False"
+                                    },
+                                    {
+                                        "name": "GEOCODER_ADDRESS_API_BASE",
+                                        "valueFrom": {
+                                            "configMapKeyRef": {
+                                                "key": "GEOCODER_ADDRESS_API_BASE",
+                                                "name": "gwells-global-config${NAME_SUFFIX}"
+                                            }
+                                        }
                                     }
                                 ],
                                 "resources": {