feat: place search and results displaying improved

docs/search-results-criteria.md

@@ -51,7 +51,7 @@ the current implementation creates results by doing three searches:
 
 Having the results of the three searches, the app merges them using the following rules:
 
-- If there are results for `locality` and `county` layers, they will fill the initial slots
+- If there are results for `locality` and `county` layers, they will fill 30% of the slots
 - If there are results for all the layers except `locality`, `county` they will fill the other available slots
 
 Important: *If some searches do not bring results, the empty slots are filled with extra items from the other searches*

src/fragments/forms/place-input/PlaceInput.vue

@@ -123,8 +123,8 @@
             </v-list-tile-action>
             <v-list-tile-content>
               <v-list-tile-title :title="placeSuggested.placeName.trim()">
-                <v-btn style="min-width: fit-content" flat small @click.stop="selectSuggestion(placeSuggested)" class="no-padding no-margin no-capitalize">
-                  {{ placeSuggested.placeName.trim() }}
+                <v-btn v-html="highlightedName(placeSuggested.placeName)" style="min-width: fit-content" flat small @click.stop="selectSuggestion(placeSuggested)" class="no-padding no-margin no-capitalize">
+
                 </v-btn>
               </v-list-tile-title>
               <v-list-tile-sub-title>

src/fragments/forms/place-input/place-input.js

@@ -331,6 +331,28 @@ export default {
     }
   },
   methods: {
+    /**
+     * highlight typed place name
+     * @param {String} placeName 
+     * @returns {Html}
+     */
+    highlightedName (placeName) {
+      let searchMask = this.localModel.placeName
+      var regEx = new RegExp(searchMask, 'ig')
+      let localPlaceName = this.localModel.placeName
+      let replaceMask
+      if ((placeName.toLowerCase()).indexOf(this.localModel.placeName.toLowerCase() + ' ') === 0) {
+        localPlaceName = localPlaceName[0].toUpperCase() + localPlaceName.substring(1) + ' '
+      } else if ((placeName.toLowerCase()).indexOf(this.localModel.placeName.toLowerCase()) === 0 ) {
+        localPlaceName = localPlaceName[0].toUpperCase() + localPlaceName.substring(1)
+      } else if ((placeName.toLowerCase()).indexOf(this.localModel.placeName.toLowerCase()) > 0 ) {
+        localPlaceName = ' ' + localPlaceName[0].toUpperCase() + localPlaceName.substring(1)
+      }
+      replaceMask = `<strong>${localPlaceName}</strong>`
+
+      placeName = placeName.replace(regEx, replaceMask)
+      return placeName.trim()
+    },
     /**
      * Get layer translation based on the layer name
      * or fall back to a default one if not available

src/support/admin-area-loader.js

@@ -16,7 +16,12 @@ class AdminAreaLoader {
     let adminAreaFilter = { polygon_geojson: 1, format: 'json', country: place.properties.country }
 
     if (layer === 'region') {
-      adminAreaFilter.state  = place.properties.region.toLowerCase().replace(' region', '')
+      if (place.properties.region) {
+        adminAreaFilter.state = place.properties.region.toLowerCase().replace(' region', '')
+      } else {
+        adminAreaFilter.state  = this.getPlaceNameAsAdminArea(place)
+      }
+      return adminAreaFilter
     }
     if (layer === 'county') {
       if (place.properties.region) {
@@ -25,12 +30,9 @@ class AdminAreaLoader {
       if (place.properties.county) {
         adminAreaFilter.county  = place.properties.county.toLowerCase().replace(' county', '')  
       } else {
-        if (place.placeName.indexOf(',') > -1) {
-          adminAreaFilter.county  = place.placeName.split(',')[0]
-        } else {
-          adminAreaFilter.county  = place.placeName
-        }
+        adminAreaFilter.county  = this.getPlaceNameAsAdminArea(place)
       }
+      return adminAreaFilter
     }
     if (layer === 'locality') {
       if (place.properties.region && place.properties.region !== place.properties.locality) {
@@ -40,14 +42,25 @@ class AdminAreaLoader {
       if (locality) {
         adminAreaFilter.city = locality.toLowerCase()
       } else {
-        if (place.placeName.indexOf(',') > -1) {
-          adminAreaFilter.city  = place.placeName.split(',')[0]
-        } else {
-          adminAreaFilter.city  = place.placeName
-        }
+        adminAreaFilter.city  = this.getPlaceNameAsAdminArea(place)
       }
+      return adminAreaFilter
+    }
+  }
+
+  /**
+   * Get the place name as admin area
+   * @param {Place} place 
+   * @returns {String}
+   */
+  getPlaceNameAsAdminArea (place) {
+    let adminArea
+    if (place.placeName.indexOf(',') > -1) {
+      adminArea  = place.placeName.split(',')[0]
+    } else {
+      adminArea  = place.placeName
     }
-    return adminAreaFilter
+    return adminArea
   }
 
   /**

src/support/ors-api-runner.js

@@ -124,22 +124,22 @@ const PlacesSearch = (term, quantity = 100, restrictArea = true) => {
 
     // Build a search localities only
     let localityArgs = OrsParamsParser.buildPlaceSearchArgs(term, false)
-    localityArgs.size = 2
+    localityArgs.size = quantity / (quantity / 2)
     localityArgs.layers = ['locality']
     promises.push(client.geocode(localityArgs))   
     AppLoader.getInstance().appHooks.run('placeSearchLocalityArgsDefined', localityArgs)
 
     // Build a search counties only
     let countyArgs = OrsParamsParser.buildPlaceSearchArgs(term, false)
-    countyArgs.size = 2
+    countyArgs.size = quantity / (quantity / 1)
     countyArgs.layers = ['county']
     promises.push(client.geocode(countyArgs))   
     AppLoader.getInstance().appHooks.run('placeSearchCountyArgsDefined', countyArgs)
 
     // Build a search for addresses
     let addressesArgs = OrsParamsParser.buildPlaceSearchArgs(term, false)
     addressesArgs.size = quantity
-    addressesArgs.layers = ['country', 'region', 'macrocounty', 'macroregion', 'neighbourhood', 'borough', 'street', 'address', 'coarse'] // `coarse` will bring places by postal code
+    addressesArgs.layers = ['country', 'region', 'macrocounty', 'macroregion', 'neighbourhood', 'borough', 'street', 'address', 'postalcode'] // `coarse` will bring places by postal code
     promises.push(client.geocode(addressesArgs))   
     AppLoader.getInstance().appHooks.run('placeSearchAddressArgsDefined', addressesArgs)
 
@@ -235,16 +235,24 @@ const sortFeatures  = (features) => {
     // Move best match to to first position (duplicated items will be removed later)
     features.splice(0, 0, features[bestMatchIndex])
   }
-  let closestCityIndex = lodash.findIndex(features, function(f) { return f.properties.layer === 'locality' || f.properties.layer === 'city'})
-  if (closestCityIndex > 1) {
-    // Move closest city to second position (duplicated items will be removed later)
-    features.splice(1, 0, features[closestCityIndex])
+
+  let postalCodeIndex = lodash.findIndex(features, function(f) { return f.properties.layer === 'postalcode'})
+  if (postalCodeIndex > 1) {
+    // Move postalcode place to first position duplicated items will be removed later)
+    features.splice(0, 0, features[postalCodeIndex])
+  } else {
+    let closestCityIndex = lodash.findIndex(features, function(f) { return f.properties.layer === 'locality' || f.properties.layer === 'city'})
+    if (closestCityIndex > 1) {
+      // Move closest city to second position (duplicated items will be removed later)
+      features.splice(1, 0, features[closestCityIndex])
+    }
   }
   let closestCountyIndex = lodash.findIndex(features, function(f) { return f.properties.layer === 'county' })
   if (closestCountyIndex > 1) {
     // Move closest city to second position (duplicated items will be removed later)
     features.splice(2, 0, features[closestCountyIndex])
   }
+
   let closestCountryIndex = lodash.findIndex(features, function(f) { return f.properties.layer === 'country'})
   if (closestCountryIndex > 2) {
     // Move closest city to third position (duplicated items will be removed later)