address: add field validation (WIP)

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue

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

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue

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

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CountrySelection.vue

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

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue

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