refactoring AddAddress component

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

@@ -1,9 +1,23 @@
 <template>
-   <add-address></add-address>
+   
+   <div v-if="address.address">
+      {{ address.address.street }}, {{ address.address.streetNumber }}
+   </div>
+   <div v-if="address.city">
+      {{ address.city.code }} {{ address.city.name }}
+   </div>
+   <div v-if="address.country">
+      {{ address.country.name }}
+   </div>
+   
+   <add-address
+      @addNewAddress="addNewAddress"
+      ref="addAddress">
+   </add-address>
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from 'vuex';
 
 import AddAddress from '../_components/AddAddress.vue';
 
@@ -12,8 +26,18 @@ export default {
    components: {
       AddAddress
    },
-   computed: mapState([
-      'address'
-   ])
+   computed: {
+      address() {
+         return this.$store.state.address;
+      }
+   },
+   methods: {
+      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;
+      }
+   }
 };
 </script>

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

@@ -1,14 +0,0 @@
-/*
-* Endpoint chill_main_address_reference_api_show
-* method GET, get AddressReference Object
-* @returns {Promise} a promise containing all AddressReference object
-*
-*/
-export const getReferenceAddress = () => {
-    const url = `/api/1.0/main/address-reference.json`;
-    return fetch(url)
-       .then(response => {
-          if (response.ok) { return response.json(); }
-          throw Error('Error with request resource response');
-       });
-};

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

@@ -1,20 +1,16 @@
 import { createApp } from 'vue'
 import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
 import { addressMessages } from './js/i18n'
-import { getDataPromise } from './store'
+import { store } from './store'
 
 import App from './App.vue';
 
-getDataPromise.then(store => {
+const i18n = _createI18n(addressMessages);
 
-   const i18n = _createI18n(addressMessages);
-
-   const app = createApp({
-      template: `<app></app>`,
-   })
-   .use(store)
-   .use(i18n)
-   .component('app', App)
-   .mount('#address');
-
-});
+const app = createApp({
+   template: `<app></app>`,
+})
+.use(store)
+.use(i18n)
+.component('app', App)
+.mount('#address');

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

@@ -1,77 +1,64 @@
 import 'es6-promise/auto';
 import { createStore } from 'vuex';
-import { getReferenceAddress } from '../api';
-import { app } from '../index';
+
+//import { getReferenceAddress } from '../api';
+//import { app } from '../index';
 
 const debug = process.env.NODE_ENV !== 'production';
 
-const getDataPromise = getReferenceAddress()
-   .then(referenceAddresses => new Promise((resolve, reject) => {
+const store = createStore({
+   strict: debug,
+   state: {
+      address: {},
+      errorMsg: {}
+   },
+   getters: {
+      /*
+      getCountries: state => state.countries,
+      getSelectedCountry: state => state.selectedCountry,
+      getCities: state => state.selectedCountry.countryCode === undefined ?
+         state.cities :
+         state.cities.filter(c => c.country == state.selectedCountry.countryCode),
+      getReferenceAddresses: state => state.referenceAddresses, //TODO filter as a function of city
+      getMapCenter: state => state.addressMap.center,
+      */
+   },
+   mutations: {
+      addAddress(state, address) {
+         console.log('@M addAddress address', address);
+         state.address = address;
+      },
+      /*
+      setSelectedCountry(state, value) {
+         state.selectedCountry = value;
+      },
+      setSelectedCity(state, value) {
+         state.selectedCity = value;
+      },
+      setSelectedAddress(state, value) {
+         state.selectedAddress = value;
+         state.addressMap.center = value.point.coordinates.reverse();
+         //app.$refs.addressMap.updateMap(); //TODO how to update the map view? -> action avec dispatch
+      },
+      setMapCenter(state, value) {
+         state.addressMap.center = value;
+      },
+      setIsNoAddress(state, value) {
+         state.form.isNoAddress = value;
+      }
+      */
+   },
+   actions: {
+      addAddress({ commit }, payload) {
+         console.log('@A addAddress payload', payload);
+         commit('addAddress', payload);
+      }, 
+      /*
+      updateMapCenter({ commit }, payload) {
+         commit('updateMapCenter', payload);
+      },
+      */
+   }
+});
 
-      const store = createStore({
-         strict: debug,
-         state: {
-            referenceAddresses: referenceAddresses.results, //TODO-> move to data
-            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'},
-            selectedCity: null,
-            selectedAddress: null,
-            addressMap: {
-               center : [48.8589, 2.3469], // Note: LeafletJs demands [lat, lon] cfr https://macwright.com/lonlat/
-               zoom: 12
-            },
-            form: {
-               isNoAddress: false,
-               floor: null,
-               corridor: null,
-               steps: null
-            }
-         },
-         getters: {
-            getCountries: state => state.countries,
-            getSelectedCountry: state => state.selectedCountry,
-            getCities: state => state.selectedCountry.countryCode === undefined ?
-               state.cities :
-               state.cities.filter(c => c.country == state.selectedCountry.countryCode),
-            getReferenceAddresses: state => state.referenceAddresses, //TODO filter as a function of city
-            getMapCenter: state => state.addressMap.center,
-         },
-         mutations: {
-            setSelectedCountry(state, value) {
-               state.selectedCountry = value;
-            },
-            setSelectedCity(state, value) {
-               state.selectedCity = value;
-            },
-            setSelectedAddress(state, value) {
-               state.selectedAddress = value;
-               state.addressMap.center = value.point.coordinates.reverse();
-               //app.$refs.addressMap.updateMap(); //TODO how to update the map view? -> action avec dispatch
-            },
-            setMapCenter(state, value) {
-               state.addressMap.center = value;
-            },
-            setIsNoAddress(state, value) {
-               state.form.isNoAddress = value;
-            }
-         },
-         actions: {
-            updateMapCenter({ commit }, payload) {
-               commit('updateMapCenter', payload);
-            },
-         }
-      });
-      resolve(store);
-
-
-   }));
-
-export { getDataPromise };
+export { store };