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',
+        date: "Date de la nouvelle adresse",
-        validFrom: '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',

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ButtonLocation.vue

@@ -13,7 +13,7 @@
             <h2 class="modal-title">{{ $t('courselocation.sure') }}</h2>
          </template>
          <template v-slot:body>
-            <show-address :address="person.current_household_address"></show-address>
+            <address-render-box :address="person.current_household_address"></address-render-box>
             <p>{{ $t('courselocation.sure_description') }}</p>
          </template>
          <template v-slot:footer>
@@ -28,12 +28,12 @@
 <script>
 import {mapState} from "vuex";
 import Modal from 'ChillMainAssets/vuejs/_components/Modal';
-import ShowAddress from "ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue";
+import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue";
 
 export default {
    name: "ButtonLocation",
    components: {
-      ShowAddress,
+      import AddressRenderBox from,
       Modal,
    },
    props: ['person'],

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/CourseLocation.vue

@@ -17,9 +17,9 @@
 
       <div class="flex-table" v-if="accompanyingCourse.location">
          <div class="item-bloc">
-            <show-address
+            <address-render-box
                :address="accompanyingCourse.location">
-            </show-address>
+            </address-render-box>
 
             <div v-if="isPersonLocation" class="alert alert-secondary separator">
                <label class="col-form-label">
@@ -63,13 +63,13 @@
 <script>
 import { mapState } from "vuex";
 import AddAddress from 'ChillMainAssets/vuejs/Address/components/AddAddress.vue';
-import ShowAddress from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
+import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
 
 export default {
    name: "CourseLocation",
    components: {
       AddAddress,
-      ShowAddress
+      AddressRenderBox
    },
    data() {
       return {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue

@@ -150,7 +150,7 @@
          </div>
          <div v-else>
             <p>{{ handlingThirdParty.text }}</p>
-            <show-address :address="handlingThirdParty.address"></show-address>
+            <address-render-box :address="handlingThirdParty.address"></address-render-box>
 
             <ul class="record_actions">
                <li>
@@ -173,7 +173,7 @@
             <ul>
                <li v-for="t in thirdParties">
                   <p>{{ t.text }}</p>
-                  <show-address :address="t.address"></show-address>
+                  <address-render-box :address="t.address"></address-render-box>
 
                   <ul class="record_actions">
                      <button :title="$t('remove_thirdparty')" class="btn btn-remove"
@@ -231,7 +231,7 @@ import AddResult from './components/AddResult.vue';
 import AddEvaluation from './components/AddEvaluation.vue';
 import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue';
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
-import ShowAddress from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
+import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
 
 const i18n = {
    messages: {
@@ -275,7 +275,7 @@ export default {
       AddEvaluation,
       AddPersons,
       PersonRenderBox,
-      ShowAddress,
+      AddressRenderBox,
    },
    i18n,
    data() {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue

@@ -13,7 +13,7 @@
 
       <div v-if="filterAddressesSuggestion.length > 0" class="flex-table householdAddressSuggestionList">
         <div v-for="a in filterAddressesSuggestion" class="item-bloc">
-          <show-address :address="a"></show-address>
+          <address-render-box :address="a"></address-render-box>
            <ul class="record_actions">
               <li>
                   <button class="btn btn-action" @click="setHouseholdAddress(a)">
@@ -125,14 +125,14 @@
 <script>
 import { mapGetters, mapState } from 'vuex';
 import HouseholdRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/HouseholdRenderBox.vue';
-import ShowAddress from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
+import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
 import AddAddress from 'ChillMainAssets/vuejs/Address/components/AddAddress.vue';
 
 export default {
   name: 'Household',
   components: {
     HouseholdRenderBox,
-    ShowAddress,
+    AddressRenderBox,
     AddAddress,
   },
   data() {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/HouseholdRenderBox.vue

@@ -35,7 +35,7 @@
 
                <!-- address part -->
                <li v-if="hasAddress()">
-                  <show-address :address="household.current_address" :isMultiline="isMultiline"></show-address>
+                  <address-render-box :address="household.current_address" :isMultiline="isMultiline"></address-render-box>
                </li>
                <li v-else>
                   <span class="chill-no-data-statement">{{ $t('no_current_address') }}</span>
@@ -49,7 +49,7 @@
 
 <script>
 import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue';
-import ShowAddress from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
+import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
 
 const i18n = {
   "messages": {
@@ -69,7 +69,7 @@ export default {
   props: ['household', 'isAddressMultiline'],
   components: {
     PersonRenderBox,
-    ShowAddress,
+    AddressRenderBox,
   },
   i18n,
    computed: {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue

@@ -48,7 +48,7 @@
 
                 <li v-if="person.current_household_address">
                     <i class="fa fa-li fa-map-marker"></i>
-                    <show-address :address="person.current_household_address" :isMultiline="isMultiline"></show-address>
+                    <address-render-box :address="person.current_household_address" :isMultiline="isMultiline"></address-render-box>
                 </li>
                 <li v-else-if="options.addNoData">
                     <i class="fa fa-li fa-map-marker"></i>
@@ -112,12 +112,12 @@
 
 <script>
 import {dateToISO} 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: "PersonRenderBox",
     components: {
-        ShowAddress
+        AddressRenderBox
     },
     props: ['person', 'options', 'render'],
     computed: {

src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue

@@ -35,7 +35,7 @@
             <ul class="list-content fa-ul">
                 <li v-if="thirdparty.address">
                     <i class="fa fa-li fa-map-marker"></i>
-                    <show-address :address="thirdparty.address" :isMultiline="isMultiline"></show-address>
+                    <address-render-box :address="thirdparty.address" :isMultiline="isMultiline"></address-render-box>
                 </li>
                 <li v-if="thirdparty.phonenumber">
                     <i class="fa fa-li fa-mobile"></i>
@@ -57,13 +57,13 @@
 </template>
 
 <script>
-import ShowAddress from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
+import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
 import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
 
 export default {
     name: "ThirdPartyRenderBox",
     components: {
-        ShowAddress
+        AddressRenderBox
     },
     props: ['thirdparty', 'options'],
     computed: {