Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-13 05:44:24 +00:00
Code Issues Actions Projects Releases Wiki Activity

fix template regressions with add_address component

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

1
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue
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>

19
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue
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>
@ -36,21 +36,16 @@
</action-buttons> </action-buttons>
</div> </div>
</div> </div>
<div v-if="this.context.edit" class="mb-3 row"> <address-render-box :address="address" :isMultiline="false" :useDatePane="useDatePane"></address-render-box>
<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>
<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
:options="this.options" :options="this.options"
: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">

22
src/Bundle/ChillPersonBundle/Resources/views/Household/address_edit.html.twig
View File

@ -4,17 +4,15 @@
{% 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 }, backUrl: path('chill_person_household_addresses', { 'household_id': household.id }),
backUrl: path('chill_person_household_addresses', { 'household_id': household.id }), openPanesInModal: false,
openPanesInModal: false, stickyActions: true,
stickyActions: true, useValidFrom: true,
useValidFrom: true, useValidTo: true,
useValidTo: true, } %}
} %}
</div>
{% endblock %} {% endblock %}

22
src/Bundle/ChillPersonBundle/Resources/views/Household/address_move.html.twig
View File

@ -4,18 +4,14 @@
{% 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 }, backUrl: path('chill_person_household_addresses', { 'household_id': household.id }),
backUrl: path('chill_person_household_addresses', { 'household_id': household.id }), openPanesInModal: false,
openPanesInModal: false, stickyActions: true,
stickyActions: true, useValidFrom: true,
useValidFrom: true, } %}
} %}
{#
#}
</div>
{% endblock %} {% endblock %}