Address selection: add selectCountry and selectCity components

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

@@ -1,8 +1,10 @@
-// import { mainMessages } from 'ChillMainAssets/vuejs/_js/i18n'
+// import { mainMessages } from 'ChillMainAssets/vuejs/_js/i18n' //TODO
 
 const addressMessages = {
    fr: {
-      add_an_address: 'Ajouter une adresse'
+      add_an_address: 'Ajouter une adresse',
+      select_country: 'Choisir le pays',
+      select_city: 'Choisir une localité'
    }
 };
 

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/store/index.js

@@ -14,20 +14,40 @@ const getDataPromise = getReferenceAddress()
          strict: debug,
          state: {
             referenceAddresses: referenceAddresses.results,
-            countries: ['france', 'belgium'] //TODO fetch countries from CHILL API
-            // add_persons: {
-            //    query: "",
-            //    suggested: [],
-            //    selected: []
-            // },
-            // errorMsg: []
+            countries: [
+                {id: 1, name: 'France', countryCode: 'FR'},
+                {id: 2, name: 'Belgium', countryCode: 'BE'}
+            ], //TODO fetch countries from CHILL API
+            cities: [
+               {id: 1, name: 'Bruxelles', code: '1000', country: 'BE'},
+               {id: 2, name: 'Aisne', code: '85045', country: 'FR'},
+               {id: 3, name: 'Saint-Gervais', code: '85230', country: 'FR'}
+            ], //TODO fetch postal codes from CHILL API
+            selectedCountry: {id: 1, name: 'France', countryCode: 'FR'}, // TODO how to specify a default value?
+            selectedCity: null,
          },
          getters: {
             getCountries: state => state.countries,
+            getSelectedCountry: state => state.selectedCountry,
+            getCities: state => {
+               console.log(state.cities)
+               console.log(state)
+               console.log(state.selectedCountry.countryCode)
+               console.log(state.cities.filter(c => c.country == state.selectedCountry.countryCode))
+               return state.selectedCountry.countryCode === undefined ?
+                   state.cities :
+                   state.cities.filter(c => c.country == state.selectedCountry.countryCode);
+            }
+               ,
             getReferenceAddresses: state => state.referenceAddresses,
-            // getReferenceAddressesCities: state => {}, //TODO get unique cities from addressReference
          },
          mutations: {
+            setSelectedCountry(state, value) {
+               state.selectedCountry = value;
+            },
+            setSelectedCity(state, value) {
+               state.selectedCity = value;
+            }
             // removeParticipation(state, item) {
             //    //console.log('mutation: remove item', item.id);
             //    state.accompanying_course.participations = state.accompanying_course.participations.filter(participation => participation !== item);

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>