address: display error message if some fields are empty

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

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

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

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

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

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

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

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