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 !
This commit is contained in:
Mathieu Jaumotte 2022-12-12 14:51:43 +01:00
parent ff7f5a5dd3
commit 49380f5f61
5 changed files with 117 additions and 125 deletions

View File

@ -48,8 +48,9 @@
</modal> </modal>
</teleport> </teleport>
<div class="mt-4" v-else> <template v-else>
<suggest-pane v-if="flag.suggestPane" <div v-if="flag.suggestPane" class="mt-4 flex-grow-1">
<suggest-pane
v-bind:context="this.context" v-bind:context="this.context"
v-bind:options="this.options" v-bind:options="this.options"
v-bind:defaultz="this.defaultz" v-bind:defaultz="this.defaultz"
@ -75,6 +76,7 @@
</suggest-pane> </suggest-pane>
</div> </div>
</template>
<!-- step 2 --> <!-- step 2 -->
<teleport to="body" v-if="inModal"> <teleport to="body" v-if="inModal">
@ -118,8 +120,9 @@
</modal> </modal>
</teleport> </teleport>
<div class="mt-4" v-else> <template v-else>
<edit-pane v-if="flag.editPane" <div v-if="flag.editPane" class="mt-4 flex-grow-1">
<edit-pane
v-bind:context="this.context" v-bind:context="this.context"
v-bind:options="this.options" v-bind:options="this.options"
v-bind:defaultz="this.defaultz" v-bind:defaultz="this.defaultz"
@ -152,6 +155,7 @@
</edit-pane> </edit-pane>
</div> </div>
</template>
<!-- step 3 --> <!-- step 3 -->
<teleport to="body" v-if="inModal"> <teleport to="body" v-if="inModal">
@ -192,8 +196,9 @@
</modal> </modal>
</teleport> </teleport>
<div class="mt-4" v-else> <template v-else>
<date-pane v-if="flag.datePane" <div v-if="flag.datePane" class="mt-4 flex-grow-1">
<date-pane
v-bind:context="this.context" v-bind:context="this.context"
v-bind:options="this.options" v-bind:options="this.options"
v-bind:defaultz="this.defaultz" v-bind:defaultz="this.defaultz"
@ -218,6 +223,7 @@
</date-pane> </date-pane>
</div> </div>
</template>
</template> </template>

View File

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

View File

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

View File

@ -5,7 +5,6 @@
{% block content %} {% block content %}
<h1>{{ block('title') }}</h1> <h1>{{ block('title') }}</h1>
<div>
{# include vue_address component #} {# include vue_address component #}
{% include '@ChillMain/Address/_insert_vue_address.html.twig' with { {% include '@ChillMain/Address/_insert_vue_address.html.twig' with {
targetEntity: { name: 'household', id: household.id }, targetEntity: { name: 'household', id: household.id },
@ -15,6 +14,5 @@
useValidFrom: true, useValidFrom: true,
useValidTo: true, useValidTo: true,
} %} } %}
</div>
{% endblock %} {% endblock %}

View File

@ -5,7 +5,6 @@
{% block content %} {% block content %}
<h1>{{ block('title') }}</h1> <h1>{{ block('title') }}</h1>
<div>
{# include vue_address component #} {# include vue_address component #}
{% include '@ChillMain/Address/_insert_vue_address.html.twig' with { {% include '@ChillMain/Address/_insert_vue_address.html.twig' with {
targetEntity: { name: 'household', id: household.id }, targetEntity: { name: 'household', id: household.id },
@ -14,8 +13,5 @@
stickyActions: true, stickyActions: true,
useValidFrom: true, useValidFrom: true,
} %} } %}
{#
#}
</div>
{% endblock %} {% endblock %}