address selection: add leaflet css + add fields for the address extra information (WIP)'

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

@@ -3,6 +3,7 @@ import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
 import { addressMessages } from './js/i18n'
 import { getDataPromise } from './store'
 
+
 import App from './App.vue';
 
 getDataPromise.then(store => {

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

@@ -1,7 +1,6 @@
 import 'es6-promise/auto';
 import { createStore } from 'vuex';
 import { getReferenceAddress } from '../api';
-import { initMap, updateMap } from '../map';
 
 const debug = process.env.NODE_ENV !== 'production';
 
@@ -11,7 +10,7 @@ const getDataPromise = getReferenceAddress()
       const store = createStore({
          strict: debug,
          state: {
-            referenceAddresses: referenceAddresses.results,
+            referenceAddresses: referenceAddresses.results, //TODO-> move to data
             countries: [
                 {id: 1, name: 'France', countryCode: 'FR'},
                 {id: 2, name: 'Belgium', countryCode: 'BE'}
@@ -25,9 +24,14 @@ const getDataPromise = getReferenceAddress()
             selectedCity: null,
             selectedAddress: null,
             addressMap: {
-               //map: initMap(), //-> the map container  is not initialised when store is created.
                center : [48.8589, 2.3469],
                zoom: 12
+            },
+            form: {
+               isNoAddress: false,
+               floor: null,
+               corridor: null,
+               steps: null
             }
          },
          getters: {
@@ -48,11 +52,14 @@ const getDataPromise = getReferenceAddress()
             setSelectedAddress(state, value) {
                console.log(value)
                state.selectedAddress = value;
-               state.addressMap.center = value.point.coordinates; //TODO is it OK to put this here?
+               state.addressMap.center = value.point.coordinates; //TODO is it OK to put this here? //call setMapCenter
-               //updateMap(state); //TODO where to listen to map center change?
+               updateMap(state); //TODO where to listen to map center change? -> action avec dispatch
             },
             setMapCenter(state, value) {
                state.addressMap.center = value;
+            },
+            setIsNoAddress(state, value) {
+               state.form.isNoAddress = value;
             }
          },
          actions: {

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

@@ -12,35 +12,13 @@
             <h3 class="modal-title">{{ $t('add_an_address') }}</h3>
          </template>
 
-         <!-- <template v-slot:body-fixed>
-            <div class="search">
-               <label style="float: right;">
-                  {{ $tc('add_persons.suggested_counter', suggestedCounter) }}
-               </label>
-
-               <input id="search-persons"
-                  name="query"
-                  v-model="query"
-                  :placeholder="$t('add_persons.search_some_persons')"
-                  ref="search" />
-               <i class="fa fa-search fa-lg"></i>
-            </div>
-         </template> -->
-
          <template v-slot:body>
-            <!--span class="discret">Selection: {{ selected }}</span-->
+
+            <div class="address_form__fields">
+               <input type="checkbox" name="isNoAddress" :placeholder="$t('isNoAddress')" v-model="isNoAddress"/>
+            </div>
+
             <div class="address_form__left">
-               <!-- <div class="count">
-                  <span>
-                     <a  v-if="suggestedCounter > 0" href="#">
-                        {{ $t('action.check_all')}}</a>
-                     <a  v-if="selectedCounter > 0" href="#">
-                        {{ $t('action.reset')}}</a>
-                  </span>
-                  <span v-if="selectedCounter > 0">
-                     {{ $tc('add_persons.selected_counter', selectedCounter) }}
-                  </span>
-               </div> -->
 
                <country-selection>
                </country-selection>
@@ -51,14 +29,20 @@
                <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>
+
+            <div v-if="!isNoAddress" class="address_form__fields">
+               <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"/>
+
+
+            </div>
+
          </template>
 
          <template v-slot:footer>
@@ -99,36 +83,18 @@ export default {
    },
    computed: {
       ...mapState(['add_addresses']), //TODO: is it useful?
-      // query: {
+      isNoAddress: {
-      //    set(query) {
+         set(v) {
-      //       this.$store.dispatch('setQuery', { query });
+            this.$store.commit('setIsNoAddress', v);
-      //    },
+         },
-      //    get() {
+         get() {
-      //       return this.add_persons.query;
+            return this.$store.state.form.isNoAddress; //this.add_address.form.isNoAddress
-      //    }
+         }
-      // },
+      },
-      // suggested() {  //TODO
-      //    return this.add_persons.suggested;
-      // },
-      // suggestedCounter() {
-      //    return this.add_persons.suggested.length;
-      // },
-      // selected() {
-      //    return this.add_persons.selected;
-      // },
-      // selectedCounter() {
-      //    return this.add_persons.selected.length;
-      // },
-      // selectedAndSuggested() {
-      //    return this.$store.getters.selectedAndSuggested;
-      // }
    },
    methods: {
       openModal() {
          this.modal.showModal = true;
-         // this.$nextTick(function() {
-         //    this.$refs.search.focus();
-         // })
       },
       addAddresses() {
          console.log('@@@ CLICK button addAddresses')

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

@@ -8,6 +8,7 @@
 
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
+
 let map;
 
 export default {
@@ -44,8 +45,8 @@ export default {
          console.log(map);
       },
       update() {
-         console.log(this.$store.state.addressMap.center)
+         console.log('update map', this.$store.state.addressMap.center)
-         map.setView(this.$store.state.addressMap.center);
+         map.setView(this.$store.state.addressMap.center, 12);
          //TODO update map view based on the store map centerS
       }
    },

src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig

@@ -57,8 +57,14 @@
         <div id="address"></div>
     {% endblock %}
 
+    {% block stylesheets %}
+        <link href="{{ asset('build/address.css') }}" type="text/css" rel="stylesheet" />
+    {% endblock %}
+
     {% block js %}
         {{ encore_entry_script_tags('address') }}
     {% endblock %}
 
+
+
 {% endblock personcontent %}