From f6e65dddbee1c17b1690a448949c0a52f6358fcb Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Thu, 2 Sep 2021 21:06:11 +0200
Subject: [PATCH] vue Address: listen to citySelector to automatically fill
 city name and postcode fields

---
 .../AddAddress/AddressSelection.vue           | 18 ++++---
 .../components/AddAddress/CitySelection.vue   | 51 ++++++++++++++++++-
 .../Address/components/EditAddressPane.vue    |  4 +-
 3 files changed, 64 insertions(+), 9 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue
index e8b856f57..6f27b5fbf 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue
@@ -119,15 +119,21 @@ export default {
          let decimal = [];
          substr.forEach((s, i) => { decimal[i] = /^\d+$/.test(s) });
          if (decimal[0] === true) {
-            return { number: substr.shift(),
-               street: substr.join(' ') }
+            return {
+               number: substr.shift(),
+               street: substr.join(' ')
+            }
          }
          else if (decimal[decimal.length - 1] === true) {
-            return { number: substr.pop(),
-               street: substr.join(' ') }
+            return {
+               number: substr.pop(),
+               street: substr.join(' ')
+            }
+         }
+         return {
+            number: '',
+            street: substr.join(' ')
          }
-         return { number: '',
-               street: substr.join(' ') }
       },
       addAddress() {
          this.entity.selected.writeNew.address = true;
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue
index d0e196361..5bad8ed83 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue
@@ -4,6 +4,8 @@
       <VueMultiselect
          id="citySelector"
          v-model="value"
+         @search-change="listenInputSearch"
+         ref="citySelector"
          @select="selectCity"
          name="field"
          track-by="id"
@@ -18,7 +20,7 @@
       </VueMultiselect>
    </div>
 
-   <div class="custom-postcode row g-1" v-if="writeNewPostcode">
+   <div class="custom-postcode row g-1" v-if="writeNewPostcode || (isEnteredCustomCity && !isCitySelectorOpen)">
       <div class="col-4">
          <div class="form-floating">
             <input class="form-control"
@@ -59,6 +61,12 @@ export default {
       writeNewPostcode() {
          return this.entity.selected.writeNew.postcode;
       },
+      isCitySelectorOpen() {
+         return this.$refs.citySelector.$data.isOpen;
+      },
+      isEnteredCustomCity() {
+         return this.$data.value !== null && typeof this.$data.value.text !== 'undefined';
+      },
       cities() {
          return this.entity.loaded.cities;
       },
@@ -81,7 +89,7 @@ export default {
    },
    methods: {
       transName(value) {
-         return `${value.code}-${value.name}`
+         return (value.code && value.name) ? `${value.code}-${value.name}` : '';
       },
       selectCity(value) {
          this.entity.selected.city = value;
@@ -90,6 +98,45 @@ export default {
          this.$emit('getReferenceAddresses', value);
          this.focusOnAddress();
       },
+      listenInputSearch(query) {
+         console.log('listenInputSearch', query, this.isCitySelectorOpen);
+         if (this.isCitySelectorOpen) {
+            this.$data.value = { text: query };
+         } else if (this.isEnteredCustomCity) {
+            let city = this.splitCity(this.$data.value.text);
+            this.$refs.citySelector.currentOptionLabel = '';
+            this.entity.selected.city = city;
+            this.entity.selected.postcode.name = city.name;
+            this.entity.selected.postcode.code = city.code;
+         }
+      },
+      splitCity(city) {
+         let substr = city
+            .split('-')
+            .map(s => s.trim());
+         if (substr.length === 1) {
+            substr = city.split(' ');
+         }
+         console.log('substr', substr);
+         let decimal = [];
+         substr.forEach((s, i) => { decimal[i] = /^\d+$/.test(s) });
+         if (decimal[0] === true) {
+            return {
+               code: substr.shift(),
+               name: substr.join(' ')
+            }
+         }
+         else if (decimal[decimal.length - 1] === true) {
+            return {
+               code: substr.pop(),
+               name: substr.join(' ')
+            }
+         }
+         return {
+            code: '',
+            name: substr.join(' ')
+         }
+      },
       addPostcode() {
          this.entity.selected.writeNew.postcode = true;
       }
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditAddressPane.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditAddressPane.vue
index 017e6fd24..7bbad3db5 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditAddressPane.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditAddressPane.vue
@@ -134,7 +134,9 @@ export default {
    methods: {
       focusOnAddress() {
          const addressSelector = document.getElementById('addressSelector');
-         addressSelector.focus();
+         if (addressSelector !== null) {
+            addressSelector.focus();
+         }
       },
       updateMapCenter(point) {
          //console.log('point', point);