transmit all options from a twig include template

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

@@ -41,32 +41,36 @@ export default {
             edit: window.mode === 'edit',
             personId: window.personId,
             addressId: window.addressId,
-            backUrl: `/fr/person/${window.personId}/address/list`, //TODO better way to pass this
+            backUrl: window.backUrl,
          },
          addAddress: {
             options: {
-               /// Options override default
 
-               /// First button text if create or edit address (trans chain, see i18n)
+               /// Options override default.
+               /// null value take default component value
                button: {
-                  //text:  { create: 'bim', edit: 'bam' },
+                  text:  {
-                  type: 'btn-update',
+                     /// if create or edit address
-                  size: 'btn-sm',
+                     create: window.buttonText || null,
-                  display: false
+                     edit: window.buttonText || null
+                  },
+                  type: window.button.type || null,
+                  size: window.button.size || null,
+                  display: window.button.display
                },
-
                /// Modal title text if create or edit address (trans chain, see i18n)
-               //title: { create: 'boum', edit: 'pan' },
+               title: {
-
+                  create: window.modalTitle || null,
+                  edit: window.modalTitle || null
+               },
                /// Display each step in page or Modal
                bindModal: {
                   //step1: false,
                   //step2: false
                },
-
                // Options only for root parent component
                displayResult: true,
-               redirectToBackUrl: false
+               redirectToBackUrl: true
             },
             type: 'person',
             result: null // <== returned from addAddress component

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

@@ -2,7 +2,7 @@
 
    <button v-if="step1WithModal"
       @click="openShowPane"
-      class="btn mt-4" :class="getClassButton"
+      class="btn" :class="getClassButton"
       type="button" name="button" :title="$t(getTextButton)">
       <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
    </button>
@@ -14,7 +14,7 @@
          @close="flag.showPane = false">
 
          <template v-slot:header>
-            <h2 class="modal-title">{{ $t(getTextTitle) }}
+            <h2 class="modal-title">{{ getTextTitle }}
                <span v-if="flag.loading" class="loading">
                   <i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
                   <span class="sr-only">Loading...</span>
@@ -67,7 +67,7 @@
          @close="flag.editPane = false">
 
          <template v-slot:header>
-            <h2 class="modal-title">{{ $t(getTextTitle) }}
+            <h2 class="modal-title">{{ getTextTitle }}
                <span v-if="flag.loading" class="loading">
                   <i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
                   <span class="sr-only">Loading...</span>
@@ -204,24 +204,24 @@ export default {
          return step2;
       },
       getTextTitle() {
-         if (this.options.title) {
+         if (this.options.title && (this.options.title.edit !== null || this.options.title.create !== null)) {
             return (this.context.edit) ? this.options.title.edit : this.options.title.create;
          }
-         return (this.context.edit) ? this.default.title.edit : this.default.title.create;
+         return (this.context.edit) ? this.$t(this.default.title.edit) : this.$t(this.default.title.create);
       },
       getTextButton() {
-         if (this.options.button && this.options.button.text) {
+         if (this.options.button && this.options.button.text && (this.options.button.text.edit !== null || this.options.button.text.create !== null)) {
             return (this.context.edit) ? this.options.button.text.edit : this.options.button.text.create;
          }
          return (this.context.edit) ? this.default.button.text.edit : this.default.button.text.create;
       },
       getClassButton() {
-         let size = (this.options.button && this.options.button.size) ? this.options.button.size : '';
+         let size = (this.options.button && this.options.button.size !== null) ? this.options.button.size : '';
-         let type = (this.options.button && this.options.button.type) ? this.options.button.type : this.default.button.type;
+         let type = (this.options.button && this.options.button.type !== null) ? this.options.button.type : this.default.button.type;
          return size ? size + ' ' + type : type;
       },
       displayTextButton() {
-         return (typeof this.options.button !== 'undefined' && typeof this.options.button.display !== 'undefined') ?
+         return (this.options.button !== null && typeof this.options.button.display !== 'undefined') ?
             this.options.button.display : this.default.button.display;
       }
    },

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

@@ -0,0 +1,28 @@
+<div id="address"></div>{# <== vue_address component #}
+
+<script type="text/javascript">
+    window.vueRootComponent = 'app';
+    window.mode = '{{ mode|e('js') }}';
+    window.personId = {{ person.id|e('js') }};
+    window.addressId = {{ address_id|e('js') }};
+    window.backUrl = '{{ path('chill_person_view', { 'person_id': person.id })|e('js') }}';
+{% 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 %}
+</script>
+
+{{ encore_entry_script_tags('vue_address') }}
+{{ encore_entry_link_tags('vue_address') }}

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

@@ -25,22 +25,13 @@
 
     {% block content %}
         <h1>{{ block('title') }}</h1>
-        <div id="address"></div>
+
+        {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
+            address_id: person.lastAddress.id,
+            mode: 'edit'
+        } %}
+
     {% endblock %}
 
 </div>
 {% endblock %}
-
-{% block css %}
-    {{ encore_entry_link_tags('vue_address') }}
-{% endblock %}
-
-{% block js %}
-    <script type="text/javascript">
-        window.personId = {{ person.id|e('js') }};
-        window.addressId = {{ address.id|e('js') }};
-        window.mode = 'edit';
-        window.vueRootComponent = 'app';
-    </script>
-    {{ encore_entry_script_tags('vue_address') }}
-{% endblock %}

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

@@ -27,10 +27,16 @@
 
     <ul class="record_actions my-3">
         <li style="margin: auto;">
-            <a class="btn btn-lg btn-create"
+
-               href="{{ path('chill_person_address_new', { 'person_id' : person.id } ) }}">
+            {# include vue_address component #}
-                {{ 'Add an address'|trans }}
+            {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
-            </a>
+                address_id: person.lastAddress.id,
+                mode: 'new',
+                buttonSize: 'btn-lg',
+                buttonText: 'Add an address',
+                modalTitle: 'Add an address',
+            } %}
+
         </li>
     </ul>
 
@@ -58,10 +64,16 @@
             {% set row = row + 1 %}
             {% if address.validTo is not empty and address.validTo < previousRowFrom %}
                 <div class="{{ 'row' ~ row ~ ' ' }}col-a action">
+
+                    {# include vue_address component #}
                     <a href="" class="btn btn-sm btn-create">{{ 'Insert an address'|trans }}</a></div>
+
                 <div class="{{ 'row' ~ row ~ ' ' }}col-b"></div>
                 <div class="{{ 'row' ~ row ~ ' ' }}col-c action">
+
+                    {# include vue_address component #}
                     <a href="" class="btn btn-sm btn-create">{{ 'Insert an address'|trans }}</a></div>
+
                 <div class="date">
                     {% if address.validTo is not empty %}
                         {{ address.validTo|format_date('short') }}
@@ -81,7 +93,10 @@
                         'has_no_address': true
                     }) }}
                     <ul class="record_actions">
+
+                        {# include vue_address component #}
                         <li><a href="{{ path('chill_person_address_edit', { 'person_id': person.id, 'address_id' : address.id } ) }}" class="btn btn-edit"></a></li>
+
                     </ul>
                 </div>
             {# endif #}
@@ -130,6 +145,7 @@
             </a>
         </li>
         <li>
+            {# include vue_address component #}
             <a class="btn btn-create"
                 href="{{ path('chill_person_address_new', { 'person_id' : person.id } ) }}">
                 {{ 'Add an address'|trans }}

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

@@ -200,10 +200,16 @@ This view should receive those arguments:
 
                         <ul class="list-inline text-right mt-2">
                             <li class="list-inline-item">
-                                <a class="btn btn-warning btn-sm" title="{{ 'Edit'|trans }}"
+                                {# include vue_address component #}
-                                   href="{{ path('chill_person_address_edit', { 'person_id': person.id, 'address_id' : person.lastAddress.id } ) }}">
+                                {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
-                                    <i class="fa fa-pencil fa-fw"></i>
+                                    address_id: person.lastAddress.id,
-                                </a>
+                                    mode: 'edit',
+                                    modalTitle: 'Edit address',
+                                    buttonText: 'Edit address',
+                                    buttonType: 'btn-update',
+                                    buttonSize: 'btn-sm',
+                                    buttonDisplay: false
+                                } %}
                             </li>
                             <li class="list-inline-item">
                                 <a class="btn btn-secondary btn-sm" title="{{ "Addresses history"|trans }}"