Merge branch 'fix_address' into person_renderbox_thirdparty_onthefly

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue

@@ -4,6 +4,8 @@
       <VueMultiselect
          id="addressSelector"
          v-model="value"
+         @search-change="listenInputSearch"
+         ref="addressSelector"
          @select="selectAddress"
          name="field"
          track-by="id"
@@ -17,7 +19,8 @@
          :options="addresses">
       </VueMultiselect>
    </div>
-   <div class="custom-address row g-1" v-if="writeNewAddress || writeNewPostalCode">
+
+   <div class="custom-address row g-1" v-if="writeNewAddress || writeNewPostalCode || (isEnteredCustomAddress && !isAddressSelectorOpen)">
       <div class="col-10">
          <div class="form-floating">
             <input class="form-control"
@@ -60,6 +63,12 @@ export default {
       writeNewPostalCode() {
          return this.entity.selected.writeNew.postCode;
       },
+      isAddressSelectorOpen() {
+         return this.$refs.addressSelector.$data.isOpen;
+      },
+      isEnteredCustomAddress() {
+         return this.$data.value !== null && typeof this.$data.value.text !== 'undefined';
+      },
       addresses() {
          return this.entity.loaded.addresses;
       },
@@ -90,6 +99,42 @@ export default {
          this.entity.selected.address.streetNumber = value.streetNumber;
          this.updateMapCenter(value.point);
       },
+      listenInputSearch(query) {
+         //console.log('listenInputSearch', query, this.isAddressSelectorOpen);
+         if (this.isAddressSelectorOpen) {
+            this.$data.value = { text: query };
+         } else if (this.isEnteredCustomAddress) {
+            let addr = this.splitAddress(this.$data.value.text);
+            this.entity.selected.address.street = addr.street;
+            this.entity.selected.address.streetNumber = addr.number;
+         }
+      },
+      splitAddress(address) {
+         let substr = address
+            .split(',')
+            .map(s => s.trim());
+         if (substr.length === 1) {
+            substr = address.split(' ');
+         }
+         let decimal = [];
+         substr.forEach((s, i) => { decimal[i] = /^\d+$/.test(s) });
+         if (decimal[0] === true) {
+            return {
+               number: substr.shift(),
+               street: substr.join(' ')
+            }
+         }
+         else if (decimal[decimal.length - 1] === true) {
+            return {
+               number: substr.pop(),
+               street: substr.join(' ')
+            }
+         }
+         return {
+            number: '',
+            street: substr.join(' ')
+         }
+      },
       addAddress() {
          this.entity.selected.writeNew.address = true;
       }

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;
       }

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);

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowAddressPane.vue

@@ -11,7 +11,7 @@
       {{ $t(getSuccessText) }}
    </div>
 
-   <show-address :address="address"></show-address>
+   <address-render-box :address="address"></address-render-box>
 
    <div v-if="showDateFrom" class='address-valid date-since'>
       <h3>{{ $t(getValidFromDateText) }}</h3>
@@ -48,12 +48,12 @@
 
 <script>
 import { dateToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/js/date.js';
-import ShowAddress from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
+import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
 
 export default {
    name: 'ShowAddressPane',
    components: {
-      ShowAddress
+      AddressRenderBox
    },
    props: [
       'context',

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/i18n.js

@@ -28,8 +28,8 @@ const addressMessages = {
         create_postal_code: 'Localité inconnue. Cliquez ici pour créer une nouvelle localité',
         postalCode_name: 'Nom',
         postalCode_code: 'Code postal',
-        date: 'Date de la nouvelle adresse',
-        validFrom: 'Date de la nouvelle adresse',
+        date: "Date de la nouvelle adresse",
+        validFrom: "L'adresse est valable à partir du",
         back_to_the_list: 'Retour à la liste',
         loading: 'chargement en cours...',
         address_new_success: 'La nouvelle adresse est enregistrée',