make Address works with household context

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

@@ -19,7 +19,7 @@
    </div>
 
    <add-address
-      v-bind:key="addAddress.type"
+      v-bind:key="context.entity.type"
       v-bind:context="context"
       v-bind:options="addAddress.options"
       v-bind:result="addAddress.result"
@@ -39,40 +39,44 @@ export default {
       return {
          context: {
             edit: window.mode === 'edit',
-            personId: window.personId,
-            addressId: window.addressId,
+            entity: {
+               type: window.entityType,
+               id: window.entityId
+            },
+            addressId: window.addressId | null,
             backUrl: window.backUrl,
          },
          addAddress: {
             options: {
 
                /// Options override default.
-               /// null value take default component value
+               /// null value take default component value defined in AddAddress data()
                button: {
                   text:  {
-                     /// if create or edit address
                      create: window.buttonText || null,
                      edit: window.buttonText || null
                   },
                   type: window.button.type || null,
                   size: window.button.size || null,
-                  display: window.button.display
+                  display: window.button.display   //boolean, default: true
                },
+
                /// Modal title text if create or edit address (trans chain, see i18n)
                title: {
                   create: window.modalTitle || null,
                   edit: window.modalTitle || null
                },
+
                /// Display each step in page or Modal
                bindModal: {
-                  step1: window.binModalStep1,
-                  step2: window.binModalStep2
+                  step1: window.binModalStep1,  //boolean, default: true
+                  step2: window.binModalStep2   //boolean, default: true
                },
+
                // Options only for root parent component
                displayResult: true,
                redirectToBackUrl: true
             },
-            type: 'person',
             result: null // <== returned from addAddress component
          }
       }

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

@@ -1,5 +1,6 @@
 <template>
 
+   <!-- start with a button -->
    <button v-if="step1WithModal"
       @click="openShowPane"
       class="btn" :class="getClassButton"
@@ -123,7 +124,6 @@ import { postAddressToHousehold } from "ChillPersonAssets/vuejs/_api/AddAddress/
 import ShowAddress from './ShowAddress.vue';
 import EditAddress from './EditAddress.vue';
 
-
 export default {
    name: "AddAddress",
    props: ['context', 'options', 'result'],
@@ -358,7 +358,7 @@ export default {
       },
 
       /*
-      *  When changes are validated,
+      *  When changes are validated (step2 edit pane),
       *  apply some transformations before asyncing with backend
       *  from entity.selected to entity.address
       */
@@ -394,7 +394,10 @@ export default {
          }
 
          if (this.context.edit) {
-            this.updateAddress({ addressId: this.context.addressId, newAddress: newAddress });
+            this.updateAddress({
+               addressId: this.context.addressId,
+               newAddress: newAddress
+            });
          } else {
             this.addAddress(newAddress);
          }
@@ -404,8 +407,8 @@ export default {
       *  Async PATCH transactions,
       *  then update existing address with backend datas when promise is resolved
       */
-      updateAddress(payload) {
-
+      updateAddress(payload)
+      {
          // TODO change the condition because it writes new postal code in edit mode now: !writeNewPostalCode
          this.flag.loading = true;
          if ('newPostcode' in payload.newAddress) {
@@ -446,8 +449,8 @@ export default {
       *  Async POST transactions,
       *  creating new address, and receive backend datas when promise is resolved
       */
-      addAddress(payload) {
-
+      addAddress(payload)
+      {
          this.flag.loading = true;
          if('newPostcode' in payload){
             let postcodeBody = payload.newPostcode;
@@ -484,33 +487,49 @@ export default {
       },
 
       /*
-      *  When submited
+      *  When submit address (step1 show pane)
       */
-      submitAddress() {
-         console.log('@@@ CLICK button submitAddress');
-         this.addDateToAddressAndAddressToPerson({
-            personId: this.context.personId,
+      submitAddress()
+      {
+         let payload = {
+            entityId: this.context.entityId,
             addressId: this.entity.address.address_id,
-            body: { validFrom: { datetime: `${this.$refs.showAddress.validFrom}T00:00:00+0100`}},
+            body: {
+               validFrom: {
+                  datetime: `${this.$refs.showAddress.validFrom}T00:00:00+0100`
+               }
+            },
             backUrl: this.context.backUrl
-         });
+         }
+         console.log('@@@ CLICK button submitAddress for', this.context.entity.type, 'with payload', payload);
+
+         if (this.context.entity.type === 'person') {
+            this.addDateToAddressAndAddressToPerson();
+
+         } else if (this.context.entity.type === 'household') {
+            this.addDateToAddressAndAddressToHousehold();
+
+         } else {
+            this.errorMsg.push('this entity type is not yet allowed');
+         }
          this.initForm();
          this.flag.showPane = false;
       },
 
-      addDateToAddressAndAddressToPerson(payload) {
-         console.log('addDateToAddressAndAddressToPerson payload', payload);
+      addDateToAddressAndAddressToPerson(payload)
+      {
          this.flag.loading = true;
          patchAddress(payload.addressId, payload.body)
             .then(address => new Promise((resolve, reject) => {
                this.valid.from = address.validFrom;
                resolve();
+
             }).then(
-               postAddressToPerson(payload.personId, payload.addressId)
+               postAddressToPerson(payload.entityId, payload.addressId)
                   .then(person => new Promise((resolve, reject) => {
 
                      console.log('commit addAddressToPerson !!!', person);
-                     this.$props.result = person;
+                     //this.$props.result = person;
 
                      this.flag.loading = false;
                      this.flag.success = true;
@@ -524,12 +543,48 @@ export default {
                      this.errorMsg.push(error);
                      this.flag.loading = false;
                   })
+
             ))
             .catch((error) => {
                this.errorMsg.push(error);
                this.flag.loading = false;
             });
-      }
+      },
+
+      addDateToAddressAndAddressToHousehold(payload)
+      {
+         this.flag.loading = true;
+         patchAddress(payload.addressId, payload.body)
+            .then(address => new Promise((resolve, reject) => {
+               this.valid.from = address.validFrom;
+               resolve();
+
+            }).then(
+               postAddressToHousehold(payload.entityId, payload.addressId)
+                  .then(household => new Promise((resolve, reject) => {
+
+                     console.log('commit addAddressToHousehold', household);
+
+                     this.flag.success = true;
+                     this.flag.loading = false;
+
+                     if (this.options.redirectToBackUrl) {
+                        window.location.assign(payload.backUrl);
+                     }
+                     resolve();
+                  }))
+                  .catch((error) => {
+                     this.errorMsg.push(error);
+                     this.flag.loading = false;
+                  })
+
+            ))
+            .catch((error) => {
+               this.errorMsg.push(error);
+               this.flag.loading = false;
+            });
+      },
+
    }
 }
 </script>

src/Bundle/ChillPersonBundle/Resources/views/Address/_insert_vue_address.html.twig

@@ -1,38 +1,73 @@
-<div id="address"></div>{# <== vue_address component #}
+{#
+    This Twig template include load vue_address component.
+    It push all variables from context in Address/App.vue.
+
+    OPTIONS
+    * mode          string ['edit*'|'new'|'create']
+    * address_id    integer
+    * backUrl       twig route:   path('route', {parameters})
+    * modalTitle    twig translated chain
+    * buttonText    twig translated chain
+    * buttonType    chill class like 'btn-update'
+    * buttonSize    bootstrap class like 'btn-sm'
+
+#}
+<div id="address"></div>
 
 <script type="text/javascript">
     window.vueRootComponent = 'app';
-    window.mode = '{{ mode|e('js') }}';
-    window.personId = {{ person.id|e('js') }};
-    window.addressId = {{ address_id|e('js') }};
-{% if backUrl is defined %}
-    window.backUrl = '{{ backUrl|e('js') }}';
-{% else %}
-    window.backUrl = '{{ path('chill_person_address_list', { 'person_id': person.id })|e('js') }}';
-{% endif %}
 
-{% if modalTitle is defined %}
-    window.modalTitle = '{{ modalTitle|trans|e('js') }}';
-{% endif %}
+    {% if person is defined %}
+        window.entityType = 'person';
+        window.entityId = {{ person.id|e('js') }};
+    {% elseif household is defined %}
+        window.entityType = 'household';
+        window.entityId = {{ household.id|e('js') }};
+    {% endif %}
+
+    {% if mode == 'edit' %}
+        window.addressId = {{ address_id|e('js') }};
+    {% endif %}
+    window.mode = '{{ mode|e('js') }}';
+
+    {% if backUrl is not defined %}
+        {% if person is defined %}
+            window.backUrl = '{{ path('chill_person_address_list', { 'person_id': person.id })|e('js') }}';
+        {% elseif household is defined %}
+            window.backUrl = '{{ path('chill_person_household_addresses', { 'household_id': household.id })|e('js') }}';
+        {% endif %}
+    {% else %}
+        window.backUrl = '{{ backUrl|e('js') }}';
+    {% endif %}
+
+    {% if modalTitle is defined %}
+        window.modalTitle = '{{ modalTitle|trans|e('js') }}';
+    {% endif %}
+
     window.button = {};
-{% if buttonText is defined %}
-    window.buttonText = '{{ buttonText|trans|e('js') }}';
-{% endif %}
-{% if buttonType is defined %}
-    window.button.type = '{{ buttonType|e('js') }}';
-{% endif %}
-{% if buttonSize is defined %}
-    window.button.size = '{{ buttonSize|e('js') }}';
-{% endif %}
-{% if buttonDisplay is defined and buttonDisplay == false %}
-    window.button.display = false;
-{% endif %}
-{% if binModalStep1 is defined and binModalStep1 == false %}
-    window.binModalStep1 = false;
-{% endif %}
-{% if binModalStep2 is defined and binModalStep2 == false %}
-    window.binModalStep2 = false;
-{% endif %}
+    {% if buttonText is defined %}
+        window.buttonText = '{{ buttonText|trans|e('js') }}';
+    {% endif %}
+
+    {% if buttonType is defined %}
+        window.button.type = '{{ buttonType|e('js') }}';
+    {% endif %}
+
+    {% if buttonSize is defined %}
+        window.button.size = '{{ buttonSize|e('js') }}';
+    {% endif %}
+
+    {% if buttonDisplay is defined and buttonDisplay == false %}
+        window.button.display = false;
+    {% endif %}
+
+    {% if binModalStep1 is defined and binModalStep1 == false %}
+        window.binModalStep1 = false;
+    {% endif %}
+
+    {% if binModalStep2 is defined and binModalStep2 == false %}
+        window.binModalStep2 = false;
+    {% endif %}
 </script>
 
 {{ encore_entry_script_tags('vue_address') }}

src/Bundle/ChillPersonBundle/Resources/views/Address/edit.html.twig

@@ -28,8 +28,8 @@
 
         {# include vue_address component #}
         {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
-            address_id: person.lastAddress.id,
             mode: 'edit',
+            address_id: person.lastAddress.id,
             binModalStep1: false,
             binModalStep2: false,
         } %}

src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig

@@ -28,7 +28,6 @@
 
         {# include vue_address component #}
         {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
-            address_id: person.lastAddress.id,
             mode: 'new',
             binModalStep1: false,
             binModalStep2: false,

src/Bundle/ChillPersonBundle/Resources/views/Household/address_edit.html.twig

@@ -7,21 +7,12 @@
 
     <div>
         {# include vue_address component #}
-        <div id="household-address"></div>
+        {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
+            mode: 'edit',
+            address_id: household.lastAddress.id,
+            binModalStep1: false,
+            binModalStep2: false,
+        } %}
     </div>
 
-    {% block stylesheets %}
-        {{ encore_entry_link_tags('vue_address') }}
-    {% endblock %}
-
-    {% block js %}
-       <script type="text/javascript">
-            window.householdId = {{ household.id|e('js') }};
-            window.addressId = {{ address.id|e('js') }};
-            window.mode = 'edit';
-            window.vueRootComponent = 'app';
-        </script>
-        {{ encore_entry_script_tags('vue_household_address') }}
-    {% endblock %}
-
 {% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/Household/address_move.html.twig

@@ -7,19 +7,11 @@
 
     <div>
         {# include vue_address component #}
-        <div id="household-address"></div>
+        {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
+            mode: 'new',
+            binModalStep1: false,
+            binModalStep2: false,
+        } %}
     </div>
 
-    {% block stylesheets %}
-        {{ encore_entry_link_tags('vue_address') }}
-    {% endblock %}
-
-    {% block js %}
-       <script type="text/javascript">
-            window.householdId = {{ household.id|e('js') }};
-            window.vueRootComponent = 'app';
-        </script>
-        {{ encore_entry_script_tags('vue_household_address') }}
-    {% endblock %}
-
 {% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/Person/view.html.twig

@@ -202,9 +202,9 @@ This view should receive those arguments:
                             <li class="list-inline-item">
                                 {# include vue_address component #}
                                 {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
+                                    mode: 'edit',
                                     address_id: person.lastAddress.id,
                                     backUrl: path('chill_person_view', { 'person_id': person.id }),
-                                    mode: 'edit',
                                     modalTitle: 'Edit address',
                                     buttonText: 'Edit address',
                                     buttonType: 'btn-update',