fix conflict when merging _77_address_household into master

This commit is contained in:
nobohan
2021-06-17 16:59:55 +02:00
39 changed files with 1850 additions and 215 deletions

View File

@@ -248,6 +248,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 {
@@ -255,13 +258,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%;
}
}
}
}

View File

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

View File

@@ -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'
}
};

View File

@@ -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);
});
},
}
});

View File

@@ -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
};

View File

@@ -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);
}
}

View File

@@ -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(){

View File

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

View File

@@ -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;
}
}
};

View File

@@ -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;
}
}
};

View File

@@ -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 }) {

View File

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