make Address works with household context

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',