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

<template>
   <add-address
      v-bind:key="key"
      v-bind:context="context"
      v-bind:options="options"
      v-bind:addressChanged="submitAddress"
      ref="addAddress">
   </add-address>
</template>

<script>
import AddAddress from './components/AddAddress.vue';
import { patchAddress } from "./api";
import { postAddressToHousehold, postAddressToPerson } from "ChillPersonAssets/vuejs/_api/AddAddress";

export default {
   name: "App",
   components: {
      AddAddress
   },
   props: ['addAddress'],
   computed: {
      context() {
         return this.addAddress.context;
      },
      options() {
         return this.addAddress.options;
      },
      key() {
         return (this.context.edit) ? 'address_' + this.context.addressId
            : this.context.entity.name + '_' + this.context.entity.id ;
      }

   },
   mounted() {
      console.log('AddAddress: data context', this.context);
      console.log('AddAddress: data options', this.options);
   },
   methods: {
      displayErrors() {
         return this.$refs.addAddress.errorMsg;
      },
      submitAddress(payload) {
         console.log('@@@ click on Submit Address Button', payload);
         this.addDateToAddressAndPostAddressTo(payload); // !!
      },
      addDateToAddressAndPostAddressTo(payload) {
         payload.body = {
            validFrom: {
               datetime: `${this.context.valid.from.toISOString().split('T')[0]}T00:00:00+0100`
            }
         };
         console.log('addDateToAddress', payload);

         this.$refs.addAddress.flag.loading = true;
         return patchAddress(payload.addressId, payload.body)
            .then(address => new Promise((resolve, reject) => {
                  this.context.valid.from = address.validFrom;
                  resolve();
               })
                  .then(this.postAddressTo(payload))
            )
            .catch((error) => {
               this.$refs.addAddress.errorMsg.push(error);
               this.$refs.addAddress.flag.loading = false;
            });
      },
      postAddressTo(payload) {
         console.log('postAddressTo', payload.entity);
         if (!this.context.edit) { // !!
            switch (payload.entity) {
               case 'household':
                  postAddressToHousehold(payload.entityId, payload.addressId)
                     .then(household => new Promise((resolve, reject) => {
                        console.log('..toHousehold', household);
                        this.$refs.addAddress.flag.loading = false;
                        this.$refs.addAddress.flag.success = true;
                        window.location.assign(this.context.backUrl);
                        resolve();
                     }))
                     .catch((error) => {
                        this.$refs.addAddress.errorMsg.push(error);
                        this.$refs.addAddress.flag.loading = false;
                     })
                  ;
                  break;
               case 'person':
                  postAddressToPerson(payload.entityId, payload.addressId)
                     .then(person => new Promise((resolve, reject) => {
                        console.log('..toPerson', person);
                        this.$refs.addAddress.flag.loading = false;
                        this.$refs.addAddress.flag.success = true;
                        window.location.assign(this.context.backUrl);
                        resolve();
                     }))
                     .catch((error) => {
                        this.$refs.addAddress.errorMsg.push(error);
                        this.$refs.addAddress.flag.loading = false;
                     })
                  ;
                  break;
               default:
                  this.$refs.addAddress.errorMsg.push('That entity is not managed by address !');
            }
         } else {
            // address is already linked, just finish !
            //window.location.assign(this.context.backUrl);
         }
      },
   }
}
</script>