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

<template>

   <div class='person__address__create'>
      <div>
         <h2 v-if="!edit">{{ $t('create_a_new_address') }}</h2>
         <h2 v-else>{{ $t('edit_a_new_address') }}</h2>
         <add-address
            @addNewAddress="addNewAddress">
         </add-address>
      </div>

      <div>
         <show-address
            v-if="address"
            v-bind:address="address">
         </show-address>
      </div>
   </div>
   <div v-if="!edit" 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 v-if="!edit">
            <button type="submit" class="sc-button bt-update centered" @click="addToPerson">
               {{ $t('add_an_address_to_person') }}
            </button>
         </li>
      </ul>
   </div>

</template>

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

export default {
   name: 'App',
   components: {
      AddAddress,
      ShowAddress
   },
   data() {
      return {
         edit: window.mode === 'edit',
         personId: window.personId,
         addressId: window.addressId,
         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
            });
         }

         if (this.edit){
            this.$store.dispatch('updateAddress', {
               addressId: this.addressId,
               newAddress: newAddress
            });
         } else {
            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`}}
         })
      },
      getEditAddress() {
         this.$store.dispatch('getEditAddress', this.addressId);
      }
   },
   mounted() {
      if (this.edit) {
         this.getEditAddress();
      }
   },
};
</script>