mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-08-20 22:53:49 +00:00
move vue AddAddress inside Address component
This commit is contained in:
@@ -1,272 +0,0 @@
|
||||
<template>
|
||||
<button v-if="!edit" class="btn btn-create mt-4" @click="openModal">
|
||||
{{ $t('add_an_address_title') }}
|
||||
</button>
|
||||
<button v-else class="btn btn-create mt-4" @click="openModal">
|
||||
{{ $t('edit_an_address_title') }}
|
||||
</button>
|
||||
|
||||
<teleport to="body">
|
||||
<modal v-if="modal.showModal"
|
||||
v-bind:modalDialogClass="modal.modalDialogClass"
|
||||
@close="modal.showModal = false">
|
||||
|
||||
<template v-slot:header>
|
||||
<h3 v-if="!edit" class="modal-title">{{ $t('add_an_address_title') }}</h3>
|
||||
<h3 v-if="edit" class="modal-title">{{ $t('edit_an_address_title') }}</h3>
|
||||
</template>
|
||||
|
||||
<template v-slot:body>
|
||||
<div class="address-form">
|
||||
|
||||
<h4 class="h3">{{ $t('select_an_address_title') }}
|
||||
<span v-if="loading">
|
||||
<i class="fa fa-circle-o-notch"></i>
|
||||
</span>
|
||||
</h4>
|
||||
|
||||
<div class="row my-3">
|
||||
<div class="col-lg-6">
|
||||
|
||||
<div class="form-check">
|
||||
<input type="checkbox"
|
||||
class="form-check-input"
|
||||
id="isNoAddress"
|
||||
v-model="isNoAddress"
|
||||
v-bind:value="value" />
|
||||
<label class="form-check-label" for="isNoAddress">
|
||||
{{ $t('isNoAddress') }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<country-selection
|
||||
v-bind:address="address"
|
||||
v-bind:getCities="getCities">
|
||||
</country-selection>
|
||||
|
||||
<city-selection
|
||||
v-bind:address="address"
|
||||
v-bind:focusOnAddress="focusOnAddress"
|
||||
v-bind:getReferenceAddresses="getReferenceAddresses">
|
||||
</city-selection>
|
||||
|
||||
<address-selection
|
||||
v-if="!isNoAddress"
|
||||
v-bind:address="address"
|
||||
v-bind:updateMapCenter="updateMapCenter">
|
||||
</address-selection>
|
||||
|
||||
</div>
|
||||
<div class="col-lg-6 mt-3 mt-lg-0">
|
||||
|
||||
<address-map
|
||||
v-bind:address="address"
|
||||
ref="addressMap">
|
||||
</address-map>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<address-more
|
||||
v-if="!isNoAddress"
|
||||
v-bind:address="address">
|
||||
</address-more>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:footer>
|
||||
<button class="btn btn-create"
|
||||
@click.prevent="$emit('addNewAddress', { address, modal })">
|
||||
{{ $t('action.add')}}
|
||||
</button>
|
||||
</template>
|
||||
|
||||
</modal>
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Modal from './Modal';
|
||||
import { fetchCountries, fetchCities, fetchReferenceAddresses } from '../_api/AddAddress'
|
||||
import CountrySelection from './AddAddress/CountrySelection';
|
||||
import CitySelection from './AddAddress/CitySelection';
|
||||
import AddressSelection from './AddAddress/AddressSelection';
|
||||
import AddressMap from './AddAddress/AddressMap';
|
||||
import AddressMore from './AddAddress/AddressMore'
|
||||
|
||||
export default {
|
||||
name: 'AddAddresses',
|
||||
components: {
|
||||
Modal,
|
||||
CountrySelection,
|
||||
CitySelection,
|
||||
AddressSelection,
|
||||
AddressMap,
|
||||
AddressMore
|
||||
},
|
||||
props: [
|
||||
],
|
||||
emits: ['addNewAddress'],
|
||||
data() {
|
||||
return {
|
||||
edit: window.mode === 'edit',
|
||||
modal: {
|
||||
showModal: false,
|
||||
modalDialogClass: "modal-dialog-scrollable modal-xl"
|
||||
},
|
||||
loading: false,
|
||||
address: {
|
||||
writeNewAddress: false,
|
||||
writeNewPostalCode: false,
|
||||
loaded: {
|
||||
countries: [],
|
||||
cities: [],
|
||||
addresses: [],
|
||||
},
|
||||
selected: {
|
||||
country: {},
|
||||
city: {},
|
||||
address: {},
|
||||
},
|
||||
newPostalCode: {
|
||||
code: null,
|
||||
name: null
|
||||
},
|
||||
addressMap: {
|
||||
center : [48.8589, 2.3469], // Note: LeafletJs demands [lat, lon] cfr https://macwright.com/lonlat/
|
||||
zoom: 12
|
||||
},
|
||||
isNoAddress: false,
|
||||
street: null,
|
||||
streetNumber: null,
|
||||
floor: null,
|
||||
corridor: null,
|
||||
steps: null,
|
||||
floor: null,
|
||||
flat: null,
|
||||
buildingName: null,
|
||||
extra: null,
|
||||
distribution: null,
|
||||
},
|
||||
errorMsg: {},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isNoAddress: {
|
||||
set(value) {
|
||||
console.log('value', value);
|
||||
this.address.isNoAddress = value;
|
||||
},
|
||||
get() {
|
||||
return this.address.isNoAddress;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getCountries();
|
||||
},
|
||||
methods: {
|
||||
openModal() {
|
||||
this.modal.showModal = true;
|
||||
this.resetAll();
|
||||
//this.$nextTick(function() {
|
||||
// this.$refs.search.focus(); // positionner le curseur à l'ouverture de la modale
|
||||
//})
|
||||
},
|
||||
focusOnCity() {
|
||||
const citySelector = document.getElementById('citySelector');
|
||||
citySelector.focus();
|
||||
},
|
||||
focusOnAddress() {
|
||||
const addressSelector = document.getElementById('addressSelector');
|
||||
addressSelector.focus();
|
||||
},
|
||||
getCountries() {
|
||||
console.log('getCountries');
|
||||
this.loading = true;
|
||||
fetchCountries().then(countries => new Promise((resolve, reject) => {
|
||||
this.address.loaded.countries = countries.results;
|
||||
resolve()
|
||||
this.loading = false;
|
||||
}))
|
||||
.catch((error) => {
|
||||
this.errorMsg.push(error.message);
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
getCities(country) {
|
||||
console.log('getCities for', country.name);
|
||||
this.loading = true;
|
||||
fetchCities(country).then(cities => new Promise((resolve, reject) => {
|
||||
this.address.loaded.cities = cities.results.filter(c => c.origin !== 3); // filter out user-defined cities
|
||||
resolve();
|
||||
this.loading = false;
|
||||
}))
|
||||
.catch((error) => {
|
||||
this.errorMsg.push(error.message);
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
getReferenceAddresses(city) {
|
||||
this.loading = true;
|
||||
console.log('getReferenceAddresses for', city.name);
|
||||
fetchReferenceAddresses(city).then(addresses => new Promise((resolve, reject) => {
|
||||
console.log('addresses', addresses);
|
||||
this.address.loaded.addresses = addresses.results;
|
||||
resolve();
|
||||
this.loading = false;
|
||||
}))
|
||||
.catch((error) => {
|
||||
this.errorMsg.push(error.message);
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
updateMapCenter(point) {
|
||||
console.log('point', point);
|
||||
this.address.addressMap.center[0] = point.coordinates[1]; // TODO use reverse()
|
||||
this.address.addressMap.center[1] = point.coordinates[0];
|
||||
this.$refs.addressMap.update(); // cast child methods
|
||||
},
|
||||
resetAll() {
|
||||
console.log('reset all selected');
|
||||
this.address.loaded.addresses = [];
|
||||
this.address.selected.address = {};
|
||||
this.address.loaded.cities = [];
|
||||
this.address.selected.city = {};
|
||||
this.address.selected.country = {};
|
||||
this.address.isNoAddress = this.edit ? this.$store.state.editAddress.isNoAddress: false;;
|
||||
this.address.street = this.edit ? this.$store.state.editAddress.street: null;
|
||||
this.address.streetNumber = this.edit ? this.$store.state.editAddress.streetNumber: null;
|
||||
this.address.floor = this.edit ? this.$store.state.editAddress.floor: null;
|
||||
this.address.corridor = this.edit ? this.$store.state.editAddress.corridor: null;
|
||||
this.address.steps = this.edit ? this.$store.state.editAddress.steps: null;
|
||||
this.address.flat = this.edit ? this.$store.state.editAddress.flat: null;
|
||||
this.address.buildingName = this.edit ? this.$store.state.editAddress.buildingName: null;
|
||||
this.address.distribution = this.edit ? this.$store.state.editAddress.distribution: null;
|
||||
this.address.extra = this.edit ? this.$store.state.editAddress.extra: null;
|
||||
this.address.writeNewAddress = this.edit;
|
||||
this.address.writeNewPostalCode = this.edit;
|
||||
this.address.newPostalCode = this.edit ?
|
||||
{
|
||||
code: this.$store.state.editAddress.postcode !== undefined ? this.$store.state.editAddress.postcode.code : null,
|
||||
name: this.$store.state.editAddress.postcode !== undefined ? this.$store.state.editAddress.postcode.name : null
|
||||
} : {};
|
||||
console.log('cities and addresses', this.address.loaded.cities, this.address.loaded.addresses);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
div.address-form {
|
||||
h4.h3 {
|
||||
font-weight: bold;
|
||||
}
|
||||
div#address_map {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<div id="address_map"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import L from 'leaflet';
|
||||
import markerIconPng from 'leaflet/dist/images/marker-icon.png'
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
|
||||
let map;
|
||||
let marker;
|
||||
|
||||
export default {
|
||||
name: 'AddressMap',
|
||||
props: ['address'],
|
||||
computed: {
|
||||
center() {
|
||||
return this.address.addressMap.center;
|
||||
},
|
||||
},
|
||||
methods:{
|
||||
init() {
|
||||
map = L.map('address_map').setView([46.67059, -1.42683], 12);
|
||||
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
}).addTo(map);
|
||||
|
||||
const markerIcon = L.icon({
|
||||
iconUrl: markerIconPng,
|
||||
iconAnchor: [12, 41],
|
||||
});
|
||||
|
||||
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, 15);
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.init()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,144 +0,0 @@
|
||||
<template>
|
||||
<h4 class="h3">{{ $t('fill_an_address') }}</h4>
|
||||
<div class="row my-3">
|
||||
<div class="col-lg-6">
|
||||
<div class="form-floating my-1">
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
name="floor"
|
||||
maxlength=16
|
||||
:placeholder="$t('floor')"
|
||||
v-model="floor"/>
|
||||
<label for="floor">{{ $t('floor') }}</label>
|
||||
</div>
|
||||
<div class="form-floating my-1">
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
name="corridor"
|
||||
maxlength=16
|
||||
:placeholder="$t('corridor')"
|
||||
v-model="corridor"/>
|
||||
<label for="corridor">{{ $t('corridor') }}</label>
|
||||
</div>
|
||||
<div class="form-floating my-1">
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
name="steps"
|
||||
maxlength=16
|
||||
:placeholder="$t('steps')"
|
||||
v-model="steps"/>
|
||||
<label for="steps">{{ $t('steps') }}</label>
|
||||
</div>
|
||||
<div class="form-floating my-1">
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
name="flat"
|
||||
maxlength=16
|
||||
:placeholder="$t('flat')"
|
||||
v-model="flat"/>
|
||||
<label for="flat">{{ $t('flat') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="form-floating my-1">
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
name="buildingName"
|
||||
maxlength=255
|
||||
:placeholder="$t('buildingName')"
|
||||
v-model="buildingName"/>
|
||||
<label for="buildingName">{{ $t('buildingName') }}</label>
|
||||
</div>
|
||||
<div class="form-floating my-1">
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
name="extra"
|
||||
maxlength=255
|
||||
:placeholder="$t('extra')"
|
||||
v-model="extra"/>
|
||||
<label for="extra">{{ $t('extra') }}</label>
|
||||
</div>
|
||||
<div class="form-floating my-1">
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
name="distribution"
|
||||
maxlength=255
|
||||
:placeholder="$t('distribution')"
|
||||
v-model="distribution"/>
|
||||
<label for="distribution">{{ $t('distribution') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "AddressMore",
|
||||
props: ['address'],
|
||||
computed: {
|
||||
floor: {
|
||||
set(value) {
|
||||
console.log('value', value);
|
||||
this.address.floor = value;
|
||||
},
|
||||
get() {
|
||||
return this.address.floor;
|
||||
}
|
||||
},
|
||||
corridor: {
|
||||
set(value) {
|
||||
console.log('value', value);
|
||||
this.address.corridor = value;
|
||||
},
|
||||
get() {
|
||||
return this.address.corridor;
|
||||
}
|
||||
},
|
||||
steps: {
|
||||
set(value) {
|
||||
console.log('value', value);
|
||||
this.address.steps = value;
|
||||
},
|
||||
get() {
|
||||
return this.address.steps;
|
||||
}
|
||||
},
|
||||
flat: {
|
||||
set(value) {
|
||||
console.log('value', value);
|
||||
this.address.flat = value;
|
||||
},
|
||||
get() {
|
||||
return this.address.flat;
|
||||
}
|
||||
},
|
||||
buildingName: {
|
||||
set(value) {
|
||||
console.log('value', value);
|
||||
this.address.buildingName = value;
|
||||
},
|
||||
get() {
|
||||
return this.address.buildingName;
|
||||
}
|
||||
},
|
||||
extra: {
|
||||
set(value) {
|
||||
console.log('value', value);
|
||||
this.address.extra = value;
|
||||
},
|
||||
get() {
|
||||
return this.address.extra;
|
||||
}
|
||||
},
|
||||
distribution: {
|
||||
set(value) {
|
||||
console.log('value', value);
|
||||
this.address.distribution = value;
|
||||
},
|
||||
get() {
|
||||
return this.address.distribution;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,100 +0,0 @@
|
||||
<template>
|
||||
<div class="my-1">
|
||||
<label class="col-form-label" for="addressSelector">{{ $t('address') }}</label>
|
||||
<VueMultiselect
|
||||
id="addressSelector"
|
||||
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>
|
||||
<div class="custom-address row g-1" v-if="writeNewAddress || writeNewPostalCode">
|
||||
<div class="col-10">
|
||||
<div class="form-floating">
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
name="street"
|
||||
:placeholder="$t('street')"
|
||||
v-model="street"/>
|
||||
<label for="street">{{ $t('street') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="form-floating">
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
name="streetNumber"
|
||||
:placeholder="$t('streetNumber')"
|
||||
v-model="streetNumber"/>
|
||||
<label for="streetNumber">{{ $t('streetNumber') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueMultiselect from 'vue-multiselect';
|
||||
|
||||
export default {
|
||||
name: 'AddressSelection',
|
||||
components: { VueMultiselect },
|
||||
props: ['address', 'updateMapCenter'],
|
||||
data() {
|
||||
return {
|
||||
value: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
writeNewAddress() {
|
||||
return this.address.writeNewAddress;
|
||||
},
|
||||
writeNewPostalCode() {
|
||||
return this.address.writeNewPostalCode;
|
||||
},
|
||||
addresses() {
|
||||
return this.address.loaded.addresses;
|
||||
},
|
||||
street: {
|
||||
set(value) {
|
||||
this.address.street = value;
|
||||
},
|
||||
get() {
|
||||
return this.address.street;
|
||||
}
|
||||
},
|
||||
streetNumber: {
|
||||
set(value) {
|
||||
this.address.streetNumber = value;
|
||||
},
|
||||
get() {
|
||||
return this.address.streetNumber;
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
transName(value) {
|
||||
return value.streetNumber === undefined ? value.street : `${value.streetNumber}, ${value.street}`
|
||||
},
|
||||
selectAddress(value) {
|
||||
this.address.selected.address = value;
|
||||
this.address.street = value.street;
|
||||
this.address.streetNumber = value.streetNumber;
|
||||
this.updateMapCenter(value.point);
|
||||
},
|
||||
addAddress() {
|
||||
this.address.writeNewAddress = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style src="vue-multiselect/dist/vue-multiselect.css"></style>
|
||||
@@ -1,99 +0,0 @@
|
||||
<template>
|
||||
<div class="my-1">
|
||||
<label class="col-form-label" for="citySelector">{{ $t('city') }}</label>
|
||||
<VueMultiselect
|
||||
id="citySelector"
|
||||
v-model="value"
|
||||
@select="selectCity"
|
||||
name="field"
|
||||
track-by="id"
|
||||
label="value"
|
||||
:custom-label="transName"
|
||||
:placeholder="$t('select_city')"
|
||||
:taggable="true"
|
||||
:multiple="false"
|
||||
@tag="addPostalCode"
|
||||
:tagPlaceholder="$t('create_postal_code')"
|
||||
:options="cities">
|
||||
</VueMultiselect>
|
||||
</div>
|
||||
|
||||
<div class="custom-postcode row g-1" v-if="writeNewPostalCode">
|
||||
<div class="col-4">
|
||||
<div class="form-floating">
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
name="code"
|
||||
:placeholder="$t('postalCode_code')"
|
||||
v-model="code"/>
|
||||
<label for="code">{{ $t('postalCode_code') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div class="form-floating">
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
name="name"
|
||||
:placeholder="$t('postalCode_name')"
|
||||
v-model="name"/>
|
||||
<label for="name">{{ $t('postalCode_name') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueMultiselect from 'vue-multiselect';
|
||||
|
||||
export default {
|
||||
name: 'CitySelection',
|
||||
components: { VueMultiselect },
|
||||
props: ['address', 'getReferenceAddresses', 'focusOnAddress'],
|
||||
data() {
|
||||
return {
|
||||
value: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
writeNewPostalCode() {
|
||||
return this.address.writeNewPostalCode;
|
||||
},
|
||||
cities() {
|
||||
return this.address.loaded.cities;
|
||||
},
|
||||
name: {
|
||||
set(value) {
|
||||
this.address.newPostalCode.name = value;
|
||||
},
|
||||
get() {
|
||||
return this.address.newPostalCode.name;
|
||||
}
|
||||
},
|
||||
code: {
|
||||
set(value) {
|
||||
this.address.newPostalCode.code= value;
|
||||
},
|
||||
get() {
|
||||
return this.address.newPostalCode.code;
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
transName(value) {
|
||||
return `${value.code}-${value.name}`
|
||||
},
|
||||
selectCity(value) {
|
||||
this.address.selected.city = value;
|
||||
this.address.newPostalCode.name = value.name;
|
||||
this.address.newPostalCode.code = value.code;
|
||||
this.getReferenceAddresses(value);
|
||||
this.focusOnAddress();
|
||||
},
|
||||
addPostalCode() {
|
||||
this.address.writeNewPostalCode = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style src="vue-multiselect/dist/vue-multiselect.css"></style>
|
||||
@@ -1,64 +0,0 @@
|
||||
<template>
|
||||
<div class="my-1">
|
||||
<label class="col-form-label" for="countrySelect">{{ $t('country') }}</label>
|
||||
<VueMultiselect
|
||||
v-model="value"
|
||||
id="countrySelect"
|
||||
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'],
|
||||
data() {
|
||||
return {
|
||||
edit: window.mode === 'edit',
|
||||
defaultCountry: this.edit ? this.$store.state.editAddress.country.code : 'FR',
|
||||
value: this.address.loaded.countries.filter(c => c.countryCode === this.defaultCountry)[0]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.value = this.edit ?
|
||||
this.address.loaded.countries.filter(c => c.countryCode === this.$store.state.editAddress.country.code)[0]:
|
||||
this.address.loaded.countries.filter(c => c.countryCode === 'FR')[0]
|
||||
if (this.value !== undefined) {
|
||||
this.selectCountry(this.value);
|
||||
}
|
||||
},
|
||||
transName ({ name }) {
|
||||
return name.fr //TODO multilang
|
||||
},
|
||||
selectCountry(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>
|
||||
@@ -1,46 +0,0 @@
|
||||
<template>
|
||||
<div class="chill_address_address chill_address_address--multiline">
|
||||
<div v-if="address.text">
|
||||
{{ address.text }}
|
||||
</div>
|
||||
<div v-if="address.postcode">
|
||||
{{ address.postcode.name }}
|
||||
</div>
|
||||
<div v-if="address.country">
|
||||
{{ address.country.name.fr }}
|
||||
</div>
|
||||
<div v-if="address.floor">
|
||||
<span>{{ $t('floor') }}</span>: {{ address.floor }}
|
||||
</div>
|
||||
<div v-if="address.corridor">
|
||||
<span>{{ $t('corridor') }}</span>: {{ address.corridor }}
|
||||
</div>
|
||||
<div v-if="address.steps">
|
||||
<span>{{ $t('steps') }}</span>: {{ address.steps }}
|
||||
</div>
|
||||
<div v-if="address.flat">
|
||||
<span>{{ $t('flat') }}</span>: {{ address.flat }}
|
||||
</div>
|
||||
<div v-if="address.buildingName">
|
||||
<span>{{ $t('buildingName') }}</span>: {{ address.buildingName }}
|
||||
</div>
|
||||
<div v-if="address.extra">
|
||||
<span>{{ $t('extra') }}</span>: {{ address.extra }}
|
||||
</div>
|
||||
<div v-if="address.distribution">
|
||||
<span>{{ $t('distribution') }}</span>: {{ address.distribution }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'ShowAddress',
|
||||
props: ['address'],
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user