Merge branch 'address_refactoring' into add-location-period

src/Bundle/ChillMainBundle/Resources/public/chill/scss/render_box.scss

@@ -93,7 +93,8 @@ section.chill-entity {
             font-style: italic;
         }
 
-        span.address-valid {
+        .address-valid {
+            margin-top: 2em;
             &.date-since {}
             &.date-until {}
         }

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

@@ -19,7 +19,7 @@
    </div>
 
    <add-address
-      v-bind:key="addAddress.type"
+      v-bind:key="context.entity.type"
       v-bind:context="context"
       v-bind:options="addAddress.options"
       v-bind:result="addAddress.result"
@@ -28,6 +28,13 @@
 </template>
 
 <script>
+/*
+*  Address component is a uniq component for many contexts.
+*  Allow to create/attach/edit an address to
+*  - a person (new or edit address),
+*  - a household (move or edit address)
+*
+* */
 import AddAddress from './components/AddAddress.vue';
 
 export default {
@@ -39,40 +46,44 @@ export default {
       return {
          context: {
             edit: window.mode === 'edit',
-            personId: window.personId,
+            entity: {
-            addressId: window.addressId,
+               type: window.entityType,
+               id: window.entityId
+            },
+            addressId: window.addressId | null,
             backUrl: window.backUrl,
          },
          addAddress: {
             options: {
 
                /// Options override default.
-               /// null value take default component value
+               /// null value take default component value defined in AddAddress data()
                button: {
                   text:  {
-                     /// if create or edit address
                      create: window.buttonText || null,
                      edit: window.buttonText || null
                   },
-                  type: window.button.type || null,
+                  type: window.buttonType || null,
-                  size: window.button.size || null,
+                  size: window.buttonSize || null,
-                  display: window.button.display
+                  display: window.buttonDisplay   //boolean, default: true
                },
+
                /// Modal title text if create or edit address (trans chain, see i18n)
                title: {
                   create: window.modalTitle || null,
                   edit: window.modalTitle || null
                },
+
                /// Display each step in page or Modal
                bindModal: {
-                  step1: window.binModalStep1,
+                  step1: window.binModalStep1,  //boolean, default: true
-                  step2: window.binModalStep2
+                  step2: window.binModalStep2   //boolean, default: true
                },
+
                // Options only for root parent component
                displayResult: true,
                redirectToBackUrl: true
             },
-            type: 'person',
             result: null // <== returned from addAddress component
          }
       }

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

@@ -125,31 +125,6 @@ const postPostalCode = (postalCode) => {
    });
 };
 
-/*
-* Endpoint chill_api_single_person_address
-* method POST, post Person instance
-*
-*  @id     integer - id of Person
-*  @body   Object - dictionary with changes to post
-*/
-const postAddressToPerson = (personId, addressId) => {
-   //console.log(personId);
-   //console.log(addressId);
-   const body = {
-      'id': addressId
-   };
-   const url = `/api/1.0/person/person/${personId}/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');
-      });
-};
-
 /*
 * Endpoint chill_api_single_address__index
 * method GET, get Address Object
@@ -174,6 +149,5 @@ export {
    postAddress,
    patchAddress,
    postPostalCode,
-   postAddressToPerson,
    getAddress
 };

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

@@ -1,5 +1,6 @@
 <template>
 
+   <!-- start with a button -->
    <button v-if="step1WithModal"
       @click="openShowPane"
       class="btn" :class="getClassButton"
@@ -28,6 +29,7 @@
                v-bind:options="this.options"
                v-bind:default="this.default"
                v-bind:entity="this.entity"
+               v-bind:valid="this.valid"
                v-bind:flag="this.flag"
                ref="showAddress">
             </show-address>
@@ -53,6 +55,7 @@
          v-bind:options="this.options"
          v-bind:default="this.default"
          v-bind:entity="this.entity"
+         v-bind:valid="this.valid"
          v-bind:flag="this.flag"
          ref="showAddress"
          v-bind:insideModal="false" @openEditPane="openEditPane"
@@ -117,13 +120,11 @@
 
 <script>
 import Modal from 'ChillMainAssets/vuejs/_components/Modal';
+import { getAddress, fetchCountries, fetchCities, fetchReferenceAddresses, patchAddress, postAddress, postPostalCode } from '../api';
+import { postAddressToPerson } from "ChillPersonAssets/vuejs/_api/AddAddress/Person.js";
+import { postAddressToHousehold } from "ChillPersonAssets/vuejs/_api/AddAddress/Household.js";
 import ShowAddress from './ShowAddress.vue';
 import EditAddress from './EditAddress.vue';
-import {
-   getAddress,
-   fetchCountries, fetchCities, fetchReferenceAddresses,
-   patchAddress, postAddress, postPostalCode, postAddressToPerson
-} from '../api'
 
 export default {
    name: "AddAddress",
@@ -182,7 +183,7 @@ export default {
             },
          },
          valid: {
-            from: null,
+            from: new Date(),
             to: null
          },
          errorMsg: []
@@ -227,7 +228,7 @@ export default {
    },
    mounted() {
       if (!this.step1WithModal) {
-         console.log('Mounted now !');
+         //console.log('Mounted now !');
          this.openShowPane();
       }
    },
@@ -238,9 +239,11 @@ export default {
       */
       openShowPane() {
          console.log('open the Show Panel');
-         if (this.context.addressId) {
+
+         if (this.context.edit) {
             this.getInitialAddress(this.context.addressId);
          }
+
          // when create new address, start first with editPane
          if ( this.context.edit === false
             && this.flag.editPane === false
@@ -260,7 +263,7 @@ export default {
       },
 
       closeEditPane() {
-         console.log('close the Edit Panel (with validation)');
+         console.log('close the Edit Panel');
          this.applyChanges();
          this.flag.showPane = true;
          this.flag.editPane = false;
@@ -359,12 +362,12 @@ export default {
       },
 
       /*
-      *  When changes are validated,
+      *  When changes are validated (get out step2 edit pane, button valid),
       *  apply some transformations before asyncing with backend
       *  from entity.selected to entity.address
       */
-      applyChanges() {
+      applyChanges()
-
+      {
          let newAddress = {
             'isNoAddress': this.entity.selected.isNoAddress,
             'street': this.entity.selected.isNoAddress ? '' : this.entity.selected.address.street,
@@ -395,21 +398,71 @@ export default {
          }
 
          if (this.context.edit) {
-            this.updateAddress({ addressId: this.context.addressId, newAddress: newAddress });
+            this.updateAddress({
+               addressId: this.context.addressId,
+               newAddress: newAddress
+            });
          } else {
             this.addAddress(newAddress);
          }
       },
 
+      /*
+      *  Async POST transactions,
+      *  creating new address, and receive backend datas when promise is resolved
+      */
+      addAddress(payload)
+      {
+         this.flag.loading = true;
+         if ('newPostcode' in payload) {
+
+            let postcodeBody = payload.newPostcode;
+            if (this.context.entity.type === 'person') {
+               postcodeBody = Object.assign(postcodeBody, {'origin': 3});
+            }
+
+            postPostalCode(postcodeBody)
+               .then(postalCode => {
+                  let body = payload;
+                  body.postcode = {'id': postalCode.id },
+                     postAddress(body)
+                        .then(address => new Promise((resolve, reject) => {
+                           this.entity.address = address;
+                           this.flag.loading = false;
+                           this.flag.success = true;
+                           resolve();
+                        }))
+                        .catch((error) => {
+                           this.errorMsg.push(error);
+                           this.flag.loading = false;
+                        });
+               })
+
+         } else {
+            postAddress(payload)
+               .then(address => new Promise((resolve, reject) => {
+                  this.entity.address = address;
+                  this.flag.loading = false;
+                  this.flag.success = true;
+                  resolve();
+               }))
+               .catch((error) => {
+                  this.errorMsg.push(error);
+                  this.flag.loading = false;
+               });
+         }
+      },
+
       /*
       *  Async PATCH transactions,
       *  then update existing address with backend datas when promise is resolved
       */
-      updateAddress(payload) {
+      updateAddress(payload)
-
+      {
          // TODO change the condition because it writes new postal code in edit mode now: !writeNewPostalCode
          this.flag.loading = true;
          if ('newPostcode' in payload.newAddress) {
+            
             let postcodeBody = payload.newAddress.newPostcode;
             postcodeBody = Object.assign(postcodeBody, {'origin': 3});
 
@@ -421,6 +474,7 @@ export default {
                         .then(address => new Promise((resolve, reject) => {
                            this.entity.address = address;
                            this.flag.loading = false;
+                           this.flag.success = true;
                            resolve();
                         }))
                         .catch((error) => {
@@ -434,6 +488,7 @@ export default {
                .then(address => new Promise((resolve, reject) => {
                   this.entity.address = address;
                   this.flag.loading = false;
+                  this.flag.success = true;
                   resolve();
                }))
                .catch((error) => {
@@ -444,78 +499,61 @@ export default {
       },
 
       /*
-      *  Async POST transactions,
+      *  When submit address
-      *  creating new address, and receive backend datas when promise is resolved
+      *  (get out step1 show pane, submit button)
       */
-      addAddress(payload) {
+      submitAddress()
-
+      {
-         this.flag.loading = true;
+         let payload = {
-         if('newPostcode' in payload){
+            entityId: this.context.entity.id,
-            let postcodeBody = payload.newPostcode;
-            postcodeBody = Object.assign(postcodeBody, {'origin': 3});
-
-            postPostalCode(postcodeBody)
-               .then(postalCode => {
-                  let body = payload;
-                  body.postcode = {'id': postalCode.id},
-                     postAddress(body)
-                        .then(address => new Promise((resolve, reject) => {
-                           this.entity.address = address;
-                           resolve();
-                           this.flag.loading = false;
-                        }))
-                        .catch((error) => {
-                           this.errorMsg.push(error);
-                           this.flag.loading = false;
-                        });
-               })
-
-         } else {
-            postAddress(payload)
-               .then(address => new Promise((resolve, reject) => {
-                  this.entity.address = address;
-                  resolve();
-                  this.flag.loading = false;
-               }))
-               .catch((error) => {
-                  this.errorMsg.push(error);
-                  this.flag.loading = false;
-               });
-         }
-      },
-
-      /*
-      *  When submited
-      */
-      submitAddress() {
-         console.log('@@@ CLICK button submitAddress');
-         this.addDateToAddressAndAddressToPerson({
-            personId: this.context.personId,
             addressId: this.entity.address.address_id,
-            body: { validFrom: { datetime: `${this.$refs.showAddress.validFrom}T00:00:00+0100`}},
+            body: {
+               validFrom: {
+                  datetime: `${this.valid.from.toISOString().split('T')[0]}T00:00:00+0100`
+               }
+            },
             backUrl: this.context.backUrl
-         });
+         }
+
+         console.log('@@@ CLICK button submitAddress for', this.context.entity.type, 'with payload', payload);
+         this.addDateToAddressAndAddressTo(payload, this.context.entity.type);
+
          this.initForm();
          this.flag.showPane = false;
       },
 
-      addDateToAddressAndAddressToPerson(payload) {
+      addDateToAddressAndAddressTo(payload, postTo)
-         console.log('addDateToAddressAndAddressToPerson payload', payload);
+      {
+         console.log('addDateToAddressAndAddressTo', postTo)
          this.flag.loading = true;
          patchAddress(payload.addressId, payload.body)
             .then(address => new Promise((resolve, reject) => {
                   this.valid.from = address.validFrom;
                   resolve();
-            }).then(
+               })
-               postAddressToPerson(payload.personId, payload.addressId)
+                  .then(
-                  .then(person => new Promise((resolve, reject) => {
+                     this.postAddressTo(payload, postTo)
+                  )
+            )
+            .catch((error) => {
+               this.errorMsg.push(error);
+               this.flag.loading = false;
+            });
+      },
 
-                     console.log('commit addAddressToPerson !!!', person);
+      postAddressTo(payload, postTo)
-                     this.$props.result = person;
+      {
+         console.log('postAddressTo', postTo);
+         if (!this.context.edit) {
+            switch (postTo) {
+               case 'household':
+                  postAddressToHousehold(payload.entityId, payload.addressId)
+                     .then(household => new Promise((resolve, reject) => {
+
+                        console.log('commit addAddressToHousehold', household);
 
                         this.flag.loading = false;
                         this.flag.success = true;
-
                         if (this.options.redirectToBackUrl) {
                            window.location.assign(payload.backUrl);
                         }
@@ -525,12 +563,37 @@ export default {
                         this.errorMsg.push(error);
                         this.flag.loading = false;
                      })
-            ))
+                  ;
+                  break;
+
+               case 'person':
+               default:
+                  postAddressToPerson(payload.entityId, payload.addressId)
+                     .then(person => new Promise((resolve, reject) => {
+
+                        console.log('commit addAddressToPerson !!!', person);
+
+                        this.flag.loading = false;
+                        this.flag.success = true;
+                        if (this.options.redirectToBackUrl) {
+                           window.location.assign(payload.backUrl);
+                        }
+                        resolve();
+                     }))
                      .catch((error) => {
                         this.errorMsg.push(error);
                         this.flag.loading = false;
-            });
+                     })
+                  ;
             }
+         } else {
+            // address is already posted, just finish !
+            if (this.options.redirectToBackUrl) {
+               window.location.assign(payload.backUrl);
+            }
+         }
+      },
+
    }
 }
 </script>

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

@@ -31,7 +31,7 @@ export default {
    },
    computed: {
       sortedCountries() {
-         console.log('sorted countries');
+         //console.log('sorted countries');
          const countries = this.entity.loaded.countries;
          let sortedCountries = [];
          sortedCountries.push(...countries.filter(c => c.countryCode === 'FR'))
@@ -56,7 +56,7 @@ export default {
          return name.fr //TODO multilang
       },
       selectCountry(value) {
-         console.log('select country', value);
+         //console.log('select country', value);
          this.entity.selected.country = value;
          this.$emit('getCities', value);
       }

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

@@ -3,7 +3,13 @@
 
       <div v-if="insideModal == false" class="loading">
          <i v-if="flag.loading" class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i>
-         <span class="sr-only">Loading...</span>
+         <span class="sr-only">{{ $t('loading') }}</span>
+      </div>
+      <div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
+         {{ errorMsg }}
+      </div>
+      <div v-if="flag.success" class="alert alert-success">
+         {{ $t(getSuccessText) }}
       </div>
 
       <div class="address multiline">
@@ -59,24 +65,15 @@
       </div>
 
       <div v-if="!context.edit" class='address-valid date-since'>
-         <h3>{{ $t('date') }}</h3>
+         <h3>{{ $t(getValidFromDateText) }}</h3>
          <div class="input-group mb-3">
             <span class="input-group-text" id="validFrom"><i class="fa fa-fw fa-calendar"></i></span>
             <input type="date" class="form-control form-control-lg" name="validFrom"
-               v-bind:placeholder="$t('validFrom')"
+               v-bind:placeholder="$t(getValidFromDateText)"
                v-model="validFrom"
                aria-describedby="validFrom"
             />
          </div>
-         <!--div v-if="errorMsg.length > 0">
-            {{ errors }}
-         </div-->
-         <div v-if="flag.loading">
-            {{ $t('loading') }}
-         </div>
-         <div v-if="flag.success">
-            {{ $t('person_address_creation_success') }}
-         </div>
       </div>
 
    </div>
@@ -95,7 +92,7 @@
       </li>
       <li>
          <a class="btn btn-save"
-            @click.prevent="$emit('submitAddress', { getSubmited , flag })">
+            @click.prevent="$emit('submitAddress')">
             {{ $t('action.save')}}
          </a>
       </li>
@@ -103,6 +100,7 @@
 </template>
 
 <script>
+import { dateToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/js/date.js';
 
 export default {
    name: 'ShowAddress',
@@ -112,10 +110,11 @@ export default {
       'default',
       'flag',
       'entity',
+      'valid',
       'errorMsg',
       'insideModal'
    ],
-   emits: ['openEditPane', 'submitAddress', 'validFrom'],
+   emits: ['openEditPane', 'submitAddress'], //?
    computed: {
       address() {
          return this.entity.address;
@@ -132,8 +131,28 @@ export default {
       getSubmited() {
          return this.entity.address;
       },
-      validFrom() {
+      validFrom: {
-         return new Date().toISOString().split('T')[0];
+         set(value) {
+            this.valid.from = ISOToDate(value);
+         },
+         get() {
+            return dateToISO(this.valid.from);
+         }
+      },
+      getValidFromDateText() {
+         return (this.context.entity.type === 'household') ? 'move_date' : 'validFrom';
+      },
+      getSuccessText() {
+         switch (this.context.entity.type) {
+            /*
+            case 'household':
+               return (this.context.edit) ? 'household_address_edit_success' : 'household_address_move_success';
+            case 'person':
+               return (this.context.edit) ? 'person_address_edit_success' : 'person_address_creation_success';
+            */
+            default:
+               return (this.context.edit) ? 'address_edit_success' : 'address_new_success';
+         }
       }
    }
 };

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

@@ -29,11 +29,24 @@ const addressMessages = {
         postalCode_name: 'Nom',
         postalCode_code: 'Code postal',
         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',
+        loading: 'chargement en cours...',
+        address_new_success: 'La nouvelle adresse est enregistrée',
+        address_edit_success: 'L\'adresse a été mise à jour',
+
+        // person specific
+        add_an_address_to_person: 'Ajouter l\'adresse à la personne',
         person_address_creation_success: 'La nouvelle adresse de la personne est enregistrée',
-        loading: 'chargement en cours...'
+        person_address_edit_success: 'L\'adresse de la personne a été mise à jour',
+
+        // household specific
+        move_date: 'Date du déménagement',
+        select_a_existing_address: 'Sélectionner une adresse existante',
+        add_an_address_to_household: 'Enregistrer',
+        household_address_move_success: 'La nouvelle adresse du ménage est enregistrée',
+        household_address_edit_success: 'L\'adresse du ménage a été mise à jour',
+
     }
 };
 

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

@@ -1,160 +0,0 @@
-<template>
-   <div class='chill-entity entity-address'>
-
-      <div class="my-3">
-         <h2 v-if="!edit">{{ $t('create_a_new_address') }}</h2>
-         <h2 v-else>{{ $t('edit_address') }}</h2>
-
-         <show-address
-            v-if="newAddress"
-            v-bind:address="newAddress">
-         </show-address>
-
-         <add-address
-            modalAddTitle="add_an_address_title"
-            modalEditTitle="edit_address"
-            @addNewAddress="addNewAddress">
-         </add-address>
-      </div>
-
-      <div v-if="!edit" class='address-valid'>
-         <h2>{{ $t('move_date') }}</h2>
-         <div class="input-group mb-3">
-            <span class="input-group-text" id="validFrom"><i class="fa fa-fw fa-calendar"></i></span>
-            <input type="date" class="form-control form-control-lg" name="validFrom"
-               v-bind:placeholder="$t('validFrom')"
-               v-model="validFrom"
-               aria-describedby="validFrom" />
-         </div>
-         <div v-if="errors.length > 0">
-            {{ errors }}
-         </div>
-         <div v-if="loading">
-            {{ $t('loading') }}
-         </div>
-         <div v-if="success && !edit">
-            {{ $t('household_address_move_success') }}
-         </div>
-      </div>
-
-      <div v-if="success && edit">
-         {{ $t('household_address_edit_success') }}
-      </div>
-
-      <ul class="record_actions sticky-form-buttons">
-         <li class="cancel">
-            <a :href="backUrl" class="btn btn-cancel">{{ $t('back_to_the_list') }}</a>
-         </li>
-         <li v-if="!edit">
-            <button type="submit" class="btn btn-update" @click="addToHousehold">
-               {{ $t('add_an_address_to_household') }}
-            </button>
-         </li>
-      </ul>
-
-   </div>
-</template>
-
-<script>
-import AddAddress from 'ChillMainAssets/vuejs/Address/components/AddAddress.vue';
-import ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue';
-
-export default {
-   name: 'App',
-   components: {
-      AddAddress,
-      ShowAddress
-   },
-   data() {
-      return {
-         edit: window.mode === 'edit',
-         householdId: window.householdId,
-         addressId: window.addressId,
-         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;
-      },
-      loading() {
-         return this.$store.state.loading;
-      },
-      success() {
-         return this.$store.state.success;
-      }
-   },
-   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
-            });
-         }
-
-         if (this.edit){
-            this.$store.dispatch('updateAddress', {
-               addressId: this.addressId,
-               newAddress: createdAddress
-            });
-         } else {
-            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`}},
-            backUrl: this.backUrl
-         })
-      },
-      getEditAddress() {
-         this.$store.dispatch('getEditAddress', this.addressId);
-      }
-   },
-   mounted() {
-      if (this.edit) {
-         this.getEditAddress();
-      }
-   },
-};
-</script>
-
-<style lang="scss">
-div.entity-address {
-   border: 1px dashed grey;
-}
-</style>

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

@@ -1,25 +0,0 @@
-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/store/index.js

@@ -1,160 +0,0 @@
-import 'es6-promise/auto';
-import { createStore } from 'vuex';
-
-import { postAddress, postPostalCode, patchAddress, getAddress } from 'ChillMainAssets/vuejs/Address/api';
-import { postAddressToHousehold } from '../api';
-
-const debug = process.env.NODE_ENV !== 'production';
-
-const store = createStore({
-   strict: debug,
-   state: {
-      newAddress: {},
-      editAddress: {}, //TODO or should be newAddress?
-      household: {},
-      validFrom: {},
-      errorMsg: [],
-      loading: false,
-      success: false
-   },
-   getters: {
-   },
-   mutations: {
-      catchError(state, error) {
-         state.errorMsg.push(error);
-      },
-      addAddress(state, address) {
-         console.log('@M addAddress address', address);
-         state.newAddress = address;
-      },
-      updateAddress(state, address) {
-         console.log('@M updateAddress 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;
-      },
-      getEditAddress(state, address) {
-         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){
-            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();
-                        commit('setLoading', false);
-                     }))
-                     .catch((error) => {
-                        commit('catchError', error);
-                        commit('setLoading', false);
-                     });
-               })
-
-         } else {
-            postAddress(payload)
-               .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);
-               resolve();
-            }).then(
-               postAddressToHousehold(payload.householdId, payload.addressId)
-                  .then(household => new Promise((resolve, reject) => {
-                     commit('addAddressToHousehold', household);
-                     commit('setSuccess', true);
-                     commit('setLoading', false);
-                     window.location.assign(payload.backUrl);
-                     resolve();
-               }))
-               .catch((error) => {
-                  commit('catchError', error);
-                  commit('setLoading', false);
-               })
-            ))
-            .catch((error) => {
-               commit('catchError', error);
-               commit('setLoading', false);
-            });
-      },
-      updateAddress({ commit }, payload) {
-         console.log('@A updateAddress payload', payload);
-
-         if('newPostalCode' in payload.newAddress){ // TODO change the condition because it writes new postal code in edit mode now: !writeNewPostalCode
-            let postalCodeBody = payload.newAddress.newPostalCode;
-            postalCodeBody = Object.assign(postalCodeBody, {'origin': 3});
-            postPostalCode(postalCodeBody)
-               .then(postalCode => {
-                  let body = payload.newAddress;
-                  body.postcode = {'id': postalCode.id },
-                  patchAddress(payload.addressId, body)
-                     .then(address => new Promise((resolve, reject) => {
-                        commit('updateAddress', address);
-                        commit('setSuccess', true);
-                        resolve();
-                     }))
-                     .catch((error) => {
-                        commit('catchError', error);
-                     });
-               })
-
-         } else {
-            patchAddress(payload.addressId, payload.newAddress)
-               .then(address => new Promise((resolve, reject) => {
-                  commit('updateAddress', address);
-                  commit('setSuccess', true);
-                  resolve();
-               }))
-               .catch((error) => {
-                  commit('catchError', error);
-               });
-         }
-      },
-      getEditAddress({ commit }, payload) {
-         console.log('@A getEditAddress payload', payload);
-
-         getAddress(payload).then(address => new Promise((resolve, reject) => {
-            commit('getEditAddress', address);
-            resolve();
-         }))
-         .catch((error) => {
-            commit('catchError', error);
-         });
-      },
-   }
-});
-
-export { store };

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/AddAddress/Person.js

@@ -0,0 +1,27 @@
+
+/*
+* Endpoint chill_api_single_person_address
+* method POST, post Person instance
+*
+*  @id     integer - id of Person
+*  @body   Object - dictionary with changes to post
+*/
+const postAddressToPerson = (personId, addressId) => {
+    //console.log(personId);
+    //console.log(addressId);
+    const body = {
+        'id': addressId
+    };
+    const url = `/api/1.0/person/person/${personId}/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');
+        });
+};
+
+export { postAddressToPerson };

src/Bundle/ChillPersonBundle/Resources/views/Address/_insert_vue_address.html.twig

@@ -1,38 +1,76 @@
-<div id="address"></div>{# <== vue_address component #}
+{#
+    This Twig template include load vue_address component.
+    It push all variables from context in Address/App.vue.
+
+    OPTIONS
+    * mode          string ['edit*'|'new'|'create']
+    * address_id    integer
+    * backUrl       twig route:   path('route', {parameters})
+    * modalTitle    twig translated chain
+    * buttonText    twig translated chain
+    * buttonType    chill class like 'btn-update'
+    * buttonSize    bootstrap class like 'btn-sm'
+
+#}
+<div id="address"></div>
 
 <script type="text/javascript">
     window.vueRootComponent = 'app';
-    window.mode = '{{ mode|e('js') }}';
-    window.personId = {{ person.id|e('js') }};
-    window.addressId = {{ address_id|e('js') }};
-{% if backUrl is defined %}
-    window.backUrl = '{{ backUrl|e('js') }}';
-{% else %}
-    window.backUrl = '{{ path('chill_person_address_list', { 'person_id': person.id })|e('js') }}';
-{% endif %}
 
-{% if modalTitle is defined %}
+    {% if person is defined %}
+        window.entityType = 'person';
+        window.entityId = {{ person.id|e('js') }};
+    {% elseif household is defined %}
+        window.entityType = 'household';
+        window.entityId = {{ household.id|e('js') }};
+    {% endif %}
+
+    {% if 'edit' in app.request.get('_route') %}
+        window.addressId = {{ app.request.get('address_id')|e('js') }};
+        window.mode = 'edit';
+    {% elseif mode is defined and mode == 'edit' %}
+        window.addressId = {{ address_id|e('js') }};
+        window.mode = 'edit';
+    {% endif %}
+
+    {% if backUrl is not defined %}
+        {% if person is defined %}
+            window.backUrl = '{{ path('chill_person_address_list', { 'person_id': person.id })|e('js') }}';
+        {% elseif household is defined %}
+            window.backUrl = '{{ path('chill_person_household_addresses', { 'household_id': household.id })|e('js') }}';
+        {% endif %}
+    {% else %}
+        window.backUrl = '{{ backUrl|e('js') }}';
+    {% endif %}
+
+    {% if modalTitle is defined %}
         window.modalTitle = '{{ modalTitle|trans|e('js') }}';
-{% endif %}
+    {% endif %}
-    window.button = {};
+
-{% if buttonText is defined %}
+
+    {% if buttonText is defined %}
         window.buttonText = '{{ buttonText|trans|e('js') }}';
-{% endif %}
+    {% endif %}
-{% if buttonType is defined %}
+
-    window.button.type = '{{ buttonType|e('js') }}';
+    {% if buttonType is defined %}
-{% endif %}
+        window.buttonType = '{{ buttonType|e('js') }}';
-{% if buttonSize is defined %}
+    {% endif %}
-    window.button.size = '{{ buttonSize|e('js') }}';
+
-{% endif %}
+    {% if buttonSize is defined %}
-{% if buttonDisplay is defined and buttonDisplay == false %}
+        window.buttonSize = '{{ buttonSize|e('js') }}';
-    window.button.display = false;
+    {% endif %}
-{% endif %}
+
-{% if binModalStep1 is defined and binModalStep1 == false %}
+    {% if buttonDisplay is defined and buttonDisplay == false %}
+        window.buttonDisplay = false;
+    {% endif %}
+
+    {% if binModalStep1 is defined and binModalStep1 == false %}
         window.binModalStep1 = false;
-{% endif %}
+    {% endif %}
-{% if binModalStep2 is defined and binModalStep2 == false %}
+
+    {% if binModalStep2 is defined and binModalStep2 == false %}
         window.binModalStep2 = false;
-{% endif %}
+    {% endif %}
 </script>
 
 {{ encore_entry_script_tags('vue_address') }}

src/Bundle/ChillPersonBundle/Resources/views/Address/edit.html.twig

@@ -28,8 +28,6 @@
 
         {# include vue_address component #}
         {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
-            address_id: person.lastAddress.id,
-            mode: 'edit',
             binModalStep1: false,
             binModalStep2: false,
         } %}

src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig

@@ -30,7 +30,6 @@
 
             {# include vue_address component #}
             {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
-                address_id: person.lastAddress.id,
                 mode: 'new',
                 buttonSize: 'btn-lg',
                 buttonText: 'Add an address',

src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig

@@ -28,8 +28,6 @@
 
         {# include vue_address component #}
         {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
-            address_id: person.lastAddress.id,
-            mode: 'new',
             binModalStep1: false,
             binModalStep2: false,
         } %}

src/Bundle/ChillPersonBundle/Resources/views/Household/address_edit.html.twig

@@ -7,21 +7,10 @@
 
     <div>
         {# include vue_address component #}
-        <div id="household-address"></div>
+        {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
+            binModalStep1: false,
+            binModalStep2: false,
+        } %}
     </div>
 
-    {% block stylesheets %}
-        {{ encore_entry_link_tags('vue_address') }}
-    {% endblock %}
-
-    {% block js %}
-       <script type="text/javascript">
-            window.householdId = {{ household.id|e('js') }};
-            window.addressId = {{ address.id|e('js') }};
-            window.mode = 'edit';
-            window.vueRootComponent = 'app';
-        </script>
-        {{ encore_entry_script_tags('vue_household_address') }}
-    {% endblock %}
-
 {% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/Household/address_move.html.twig

@@ -7,19 +7,10 @@
 
     <div>
         {# include vue_address component #}
-        <div id="household-address"></div>
+        {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
+            binModalStep1: false,
+            binModalStep2: false,
+        } %}
     </div>
 
-    {% block stylesheets %}
-        {{ encore_entry_link_tags('vue_address') }}
-    {% endblock %}
-
-    {% block js %}
-       <script type="text/javascript">
-            window.householdId = {{ household.id|e('js') }};
-            window.vueRootComponent = 'app';
-        </script>
-        {{ encore_entry_script_tags('vue_household_address') }}
-    {% endblock %}
-
 {% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/Household/addresses.html.twig

@@ -15,10 +15,13 @@
             <li style="margin: auto;">
 
                 {# include vue_address component #}
-                <a class="btn btn-lg btn-create"
+                {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
-                   href="{{ chill_path_add_return_path('chill_person_household_address_move', { 'household_id': household.id }) }}">
+                    mode: 'new',
-                    {{ 'Move household'|trans }}
+                    backUrl: chill_path_add_return_path('chill_person_household_address_move', { 'household_id': household.id }),
-                </a>
+                    buttonSize: 'btn-lg',
+                    buttonText: 'Move household',
+                    modalTitle: 'Move household',
+                } %}
 
             </li>
         </ul>

src/Bundle/ChillPersonBundle/Resources/views/Person/view.html.twig

@@ -202,9 +202,9 @@ This view should receive those arguments:
                             <li class="list-inline-item">
                                 {# include vue_address component #}
                                 {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
+                                    mode: 'edit',
                                     address_id: person.lastAddress.id,
                                     backUrl: path('chill_person_view', { 'person_id': person.id }),
-                                    mode: 'edit',
                                     modalTitle: 'Edit address',
                                     buttonText: 'Edit address',
                                     buttonType: 'btn-update',

src/Bundle/ChillPersonBundle/chill.webpack.config.js

@@ -8,7 +8,6 @@ module.exports = function(encore, entries)
         ChillPersonAssets: __dirname + '/Resources/public'
     });
 
-    encore.addEntry('vue_household_address', __dirname + '/Resources/public/vuejs/HouseholdAddress/index.js');
 
     encore.addEntry('vue_household_members_editor', __dirname + '/Resources/public/vuejs/HouseholdMembersEditor/index.js');
     encore.addEntry('vue_accourse', __dirname + '/Resources/public/vuejs/AccompanyingCourse/index.js');