Merge remote-tracking branch 'origin/master' into features/household-validation

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

@@ -0,0 +1,119 @@
+<template>
+   <div class='household__address-move'>
+      <div class='household__address-move__create'>
+         <div>
+            <h2>{{ $t('create_a_new_address') }}</h2>
+            <add-address
+               @addNewAddress="addNewAddress">
+            </add-address>
+         </div>
+         <div>
+            <show-address
+               v-if="newAddress"
+               v-bind:address="newAddress">
+            </show-address>
+         </div>
+      </div>
+      <div class='household__address-move__valid'>
+         <h2>{{ $t('move_date') }}</h2>
+         <input
+            type="date"
+            name="validFrom"
+            :placeholder="$t('validFrom')"
+            v-model="validFrom"/>
+         <div v-if="errors.length > 0">
+            {{ errors }}
+         </div>
+      </div>
+      <div>
+         <ul class="record_actions sticky-form-buttons">
+            <li class="cancel">
+               <a :href=backUrl class="sc-button bt-cancel">{{ $t('back_to_the_list') }}</a>
+            </li>
+            <li>
+               <button type="submit" class="sc-button bt-update centered" @click="addToHousehold">
+                  {{ $t('add_an_address_to_household') }}
+               </button>
+            </li>
+         </ul>
+      </div>
+   </div>
+</template>
+
+<script>
+
+import AddAddress from 'ChillMainAssets/vuejs/_components/AddAddress.vue';
+import ShowAddress from 'ChillMainAssets/vuejs/_components/ShowAddress.vue';
+
+export default {
+   name: 'App',
+   components: {
+      AddAddress,
+      ShowAddress
+   },
+   data() {
+      return {
+         edit: window.mode === 'edit',
+         householdId: window.householdId,
+         backUrl: `/fr/person/household/${householdId}/addresses`, //TODO better way to pass this
+         validFrom: new Date().toISOString().split('T')[0]
+      }
+   },
+   computed: {
+      newAddress() {
+         return this.$store.state.newAddress;
+      },
+      errors() {
+         return this.$store.state.errorMsg;
+      }
+   },
+   methods: {
+      addNewAddress({ address, modal }) {
+         console.log('@@@ CLICK button addNewAdress', address);
+
+         let createdAddress = {
+            'isNoAddress': address.isNoAddress,
+            'street': address.isNoAddress ? '' : address.street,
+            'streetNumber': address.isNoAddress ? '' : address.streetNumber,
+            'postcode': {'id': address.selected.city.id},
+            'floor': address.floor,
+            'corridor': address.corridor,
+            'steps': address.steps,
+            'flat': address.flat,
+            'buildingName': address.buildingName,
+            'distribution': address.distribution,
+            'extra': address.extra
+         };
+
+         if (address.selected.address.point !== undefined){
+            createdAddress = Object.assign(createdAddress, {
+               'point': address.selected.address.point.coordinates
+            });
+         }
+
+         if(address.writeNewPostalCode){
+            let newPostalCode = address.newPostalCode;
+            newPostalCode = Object.assign(newPostalCode, {
+                'country': {'id': address.selected.country.id },
+            });
+            createdAddress = Object.assign(createdAddress, {
+               'newPostalCode': newPostalCode
+            });
+         }
+
+         this.$store.dispatch('addAddress', createdAddress);
+
+         modal.showModal = false;
+      },
+      addToHousehold() {
+        this.$store.dispatch('addDateToAddressAndAddressToHousehold', {
+           householdId: this.householdId,
+           addressId: this.$store.state.newAddress.address_id,
+           body: { validFrom: {datetime: `${this.validFrom}T00:00:00+0100`}}
+        })
+      }
+   }
+};
+
+</script>
+

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

@@ -0,0 +1,23 @@
+/*
+* Endpoint household
+* method POST, post Household instance
+*
+*  @id     integer - id of household
+*  @body   Object - dictionary with changes to post
+*/
+export const postAddressToHousehold = (householdId, addressId) => {
+   const body = {
+      'id': addressId
+   };
+   const url = `/api/1.0/person/household/${householdId}/address.json`
+   return fetch(url, {
+         method: 'POST',
+         headers: {'Content-Type': 'application/json;charset=utf-8'},
+         body: JSON.stringify(body)
+      })
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response');
+      });
+};
+

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdAddress/components/SelectHouseholdAddress.vue

@@ -0,0 +1,47 @@
+<template>
+   <div class="container">
+      <VueMultiselect
+         v-model="value"
+         @select="selectAddress"
+         name="field"
+         track-by="id"
+         label="value"
+         :custom-label="transName"
+         :multiple="false"
+         :placeholder="$t('select_address')"
+         :options="addresses">
+      </VueMultiselect>
+   </div>
+</template>
+
+<script>
+import VueMultiselect from 'vue-multiselect';
+
+export default {
+   name: 'SelectHouseholdAddress',
+   components: { VueMultiselect },
+   props: ['address'],
+   data() {
+      return {
+         value: null
+      }
+   },
+   computed: {
+      addresses() {
+         return this.address.loaded.addresses;
+      }
+   },
+   methods: {
+      transName(value) {
+         return `${value.text} ${value.postcode.name}`
+      },
+      selectAddress(value) {
+         this.address.selected.address = value;
+      }
+   }
+};
+</script>
+
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
+
+

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

@@ -0,0 +1,25 @@
+import { createApp } from 'vue'
+import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
+import { appMessages } from './js/i18n'
+import { store } from './store'
+
+import App from './App.vue';
+
+const root = window.vueRootComponent;
+
+/*
+*  Load all App component, for Household edition page
+*/
+
+const i18n = _createI18n(appMessages);
+
+const app = createApp({
+   template: `<app></app>`,
+})
+.use(store)
+.use(i18n)
+.component('app', App)
+.mount('#household-address');
+
+
+

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

@@ -0,0 +1,18 @@
+import { addressMessages } from 'ChillMainAssets/vuejs/Address/js/i18n'
+
+const appMessages = {
+   fr: {
+      select_a_existing_address: 'Sélectionner une adresse existante',
+      create_a_new_address: 'Créer une nouvelle adresse',
+      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'
+   }
+};
+
+Object.assign(appMessages.fr, addressMessages.fr);
+
+export {
+   appMessages
+};

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

@@ -0,0 +1,90 @@
+import 'es6-promise/auto';
+import { createStore } from 'vuex';
+
+import { postAddress, postPostalCode, patchAddress } from 'ChillMainAssets/vuejs/_api/AddAddress';
+import { postAddressToHousehold } from '../api';
+
+const debug = process.env.NODE_ENV !== 'production';
+
+const store = createStore({
+   strict: debug,
+   state: {
+      newAddress: {},
+      household: {},
+      validFrom: {},
+      errorMsg: []
+   },
+   getters: {
+   },
+   mutations: {
+      catchError(state, error) {
+         state.errorMsg.push(error);
+      },
+      addAddress(state, address) {
+         console.log('@M addAddress address', address);
+         state.newAddress = address;
+      },
+      addAddressToHousehold(state, household) {
+         console.log('@M addAddressToHousehold household', household);
+         state.household = household;
+      },
+      addDateToAddress(state, validFrom) {
+         console.log('@M addDateToAddress address.validFrom', validFrom);
+         state.validFrom = validFrom;
+      }
+   },
+   actions: {
+      addAddress({ commit }, payload) {
+         console.log('@A addAddress payload', payload);
+
+         if('newPostalCode' in payload){
+            postPostalCode(payload.newPostalCode)
+               .then(postalCode => {
+                  let body = payload;
+                  body.postcode = {'id': postalCode.id },
+                  postAddress(body)
+                     .then(address => new Promise((resolve, reject) => {
+                        commit('addAddress', address);
+                        resolve();
+                     }))
+                     .catch((error) => {
+                        commit('catchError', error);
+                     });
+               })
+
+         } else {
+            postAddress(payload)
+               .then(address => new Promise((resolve, reject) => {
+                  commit('addAddress', address);
+                  resolve();
+               }))
+               .catch((error) => {
+                  commit('catchError', error);
+               });
+         }
+      },
+      addDateToAddressAndAddressToHousehold({ commit }, payload) {
+         console.log('@A addDateToAddressAndAddressToHousehold payload', payload);
+
+         patchAddress(payload.addressId, payload.body)
+            .then(address => new Promise((resolve, reject) => {
+               commit('addDateToAddress', address.validFrom);
+               resolve();
+            }).then(
+               postAddressToHousehold(payload.householdId, payload.addressId)
+                  .then(household => new Promise((resolve, reject) => {
+                     commit('addAddressToHousehold', household);
+                     resolve();
+               }))
+               .catch((error) => {
+                  commit('catchError', error);
+               })
+            ))
+            .catch((error) => {
+               commit('catchError', error);
+            });
+      },
+   }
+});
+
+export { store };