jrosset
/
RecipeManager
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Personalize template theme to support “Collection” forms

Browse Source
master
Julien Rosset 1 month ago
parent c30a8735b8
commit eb9844fe70
6 changed files with 281 additions and 3 deletions
Show Stats Download Patch File Download Diff File

8
assets/app.js
Unescape Escape View File

@ -15,4 +15,10 @@ const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]
//region FontAwesome
import 'fontawesome';
//endregion
import 'modalDynamic';
//region ModalDynamic
import 'modalDynamic';
//endregion
//region Forms Collections
import 'formCollection';
//endregion

40
assets/formCollection.js
Unescape Escape View File

@ -0,0 +1,40 @@
import 'jqueryLocal';
import {Tooltip} from 'bootstrap';
$(function () {
$(document).on('click', '.collection-add', function (event) {
event.preventDefault();
const button = $(this);
//region Ajoute la ligne
const collectionId = button.data('collection');
const collection = $('#' + collectionId);
const deleteButton = $(`#${collectionId}__collection_entry_add-delete_button > *`);
const rowPrototypePlaceholder = collection.data('prototypePlaceholder');
const rowPrototypeIndex = collection.data('prototypeIndex');
const rowPrototypeRaw = collection.data('prototypeCode').replaceAll(new RegExp(rowPrototypePlaceholder, 'g'), rowPrototypeIndex);
const rowPrototype = $(rowPrototypeRaw);
const rowPrototypeDiv = rowPrototype.find('#' + collectionId + '_' + rowPrototypeIndex);
rowPrototypeDiv.append(deleteButton.clone());
rowPrototype.insertBefore(button.parents('.row').first());
collection.data('prototypeIndex', rowPrototypeIndex + 1);
//endregion
});
$(document).on('click', '.collection-row-delete', function (event) {
event.preventDefault();
const button = $(this);
//region Masque le tooltip (si existant) du bouton, car celui-ci va être supprimé en même temps que sa ligne
const buttonTooltip = Tooltip.getInstance(button);
if (buttonTooltip !== null) {
buttonTooltip.hide();
}
//endregion
//region Supprime la ligne
button.parents('.collection-row').parent().parent().remove();
//endregion
});
});

2
config/packages/twig.yaml
Unescape Escape View File

@ -1,6 +1,6 @@
twig:
file_name_pattern: '*.twig'
form_themes: [ 'bootstrap_5_horizontal_layout.html.twig' ]
form_themes: [ 'form/my_theme.html.twig' ]
when@test:
twig:

3
importmap.php
Unescape Escape View File

@ -23,6 +23,9 @@ return [
'modalDynamic' => [
'path' => './assets/modalDynamic.js',
],
'formCollection' => [
'path' => './assets/formCollection.js',
],
'jqueryLocal' => [
'path' => './assets/jqueryLocal.js',
],

4
templates/base.html.twig
Unescape Escape View File

@ -7,9 +7,10 @@
{% endblock %}
{% block headerContent %}
<div class="d-flex justify-content-between w-100 px-2">
<!--region Website name-->
<!--region Logo / Nom-->
<a class="navbar-brand" href="{{ path('core_main') }}">Recipe Manager</a>
<!--endregion-->
<!--region Menu configuration-->
{% if app.user %}
<nav class="navbar navbar-expand-lg py-0">
<ul class="navbar-nav">
@ -26,6 +27,7 @@
</ul>
</nav>
{% endif %}
<!--endregion-->
<!--region Menu utilisateur-->
<nav class="navbar navbar-expand-lg py-0">
<ul class="navbar-nav">

227
templates/form/my_theme.html.twig
Unescape Escape View File

@ -0,0 +1,227 @@
{% use "bootstrap_5_horizontal_layout.html.twig" %}
{% block collection_widget %}
{% if prototype is defined and not prototype.rendered %}
{% set attr = attr|merge({
'data-prototype-code': form_row(prototype),
'data-prototype-placeholder': prototype.vars.name,
'data-prototype-index': prototype.parent.children|length > 0 ? prototype.parent.children|last.vars.name + 1 : 0,
}) %}
{% endif %}
{{ block('form_widget') }}
{% endblock collection_widget %}
{% block collection_entry_row %}
{% if expanded is defined and expanded %}
{{ block('fieldset_form_row') }}
{% else %}
{% set widget_attr = {context_collection_entry: true} %}
{% if help is not empty %}
{% set widget_attr = {attr: {'aria-describedby': id ~"_help"}} %}
{% endif %}
{% set row_class = row_class|default(row_attr.class|default('mb-3')) %}
{% set is_form_floating = is_form_floating|default('form-floating' in row_class) %}
{% set is_input_group = is_input_group|default('input-group' in row_class) %}
{#- Remove behavior class from the main container -#}
{% set row_class = row_class|replace({'form-floating': '', 'input-group': ''}) %}
<div{% with {attr: row_attr|merge({class: (row_class ~ ' row' ~ ((not compound or force_error|default(false)) and not valid ? ' is-invalid'))|trim})} %}{{ block('attributes') }}{% endwith %}>
{% if is_form_floating or is_input_group %}
<div class="{{ block('form_label_class') }}"></div>
<div class="{{ block('form_group_class') }}">
{% if is_form_floating %}
<div class="form-floating">
{{ form_widget(form, widget_attr) }}
{{ form_label(form) }}
</div>
{% elseif is_input_group %}
<div class="input-group">
{{ form_label(form) }}
{{ form_widget(form, widget_attr) }}
{#- Hack to properly display help with input group -#}
{{ form_help(form) }}
</div>
{% endif %}
{% if not is_input_group %}
{{ form_help(form) }}
{% endif %}
{{ form_errors(form) }}
</div>
{% else %}
{{ form_label(form) }}
<div class="{% if label is same as false %}col-sm-12{% else %}col-sm-10{% endif %}">
{{ form_widget(form, widget_attr) }}
{{ form_help(form) }}
{{ form_errors(form) }}
</div>
{% endif %}
</div>
{% endif %}
{% endblock %}
{% block collection_entry_label %}
{% if label is same as false %}
{% else %}
{{ block('form_label') }}
{% endif %}
{% endblock %}
{% block collection_entry_widget %}
{% set attr = {'class': 'row row-cols-lg-auto g-3 align-items-center collection-row'} %}
{{ block('form_widget') }}
{% endblock %}
{% block collection_entry_add %}
<div class="mb-3 row">
<div class="col-12 column-gap-2">
<button type="button"
class="btn btn-primary collection-add"
data-bs-toggle="tooltip"
data-bs-title="Ajouter"
data-collection="{{ id }}"
>
<i class="fa-solid fa-square-plus"></i>
</button>
</div>
</div>
{% endblock %}
{% block collection_entry_delete %}
<div class="col-12 column-gap-2">
<button type="button"
class="btn btn-danger collection-row-delete"
data-bs-toggle="tooltip"
data-bs-title="Supprimer"
>
<i class="fa-solid fa-trash"></i>
</button>
</div>
{% endblock %}
{% block form_rows %}
{% set child_vars = {} %}
{% if not context_collection_entry|default(false) %}
{% if allow_add is defined %}
{% set child_vars = child_vars|merge({'allow_add': allow_add}) %}
{% endif %}
{% if allow_delete is defined %}
{% set child_vars = child_vars|merge({'allow_delete': allow_delete}) %}
{% endif %}
{% endif %}
{% if context_collection_entry is defined %}
{% set child_vars = child_vars|merge({'context_collection_entry': context_collection_entry}) %}
{% endif %}
{% for child in form|filter(child => not child.rendered) %}
{{ form_row(child, child_vars) }}
{% endfor %}
{% if context_collection_entry|default(false) %}
{% if allow_delete|default(false) %}
{{ block('collection_entry_delete') }}
{% endif %}
{% else %}
{% if allow_add|default(false) %}
{{ block('collection_entry_add') }}
<div id="{{ id }}__collection_entry_add-delete_button" class="d-none">
{{ block('collection_entry_delete') }}
</div>
{% endif %}
{% endif %}
{% endblock form_rows %}
{% block form_row %}
{% set context_collection_entry = context_collection_entry|default(false) %}
{% if expanded is defined and expanded %}
{{ block('fieldset_form_row') }}
{% else %}
{% set widget_attr = {} %}
{% if help is not empty %}
{% set widget_attr = {attr: {'aria-describedby': id ~"_help"}} %}
{% endif %}
{% set row_class = row_class|default(row_attr.class|default(context_collection_entry ? '' : 'mb-3')) %}
{% set is_form_floating = is_form_floating|default('form-floating' in row_class) %}
{% set is_input_group = is_input_group|default('input-group' in row_class) %}
{#- Remove behavior class from the main container -#}
{% set row_class = row_class|replace({'form-floating': '', 'input-group': ''}) %}
<div
{% with {
attr: row_attr|merge({
class: (
row_class
~ (not context_collection_entry ? ' row' : ' col-12 d-flex column-gap-2')
~ ((not compound or force_error|default(false)) and not valid ? ' is-invalid')
)|trim
})
} %}
{{ block('attributes') }}
{% endwith %}
>
{% if is_form_floating or is_input_group %}
<div class="{{ block('form_label_class') }}"></div>
<div class="{{ block('form_group_class') }}">
{% if is_form_floating %}
<div class="form-floating">
{{ form_widget(form, widget_attr) }}
{{ form_label(form) }}
</div>
{% elseif is_input_group %}
<div class="input-group">
{{ form_label(form) }}
{{ form_widget(form, widget_attr) }}
{#- Hack to properly display help with input group -#}
{{ form_help(form) }}
</div>
{% endif %}
{% if not is_input_group %}
{{ form_help(form) }}
{% endif %}
{{ form_errors(form) }}
</div>
{% else %}
{{ form_label(form) }}
<div class="{{ not context_collection_entry ? block('form_group_class') }}">
{{ form_widget(form, widget_attr) }}
{{ form_help(form) }}
{{ form_errors(form) }}
</div>
{% endif %}
</div>
{% endif %}
{% endblock form_row %}
{% block form_label -%}
{% set context_collection_entry = context_collection_entry|default(false) %}
{%- if label is same as(false) -%}
<div class="{{ block('form_label_class') }}"></div>
{%- else -%}
{%- set row_class = row_class|default(row_attr.class|default('')) -%}
{%- if 'form-floating' not in row_class and 'input-group' not in row_class -%}
{%- if expanded is not defined or not expanded -%}
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' col-form-label')|trim}) -%}
{%- endif -%}
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' ' ~ (not context_collection_entry ? block('form_label_class')))|trim}) -%}
{%- endif -%}
{% if label is not same as(false) -%}
{%- set parent_label_class = parent_label_class|default(label_attr.class|default('')) -%}
{%- if compound is defined and compound -%}
{%- set element = 'legend' -%}
{%- if 'col-form-label' not in parent_label_class -%}
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' col-form-label' )|trim}) -%}
{%- endif -%}
{%- else -%}
{%- set row_class = row_class|default(row_attr.class|default('')) -%}
{%- set label_attr = label_attr|merge({for: id}) -%}
{%- if 'col-form-label' not in parent_label_class -%}
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ('input-group' in row_class ? ' input-group-text' : ' form-label') )|trim}) -%}
{%- endif -%}
{%- endif -%}
{%- endif -%}
{% if label is not same as(false) -%}
{% if not compound -%}
{% set label_attr = label_attr|merge({'for': id}) %}
{%- endif -%}
{% if required -%}
{% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' required')|trim}) %}
{%- endif -%}
<{{ element|default('label') }}{% if label_attr %}{% with { attr: label_attr } %}{{ block('attributes') }}{% endwith %}{% endif %}>
{{- block('form_label_content') -}}
</{{ element|default('label') }}>
{%- endif -%}
{%- endif -%}
{%- endblock form_label %}
Write Preview
Loading…
Cancel
Save