AddAddress: openPanesInModal, uniq option to enable/disable all step123 in Modal

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

@@ -9,8 +9,8 @@
    </button>
 
    <!-- step 1 -->
-   <teleport to="body" v-if="step1WithModal">
       <modal v-if="flag.showPane"
+   <teleport to="body" v-if="InModal">
          modalDialogClass="modal-dialog-scrollable modal-xl"
          @close="flag.showPane = false">
 
@@ -62,7 +62,7 @@
    </div>
 
    <!-- step 2 -->
-   <teleport to="body" v-if="step2WithModal">
+   <teleport to="body" v-if="InModal">
       <modal v-if="flag.editPane"
          modalDialogClass="modal-dialog-scrollable modal-xl"
          @close="flag.editPane = false">
@@ -147,10 +147,7 @@ export default {
                displayText: true
             },
             title: { create: 'add_an_address_title', edit: 'edit_address' },
-            bindModal: {
+            openPanesInModal: true,
-               step1: true,
-               step2: true,
-            },
             useDate: {
                validFrom: false,
                validTo: false
@@ -192,19 +189,9 @@ export default {
       }
    },
    computed: {
-      step1WithModal() {
+      InModal() {
-         return (typeof this.options.bindModal !== 'undefined' && typeof this.options.bindModal.step1 !== 'undefined') ?
+         return (typeof this.options.openPanesInModal !== 'undefined') ?
-            this.options.bindModal.step1 : this.default.bindModal.step1;
+            this.options.openPanesInModal : this.default.openPanesInModal;
-      },
-      step2WithModal() {
-         let step2 = (typeof this.options.bindModal !== 'undefined' && typeof this.options.bindModal.step2 !== 'undefined') ?
-            this.options.bindModal.step2 : this.default.bindModal.step2;
-
-         if (step2 === false && this.step1WithModal === true) {
-            console.log("step2 must open in a Modal");
-            return true;
-         }
-         return step2;
       },
       getTextTitle() {
          if ( typeof this.options.title !== 'undefined'

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js

@@ -38,12 +38,9 @@ containers.forEach((container) => {
                             create: container.dataset.modalTitle || null,
                             edit: container.dataset.modalTitle || null
                         },
-                        /// Display each step in page or Modal
-                        bindModal: {
-                            step1: container.dataset.bindModalStep1 !== 'false',  //boolean, default: true
-                            step2: container.dataset.bindModalStep2 !== 'false'   //boolean, default: true
-                        },
                         // Use Date fields
+                        /// Display panes in Modal for step123
+                        openPanesInModal: container.dataset.openPanesInModal !== 'false',  //boolean, default: true
                         useDate: {
                             validFrom: container.dataset.useValidFrom === 'true',  //boolean, default: false
                             validTo: container.dataset.useValidTo === 'true'       //boolean, default: false

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

@@ -14,9 +14,8 @@
     * buttonText    twig translated chain
     * buttonSize    bootstrap class like 'btn-sm'
     * buttonDisplayText     bool
-    * bindModalStep1         bool
-    * bindModalStep2         bool
 
+    * openPanesInModal      bool (default: true)
 #}
 <div class="address-container"
 
@@ -51,13 +50,10 @@
         data-button-display-text="false"
     {% endif %}
 
-    {% if bindModalStep1 is defined and bindModalStep1 != 1 %}
+    {% if openPanesInModal is defined and openPanesInModal != 1 %}
-        data-bind-modal-step1="false"
+        data-open-panes-in-modal="false"
     {% endif %}
 
-    {% if bindModalStep2 is defined and bindModalStep2 != 1 %}
-        data-bind-modal-step2="false"
-    {% endif %}
 
     {% if useValidFrom is defined and useValidFrom == 1 %}
         data-use-valid-from="true"

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/CourseLocation.vue

@@ -89,9 +89,7 @@ export default {
                   edit: 'courselocation.edit_temporary_address'
                },
                /// Display each step in page or Modal
-               bindModal: {
+               openPanesInModal: true,
-                  //step1: false, step2: false
-               },
                // Use Date fields
                useDate: {
                   validFrom: true

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

@@ -30,8 +30,7 @@
         {% include '@ChillMain/Address/_insert_vue_address.html.twig' with {
             targetEntity: { name: 'person', id: person.id },
             backUrl: path('chill_person_address_list', { 'person_id': person.id }),
-            bindModalStep1: false,
+            openPanesInModal: false,
-            bindModalStep2: false,
         } %}
 
     {% endblock %}

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

@@ -74,8 +74,7 @@
                             backUrl: path('chill_person_address_list', { 'person_id': person.id }),
                             mode: 'edit',
                             addressId: address.id,
-                            bindModalStep1: false,
+                            openPanesInModal: false,
-                            bindModalStep2: false,
                         } %}
                     #}
 
@@ -90,8 +89,7 @@
                             backUrl: path('chill_person_address_list', { 'person_id': person.id }),
                             mode: 'edit',
                             addressId: address.id,
-                            bindModalStep1: false,
+                            openPanesInModal: false,
-                            bindModalStep2: false,
                         } %}
                     #}
 

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

@@ -30,8 +30,7 @@
         {% include '@ChillMain/Address/_insert_vue_address.html.twig' with {
             targetEntity: { name: 'person', id: person.id },
             backUrl: path('chill_person_address_list', { 'person_id': person.id }),
-            bindModalStep1: false,
+            openPanesInModal: false,
-            bindModalStep2: false,
             useValidFrom: true,
             useValidTo: false
         } %}

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

@@ -10,8 +10,7 @@
         {% include '@ChillMain/Address/_insert_vue_address.html.twig' with {
             targetEntity: { name: 'household', id: household.id },
             backUrl: path('chill_person_household_addresses', { 'household_id': household.id }),
-            bindModalStep1: false,
+            openPanesInModal: false,
-            bindModalStep2: false,
         } %}
     </div>
 

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

@@ -10,8 +10,7 @@
         {% include '@ChillMain/Address/_insert_vue_address.html.twig' with {
             targetEntity: { name: 'household', id: household.id },
             backUrl: path('chill_person_household_addresses', { 'household_id': household.id }),
-            bindModalStep1: false,
+            openPanesInModal: false,
-            bindModalStep2: false,
         } %}
     </div>
 

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

@@ -40,8 +40,7 @@
                             buttonDisplayText: false,
                         } %}
                         {#
-                            bindModalStep1: false,
+                            openPanesInModal: false
-                            bindModalStep2: true,
                         #}
                     </li>
                     <li class="list-inline-item">