mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
transmit all options from a twig include template
This commit is contained in:
parent
da09e10fb1
commit
24714227b8
@ -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' },
|
||||
type: 'btn-update',
|
||||
size: 'btn-sm',
|
||||
display: false
|
||||
text: {
|
||||
/// if create or edit address
|
||||
create: window.buttonText || null,
|
||||
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
|
||||
|
||||
@ -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 type = (this.options.button && this.options.button.type) ? this.options.button.type : this.default.button.type;
|
||||
let size = (this.options.button && this.options.button.size !== null) ? this.options.button.size : '';
|
||||
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;
|
||||
}
|
||||
},
|
||||
|
||||
@ -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') }}
|
||||
@ -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 %}
|
||||
|
||||
@ -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 } ) }}">
|
||||
{{ 'Add an address'|trans }}
|
||||
</a>
|
||||
|
||||
{# include vue_address component #}
|
||||
{% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
|
||||
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 }}
|
||||
|
||||
@ -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 }}"
|
||||
href="{{ path('chill_person_address_edit', { 'person_id': person.id, 'address_id' : person.lastAddress.id } ) }}">
|
||||
<i class="fa fa-pencil fa-fw"></i>
|
||||
</a>
|
||||
{# include vue_address component #}
|
||||
{% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
|
||||
address_id: person.lastAddress.id,
|
||||
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 }}"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user