refactoring AddAddress component

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

@@ -5,7 +5,7 @@
 
    <teleport to="body">
       <modal v-if="modal.showModal"
-         :modalDialogClass="modal.modalDialogClass"
+         v-bind:modalDialogClass="modal.modalDialogClass"
          @close="modal.showModal = false">
 
          <template v-slot:header>
@@ -13,56 +13,67 @@
          </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" 
+                  v-bind:value="value"/>
+               {{ $t('isNoAddress') }}
+            </label>
 
-            <div class="address_form__fields__isNoAddress">
-               <input type="checkbox" name="isNoAddress" :placeholder="$t('isNoAddress')" v-model="isNoAddress"/>
-               <label for="isNoAddress">{{ $t('isNoAddress') }}</label>
-            </div>
+            <country-selection
+               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">
+            </address-selection>
 
+            <address-map
+               v-bind:address="address"
+               ref="addressMap">
+            </address-map>
+                        
+            <!--div class="address_form__fields__isNoAddress"></div>
             <div class="address_form__select">
                <div class="address_form__select__header">
-                  <h4>{{ $t('select_an_address') }}</h4>
                </div>
                <div class="address_form__select__left">
-
-                  <country-selection>
-                  </country-selection>
-
-                  <city-selection>
-                  </city-selection>
-
-                  <address-selection>
-                  </address-selection>
-
                </div>
                <div class="address_form__map">
-                  <address-map ref="addressMap">
-                  </address-map>
                </div>
             </div>
 
-            <div v-if="!isNoAddress" class="address_form__fields">
+            <div class="address_form__fields">
                <div class="address_form__fields__header">
-                  <h4>{{ $t('fill_an_address') }}</h4>
                </div>
                <div class="address_form__fields__left">
-                  <input type="text" name="floor" :placeholder="$t('floor')" v-model="floor"/>
-                  <input type="text" name="corridor" :placeholder="$t('corridor')" v-model="corridor"/>
-                  <input type="text" name="steps" :placeholder="$t('steps')" v-model="steps"/>
-                  <input type="text" name="flat" :placeholder="$t('flat')" v-model="flat"/>
                </div>
                <div class="address_form__fields__right">
-                  <input type="text" name="buildingName" :placeholder="$t('buildingName')" v-model="buildingName"/>
-                  <input type="text" name="extra" :placeholder="$t('extra')" v-model="extra"/>
-                  <input type="text" name="distribution" :placeholder="$t('distribution')" v-model="distribution"/>
                </div>
-
-            </div>
+            </div-->
+            
+            <address-more 
+               v-if="!isNoAddress"
+               v-bind:address="address">
+            </address-more>
 
          </template>
 
          <template v-slot:footer>
-            <button class="sc-button green" @click="addAddresses">
+            <button class="sc-button green" 
+               @click.prevent="$emit('addNewAddress', { address, modal })">
                <i class="fa fa-plus fa-fw"></i>{{ $t('action.add')}}
             </button>
          </template>
@@ -72,13 +83,13 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
 import Modal from './Modal';
-import CountrySelection from './CountrySelection';
-import CitySelection from './CitySelection';
-import AddressSelection from './AddressSelection';
-import AddressMap from './AddressMap';
-
+import { fetchCountries, fetchCities, fetchReferenceAddresses } from '../_api/AddAddress'
+import CountrySelection from './AddAddress/CountrySelection';
+import CitySelection from './AddAddress/CitySelection';
+import AddressSelection from './AddAddress/AddressSelection';
+import AddressMap from './AddAddress/AddressMap';
+import AddressMore from './AddAddress/AddressMore'
 
 export default {
    name: 'AddAddresses',
@@ -87,40 +98,113 @@ export default {
       CountrySelection,
       CitySelection,
       AddressSelection,
-      AddressMap
+      AddressMap,
+      AddressMore
    },
+   props: [
+   ],
+   emits: ['addNewAddress'],
    data() {
       return {
          modal: {
             showModal: false,
             modalDialogClass: "modal-dialog-scrollable modal-xl"
-         }
+         },
+         address: {
+            loaded: {
+               countries: [],
+               cities: [],
+               addresses: [],
+            },
+            selected: {
+               country: {},
+               city: {},
+               address: {},
+            },
+            addressMap: {
+               center : [48.8589, 2.3469], // Note: LeafletJs demands [lat, lon] cfr https://macwright.com/lonlat/
+               zoom: 12
+            },
+            isNoAddress: false,
+            floor: null,
+            corridor: null,
+            steps: null,
+            floor: null,
+            flat: null,
+            buildingName: null,
+            extra: null,
+            distribution: null,
+         },
+         errorMsg: {}
       }
    },
    computed: {
-      ...mapState(['add_addresses']), //TODO: is it useful?
       isNoAddress: {
-         set(v) {
-            this.$store.commit('setIsNoAddress', v);
+         set(value) {
+            console.log('value', value);
+            this.address.isNoAddress = value;
          },
          get() {
-            return this.$store.state.form.isNoAddress; //TODO could be this.add_address.form.isNoAddress
+            return this.address.isNoAddress;
          }
-      },
-      //TODO define setter and getter for form input (floor, steps, ...)
+      }
+   },
+   mounted() {
+      this.getCountries();
    },
    methods: {
       openModal() {
          this.modal.showModal = true;
+         this.resetAll();
+         //this.$nextTick(function() {
+         //   this.$refs.search.focus(); // positionner le curseur à l'ouverture de la modale
+         //})
       },
-      addAddresses() {
-         console.log('@@@ CLICK button addAddresses')
-         this.selected.forEach(function(item) {
-               //console.log('# dispatch action for each item', item);
-            //    this.$store.dispatch('addParticipation', item); //TODO
-            }, this
-         );
-         this.modal.showModal = false;
+      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); 
+         //}); 
+      },
+      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); 
+         //}); 
+      },
+      getReferenceAddresses(city) {
+         console.log('getReferenceAddresses for', city.name);
+         fetchReferenceAddresses(city)
+            .then(addresses => new Promise((resolve, reject) => {
+               console.log('addresses', addresses);
+               this.address.loaded.addresses = addresses.results;
+               resolve();
+            }))
+            .catch((error) => { 
+               this.errorMsg.push(error.message); 
+            }); 
+      },
+      updateMapCenter(point) {
+         console.log('point', point);
+         this.address.addressMap.center[0] = point.coordinates[1];
+         this.address.addressMap.center[1] = point.coordinates[0];
+         this.$refs.addressMap.update();
+      },
+      resetAll() {
+         console.log('reset all selected');
+         this.address.selected.address = {};
+         this.address.selected.city = {};
+         this.address.selected.country = {};
       }
    }
 }