AddAddress: submitNewAddress return callback payload, and parent patch date then postTo (TO BE MORE TESTED)

improve pattern for better reusability of AddAddress component

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue

@@ -1,9 +1,4 @@
 <template>
-
-   <div v-for="error in displayErrors" class="alert alert-danger my-2">
-      {{ error }}
-   </div>
-
    <add-address
       v-bind:key="context.entity.type"
       v-bind:context="context"
@@ -23,6 +18,8 @@
 *
 * */
 import AddAddress from './components/AddAddress.vue';
+import { patchAddress } from "./api";
+import { postAddressToHousehold, postAddressToPerson } from "ChillPersonAssets/vuejs/_api/AddAddress";
 
 export default {
    name: "App",
@@ -39,6 +36,9 @@ export default {
             },
             addressId: window.addressId | null,
             backUrl: window.backUrl,
+            valid: {
+               from: new Date()
+            },
          },
          addAddress: {
             options: {
@@ -75,12 +75,75 @@ export default {
       },
       submitAddress() {
          console.log('@@@ click on Submit Address Button');
-
+         let payload = this.$refs.addAddress.submitNewAddress(); // Cast child method
-         // Cast child method
+         this.addDateToAddressAndPostAddressTo(payload);
-         this.$refs.addAddress.submitNewAddress();
+      },
-         // it fetch post request only for person and household
+      addDateToAddressAndPostAddressTo(payload)
-         // else get returned payload then dispatch from here (parent)
+      {
+         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>

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue

@@ -29,7 +29,7 @@
                v-bind:options="this.options"
                v-bind:default="this.default"
                v-bind:entity="this.entity"
-               v-bind:valid="this.valid"
+               v-bind:valid="this.context.valid"
                v-bind:flag="this.flag"
                ref="showAddress">
             </show-address-pane>
@@ -55,7 +55,7 @@
          v-bind:options="this.options"
          v-bind:default="this.default"
          v-bind:entity="this.entity"
-         v-bind:valid="this.valid"
+         v-bind:valid="this.context.valid"
          v-bind:flag="this.flag"
          ref="showAddress"
          v-bind:insideModal="false" @openEditPane="openEditPane"
@@ -182,10 +182,6 @@ export default {
                zoom: 12
             },
          },
-         valid: {
-            from: new Date(),
-            to: null
-         },
          errorMsg: []
       }
    },
@@ -475,17 +471,17 @@ export default {
             postPostalCode(postcodeBody)
                .then(postalCode => {
                   payload.newAddress.postcode = {'id': postalCode.id };
-                  this.patchExistingAddress(payload.addressId, payload.newAddress);
+                  this.patchExistingAddress(payload);
                });
 
          } else {
-            this.patchExistingAddress(payload.addressId, payload.newAddress);
+            this.patchExistingAddress(payload);
          }
       },
 
-      patchExistingAddress(addressId, newAddress) {
+      patchExistingAddress(payload) {
-         console.log('patchExistingAddress', addressId, newAddress);
+         console.log('patchExistingAddress', payload);
-         patchAddress(addressId, newAddress)
+         patchAddress(payload.addressId, payload.newAddress)
             .then(address => new Promise((resolve, reject) => {
                this.entity.address = address;
                this.flag.loading = false;
@@ -499,7 +495,7 @@ export default {
       },
 
       /*
-      *  When submit address
+      *  Method called by parent when submitting address
       *  (get out step1 show pane, submit button)
       */
       submitNewAddress()
@@ -507,92 +503,16 @@ export default {
          let payload = {
             entity: this.context.entity.type,
             entityId: this.context.entity.id,
-            addressId: this.entity.address.address_id,
+            addressId: this.entity.address.address_id
-            body: {
+         };
-               validFrom: {
-                  datetime: `${this.valid.from.toISOString().split('T')[0]}T00:00:00+0100`
-               }
-            },
-            backUrl: this.context.backUrl
-         }
 
-         if ( payload.entity !== 'person' && payload.entity !== 'household' ) {
+         console.log('submitNewAddress return', payload);
 
-            // just return payload to parent
-            // (changes will be patched in parent store)
          this.initForm();
          this.flag.showPane = false;
+
          return payload;
       }
-
-         console.log('submitNewAddress with', payload);
-         this.addDateToAddressAndAddressTo(payload);
-
-         this.initForm();
-         this.flag.showPane = false;
-      },
-
-      addDateToAddressAndAddressTo(payload)
-      {
-         console.log('addDateToAddressAndAddressTo', payload.entity)
-         this.flag.loading = true;
-         return patchAddress(payload.addressId, payload.body)
-            .then(address => new Promise((resolve, reject) => {
-                  this.valid.from = address.validFrom;
-                  resolve();
-               })
-               .then(this.postAddressTo(payload))
-            )
-            .catch((error) => {
-               this.errorMsg.push(error);
-               this.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('postAddressToHousehold', household);
-                        this.flag.loading = false;
-                        this.flag.success = true;
-                        window.location.assign(payload.backUrl);
-                        resolve();
-                     }))
-                     .catch((error) => {
-                        this.errorMsg.push(error);
-                        this.flag.loading = false;
-                     })
-                  ;
-                  break;
-               case 'person':
-                  postAddressToPerson(payload.entityId, payload.addressId)
-                     .then(person => new Promise((resolve, reject) => {
-                        console.log('postAddressToPerson', person);
-                        this.flag.loading = false;
-                        this.flag.success = true;
-                        window.location.assign(payload.backUrl);
-                        resolve();
-                     }))
-                     .catch((error) => {
-                        this.errorMsg.push(error);
-                        this.flag.loading = false;
-                     })
-                  ;
-                  break;
-               default:
-                  this.errorMsg.push('That entity is not managed by address !');
-            }
-         } else {
-            // address is already linked, just finish !
-            window.location.assign(payload.backUrl);
-         }
-      },
-
    }
 }
 </script>