address: add maxlength, upd default map center and add loader messages in addresses form

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue

@@ -26,6 +26,12 @@
       <div v-if="errors.length > 0">
          {{ errors }}
       </div>
+      <div v-if="loading">
+            {{ $t('loading') }}
+      </div>
+      <div v-if="success">
+            {{ $t('person_address_creation_success') }}
+      </div>
    </div>
 
    <div>
@@ -68,6 +74,12 @@ export default {
       },
       errors() {
          return this.$store.state.errorMsg;
+      },
+      loading() {
+         return this.$store.state.loading;
+      },
+      success() {
+         return this.$store.state.success;
       }
    },
    methods: {

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/js/i18n.js

@@ -26,7 +26,9 @@ const addressMessages = {
       date: 'Date de la nouvelle adresse',
       add_an_address_to_person: 'Ajouter l\'adresse à la personne',
       validFrom: 'Date de la nouvelle adresse',
-      back_to_the_list: 'Retour à la liste'
+      back_to_the_list: 'Retour à la liste',
+      person_address_creation_success: 'La nouvelle adresse de la personne est enregistrée',
+      loading: 'chargement en cours...'
    }
 };
 

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/store/index.js

@@ -11,7 +11,9 @@ const store = createStore({
       address: {},
       editAddress: {}, //TODO or should be address?
       person: {},
-      errorMsg: []
+      errorMsg: [],
+      loading: false,
+      success: false
    },
    getters: {
    },
@@ -39,11 +41,17 @@ const store = createStore({
          console.log('@M getEditAddress address', address);
          state.editAddress = address;
       },
+      setLoading(state, b) {
+         state.loading = b;
+      },
+      setSuccess(state, b) {
+         state.success = b;
+      }
    },
    actions: {
       addAddress({ commit }, payload) {
          console.log('@A addAddress payload', payload);
-
+         commit('setLoading', true);
          if('newPostalCode' in payload){
             let postalCodeBody = payload.newPostalCode;
             postalCodeBody = Object.assign(postalCodeBody, {'origin': 3});
@@ -55,9 +63,11 @@ const store = createStore({
                      .then(address => new Promise((resolve, reject) => {
                         commit('addAddress', address);
                         resolve();
+                        commit('setLoading', false);
                      }))
                      .catch((error) => {
                         commit('catchError', error);
+                        commit('setLoading', false);
                      });
                })
 
@@ -66,15 +76,17 @@ const store = createStore({
                .then(address => new Promise((resolve, reject) => {
                   commit('addAddress', address);
                   resolve();
+                  commit('setLoading', false);
                }))
                .catch((error) => {
                   commit('catchError', error);
+                  commit('setLoading', false);
                });
          }
       },
       addDateToAddressAndAddressToPerson({ commit }, payload) {
          console.log('@A addDateToAddressAndAddressToPerson payload', payload);
-
+         commit('setLoading', true);
          patchAddress(payload.addressId, payload.body)
             .then(address => new Promise((resolve, reject) => {
                commit('addDateToAddress', address.validFrom);
@@ -84,13 +96,17 @@ const store = createStore({
                   .then(person => new Promise((resolve, reject) => {
                      commit('addAddressToPerson', person);
                      resolve();
+                     commit('setLoading', false);
+                     commit('setSuccess', true);
                }))
                .catch((error) => {
                   commit('catchError', error);
+                  commit('setLoading', false);
                })
             ))
             .catch((error) => {
                commit('catchError', error);
+               commit('setLoading', false);
             });
       },
       updateAddress({ commit }, payload) {

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress.vue

@@ -19,6 +19,10 @@
          <template v-slot:body>
             <div class="address_form">
 
+               <div v-if="loading">
+                  {{ $t('loading') }}
+               </div>
+
                <div class="address_form__header">
                   <h4>{{ $t('select_an_address_title') }}</h4>
                </div>
@@ -110,6 +114,7 @@ export default {
             showModal: false,
             modalDialogClass: "modal-dialog-scrollable modal-xl"
          },
+         loading: false,
          address: {
             writeNewAddress: false,
             writeNewPostalCode: false,
@@ -143,7 +148,7 @@ export default {
             extra: null,
             distribution: null,
          },
-         errorMsg: {}
+         errorMsg: {},
       }
    },
    computed: {
@@ -170,33 +175,42 @@ export default {
       },
       getCountries() {
          console.log('getCountries');
+         this.loading = true;
          fetchCountries().then(countries => new Promise((resolve, reject) => {
              this.address.loaded.countries = countries.results;
              resolve()
+             this.loading = false;
           }))
           .catch((error) => {
              this.errorMsg.push(error.message);
+             this.loading = false;
           });
       },
       getCities(country) {
          console.log('getCities for', country.name);
+         this.loading = true;
          fetchCities(country).then(cities => new Promise((resolve, reject) => {
             this.address.loaded.cities = cities.results.filter(c => c.origin !== 3); // filter out user-defined cities
             resolve();
+            this.loading = false;
          }))
          .catch((error) => {
             this.errorMsg.push(error.message);
+            this.loading = false;
          });
       },
       getReferenceAddresses(city) {
+         this.loading = true;
          console.log('getReferenceAddresses for', city.name);
          fetchReferenceAddresses(city).then(addresses => new Promise((resolve, reject) => {
                console.log('addresses', addresses);
                this.address.loaded.addresses = addresses.results;
                resolve();
+               this.loading = false;
             }))
             .catch((error) => {
                this.errorMsg.push(error.message);
+               this.loading = false;
             });
       },
       updateMapCenter(point) {

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressMap.vue

@@ -23,7 +23,7 @@ export default {
    },
    methods:{
       init() {
-         map = L.map('address_map').setView([48.8589, 2.3469], 12);
+         map = L.map('address_map').setView([46.67059, -1.42683], 12);
 
          L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
             attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressMore.vue

@@ -5,6 +5,7 @@
       <input
          type="text"
          name="floor"
+         maxlength=16
          :placeholder="$t('floor')"
          v-model="floor"/>
       </div>
@@ -13,6 +14,7 @@
       <input
          type="text"
          name="corridor"
+         maxlength=16
          :placeholder="$t('corridor')"
          v-model="corridor"/>
    </div>
@@ -21,6 +23,7 @@
       <input
          type="text"
          name="steps"
+         maxlength=16
          :placeholder="$t('steps')"
          v-model="steps"/>
    </div>
@@ -29,6 +32,7 @@
       <input
          type="text"
          name="flat"
+         maxlength=16
          :placeholder="$t('flat')"
          v-model="flat"/>
    </div>
@@ -37,6 +41,7 @@
       <input
          type="text"
          name="buildingName"
+         maxlength=255
          :placeholder="$t('buildingName')"
          v-model="buildingName"/>
    </div>
@@ -45,6 +50,7 @@
       <input
          type="text"
          name="extra"
+         maxlength=255
          :placeholder="$t('extra')"
          v-model="extra"/>
    </div>
@@ -53,6 +59,7 @@
       <input
          type="text"
          name="distribution"
+         maxlength=255
          :placeholder="$t('distribution')"
          v-model="distribution"/>
    </div>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdAddress/App.vue

@@ -24,6 +24,12 @@
          <div v-if="errors.length > 0">
             {{ errors }}
          </div>
+         <div v-if="loading">
+            {{ $t('loading') }}
+         </div>
+         <div v-if="success">
+            {{ $t('household_address_move_success') }}
+         </div>
       </div>
       <div>
          <ul class="record_actions sticky-form-buttons">
@@ -65,6 +71,12 @@ export default {
       },
       errors() {
          return this.$store.state.errorMsg;
+      },
+      loading() {
+         return this.$store.state.loading;
+      },
+      success() {
+         return this.$store.state.success;
       }
    },
    methods: {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdAddress/js/i18n.js

@@ -7,7 +7,9 @@ const appMessages = {
       add_an_address_to_household: 'Déménager le ménage',
       validFrom: 'Date du déménagement',
       move_date: 'Date du déménagement',
-      back_to_the_list: 'Retour à la liste'
+      back_to_the_list: 'Retour à la liste',
+      household_address_move_success: 'La nouvelle adresse du ménage est enregistrée',
+      loading: 'chargement en cours...'
    }
 };
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdAddress/store/index.js

@@ -12,7 +12,9 @@ const store = createStore({
       newAddress: {},
       household: {},
       validFrom: {},
-      errorMsg: []
+      errorMsg: [],
+      loading: false,
+      success: false
    },
    getters: {
    },
@@ -31,12 +33,18 @@ const store = createStore({
       addDateToAddress(state, validFrom) {
          console.log('@M addDateToAddress address.validFrom', validFrom);
          state.validFrom = validFrom;
+      },
+      setLoading(state, b) {
+         state.loading = b;
+      },
+      setSuccess(state, b) {
+         state.success = b;
       }
    },
    actions: {
       addAddress({ commit }, payload) {
          console.log('@A addAddress payload', payload);
-
+         commit('setLoading', true);
          if('newPostalCode' in payload){
             postPostalCode(payload.newPostalCode)
                .then(postalCode => {
@@ -46,9 +54,11 @@ const store = createStore({
                      .then(address => new Promise((resolve, reject) => {
                         commit('addAddress', address);
                         resolve();
+                        commit('setLoading', false);
                      }))
                      .catch((error) => {
                         commit('catchError', error);
+                        commit('setLoading', false);
                      });
                })
 
@@ -57,15 +67,17 @@ const store = createStore({
                .then(address => new Promise((resolve, reject) => {
                   commit('addAddress', address);
                   resolve();
+                  commit('setLoading', false);
                }))
                .catch((error) => {
                   commit('catchError', error);
+                  commit('setLoading', false);
                });
          }
       },
       addDateToAddressAndAddressToHousehold({ commit }, payload) {
          console.log('@A addDateToAddressAndAddressToHousehold payload', payload);
-
+         commit('setLoading', true);
          patchAddress(payload.addressId, payload.body)
             .then(address => new Promise((resolve, reject) => {
                commit('addDateToAddress', address.validFrom);
@@ -74,14 +86,18 @@ const store = createStore({
                postAddressToHousehold(payload.householdId, payload.addressId)
                   .then(household => new Promise((resolve, reject) => {
                      commit('addAddressToHousehold', household);
+                     commit('setSuccess', true);
+                     commit('setLoading', false);
                      resolve();
                }))
                .catch((error) => {
                   commit('catchError', error);
+                  commit('setLoading', false);
                })
             ))
             .catch((error) => {
                commit('catchError', error);
+               commit('setLoading', false);
             });
       },
    }