address: add maxlength, upd default map center and add loader messages in addresses form

This commit is contained in:
nobohan 2021-06-24 16:02:57 +02:00
parent 91c5cd74f7
commit 36eb247995
9 changed files with 91 additions and 10 deletions

View File

@ -26,6 +26,12 @@
<div v-if="errors.length > 0">
{{ errors }}
</div>
<div v-if="loading">
{{ $t('loading') }}
</div>
<div v-if="success">
{{ $t('person_address_creation_success') }}
</div>
</div>
<div>
@ -68,6 +74,12 @@ export default {
},
errors() {
return this.$store.state.errorMsg;
},
loading() {
return this.$store.state.loading;
},
success() {
return this.$store.state.success;
}
},
methods: {

View File

@ -26,7 +26,9 @@ const addressMessages = {
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'
back_to_the_list: 'Retour à la liste',
person_address_creation_success: 'La nouvelle adresse de la personne est enregistrée',
loading: 'chargement en cours...'
}
};

View File

@ -11,7 +11,9 @@ const store = createStore({
address: {},
editAddress: {}, //TODO or should be address?
person: {},
errorMsg: []
errorMsg: [],
loading: false,
success: false
},
getters: {
},
@ -39,11 +41,17 @@ const store = createStore({
console.log('@M getEditAddress address', address);
state.editAddress = address;
},
setLoading(state, b) {
state.loading = b;
},
setSuccess(state, b) {
state.success = b;
}
},
actions: {
addAddress({ commit }, payload) {
console.log('@A addAddress payload', payload);
commit('setLoading', true);
if('newPostalCode' in payload){
let postalCodeBody = payload.newPostalCode;
postalCodeBody = Object.assign(postalCodeBody, {'origin': 3});
@ -55,9 +63,11 @@ const store = createStore({
.then(address => new Promise((resolve, reject) => {
commit('addAddress', address);
resolve();
commit('setLoading', false);
}))
.catch((error) => {
commit('catchError', error);
commit('setLoading', false);
});
})
@ -66,15 +76,17 @@ const store = createStore({
.then(address => new Promise((resolve, reject) => {
commit('addAddress', address);
resolve();
commit('setLoading', false);
}))
.catch((error) => {
commit('catchError', error);
commit('setLoading', false);
});
}
},
addDateToAddressAndAddressToPerson({ commit }, payload) {
console.log('@A addDateToAddressAndAddressToPerson payload', payload);
commit('setLoading', true);
patchAddress(payload.addressId, payload.body)
.then(address => new Promise((resolve, reject) => {
commit('addDateToAddress', address.validFrom);
@ -84,13 +96,17 @@ const store = createStore({
.then(person => new Promise((resolve, reject) => {
commit('addAddressToPerson', person);
resolve();
commit('setLoading', false);
commit('setSuccess', true);
}))
.catch((error) => {
commit('catchError', error);
commit('setLoading', false);
})
))
.catch((error) => {
commit('catchError', error);
commit('setLoading', false);
});
},
updateAddress({ commit }, payload) {

View File

@ -19,6 +19,10 @@
<template v-slot:body>
<div class="address_form">
<div v-if="loading">
{{ $t('loading') }}
</div>
<div class="address_form__header">
<h4>{{ $t('select_an_address_title') }}</h4>
</div>
@ -110,6 +114,7 @@ export default {
showModal: false,
modalDialogClass: "modal-dialog-scrollable modal-xl"
},
loading: false,
address: {
writeNewAddress: false,
writeNewPostalCode: false,
@ -143,7 +148,7 @@ export default {
extra: null,
distribution: null,
},
errorMsg: {}
errorMsg: {},
}
},
computed: {
@ -170,33 +175,42 @@ export default {
},
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) {

View File

@ -23,7 +23,7 @@ export default {
},
methods:{
init() {
map = L.map('address_map').setView([48.8589, 2.3469], 12);
map = L.map('address_map').setView([46.67059, -1.42683], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'

View File

@ -5,6 +5,7 @@
<input
type="text"
name="floor"
maxlength=16
:placeholder="$t('floor')"
v-model="floor"/>
</div>
@ -13,6 +14,7 @@
<input
type="text"
name="corridor"
maxlength=16
:placeholder="$t('corridor')"
v-model="corridor"/>
</div>
@ -21,6 +23,7 @@
<input
type="text"
name="steps"
maxlength=16
:placeholder="$t('steps')"
v-model="steps"/>
</div>
@ -29,6 +32,7 @@
<input
type="text"
name="flat"
maxlength=16
:placeholder="$t('flat')"
v-model="flat"/>
</div>
@ -37,6 +41,7 @@
<input
type="text"
name="buildingName"
maxlength=255
:placeholder="$t('buildingName')"
v-model="buildingName"/>
</div>
@ -45,6 +50,7 @@
<input
type="text"
name="extra"
maxlength=255
:placeholder="$t('extra')"
v-model="extra"/>
</div>
@ -53,6 +59,7 @@
<input
type="text"
name="distribution"
maxlength=255
:placeholder="$t('distribution')"
v-model="distribution"/>
</div>

View File

@ -24,6 +24,12 @@
<div v-if="errors.length > 0">
{{ errors }}
</div>
<div v-if="loading">
{{ $t('loading') }}
</div>
<div v-if="success">
{{ $t('household_address_move_success') }}
</div>
</div>
<div>
<ul class="record_actions sticky-form-buttons">
@ -65,6 +71,12 @@ export default {
},
errors() {
return this.$store.state.errorMsg;
},
loading() {
return this.$store.state.loading;
},
success() {
return this.$store.state.success;
}
},
methods: {

View File

@ -7,7 +7,9 @@ const appMessages = {
add_an_address_to_household: 'Déménager le ménage',
validFrom: 'Date du déménagement',
move_date: 'Date du déménagement',
back_to_the_list: 'Retour à la liste'
back_to_the_list: 'Retour à la liste',
household_address_move_success: 'La nouvelle adresse du ménage est enregistrée',
loading: 'chargement en cours...'
}
};

View File

@ -12,7 +12,9 @@ const store = createStore({
newAddress: {},
household: {},
validFrom: {},
errorMsg: []
errorMsg: [],
loading: false,
success: false
},
getters: {
},
@ -31,12 +33,18 @@ const store = createStore({
addDateToAddress(state, validFrom) {
console.log('@M addDateToAddress address.validFrom', validFrom);
state.validFrom = validFrom;
},
setLoading(state, b) {
state.loading = b;
},
setSuccess(state, b) {
state.success = b;
}
},
actions: {
addAddress({ commit }, payload) {
console.log('@A addAddress payload', payload);
commit('setLoading', true);
if('newPostalCode' in payload){
postPostalCode(payload.newPostalCode)
.then(postalCode => {
@ -46,9 +54,11 @@ const store = createStore({
.then(address => new Promise((resolve, reject) => {
commit('addAddress', address);
resolve();
commit('setLoading', false);
}))
.catch((error) => {
commit('catchError', error);
commit('setLoading', false);
});
})
@ -57,15 +67,17 @@ const store = createStore({
.then(address => new Promise((resolve, reject) => {
commit('addAddress', address);
resolve();
commit('setLoading', false);
}))
.catch((error) => {
commit('catchError', error);
commit('setLoading', false);
});
}
},
addDateToAddressAndAddressToHousehold({ commit }, payload) {
console.log('@A addDateToAddressAndAddressToHousehold payload', payload);
commit('setLoading', true);
patchAddress(payload.addressId, payload.body)
.then(address => new Promise((resolve, reject) => {
commit('addDateToAddress', address.validFrom);
@ -74,14 +86,18 @@ const store = createStore({
postAddressToHousehold(payload.householdId, payload.addressId)
.then(household => new Promise((resolve, reject) => {
commit('addAddressToHousehold', household);
commit('setSuccess', true);
commit('setLoading', false);
resolve();
}))
.catch((error) => {
commit('catchError', error);
commit('setLoading', false);
})
))
.catch((error) => {
commit('catchError', error);
commit('setLoading', false);
});
},
}