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

This commit is contained in:
nobohan
2021-05-11 13:50:11 +02:00
parent 2fe38945d2
commit ea0b2407df
5 changed files with 44 additions and 63 deletions

View File

@@ -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')