address: use multiselect for city and address selection

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressSelection.vue

@@ -1,38 +1,46 @@
 <template>
    <div class="container">
-      <select 
+      <VueMultiselect
-         v-model="selected">
+         v-model="value"
-         <option :value="{}" disabled selected>{{ $t('select_address') }}</option>
+         name="field"
-         <option 
+         track-by="id"
-            v-for="item in this.addresses" 
+         label="value"
-            v-bind:item="item" 
+         :custom-label="transName"
-            v-bind:key="item.id" 
+         :placeholder="$t('select_address')"
-            v-bind:value="item">
+         :options="addresses"
-            {{ item.street }}, {{ item.streetNumber }}
+         @update:model-value="selectAddress"
-         </option>
+         :model-value="value">
-      </select>
+      </VueMultiselect>
    </div>
 </template>
 
 <script>
+import VueMultiselect from 'vue-multiselect';
 
 export default {
    name: 'AddressSelection',
+   components: { VueMultiselect },
    props: ['address', 'updateMapCenter'],
+   data() {
+      return {
+         value: null
+      }
+   },
+   methods: {
+      transName(value) {
+         return `${value.street}, ${value.streetNumber}`
+      },
+      selectAddress(value) {
+         this.address.selected.address = value;
+         this.updateMapCenter(value.point);
+      },
+   },
    computed: {
-      addresses() { 
+      addresses() {
-         return this.address.loaded.addresses; 
+         return this.address.loaded.addresses;
-      },
+      }
-      selected: {
-         set(value) {
-            console.log('selected value', value);
-            this.address.selected.address = value;
-            this.updateMapCenter(value.point);
-         },
-         get() {
-            return this.address.selected.address;
-         }
-      },
    }
 };
 </script>
+
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/CitySelection.vue

@@ -1,38 +1,46 @@
 <template>
    <div class="container">
-      <select
+      <VueMultiselect
-         v-model="selected">
+         v-model="value"
-         <option :value="{}" disabled selected>{{ $t('select_city') }}</option>
+         name="field"
-         <option
+         track-by="id"
-            v-for="item in this.cities"
+         label="value"
-            v-bind:item="item"
+         :custom-label="transName"
-            v-bind:key="item.id"
+         :placeholder="$t('select_city')"
-            v-bind:value="item">
+         :options="cities"
-            {{ item.code }}-{{ item.name }}
+         @update:model-value="selectCity"
-         </option>
+         :model-value="value">
-      </select>
+      </VueMultiselect>
    </div>
 </template>
 
 <script>
+import VueMultiselect from 'vue-multiselect';
 
 export default {
    name: 'CitySelection',
+   components: { VueMultiselect },
    props: ['address', 'getReferenceAddresses'],
+   data() {
+      return {
+         value: null
+      }
+   },
+   methods: {
+      transName(value) {
+         return `${value.code}-${value.name}`
+      },
+      selectCity(value) {
+         this.address.selected.city = value;
+         this.getReferenceAddresses(value);
+      },
+   },
    computed: {
       cities() {
          return this.address.loaded.cities;
-      },
+      }
-      selected: {
-         set(value) {
-            console.log('selected value', value.name);
-            this.address.selected.city = value;
-            this.getReferenceAddresses(value);
-         },
-         get() {
-            return this.address.selected.city;
-         }
-      },
    }
 };
 </script>
+
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/CountrySelection.vue

@@ -24,8 +24,7 @@ export default {
    data() {
       return {
          //value: this.address.loaded.countries.filter(c => c.countryCode === 'FR')[0],
-         value: null,
+         value: null
-         options: []
       }
    },
    methods: {