mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-08-21 15:13:50 +00:00
Merge remote-tracking branch 'origin/master' into features/household-validation
This commit is contained in:
@@ -252,6 +252,9 @@ div.address_form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
div.custom-address, div.custom-postcode {
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
div.address_form__select__map {
|
||||
@@ -259,13 +262,20 @@ div.address_form {
|
||||
div#address_map {
|
||||
height:400px;
|
||||
width:400px;
|
||||
input {
|
||||
border: 1px solid #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div.address_form__more {
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
& > label {
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,33 +1,73 @@
|
||||
<template>
|
||||
|
||||
<div v-if="address.address">
|
||||
{{ address.address.street }}, {{ address.address.streetNumber }}
|
||||
<div class='person__address__create'>
|
||||
<div>
|
||||
<h2 v-if="!edit">{{ $t('create_a_new_address') }}</h2>
|
||||
<h2 v-else>{{ $t('edit_a_new_address') }}</h2>
|
||||
<add-address
|
||||
@addNewAddress="addNewAddress">
|
||||
</add-address>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<show-address
|
||||
v-if="address"
|
||||
v-bind:address="address">
|
||||
</show-address>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="address.city">
|
||||
{{ address.city.code }} {{ address.city.name }}
|
||||
</div>
|
||||
<div v-if="address.country">
|
||||
{{ address.country.name }}
|
||||
<div v-if="!edit" class='person__address__valid'>
|
||||
<h2>{{ $t('date') }}</h2>
|
||||
<input
|
||||
type="date"
|
||||
name="validFrom"
|
||||
:placeholder="$t('validFrom')"
|
||||
v-model="validFrom"/>
|
||||
<div v-if="errors.length > 0">
|
||||
{{ errors }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<ul class="record_actions sticky-form-buttons">
|
||||
<li class="cancel">
|
||||
<a :href=backUrl class="sc-button bt-cancel">{{ $t('back_to_the_list') }}</a>
|
||||
</li>
|
||||
<li v-if="!edit">
|
||||
<button type="submit" class="sc-button bt-update centered" @click="addToPerson">
|
||||
{{ $t('add_an_address_to_person') }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<add-address
|
||||
@addNewAddress="addNewAddress">
|
||||
</add-address>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
import AddAddress from '../_components/AddAddress.vue';
|
||||
import ShowAddress from '../_components/ShowAddress.vue';
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
AddAddress
|
||||
AddAddress,
|
||||
ShowAddress
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
edit: window.mode === 'edit',
|
||||
personId: window.personId,
|
||||
addressId: window.addressId,
|
||||
backUrl: `/fr/person/${window.personId}/address/list`, //TODO better way to pass this
|
||||
validFrom: new Date().toISOString().split('T')[0]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
address() {
|
||||
return this.$store.state.address;
|
||||
},
|
||||
errors() {
|
||||
return this.$store.state.errorMsg;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -36,9 +76,9 @@ export default {
|
||||
|
||||
let newAddress = {
|
||||
'isNoAddress': address.isNoAddress,
|
||||
'street': address.selected.address.street,
|
||||
'streetNumber': address.selected.address.streetNumber,
|
||||
'postcode': {'id': address.selected.city.id },
|
||||
'street': address.isNoAddress ? '' : address.street,
|
||||
'streetNumber': address.isNoAddress ? '' : address.streetNumber,
|
||||
'postcode': {'id': address.selected.city.id},
|
||||
'floor': address.floor,
|
||||
'corridor': address.corridor,
|
||||
'steps': address.steps,
|
||||
@@ -49,12 +89,47 @@ export default {
|
||||
};
|
||||
|
||||
if (address.selected.address.point !== undefined){
|
||||
newAddress = Object.assign(newAddress, {'point': address.selected.address.point.coordinates});
|
||||
newAddress = Object.assign(newAddress, {
|
||||
'point': address.selected.address.point.coordinates
|
||||
});
|
||||
}
|
||||
|
||||
if (address.writeNewPostalCode){
|
||||
let newPostalCode = address.newPostalCode;
|
||||
newPostalCode = Object.assign(newPostalCode, {
|
||||
'country': {'id': address.selected.country.id },
|
||||
});
|
||||
newAddress = Object.assign(newAddress, {
|
||||
'newPostalCode': newPostalCode
|
||||
});
|
||||
}
|
||||
|
||||
if (this.edit){
|
||||
this.$store.dispatch('updateAddress', {
|
||||
addressId: this.addressId,
|
||||
newAddress: newAddress
|
||||
});
|
||||
} else {
|
||||
this.$store.dispatch('addAddress', newAddress);
|
||||
}
|
||||
|
||||
this.$store.dispatch('addAddress', newAddress);
|
||||
modal.showModal = false;
|
||||
},
|
||||
addToPerson() {
|
||||
this.$store.dispatch('addDateToAddressAndAddressToPerson', {
|
||||
personId: this.personId,
|
||||
addressId: this.$store.state.address.address_id,
|
||||
body: { validFrom: {datetime: `${this.validFrom}T00:00:00+0100`}}
|
||||
})
|
||||
},
|
||||
getEditAddress() {
|
||||
this.$store.dispatch('getEditAddress', this.addressId);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.edit) {
|
||||
this.getEditAddress();
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,20 +1,32 @@
|
||||
const addressMessages = {
|
||||
fr: {
|
||||
add_an_address_title: 'Ajouter une adresse',
|
||||
add_an_address_title: 'Créer une adresse',
|
||||
edit_an_address_title: 'Modifier une adresse',
|
||||
create_a_new_address: 'Créer une nouvelle adresse',
|
||||
edit_a_new_address: 'Modifier l\'adresse',
|
||||
select_an_address_title: 'Sélectionner une adresse',
|
||||
fill_an_address: 'Compléter l\'adresse',
|
||||
select_country: 'Choisir le pays',
|
||||
select_city: 'Choisir une localité',
|
||||
select_address: 'Choisir une adresse',
|
||||
create_address: 'Appuyer sur "Entrée" pour créer une nouvelle adresse',
|
||||
create_address: 'Adresse inconnue. Cliquez ici pour créer une nouvelle adresse',
|
||||
isNoAddress: 'Pas d\'adresse complète',
|
||||
street: 'Nom de rue',
|
||||
streetNumber: 'Numéro',
|
||||
floor: 'Étage',
|
||||
corridor: 'Couloir',
|
||||
steps: 'Escalier',
|
||||
flat: 'Appartement',
|
||||
buildingName: 'Nom du batiment',
|
||||
extra: 'Complément d\'adresse',
|
||||
distribution: 'Service particulier de distribution'
|
||||
distribution: 'Service particulier de distribution',
|
||||
create_postal_code: 'Localité inconnue. Cliquez ici pour créer une nouvelle localité',
|
||||
postalCode_name: 'Nom de la localité',
|
||||
postalCode_code: 'Code postal de la localité',
|
||||
date: 'Date de la nouvelle adresse',
|
||||
add_an_address_to_person: 'Ajouter l\'adresse à la personne',
|
||||
validFrom: 'Date de la nouvelle adresse',
|
||||
back_to_the_list: 'Retour à la liste'
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import 'es6-promise/auto';
|
||||
import { createStore } from 'vuex';
|
||||
|
||||
import { postAddress } from '../../_api/AddAddress'
|
||||
import { patchAddress, postAddress, postPostalCode, postAddressToPerson, getAddress } from '../../_api/AddAddress'
|
||||
|
||||
const debug = process.env.NODE_ENV !== 'production';
|
||||
|
||||
@@ -9,6 +9,8 @@ const store = createStore({
|
||||
strict: debug,
|
||||
state: {
|
||||
address: {},
|
||||
editAddress: {}, //TODO or should be address?
|
||||
person: {},
|
||||
errorMsg: []
|
||||
},
|
||||
getters: {
|
||||
@@ -20,25 +22,119 @@ const store = createStore({
|
||||
addAddress(state, address) {
|
||||
console.log('@M addAddress address', address);
|
||||
state.address = address;
|
||||
}
|
||||
},
|
||||
updateAddress(state, address) {
|
||||
console.log('@M updateAddress address', address);
|
||||
state.address = address;
|
||||
},
|
||||
addAddressToPerson(state, person) {
|
||||
console.log('@M addAddressToPerson person', person);
|
||||
state.person = person;
|
||||
},
|
||||
addDateToAddress(state, validFrom) {
|
||||
console.log('@M addDateToAddress address.validFrom', validFrom);
|
||||
state.validFrom = validFrom;
|
||||
},
|
||||
getEditAddress(state, address) {
|
||||
console.log('@M getEditAddress address', address);
|
||||
state.editAddress = address;
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
addAddress({ commit }, payload) {
|
||||
console.log('@A addAddress payload', payload);
|
||||
//commit('addAddress', payload); // à remplacer par la suite
|
||||
|
||||
//fetch POST qui envoie l'adresse, et récupère la confirmation que c'est ok.
|
||||
//La confirmation est l'adresse elle-même.
|
||||
if('newPostalCode' in payload){
|
||||
let postalCodeBody = payload.newPostalCode;
|
||||
postalCodeBody = Object.assign(postalCodeBody, {'origin': 3});
|
||||
postPostalCode(postalCodeBody)
|
||||
.then(postalCode => {
|
||||
let body = payload;
|
||||
body.postcode = {'id': postalCode.id},
|
||||
postAddress(body)
|
||||
.then(address => new Promise((resolve, reject) => {
|
||||
commit('addAddress', address);
|
||||
resolve();
|
||||
}))
|
||||
.catch((error) => {
|
||||
commit('catchError', error);
|
||||
});
|
||||
})
|
||||
|
||||
postAddress(payload)
|
||||
} else {
|
||||
postAddress(payload)
|
||||
.then(address => new Promise((resolve, reject) => {
|
||||
commit('addAddress', address);
|
||||
resolve();
|
||||
}))
|
||||
.catch((error) => {
|
||||
commit('catchError', error);
|
||||
});
|
||||
}
|
||||
},
|
||||
addDateToAddressAndAddressToPerson({ commit }, payload) {
|
||||
console.log('@A addDateToAddressAndAddressToPerson payload', payload);
|
||||
|
||||
patchAddress(payload.addressId, payload.body)
|
||||
.then(address => new Promise((resolve, reject) => {
|
||||
commit('addAddress', address);
|
||||
commit('addDateToAddress', address.validFrom);
|
||||
resolve();
|
||||
}))
|
||||
}).then(
|
||||
postAddressToPerson(payload.personId, payload.addressId)
|
||||
.then(person => new Promise((resolve, reject) => {
|
||||
commit('addAddressToPerson', person);
|
||||
resolve();
|
||||
}))
|
||||
.catch((error) => {
|
||||
commit('catchError', error);
|
||||
})
|
||||
))
|
||||
.catch((error) => {
|
||||
commit('catchError', error);
|
||||
});
|
||||
}
|
||||
},
|
||||
updateAddress({ commit }, payload) {
|
||||
console.log('@A updateAddress payload', payload);
|
||||
|
||||
if('newPostalCode' in payload.newAddress){ // TODO change the condition because it writes new postal code in edit mode now: !writeNewPostalCode
|
||||
let postalCodeBody = payload.newAddress.newPostalCode;
|
||||
postalCodeBody = Object.assign(postalCodeBody, {'origin': 3});
|
||||
postPostalCode(postalCodeBody)
|
||||
.then(postalCode => {
|
||||
let body = payload.newAddress;
|
||||
body.postcode = {'id': postalCode.id },
|
||||
patchAddress(payload.addressId, body)
|
||||
.then(address => new Promise((resolve, reject) => {
|
||||
commit('updateAddress', address);
|
||||
resolve();
|
||||
}))
|
||||
.catch((error) => {
|
||||
commit('catchError', error);
|
||||
});
|
||||
})
|
||||
|
||||
} else {
|
||||
patchAddress(payload.addressId, payload.newAddress)
|
||||
.then(address => new Promise((resolve, reject) => {
|
||||
commit('updateAddress', address);
|
||||
resolve();
|
||||
}))
|
||||
.catch((error) => {
|
||||
commit('catchError', error);
|
||||
});
|
||||
}
|
||||
},
|
||||
getEditAddress({ commit }, payload) {
|
||||
console.log('@A getEditAddress payload', payload);
|
||||
|
||||
getAddress(payload).then(address => new Promise((resolve, reject) => {
|
||||
commit('getEditAddress', address);
|
||||
resolve();
|
||||
}))
|
||||
.catch((error) => {
|
||||
commit('catchError', error);
|
||||
});
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -36,7 +36,6 @@ const fetchCities = (country) => {
|
||||
*/
|
||||
const fetchReferenceAddresses = (postalCode) => {
|
||||
console.log('<<< fetching references addresses for', postalCode);
|
||||
//TODO deal with huge number of addresses... we should do suggestion...
|
||||
const url = `/api/1.0/main/address-reference.json?item_per_page=1000&postal_code=${postalCode.id}`;
|
||||
return fetch(url)
|
||||
.then(response => {
|
||||
@@ -45,16 +44,75 @@ const fetchReferenceAddresses = (postalCode) => {
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* Endpoint chill_api_single_address_reference__index
|
||||
* method GET, get AddressReference Object
|
||||
* @returns {Promise} a promise containing all AddressReference objects filtered with postal code
|
||||
*/
|
||||
const fetchAddresses = () => {
|
||||
console.log('<<< fetching addresses');
|
||||
//TODO deal with huge number of addresses... we should do suggestion...
|
||||
const url = `/api/1.0/main/address.json?item_per_page=1000`;
|
||||
return fetch(url)
|
||||
.then(response => {
|
||||
if (response.ok) { return response.json(); }
|
||||
throw Error('Error with request resource response');
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* Endpoint chill_api_single_address__entity__create
|
||||
* method POST, post Address Object
|
||||
* @returns {Promise}
|
||||
*/
|
||||
const postAddress = (address) => {
|
||||
console.log(address);
|
||||
const url = `/api/1.0/main/address.json?`;
|
||||
const body = address;
|
||||
|
||||
return fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json;charset=utf-8'
|
||||
},
|
||||
body: JSON.stringify(body)
|
||||
}).then(response => {
|
||||
if (response.ok) { return response.json(); }
|
||||
throw Error('Error with request resource response');
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
* Endpoint chill_api_single_address__entity__create
|
||||
* method PATCH, patch Address Instance
|
||||
*
|
||||
* @id integer - id of address
|
||||
* @body Object - dictionary with changes to post
|
||||
*/
|
||||
const patchAddress = (id, body) => {
|
||||
const url = `/api/1.0/main/address/${id}.json`;
|
||||
return fetch(url, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/json;charset=utf-8'
|
||||
},
|
||||
body: JSON.stringify(body)
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) { return response.json(); }
|
||||
throw Error('Error with request resource response');
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* Endpoint chill_api_single_postal_code__entity_create
|
||||
* method POST, post Postal Code Object
|
||||
* @returns {Promise}
|
||||
*/
|
||||
const postPostalCode = (postalCode) => {
|
||||
const url = `/api/1.0/main/postal-code.json?`;
|
||||
const body = postalCode;
|
||||
|
||||
return fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
@@ -67,9 +125,55 @@ const postAddress = (address) => {
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* Endpoint chill_api_single_person_address
|
||||
* method POST, post Person instance
|
||||
*
|
||||
* @id integer - id of Person
|
||||
* @body Object - dictionary with changes to post
|
||||
*/
|
||||
const postAddressToPerson = (personId, addressId) => {
|
||||
console.log(personId);
|
||||
console.log(addressId);
|
||||
const body = {
|
||||
'id': addressId
|
||||
};
|
||||
const url = `/api/1.0/person/person/${personId}/address.json`
|
||||
return fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json;charset=utf-8'},
|
||||
body: JSON.stringify(body)
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) { return response.json(); }
|
||||
throw Error('Error with request resource response');
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* Endpoint chill_api_single_address__index
|
||||
* method GET, get Address Object
|
||||
* @params {id} the address id
|
||||
* @returns {Promise} a promise containing a Address object
|
||||
*/
|
||||
const getAddress = (id) => {
|
||||
console.log('<<< get address');
|
||||
const url = `/api/1.0/main/address/${id}.json`;
|
||||
return fetch(url)
|
||||
.then(response => {
|
||||
if (response.ok) { return response.json(); }
|
||||
throw Error('Error with request resource response');
|
||||
});
|
||||
};
|
||||
|
||||
export {
|
||||
fetchCountries,
|
||||
fetchCities,
|
||||
fetchReferenceAddresses,
|
||||
postAddress
|
||||
fetchAddresses,
|
||||
postAddress,
|
||||
patchAddress,
|
||||
postPostalCode,
|
||||
postAddressToPerson,
|
||||
getAddress
|
||||
};
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
<template>
|
||||
<button class="sc-button bt-create centered mt-4" @click="openModal">
|
||||
<button v-if="!edit" class="sc-button bt-create mt-4" @click="openModal">
|
||||
{{ $t('add_an_address_title') }}
|
||||
</button>
|
||||
<button v-else class="sc-button bt-create mt-4" @click="openModal">
|
||||
{{ $t('edit_an_address_title') }}
|
||||
</button>
|
||||
|
||||
<teleport to="body">
|
||||
<modal v-if="modal.showModal"
|
||||
@@ -9,7 +12,8 @@
|
||||
@close="modal.showModal = false">
|
||||
|
||||
<template v-slot:header>
|
||||
<h3 class="modal-title">{{ $t('add_an_address_title') }}</h3>
|
||||
<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>
|
||||
@@ -42,6 +46,7 @@
|
||||
</city-selection>
|
||||
|
||||
<address-selection
|
||||
v-if="!isNoAddress"
|
||||
v-bind:address="address"
|
||||
v-bind:updateMapCenter="updateMapCenter">
|
||||
</address-selection>
|
||||
@@ -100,11 +105,14 @@ export default {
|
||||
emits: ['addNewAddress'],
|
||||
data() {
|
||||
return {
|
||||
edit: window.mode === 'edit',
|
||||
modal: {
|
||||
showModal: false,
|
||||
modalDialogClass: "modal-dialog-scrollable modal-xl"
|
||||
},
|
||||
address: {
|
||||
writeNewAddress: false,
|
||||
writeNewPostalCode: false,
|
||||
loaded: {
|
||||
countries: [],
|
||||
cities: [],
|
||||
@@ -115,11 +123,17 @@ export default {
|
||||
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,
|
||||
@@ -167,8 +181,8 @@ export default {
|
||||
getCities(country) {
|
||||
console.log('getCities for', country.name);
|
||||
fetchCities(country).then(cities => new Promise((resolve, reject) => {
|
||||
this.address.loaded.cities = cities.results;
|
||||
resolve()
|
||||
this.address.loaded.cities = cities.results.filter(c => c.origin !== 3); // filter out user-defined cities
|
||||
resolve();
|
||||
}))
|
||||
.catch((error) => {
|
||||
this.errorMsg.push(error.message);
|
||||
@@ -198,6 +212,23 @@ export default {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -40,7 +40,7 @@ export default {
|
||||
update() {
|
||||
console.log('update map with : ', this.address.addressMap.center)
|
||||
marker.setLatLng(this.address.addressMap.center);
|
||||
map.setView(this.address.addressMap.center, 12);
|
||||
map.setView(this.address.addressMap.center, 15);
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
|
||||
@@ -1,37 +1,56 @@
|
||||
<template>
|
||||
<h4>{{ $t('fill_an_address') }}</h4>
|
||||
<div>
|
||||
<h4>{{ $t('fill_an_address') }}</h4>
|
||||
<input
|
||||
<label for="floor">{{ $t('floor') }}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="floor"
|
||||
:placeholder="$t('floor')"
|
||||
v-model="floor"/>
|
||||
<input
|
||||
</div>
|
||||
<div>
|
||||
<label for="corridor">{{ $t('corridor') }}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="corridor"
|
||||
:placeholder="$t('corridor')"
|
||||
v-model="corridor"/>
|
||||
<input
|
||||
</div>
|
||||
<div>
|
||||
<label for="steps">{{ $t('steps') }}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="steps"
|
||||
:placeholder="$t('steps')"
|
||||
v-model="steps"/>
|
||||
<input
|
||||
</div>
|
||||
<div>
|
||||
<label for="flat">{{ $t('flat') }}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="flat"
|
||||
:placeholder="$t('flat')"
|
||||
v-model="flat"/>
|
||||
<input
|
||||
</div>
|
||||
<div>
|
||||
<label for="buildingName">{{ $t('buildingName') }}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="buildingName"
|
||||
:placeholder="$t('buildingName')"
|
||||
v-model="buildingName"/>
|
||||
<input
|
||||
</div>
|
||||
<div>
|
||||
<label for="extra">{{ $t('extra') }}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="extra"
|
||||
:placeholder="$t('extra')"
|
||||
v-model="extra"/>
|
||||
<input
|
||||
</div>
|
||||
<div>
|
||||
<label for="distribution">{{ $t('distribution') }}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="distribution"
|
||||
:placeholder="$t('distribution')"
|
||||
|
||||
@@ -15,6 +15,18 @@
|
||||
:options="addresses">
|
||||
</VueMultiselect>
|
||||
</div>
|
||||
<div class="custom-address" v-if="writeNewAddress || writeNewPostalCode">
|
||||
<input
|
||||
type="text"
|
||||
name="street"
|
||||
:placeholder="$t('street')"
|
||||
v-model="street"/>
|
||||
<input
|
||||
type="text"
|
||||
name="streetNumber"
|
||||
:placeholder="$t('streetNumber')"
|
||||
v-model="streetNumber"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -30,9 +42,31 @@ export default {
|
||||
}
|
||||
},
|
||||
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) {
|
||||
@@ -40,14 +74,12 @@ export default {
|
||||
},
|
||||
selectAddress(value) {
|
||||
this.address.selected.address = value;
|
||||
this.address.street = value.street;
|
||||
this.address.streetNumber = value.streetNumber;
|
||||
this.updateMapCenter(value.point);
|
||||
},
|
||||
addAddress (newAddress) {
|
||||
const address = {
|
||||
street: newAddress
|
||||
};
|
||||
this.value = address;
|
||||
this.address.selected.address = address;
|
||||
addAddress() {
|
||||
this.address.writeNewAddress = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -8,9 +8,25 @@
|
||||
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" v-if="writeNewPostalCode">
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
:placeholder="$t('postalCode_name')"
|
||||
v-model="name"/>
|
||||
<input
|
||||
type="text"
|
||||
name="code"
|
||||
:placeholder="$t('postalCode_code')"
|
||||
v-model="code"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -25,18 +41,42 @@ export default {
|
||||
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);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
cities() {
|
||||
return this.address.loaded.cities;
|
||||
addPostalCode() {
|
||||
this.address.writeNewPostalCode = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -22,13 +22,18 @@ export default {
|
||||
props: ['address', 'getCities'],
|
||||
data() {
|
||||
return {
|
||||
value: this.address.loaded.countries.filter(c => c.countryCode === 'FR')[0]
|
||||
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.getCities(this.value);
|
||||
this.selectCountry(this.value);
|
||||
}
|
||||
},
|
||||
transName ({ name }) {
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'ShowAddress',
|
||||
props: ['address'],
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user