chill-bundles/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdAddress/App.vue

<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>
            <div v-if="newAddress.text">
               {{ newAddress.text }}
            </div>
            <div v-if="newAddress.postcode">
               {{ newAddress.postcode.name }}
            </div>
         </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 mt-4" @click="addToHousehold">
                  {{ $t('add_an_address_to_household') }}
               </button>
            </li>
         </ul>
      </div>
   </div>
</template>

<script>

import AddAddress from 'ChillMainAssets/vuejs/_components/AddAddress.vue';

export default {
   name: 'App',
   components: {
      AddAddress,
   },
   data() {
      return {
         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.street,
            'streetNumber': 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>