fix template regressions with add_address component

Component works in modal or in main frame. CSS Flex position parent-children directives were broken.
Hope that fix don't introduce others display bug in any cases !

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

@@ -48,33 +48,35 @@
 
       </modal>
    </teleport>
-   <div class="mt-4" v-else>
-      <suggest-pane v-if="flag.suggestPane"
-         v-bind:context="this.context"
-         v-bind:options="this.options"
-         v-bind:defaultz="this.defaultz"
-         v-bind:entity="this.entity"
-         v-bind:flag="this.flag"
-         v-bind:insideModal="false"
-         @pick-address="this.pickAddress"
-         ref="suggestAddress">
-
-         <template v-slot:before v-if="!bypassFirstStep">
-            <a class="btn btn-cancel" @click="resetPane">
-               {{ $t('action.cancel') }}
-            </a>
-         </template>
-         <template v-slot:action>
-            <li>
-               <button @click="openEditPane"
-                  class="btn btn-create">
-                  {{ $t('create_a_new_address')}}
-               </button>
-            </li>
-         </template>
-
-      </suggest-pane>
-   </div>
+   <template v-else>
+      <div v-if="flag.suggestPane" class="mt-4 flex-grow-1">
+         <suggest-pane
+            v-bind:context="this.context"
+            v-bind:options="this.options"
+            v-bind:defaultz="this.defaultz"
+            v-bind:entity="this.entity"
+            v-bind:flag="this.flag"
+            v-bind:insideModal="false"
+            @pick-address="this.pickAddress"
+            ref="suggestAddress">
+   
+            <template v-slot:before v-if="!bypassFirstStep">
+               <a class="btn btn-cancel" @click="resetPane">
+                  {{ $t('action.cancel') }}
+               </a>
+            </template>
+            <template v-slot:action>
+               <li>
+                  <button @click="openEditPane"
+                     class="btn btn-create">
+                     {{ $t('create_a_new_address')}}
+                  </button>
+               </li>
+            </template>
+   
+         </suggest-pane>
+      </div>
+   </template>
 
    <!-- step 2 -->
    <teleport to="body" v-if="inModal">
@@ -118,40 +120,42 @@
 
       </modal>
    </teleport>
-   <div class="mt-4" v-else>
-      <edit-pane v-if="flag.editPane"
-         v-bind:context="this.context"
-         v-bind:options="this.options"
-         v-bind:defaultz="this.defaultz"
-         v-bind:entity="this.entity"
-         v-bind:flag="this.flag"
-         v-bind:errors="this.errors"
-         v-bind:checkErrors="this.checkErrors"
-         v-bind:insideModal="false"
-         @getCities="getCities"
-         @getReferenceAddresses="getReferenceAddresses">
-
-         <template v-slot:before>
-            <a class="btn btn-cancel" @click="resetPane">
-               {{ $t('action.cancel') }}
-            </a>
-         </template>
-         <template v-slot:action>
-            <li v-if="!this.context.edit && this.useDatePane">
-               <button class="btn btn-update change-icon" @click="closeEditPane">
-                  {{ $t('nav.next')}}
-                  <i class="fa fa-fw fa-arrow-right"></i>
-               </button>
-            </li>
-            <li v-else>
-               <button class="btn btn-save" @click="closeEditPane">
-                  {{ $t('action.save')}}
-               </button>
-            </li>
-         </template>
-
-      </edit-pane>
-   </div>
+   <template v-else>
+      <div v-if="flag.editPane" class="mt-4 flex-grow-1">
+         <edit-pane
+            v-bind:context="this.context"
+            v-bind:options="this.options"
+            v-bind:defaultz="this.defaultz"
+            v-bind:entity="this.entity"
+            v-bind:flag="this.flag"
+            v-bind:errors="this.errors"
+            v-bind:checkErrors="this.checkErrors"
+            v-bind:insideModal="false"
+            @getCities="getCities"
+            @getReferenceAddresses="getReferenceAddresses">
+   
+            <template v-slot:before>
+               <a class="btn btn-cancel" @click="resetPane">
+                  {{ $t('action.cancel') }}
+               </a>
+            </template>
+            <template v-slot:action>
+               <li v-if="!this.context.edit && this.useDatePane">
+                  <button class="btn btn-update change-icon" @click="closeEditPane">
+                     {{ $t('nav.next')}}
+                     <i class="fa fa-fw fa-arrow-right"></i>
+                  </button>
+               </li>
+               <li v-else>
+                  <button class="btn btn-save" @click="closeEditPane">
+                     {{ $t('action.save')}}
+                  </button>
+               </li>
+            </template>
+   
+         </edit-pane>
+      </div>
+   </template>
 
    <!-- step 3 -->
    <teleport to="body" v-if="inModal">
@@ -192,32 +196,34 @@
 
       </modal>
    </teleport>
-   <div class="mt-4" v-else>
-      <date-pane v-if="flag.datePane"
-         v-bind:context="this.context"
-         v-bind:options="this.options"
-         v-bind:defaultz="this.defaultz"
-         v-bind:entity="this.entity"
-         v-bind:flag="this.flag"
-         v-bind:insideModal="false"
-         ref="dateAddress">
-
-         <template v-slot:before>
-            <button class="btn btn-misc" @click="openEditPane">
-               <i class="fa fa-fw fa-arrow-left"></i>
-               {{ $t('nav.previous')}}
-            </button>
-         </template>
-         <template v-slot:action>
-            <li>
-               <button class="btn btn-save" @click="closeDatePane">
-                  {{ $t('action.save')}}
+   <template v-else>
+      <div v-if="flag.datePane" class="mt-4 flex-grow-1">
+         <date-pane
+            v-bind:context="this.context"
+            v-bind:options="this.options"
+            v-bind:defaultz="this.defaultz"
+            v-bind:entity="this.entity"
+            v-bind:flag="this.flag"
+            v-bind:insideModal="false"
+            ref="dateAddress">
+         
+            <template v-slot:before>
+               <button class="btn btn-misc" @click="openEditPane">
+                  <i class="fa fa-fw fa-arrow-left"></i>
+                  {{ $t('nav.previous')}}
                </button>
-            </li>
-         </template>
-
-      </date-pane>
-   </div>
+            </template>
+            <template v-slot:action>
+               <li>
+                  <button class="btn btn-save" @click="closeDatePane">
+                     {{ $t('action.save')}}
+                  </button>
+               </li>
+            </template>
+      
+         </date-pane>
+      </div>
+   </template>
 
 </template>
 

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

@@ -187,6 +187,7 @@ div.address-form {
    div#address_map {
       height: 400px;
       width: 100%;
+      z-index: 1;
    }
 }
 </style>

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

@@ -1,6 +1,6 @@
 <template>
 
-   <div v-if="!onlyButton">
+   <div v-if="!onlyButton" class="mt-4 flex-grow-1">
       <div class="loading">
          <i v-if="flag.loading" class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i>
          <span class="sr-only">{{ $t('loading') }}</span>
@@ -36,21 +36,16 @@
             </action-buttons>
          </div>
       </div>
-
-      <div v-if="this.context.edit" class="mb-3 row">
-         <div class="col-sm-4"></div>
-         <div class="address-container col-sm-8">
-            <address-render-box :address="address" :isMultiline="false" :useDatePane="useDatePane"></address-render-box>
-         </div>
-      </div>
-
+   
+      <address-render-box :address="address" :isMultiline="false" :useDatePane="useDatePane"></address-render-box>
+   
       <div v-if="this.context.target.name === 'household' || this.context.edit">
          <action-buttons
             :options="this.options"
             :defaultz="this.defaultz">
             <template v-slot:action>
                <button @click.prevent="$emit('openEditPane')"
-                  class="btn btn-sm" :class="getClassButton"
+                  class="btn" :class="getClassButton"
                   type="button" name="button" :title="$t(getTextButton)">
                   <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
                </button>
@@ -58,10 +53,6 @@
          </action-buttons>
       </div>
 
-      <div v-if="!this.context.edit">
-         <address-render-box :address="address" :isMultiline="false" :useDatePane="useDatePane"></address-render-box>
-      </div>
-
    </div>
 
    <div v-if="onlyButton">

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

@@ -4,17 +4,15 @@
 
 {% block content %}
     <h1>{{ block('title') }}</h1>
-
-    <div>
-        {# include vue_address component #}
-        {% 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 }),
-            openPanesInModal: false,
-            stickyActions: true,
-            useValidFrom: true,
-            useValidTo: true,
-        } %}
-    </div>
+    
+    {# include vue_address component #}
+    {% 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 }),
+        openPanesInModal: false,
+        stickyActions: true,
+        useValidFrom: true,
+        useValidTo: true,
+    } %}
 
 {% endblock %}

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

@@ -4,18 +4,14 @@
 
 {% block content %}
     <h1>{{ block('title') }}</h1>
-
-    <div>
-        {# include vue_address component #}
-        {% 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 }),
-            openPanesInModal: false,
-            stickyActions: true,
-            useValidFrom: true,
-        } %}
-        {#
-        #}
-    </div>
+    
+    {# include vue_address component #}
+    {% 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 }),
+        openPanesInModal: false,
+        stickyActions: true,
+        useValidFrom: true,
+    } %}
 
 {% endblock %}