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 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="newAddress"
               v-bind:address="newAddress">
            </show-address>
         </div>
      </div>
      <div v-if="!edit" class='household__address-move__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>
      <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>
   </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>