address: display error message if some fields are empty

This commit is contained in:
nobohan 2022-01-12 14:47:43 +01:00
parent 49cb154672
commit 0035128138
4 changed files with 43 additions and 13 deletions

View File

@ -98,6 +98,8 @@
v-bind:defaultz="this.defaultz"
v-bind:entity="this.entity"
v-bind:flag="this.flag"
v-bind:errors="this.errors"
v-bind:checkErrors="this.checkErrors"
@getCities="getCities"
@getReferenceAddresses="getReferenceAddresses">
</edit-pane>
@ -123,6 +125,8 @@
v-bind:defaultz="this.defaultz"
v-bind:entity="this.entity"
v-bind:flag="this.flag"
v-bind:errors="this.errors"
v-bind:checkErrors="this.checkErrors"
v-bind:insideModal="false"
@getCities="getCities"
@getReferenceAddresses="getReferenceAddresses">
@ -259,6 +263,7 @@ export default {
success: false,
dirty: false
},
errors: [],
defaultz: {
button: {
text: { create: 'add_an_address_title', edit: 'edit_address' },
@ -530,6 +535,16 @@ export default {
});
},
checkErrors() {
this.errors = [];
if (this.entity.selected.country === null) {
this.errors.push("Un pays doit être sélectionné.");
}
if (this.entity.selected.city === null) {
this.errors.push("Une ville doit être sélectionnée.");
}
},
/*
* Make form ready for new changes
*/

View File

@ -7,6 +7,7 @@
@search-change="listenInputSearch"
ref="citySelector"
@select="selectCity"
@remove="remove"
name="field"
track-by="id"
label="value"
@ -22,7 +23,6 @@
:loading="isLoading"
:options="cities">
</VueMultiselect>
<span class="alert alert-warning" v-if="isEmpty">{{ $t('choose_one_locality') }}</span>
</div>
<div class="custom-postcode row g-1" v-if="writeNewPostcode || (isEnteredCustomCity && !isCitySelectorOpen)">
@ -56,7 +56,7 @@ import { searchCities, fetchCities } from '../../api.js';
export default {
name: 'CitySelection',
components: { VueMultiselect },
props: ['entity', 'context', 'focusOnAddress', 'updateMapCenter', 'flag'],
props: ['entity', 'context', 'focusOnAddress', 'updateMapCenter', 'flag', 'checkErrors'],
emits: ['getReferenceAddresses'],
data() {
return {
@ -74,9 +74,6 @@ export default {
isEnteredCustomCity() {
return this.$data.value !== null && typeof this.$data.value.text !== 'undefined';
},
isEmpty() {
return this.flag.dirty && this.value === null
},
cities() {
return this.entity.loaded.cities.sort(
(a, b) => Number(a.code) - Number(b.code) || a.name > b.name
@ -128,6 +125,11 @@ export default {
this.updateMapCenter(value.center);
}
this.flag.dirty = true;
this.checkErrors();
},
remove() {
this.entity.selected.city = null;
this.checkErrors();
},
listenInputSearch(query) {
if (query.length > 2) {

View File

@ -13,9 +13,9 @@
:deselect-label="$t('multiselect.deselect_label')"
:selected-label="$t('multiselect.selected_label')"
@select="selectCountry"
@remove="remove"
>
</VueMultiselect>
<span class="alert alert-warning" v-if="isEmpty">{{ $t('choose_one_country') }}</span>
</div>
</template>
@ -25,7 +25,7 @@ import VueMultiselect from 'vue-multiselect';
export default {
name: 'CountrySelection',
components: { VueMultiselect },
props: ['context', 'entity', 'flag'],
props: ['context', 'entity', 'flag', 'checkErrors'],
emits: ['getCities'],
data() {
return {
@ -43,9 +43,6 @@ export default {
sortedCountries.push(...countries.filter(c => c.countryCode !== 'FR').filter(c => c.countryCode !== 'BE'))
return sortedCountries;
},
isEmpty() {
return this.flag.dirty && this.value === null
},
},
mounted() {
this.init();
@ -66,7 +63,13 @@ export default {
//console.log('select country', value);
this.entity.selected.country = value;
this.$emit('getCities', value);
}
this.flag.dirty = true;
this.checkErrors();
},
remove() {
this.entity.selected.country = null;
this.checkErrors();
},
}
};

View File

@ -7,6 +7,12 @@
<span class="sr-only">Loading...</span>
</div>
<div v-if="errors.length" class="alert alert-warning" >
<ul>
<li v-for="(e, i) in errors" :key="i">{{ e }}</li>
</ul>
</div>
<h4 class="h3">{{ $t('select_an_address_title') }}</h4>
<div class="row my-3">
<div class="col-lg-6">
@ -26,6 +32,7 @@
v-bind:context="context"
v-bind:entity="entity"
v-bind:flag="flag"
v-bind:checkErrors="checkErrors"
@getCities="$emit('getCities', selected.country)">
</country-selection>
@ -35,6 +42,7 @@
v-bind:focusOnAddress="focusOnAddress"
v-bind:updateMapCenter="updateMapCenter"
v-bind:flag="flag"
v-bind:checkErrors="checkErrors"
@getReferenceAddresses="$emit('getReferenceAddresses', selected.city)">
</city-selection>
@ -101,7 +109,9 @@ export default {
'flag',
'entity',
'errorMsg',
'insideModal'
'insideModal',
'errors',
'checkErrors',
],
emits: ['getCities', 'getReferenceAddresses'],
data() {
@ -130,7 +140,7 @@ export default {
get() {
return this.entity.selected.isNoAddress;
}
}
},
},
methods: {
focusOnAddress() {