Address selection: add a leaflet map

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

@@ -29,7 +29,7 @@
 
          <template v-slot:body>
             <!--span class="discret">Selection: {{ selected }}</span-->
-            <div class="results">
+            <div class="address_form__left">
                <!-- <div class="count">
                   <span>
                      <a  v-if="suggestedCounter > 0" href="#">
@@ -48,16 +48,17 @@
                <city-selection>
                </city-selection>
 
-               <address-selection
-                  v-for="item in this.referenceAddresses.slice().reverse()"
-                  v-bind:item="item"
-                  v-bind:key="item.id">
+               <address-selection>
                </address-selection>
 
                <!-- <button v-if="query.length >= 3" class="sc-button bt-create ml-5 mt-2" name="createPerson">
                   {{ $t('action.create') }} "{{ query }}"
                </button> -->
             </div>
+            <div class="address_form__map">
+               <address-map>
+               </address-map>
+            </div>
          </template>
 
          <template v-slot:footer>
@@ -76,6 +77,8 @@ import Modal from './Modal';
 import CountrySelection from './CountrySelection';
 import CitySelection from './CitySelection';
 import AddressSelection from './AddressSelection';
+import AddressMap from './AddressMap';
+
 
 export default {
    name: 'AddAddresses',
@@ -84,6 +87,7 @@ export default {
       CountrySelection,
       CitySelection,
       AddressSelection,
+      AddressMap
    },
    data() {
       return {
@@ -94,8 +98,7 @@ export default {
       }
    },
    computed: {
-      ...mapState(['add_addresses']),
-      referenceAddresses() { return this.$store.getters.getReferenceAddresses; }
+      ...mapState(['add_addresses']), //TODO: is it useful?
       // query: {
       //    set(query) {
       //       this.$store.dispatch('setQuery', { query });
@@ -123,9 +126,9 @@ export default {
    methods: {
       openModal() {
          this.modal.showModal = true;
-         this.$nextTick(function() {
-            this.$refs.search.focus();
-         })
+         // this.$nextTick(function() {
+         //    this.$refs.search.focus();
+         // })
       },
       addAddresses() {
          console.log('@@@ CLICK button addAddresses')

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

@@ -0,0 +1,58 @@
+<template>
+   <div class="container">
+      <div id='address_map' v-bind='init' style='height:400px; width:400px;'></div>
+   </div>
+</template>
+
+<script>
+
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+let map;
+
+export default {
+   name: 'AddressMap',
+   data() {
+   },//TODO useful?
+   computed: {
+      center: {
+         set(value) {
+            this.$store.commit('setMapCenter', value);
+         },
+         get() {
+            return this.$store.state.addressMap.center;
+         }
+      },
+   },
+   // watch: {
+   //    center: get() {
+   //        console.log()
+   //    }
+   // },
+   methods:{
+      init() {
+         map = L.map('address_map').setView([48.8589, 2.3469], 12);
+
+         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+         }).addTo(map);
+
+         L.marker([48.8589, 2.3469]).addTo(map)
+            .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
+            .openPopup();
+
+         console.log(map);
+      },
+      update() {
+         console.log(this.$store.state.addressMap.center)
+         map.setView(this.$store.state.addressMap.center);
+         //TODO update map view based on the store map centerS
+      }
+   },
+   mounted(){
+      this.init()
+   }
+}
+</script>
+
+

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

@@ -1,25 +1,10 @@
 <template>
-   <div class="list-item" :class="{ checked: isChecked }">
-      <div class="container">
-
-         <!--a class="discret" target="_blank" :href="url.show">{{ item.id }}</a-->
-         <input class=""
-            type="checkbox"
-            v-model="selected"
-            :value="item" />
-
-         {{ item.street }}
-         {{ item.streetNumber }}
-
-      </div>
-      <!-- <div class="right_actions">
-
-         <span class="badge badge-pill badge-secondary" :title="item.id">
-            {{ $t('item.type_person') }}
-         </span>
-         <a class="sc-button bt-show" target="_blank" :title="item.id" :href="url.show"></a>
-
-      </div> -->
+   <div class="container">
+      <select v-model="selected" :placeholder="$t('select_address')">
+         <option v-for="item in this.addresses" v-bind:item="item" v-bind:key="item.id" v-bind:value="item">
+            {{ item.street }}, {{ item.streetNumber }}
+         </option>
+      </select>
    </div>
 </template>
 
@@ -27,24 +12,19 @@
 
 export default {
    name: 'AddressSelection',
-   props: ['item'],
+   props: ['item'], //TODO useful?
    data() {
-   },
+   },//TODO useful?
    computed: {
+      addresses() { return this.$store.getters.getReferenceAddresses; },
       selected: {
          set(value) {
-            this.$store.dispatch('updateSelected', value);
+            this.$store.commit('setSelectedAddress', value);
          },
-         // get() {
-         //    return this.$store.state.add_persons.selected; //TODO
-         // }
+         get() {
+            return this.$store.state.selectedAddress;
+         }
       },
-      //selectedAndSuggested() {
-      //   return this.$store.getters.selectedAndSuggested;
-      //},
-      // isChecked() {
-      //    return (this.selected.indexOf(this.item) === -1) ? false : true;
-      // }
    }
 };
 </script>

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

@@ -2,7 +2,7 @@
    <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 }}
+            {{ item.code }}-{{ item.name }}
          </option>
       </select>
    </div>