chill-bundles/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue

<template>

   <div class='person__address__create'>
      <div>
         <add-address
            @addNewAddress="addNewAddress">
         </add-address>
      </div>
      <div>
         <div v-if="address.text">
            {{ address.text }}
         </div>
         <div v-if="address.postcode">
            {{ address.postcode.name }}
         </div>
      </div>
   </div>
   <div class='person__address__valid'>
      <h2>{{ $t('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="addToPerson">
               {{ $t('add_an_address_to_person') }}
            </button>
         </li>
      </ul>
   </div>

</template>

<script>
import AddAddress from '../_components/AddAddress.vue';

export default {
   name: 'App',
   components: {
      AddAddress
   },
   data() {
      return {
         personId: window.personId,
         backUrl: `/fr/person/${window.personId}/address/list`, //TODO better way to pass this
         validFrom: new Date().toISOString().split('T')[0]
      }
   },
   computed: {
      address() {
         return this.$store.state.address;
      },
      errors() {
         return this.$store.state.errorMsg;
      }
   },
   methods: {
      addNewAddress({ address, modal }) {
         console.log('@@@ CLICK button addNewAdress', address);

         let newAddress = {
            '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){
            newAddress = Object.assign(newAddress, {
               'point': address.selected.address.point.coordinates
            });
         }

         if(address.writeNewPostalCode){
            let newPostalCode = address.newPostalCode;
            newPostalCode = Object.assign(newPostalCode, {
                'country': {'id': address.selected.country.id },
            });
            newAddress = Object.assign(newAddress, {
               'newPostalCode': newPostalCode
            });
         }

         this.$store.dispatch('addAddress', newAddress);
         modal.showModal = false;
      },
      addToPerson() {
        this.$store.dispatch('addDateToAddressAndAddressToPerson', {
           personId: this.personId,
           addressId: this.$store.state.address.address_id,
           body: { validFrom: {datetime: `${this.validFrom}T00:00:00+0100`}}
        })
      }
   }
};
</script>