mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
address: add field validation (WIP)
This commit is contained in:
parent
1a7ec9e396
commit
49cb154672
@ -256,7 +256,8 @@ export default {
|
||||
editPane: false,
|
||||
datePane: false,
|
||||
loading: false,
|
||||
success: false
|
||||
success: false,
|
||||
dirty: false
|
||||
},
|
||||
defaultz: {
|
||||
button: {
|
||||
|
@ -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) {
|
||||
|
@ -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();
|
||||
|
@ -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>
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user