mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
address selection: add leaflet css + add fields for the address extra information (WIP)'
This commit is contained in:
nobohan
parent
2fe38945d2
commit
ea0b2407df
@ -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 => {
|
||||
|
||||
@ -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?
|
||||
//updateMap(state); //TODO where to listen to map center change?
|
||||
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? -> action avec dispatch
|
||||
},
|
||||
setMapCenter(state, value) {
|
||||
state.addressMap.center = value;
|
||||
},
|
||||
setIsNoAddress(state, value) {
|
||||
state.form.isNoAddress = value;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
|
||||
@ -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: {
|
||||
// set(query) {
|
||||
// this.$store.dispatch('setQuery', { query });
|
||||
// },
|
||||
// get() {
|
||||
// return this.add_persons.query;
|
||||
// }
|
||||
// },
|
||||
// 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;
|
||||
// }
|
||||
isNoAddress: {
|
||||
set(v) {
|
||||
this.$store.commit('setIsNoAddress', v);
|
||||
},
|
||||
get() {
|
||||
return this.$store.state.form.isNoAddress; //this.add_address.form.isNoAddress
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
openModal() {
|
||||
this.modal.showModal = true;
|
||||
// this.$nextTick(function() {
|
||||
// this.$refs.search.focus();
|
||||
// })
|
||||
},
|
||||
addAddresses() {
|
||||
console.log('@@@ CLICK button addAddresses')
|
||||
|
||||
@ -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)
|
||||
map.setView(this.$store.state.addressMap.center);
|
||||
console.log('update map', this.$store.state.addressMap.center)
|
||||
map.setView(this.$store.state.addressMap.center, 12);
|
||||
//TODO update map view based on the store map centerS
|
||||
}
|
||||
},
|
||||
|
||||
@ -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 %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user