address: add field validation (WIP)

This commit is contained in:
nobohan 2022-01-11 20:58:00 +01:00
parent 1a7ec9e396
commit 49cb154672
4 changed files with 19 additions and 7 deletions

View File

@ -256,7 +256,8 @@ export default {
editPane: false,
datePane: false,
loading: false,
success: false
success: false,
dirty: false
},
defaultz: {
button: {

View File

@ -22,6 +22,7 @@
: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)">
@ -55,12 +56,12 @@ import { searchCities, fetchCities } from '../../api.js';
export default {
name: 'CitySelection',
components: { VueMultiselect },
props: ['entity', 'context', 'focusOnAddress', 'updateMapCenter'],
props: ['entity', 'context', 'focusOnAddress', 'updateMapCenter', 'flag'],
emits: ['getReferenceAddresses'],
data() {
return {
value: this.context.edit ? this.entity.address.postcode : null,
isLoading: false
isLoading: false,
}
},
computed: {
@ -73,6 +74,9 @@ 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
@ -123,6 +127,7 @@ export default {
if (value.center) {
this.updateMapCenter(value.center);
}
this.flag.dirty = true;
},
listenInputSearch(query) {
if (query.length > 2) {

View File

@ -12,8 +12,10 @@
:select-label="$t('multiselect.select_label')"
:deselect-label="$t('multiselect.deselect_label')"
:selected-label="$t('multiselect.selected_label')"
@select="selectCountry">
@select="selectCountry"
>
</VueMultiselect>
<span class="alert alert-warning" v-if="isEmpty">{{ $t('choose_one_country') }}</span>
</div>
</template>
@ -23,7 +25,7 @@ import VueMultiselect from 'vue-multiselect';
export default {
name: 'CountrySelection',
components: { VueMultiselect },
props: ['context', 'entity'],
props: ['context', 'entity', 'flag'],
emits: ['getCities'],
data() {
return {
@ -34,14 +36,16 @@ export default {
},
computed: {
sortedCountries() {
//console.log('sorted countries');
const countries = this.entity.loaded.countries;
let sortedCountries = [];
sortedCountries.push(...countries.filter(c => c.countryCode === 'FR'))
sortedCountries.push(...countries.filter(c => c.countryCode === 'BE'))
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();

View File

@ -25,6 +25,7 @@
<country-selection
v-bind:context="context"
v-bind:entity="entity"
v-bind:flag="flag"
@getCities="$emit('getCities', selected.country)">
</country-selection>
@ -33,6 +34,7 @@
v-bind:context="context"
v-bind:focusOnAddress="focusOnAddress"
v-bind:updateMapCenter="updateMapCenter"
v-bind:flag="flag"
@getReferenceAddresses="$emit('getReferenceAddresses', selected.city)">
</city-selection>