Address selection: add selectCountry and selectCity components

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

@@ -30,7 +30,7 @@
          <template v-slot:body>
             <!--span class="discret">Selection: {{ selected }}</span-->
             <div class="results">
-               <div class="count">
+               <!-- <div class="count">
                   <span>
                      <a  v-if="suggestedCounter > 0" href="#">
                         {{ $t('action.check_all')}}</a>
@@ -40,13 +40,19 @@
                   <span v-if="selectedCounter > 0">
                      {{ $tc('add_persons.selected_counter', selectedCounter) }}
                   </span>
-               </div>
+               </div> -->
 
-               <address-suggestion
+               <country-selection>
+               </country-selection>
+
+               <city-selection>
+               </city-selection>
+
+               <address-selection
                   v-for="item in this.referenceAddresses.slice().reverse()"
                   v-bind:item="item"
                   v-bind:key="item.id">
-               </address-suggestion>
+               </address-selection>
 
                <!-- <button v-if="query.length >= 3" class="sc-button bt-create ml-5 mt-2" name="createPerson">
                   {{ $t('action.create') }} "{{ query }}"
@@ -67,13 +73,17 @@
 <script>
 import { mapState } from 'vuex';
 import Modal from './Modal';
-import AddressSuggestion from './AddressSuggestion';
+import CountrySelection from './CountrySelection';
+import CitySelection from './CitySelection';
+import AddressSelection from './AddressSelection';
 
 export default {
    name: 'AddAddresses',
    components: {
       Modal,
-      AddressSuggestion,
+      CountrySelection,
+      CitySelection,
+      AddressSelection,
    },
    data() {
       return {
@@ -85,7 +95,7 @@ export default {
    },
    computed: {
       ...mapState(['add_addresses']),
-      referenceAddresses() {return this.$store.getters.getReferenceAddresses;}
+      referenceAddresses() { return this.$store.getters.getReferenceAddresses; }
       // query: {
       //    set(query) {
       //       this.$store.dispatch('setQuery', { query });

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

@@ -26,7 +26,7 @@
 <script>
 
 export default {
-   name: 'AddressSuggestion',
+   name: 'AddressSelection',
    props: ['item'],
    data() {
    },

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

@@ -0,0 +1,30 @@
+<template>
+   <div class="container">
+      <select v-model="selected" :placeholder="$t('select_city')">
+         <option v-for="item in this.cities" v-bind:item="item" v-bind:key="item.id" v-bind:value="item">
+            {{ item.name }}
+         </option>
+      </select>
+   </div>
+</template>
+
+<script>
+
+export default {
+   name: 'CitySelection',
+   props: ['item'], //TODO useful?
+   data() {
+   },//TODO useful?
+   computed: {
+      cities() { return this.$store.getters.getCities; },
+      selected: {
+         set(value) {
+            this.$store.commit('setSelectedCity', value);
+         },
+         get() {
+            return this.$store.state.selectedCity;
+         }
+      },
+   }
+};
+</script>

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

@@ -0,0 +1,30 @@
+<template>
+   <div class="container">
+      <select v-model="selected" :placeholder="$t('select_country')">
+         <option v-for="item in this.countries" v-bind:item="item" v-bind:key="item.id" v-bind:value="item">
+            {{ item.name }}
+         </option>
+      </select>
+   </div>
+</template>
+
+<script>
+
+export default {
+   name: 'CountrySelection',
+   props: ['item'],//TODO useful?
+   data() {
+   },//TODO useful?
+   computed: {
+      countries() { return this.$store.getters.getCountries; },
+      selected: {
+         set(value) {
+            this.$store.commit('setSelectedCountry', value);
+         },
+         get() {
+            return this.$store.state.selectedCountry;
+         }
+      },
+   }
+};
+</script>