mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-08-21 07:03:49 +00:00
Merge branch 'master' into 38_modal_on-the-fly
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<button class="sc-button bt-create centered mt-4" @click="openModal">
|
||||
{{ $t('add_an_address') }}
|
||||
{{ $t('add_an_address_title') }}
|
||||
</button>
|
||||
|
||||
<teleport to="body">
|
||||
@@ -9,76 +9,64 @@
|
||||
@close="modal.showModal = false">
|
||||
|
||||
<template v-slot:header>
|
||||
<h3 class="modal-title">{{ $t('add_an_address') }}</h3>
|
||||
<h3 class="modal-title">{{ $t('add_an_address_title') }}</h3>
|
||||
</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">
|
||||
|
||||
<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>
|
||||
<div class="address_form__header">
|
||||
<h4>{{ $t('select_an_address_title') }}</h4>
|
||||
</div>
|
||||
|
||||
<address-map
|
||||
v-bind:address="address"
|
||||
ref="addressMap">
|
||||
</address-map>
|
||||
|
||||
<address-more
|
||||
v-if="!isNoAddress"
|
||||
v-bind:address="address">
|
||||
</address-more>
|
||||
|
||||
<!--
|
||||
<div class="address_form__fields__isNoAddress"></div>
|
||||
<div class="address_form__select">
|
||||
<div class="address_form__select__header"></div>
|
||||
<div class="address_form__select__left"></div>
|
||||
<div class="address_form__map"></div>
|
||||
<div class="address_form__select">
|
||||
|
||||
<div class="address_form__select__body">
|
||||
<label for="isNoAddress">
|
||||
<input type="checkbox"
|
||||
name="isNoAddress"
|
||||
v-bind:placeholder="$t('isNoAddress')"
|
||||
v-model="isNoAddress"
|
||||
v-bind:value="value"/>
|
||||
{{ $t('isNoAddress') }}
|
||||
</label>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="address_form__select__map">
|
||||
<address-map
|
||||
v-bind:address="address"
|
||||
ref="addressMap">
|
||||
</address-map>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="address_form__more">
|
||||
<address-more
|
||||
v-if="!isNoAddress"
|
||||
v-bind:address="address">
|
||||
</address-more>
|
||||
</div>
|
||||
</div>
|
||||
<div class="address_form__fields">
|
||||
<div class="address_form__fields__header"></div>
|
||||
<div class="address_form__fields__left"></div>
|
||||
<div class="address_form__fields__right"></div>
|
||||
</div>
|
||||
|
||||
à discuter,
|
||||
mais je pense qu'il est préférable de profiter de l'imbriquation des classes css
|
||||
|
||||
div.address_form {
|
||||
div.select {
|
||||
div.header {}
|
||||
div.left {}
|
||||
div.map {}
|
||||
}
|
||||
}
|
||||
|
||||
-->
|
||||
|
||||
</template>
|
||||
|
||||
<template v-slot:footer>
|
||||
<button class="sc-button green"
|
||||
<button class="sc-button green"
|
||||
@click.prevent="$emit('addNewAddress', { address, modal })">
|
||||
<i class="fa fa-plus fa-fw"></i>{{ $t('action.add')}}
|
||||
</button>
|
||||
@@ -155,49 +143,47 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getCountries();
|
||||
},
|
||||
methods: {
|
||||
openModal() {
|
||||
this.modal.showModal = true;
|
||||
this.resetAll();
|
||||
this.getCountries();
|
||||
|
||||
//this.$nextTick(function() {
|
||||
// this.$refs.search.focus(); // positionner le curseur à l'ouverture de la modale
|
||||
//})
|
||||
},
|
||||
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);
|
||||
// });
|
||||
fetchCountries().then(countries => new Promise((resolve, reject) => {
|
||||
this.address.loaded.countries = countries.results;
|
||||
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);
|
||||
// });
|
||||
fetchCities(country).then(cities => new Promise((resolve, reject) => {
|
||||
this.address.loaded.cities = cities.results;
|
||||
resolve()
|
||||
}))
|
||||
.catch((error) => {
|
||||
this.errorMsg.push(error.message);
|
||||
});
|
||||
},
|
||||
getReferenceAddresses(city) {
|
||||
console.log('getReferenceAddresses for', city.name);
|
||||
fetchReferenceAddresses(city) // il me semble que le paramètre city va limiter le poids des adresses de références reçues
|
||||
.then(addresses => new Promise((resolve, reject) => {
|
||||
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);
|
||||
});
|
||||
.catch((error) => {
|
||||
this.errorMsg.push(error.message);
|
||||
});
|
||||
},
|
||||
updateMapCenter(point) {
|
||||
console.log('point', point);
|
||||
@@ -208,7 +194,7 @@ export default {
|
||||
resetAll() {
|
||||
console.log('reset all selected');
|
||||
this.address.loaded.addresses = [];
|
||||
this.address.selected.address = {};
|
||||
this.address.selected.address = {};
|
||||
this.address.loaded.cities = [];
|
||||
this.address.selected.city = {};
|
||||
this.address.selected.country = {};
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div id='address_map' style='height:400px; width:400px;'></div>
|
||||
<div id='address_map'></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -11,6 +11,7 @@ import markerIconPng from 'leaflet/dist/images/marker-icon.png'
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
|
||||
let map;
|
||||
let marker;
|
||||
|
||||
export default {
|
||||
name: 'AddressMap',
|
||||
@@ -30,13 +31,15 @@ export default {
|
||||
|
||||
const markerIcon = L.icon({
|
||||
iconUrl: markerIconPng,
|
||||
iconAnchor: [12, 41],
|
||||
});
|
||||
|
||||
L.marker([48.8589, 2.3469], {icon: markerIcon}).addTo(map);
|
||||
marker = L.marker([48.8589, 2.3469], {icon: markerIcon}).addTo(map);
|
||||
|
||||
},
|
||||
update() {
|
||||
console.log('update map with : ', this.address.addressMap.center)
|
||||
marker.setLatLng(this.address.addressMap.center);
|
||||
map.setView(this.address.addressMap.center, 12);
|
||||
}
|
||||
},
|
||||
|
||||
@@ -1,38 +1,56 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<select
|
||||
v-model="selected">
|
||||
<option :value="{}" disabled selected>{{ $t('select_address') }}</option>
|
||||
<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>
|
||||
<VueMultiselect
|
||||
v-model="value"
|
||||
@select="selectAddress"
|
||||
name="field"
|
||||
track-by="id"
|
||||
label="value"
|
||||
:custom-label="transName"
|
||||
:taggable="true"
|
||||
:multiple="false"
|
||||
@tag="addAddress"
|
||||
:placeholder="$t('select_address')"
|
||||
:tagPlaceholder="$t('create_address')"
|
||||
:options="addresses">
|
||||
</VueMultiselect>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueMultiselect from 'vue-multiselect';
|
||||
|
||||
export default {
|
||||
name: 'AddressSelection',
|
||||
components: { VueMultiselect },
|
||||
props: ['address', 'updateMapCenter'],
|
||||
data() {
|
||||
return {
|
||||
value: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
addresses() {
|
||||
return this.address.loaded.addresses;
|
||||
addresses() {
|
||||
return this.address.loaded.addresses;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
transName(value) {
|
||||
return value.streetNumber === undefined ? value.street : `${value.street}, ${value.streetNumber}`
|
||||
},
|
||||
selected: {
|
||||
set(value) {
|
||||
console.log('selected value', value);
|
||||
this.address.selected.address = value;
|
||||
this.updateMapCenter(value.point);
|
||||
},
|
||||
get() {
|
||||
return this.address.selected.address;
|
||||
}
|
||||
selectAddress(value) {
|
||||
this.address.selected.address = value;
|
||||
this.updateMapCenter(value.point);
|
||||
},
|
||||
addAddress (newAddress) {
|
||||
const address = {
|
||||
street: newAddress
|
||||
};
|
||||
this.value = address;
|
||||
this.address.selected.address = address;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style src="vue-multiselect/dist/vue-multiselect.css"></style>
|
||||
|
||||
@@ -1,38 +1,45 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<select
|
||||
v-model="selected">
|
||||
<option :value="{}" disabled selected>{{ $t('select_city') }}</option>
|
||||
<option
|
||||
v-for="item in this.cities"
|
||||
v-bind:item="item"
|
||||
v-bind:key="item.id"
|
||||
v-bind:value="item">
|
||||
{{ item.code }}-{{ item.name }}
|
||||
</option>
|
||||
</select>
|
||||
<VueMultiselect
|
||||
v-model="value"
|
||||
@select="selectCity"
|
||||
name="field"
|
||||
track-by="id"
|
||||
label="value"
|
||||
:custom-label="transName"
|
||||
:placeholder="$t('select_city')"
|
||||
:options="cities">
|
||||
</VueMultiselect>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueMultiselect from 'vue-multiselect';
|
||||
|
||||
export default {
|
||||
name: 'CitySelection',
|
||||
components: { VueMultiselect },
|
||||
props: ['address', 'getReferenceAddresses'],
|
||||
data() {
|
||||
return {
|
||||
value: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
transName(value) {
|
||||
return `${value.code}-${value.name}`
|
||||
},
|
||||
selectCity(value) {
|
||||
this.address.selected.city = value;
|
||||
this.getReferenceAddresses(value);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
cities() {
|
||||
return this.address.loaded.cities;
|
||||
},
|
||||
selected: {
|
||||
set(value) {
|
||||
console.log('selected value', value.name);
|
||||
this.address.selected.city = value;
|
||||
this.getReferenceAddresses(value);
|
||||
},
|
||||
get() {
|
||||
return this.address.selected.city;
|
||||
}
|
||||
},
|
||||
cities() {
|
||||
return this.address.loaded.cities;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style src="vue-multiselect/dist/vue-multiselect.css"></style>
|
||||
|
||||
@@ -1,38 +1,59 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<select
|
||||
v-model="selected">
|
||||
<option :value="{}" disabled selected>{{ $t('select_country') }}</option>
|
||||
<option
|
||||
v-for="item in this.countries"
|
||||
v-bind:item="item"
|
||||
v-bind:key="item.id"
|
||||
v-bind:value="item">
|
||||
{{ item.name }}
|
||||
</option>
|
||||
</select>
|
||||
<VueMultiselect
|
||||
v-model="value"
|
||||
name="field"
|
||||
track-by="id"
|
||||
label="name"
|
||||
:custom-label="transName"
|
||||
:placeholder="$t('select_country')"
|
||||
:options="countries"
|
||||
@select="selectCountry">
|
||||
</VueMultiselect>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueMultiselect from 'vue-multiselect';
|
||||
|
||||
export default {
|
||||
name: 'CountrySelection',
|
||||
components: { VueMultiselect },
|
||||
props: ['address', 'getCities'],
|
||||
computed: {
|
||||
countries() {
|
||||
return this.address.loaded.countries;
|
||||
},
|
||||
selected: {
|
||||
set(value) {
|
||||
console.log('selected value', value.name);
|
||||
this.address.selected.country = value;
|
||||
this.getCities(value);
|
||||
},
|
||||
get() {
|
||||
return this.address.selected.country;
|
||||
data() {
|
||||
return {
|
||||
value: this.address.loaded.countries.filter(c => c.countryCode === 'FR')[0]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (this.value !== undefined) {
|
||||
this.getCities(this.value);
|
||||
}
|
||||
},
|
||||
transName ({ name }) {
|
||||
return name.fr //TODO multilang
|
||||
},
|
||||
selectCountry(value) {
|
||||
console.log(value);
|
||||
this.address.selected.country = value;
|
||||
this.getCities(value);
|
||||
},
|
||||
},
|
||||
mounted(){
|
||||
this.init()
|
||||
},
|
||||
computed: {
|
||||
countries() {
|
||||
const countries = this.address.loaded.countries;
|
||||
let orderedCountries = [];
|
||||
orderedCountries.push(...countries.filter(c => c.countryCode === 'FR'))
|
||||
orderedCountries.push(...countries.filter(c => c.countryCode === 'BE'))
|
||||
orderedCountries.push(...countries.filter(c => c.countryCode !== 'FR').filter(c => c.countryCode !== 'BE'))
|
||||
return orderedCountries;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style src="vue-multiselect/dist/vue-multiselect.css"></style>
|
||||
|
||||
Reference in New Issue
Block a user