address selection: use API points for Country and PostalCode + remove obsolet Address Controller

src/Bundle/ChillMainBundle/Resources/public/vuejs/_api/AddAddress.js

@@ -1,26 +1,32 @@
 /*
 * Endpoint countries GET
-* TODO
+* method GET, get Country Object
+* @returns {Promise} a promise containing all Country object
 */
 const fetchCountries = () => {
    console.log('<<< fetching countries');
-   return [
-      {id: 1, name: 'France', countryCode: 'FR'},
-      {id: 2, name: 'Belgium', countryCode: 'BE'}
-   ];
+
+   const url = `/api/1.0/main/country.json`;
+   return fetch(url)
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response');
+      });
 };
 
 /*
-* Endpoint cities GET 
+* Endpoint cities GET
 * TODO
 */
-const fetchCities = (country) => {   
+const fetchCities = (country) => {
    console.log('<<< fetching cities for', country);
-   return [
-      {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 use country
+   const url = `/api/1.0/main/postal-code.json`;
+   return fetch(url)
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response');
+      });
 };
 
 /*
@@ -30,7 +36,7 @@ const fetchCities = (country) => {
 */
 const fetchReferenceAddresses = (city) => {
     console.log('<<< fetching references addresses for', city); // city n'est pas utilisé pour le moment
-    
+
     const url = `/api/1.0/main/address-reference.json`;
     return fetch(url)
        .then(response => {

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

@@ -13,14 +13,14 @@
          </template>
 
          <template v-slot:body>
-            
+
             <h4>{{ $t('select_an_address') }}</h4>
-            
+
             <label for="isNoAddress">
-               <input type="checkbox" 
-                  name="isNoAddress" 
-                  v-bind:placeholder="$t('isNoAddress')" 
-                  v-model="isNoAddress" 
+               <input type="checkbox"
+                  name="isNoAddress"
+                  v-bind:placeholder="$t('isNoAddress')"
+                  v-model="isNoAddress"
                   v-bind:value="value"/>
                {{ $t('isNoAddress') }}
             </label>
@@ -29,12 +29,12 @@
                v-bind:address="address"
                v-bind:getCities="getCities">
             </country-selection>
-            
+
             <city-selection
                v-bind:address="address"
                v-bind:getReferenceAddresses="getReferenceAddresses">
             </city-selection>
-            
+
             <address-selection
                v-bind:address="address"
                v-bind:updateMapCenter="updateMapCenter">
@@ -44,12 +44,12 @@
                v-bind:address="address"
                ref="addressMap">
             </address-map>
-            
-            <address-more 
+
+            <address-more
                v-if="!isNoAddress"
                v-bind:address="address">
             </address-more>
-                        
+
             <!--
             <div class="address_form__fields__isNoAddress"></div>
             <div class="address_form__select">
@@ -62,10 +62,10 @@
                <div class="address_form__fields__left"></div>
                <div class="address_form__fields__right"></div>
             </div>
-         
-            à discuter, 
-            mais je pense qu'il est préférable de profiter de l'imbriquation des classes css 
-            
+
+            à discuter,
+            mais je pense qu'il est préférable de profiter de l'imbriquation des classes css
+
             div.address_form {
                div.select {
                   div.header {}
@@ -73,12 +73,12 @@
                   div.map {}
                }
             }
-         
+
             -->
          </template>
 
          <template v-slot:footer>
-            <button class="sc-button green" 
+            <button class="sc-button green"
                @click.prevent="$emit('addNewAddress', { address, modal })">
                <i class="fa fa-plus fa-fw"></i>{{ $t('action.add')}}
             </button>
@@ -160,32 +160,30 @@ export default {
          this.modal.showModal = true;
          this.resetAll();
          this.getCountries();
-         
+
          //this.$nextTick(function() {
          //   this.$refs.search.focus(); // positionner le curseur à l'ouverture de la modale
          //})
       },
       getCountries() {
          console.log('getCountries');
-         this.address.loaded.countries = fetchCountries(); // à remplacer par
-         //  fetchCountries().then(countries => new Promise((resolve, reject) => {
-         //     this.address.loaded.countries = countries;
-         //     resolve()
-         //  }))
-         //  .catch((error) => { 
-         //     this.errorMsg.push(error.message); 
-         //  }); 
+         fetchCountries().then(countries => new Promise((resolve, reject) => {
+             this.address.loaded.countries = countries.results;
+             resolve()
+          }))
+          .catch((error) => {
+             this.errorMsg.push(error.message);
+          });
       },
       getCities(country) {
          console.log('getCities for', country.name);
-         this.address.loaded.cities = fetchCities(); // à remplacer par
-         //  fetchCities(country).then(cities => new Promise((resolve, reject) => {
-         //     this.address.loaded.cities = cities;
-         //     resolve()
-         //  }))
-         //  .catch((error) => { 
-         //     this.errorMsg.push(error.message); 
-         //  }); 
+         fetchCities(country).then(cities => new Promise((resolve, reject) => {
+            this.address.loaded.cities = cities.results;
+            resolve()
+         }))
+         .catch((error) => {
+            this.errorMsg.push(error.message);
+         });
       },
       getReferenceAddresses(city) {
          console.log('getReferenceAddresses for', city.name);
@@ -195,9 +193,9 @@ export default {
                this.address.loaded.addresses = addresses.results;
                resolve();
             }))
-            .catch((error) => { 
-               this.errorMsg.push(error.message); 
-            }); 
+            .catch((error) => {
+               this.errorMsg.push(error.message);
+            });
       },
       updateMapCenter(point) {
          console.log('point', point);
@@ -208,7 +206,7 @@ export default {
       resetAll() {
          console.log('reset all selected');
          this.address.loaded.addresses = [];
-         this.address.selected.address = {}; 
+         this.address.selected.address = {};
          this.address.loaded.cities = [];
          this.address.selected.city = {};
          this.address.selected.country = {};

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

@@ -1,14 +1,14 @@
 <template>
    <div class="container">
-      <select 
+      <select
          v-model="selected">
          <option :value="{}" disabled selected>{{ $t('select_country') }}</option>
-         <option 
-            v-for="item in this.countries" 
-            v-bind:item="item" 
-            v-bind:key="item.id" 
+         <option
+            v-for="item in this.countries"
+            v-bind:item="item"
+            v-bind:key="item.id"
             v-bind:value="item">
-            {{ item.name }}
+            {{ item.name.fr }}
          </option>
       </select>
    </div>
@@ -20,8 +20,8 @@ export default {
    name: 'CountrySelection',
    props: ['address', 'getCities'],
    computed: {
-      countries() { 
-         return this.address.loaded.countries; 
+      countries() {
+         return this.address.loaded.countries; // TODO place Belgium and France first
       },
       selected: {
          set(value) {