add store postAddress fetch request

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue

@@ -11,8 +11,7 @@
    </div>
    
    <add-address
-      @addNewAddress="addNewAddress"
+      @addNewAddress="addNewAddress">
-      ref="addAddress">
    </add-address>
 </template>
 
@@ -35,7 +34,6 @@ export default {
       addNewAddress({ address, modal }) {
          console.log('@@@ CLICK button addNewAdress', address);
          this.$store.dispatch('addAddress', address.selected);
-         //this.$refs.addAddress.resetAll(); // to cast child method
          modal.showModal = false;
       }
    }

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

@@ -1,12 +1,16 @@
 import 'es6-promise/auto';
 import { createStore } from 'vuex';
 
+// le fetch POST serait rangé dans la logique du composant qui appelle AddAddress
+//import { postAddress } from '... api' 
+
 const debug = process.env.NODE_ENV !== 'production';
 
 const store = createStore({
    strict: debug,
    state: {
-      address: {}
+      address: {},
+      errorMsg: {}
    },
    getters: {
    },
@@ -19,7 +23,19 @@ const store = createStore({
    actions: {
       addAddress({ commit }, payload) {
          console.log('@A addAddress payload', payload);
-         commit('addAddress', payload);
+         commit('addAddress', payload); // à remplacer par 
+         
+         // fetch POST qui envoie l'adresse, et récupère la confirmation que c'est ok. 
+         // La confirmation est l'adresse elle-même.
+         //
+         //   postAddress(payload) 
+         //   .fetch(address => new Promise((resolve, reject) => {
+         //      commit('addAddress', address);
+         //      resolve();
+         //   }))
+         //   .catch((error) => { 
+         //      state.errorMsg.push(error.message); 
+         //   }); 
       }
    }
 });

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

@@ -1,5 +1,6 @@
 /*
 * Endpoint countries GET
+* TODO
 */
 const fetchCountries = () => {
    console.log('<<< fetching countries');
@@ -10,9 +11,10 @@ const fetchCountries = () => {
 };
 
 /*
-* 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'},
@@ -27,7 +29,8 @@ const fetchCities = (country) => {
 * @returns {Promise} a promise containing all AddressReference object
 */
 const fetchReferenceAddresses = (city) => {
-    console.log('<<< fetching references addresses for', 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

@@ -44,8 +44,14 @@
                v-bind:address="address"
                ref="addressMap">
             </address-map>
+            
+            <address-more 
+               v-if="!isNoAddress"
+               v-bind:address="address">
+            </address-more>
                         
-            <!--div class="address_form__fields__isNoAddress"></div>
+            <!--
+            <div class="address_form__fields__isNoAddress"></div>
             <div class="address_form__select">
                <div class="address_form__select__header"></div>
                <div class="address_form__select__left"></div>
@@ -55,13 +61,20 @@
                <div class="address_form__fields__header"></div>
                <div class="address_form__fields__left"></div>
                <div class="address_form__fields__right"></div>
-            </div-->
+            </div>
+         
+            à discuter, 
+            mais je pense qu'il est préférable de profiter de l'imbriquation des classes css 
             
-            <address-more 
+            div.address_form {
-               v-if="!isNoAddress"
+               div.select {
-               v-bind:address="address">
+                  div.header {}
-            </address-more>
+                  div.left {}
-
+                  div.map {}
+               }
+            }
+         
+            -->
          </template>
 
          <template v-slot:footer>
@@ -156,28 +169,28 @@ export default {
       getCountries() {
          console.log('getCountries');
          this.address.loaded.countries = fetchCountries(); // à remplacer par
-         //fetchCountries().then(countries => new Promise((resolve, reject) => {
+         //  fetchCountries().then(countries => new Promise((resolve, reject) => {
-         //   this.address.loaded.countries = countries;
+         //     this.address.loaded.countries = countries;
-         //   resolve()
+         //     resolve()
-         //}))
+         //  }))
-         //.catch((error) => { 
+         //  .catch((error) => { 
-         //   this.errorMsg.push(error.message); 
+         //     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) => {
+         //  fetchCities(country).then(cities => new Promise((resolve, reject) => {
-         //   this.address.loaded.cities = cities;
+         //     this.address.loaded.cities = cities;
-         //   resolve()
+         //     resolve()
-         //}))
+         //  }))
-         //.catch((error) => { 
+         //  .catch((error) => { 
-         //   this.errorMsg.push(error.message); 
+         //     this.errorMsg.push(error.message); 
-         //}); 
+         //  }); 
       },
       getReferenceAddresses(city) {
          console.log('getReferenceAddresses for', city.name);
-         fetchReferenceAddresses(city)
+         fetchReferenceAddresses(city)  // il me semble que le paramètre city va limiter le poids des adresses de références reçues
             .then(addresses => new Promise((resolve, reject) => {
                console.log('addresses', addresses);
                this.address.loaded.addresses = addresses.results;