feat: improved form layout

This commit is contained in:
Björn Fromme
2025-09-30 17:11:30 +02:00
parent e37b6234e8
commit 372490ed5a
+105 -96
View File
@@ -1,5 +1,55 @@
{% extends 'layout.html.twig' %} {% extends 'layout.html.twig' %}
{# Local form theme override for consistent fieldset rendering #}
{% use 'forms.html.twig' %}
{% block form_row %}
{%- if form.vars.expanded is defined and form.vars.expanded -%}
{# Expanded forms get fieldset wrapper #}
<fieldset class="mb-1">
<legend class="font-semibold mb-1">
{{- form.vars.label -}}
</legend>
{{- form_widget(form, {
'attr': attr|default({})
}) -}}
{{- form_errors(form) -}}
{{- form_help(form) -}}
</fieldset>
{%- else -%}
{{- parent() -}}
{%- endif -%}
{% endblock %}
{% import _self as macros %}
{# Macro to render a field or placeholder with consistent fieldset structure #}
{% macro service_field(participant, fieldName, label, options = {}) %}
{% if participant[fieldName] is defined %}
{{ form_row(participant[fieldName], options) }}
{% else %}
<fieldset class="mb-1">
<legend class="font-semibold mb-1">{{ label }}</legend>
<div class="text-sm text-gray-500">Nicht wählbar</div>
</fieldset>
{% endif %}
{% endmacro %}
{# Specialized macro for checkbox fields (like rental insurance) that need manual fieldset wrapping #}
{% macro checkbox_field(participant, fieldName, label, options = {}) %}
{% if participant[fieldName] is defined %}
<fieldset class="mb-1">
<legend class="font-semibold mb-1">{{ label }}</legend>
{{ form_row(participant[fieldName], options) }}
</fieldset>
{% else %}
<fieldset class="mb-1">
<legend class="font-semibold mb-1">{{ label }}</legend>
<div class="text-sm text-gray-500">Nicht wählbar</div>
</fieldset>
{% endif %}
{% endmacro %}
{% block content %} {% block content %}
{% include '_partials/_flashes.html.twig' %} {% include '_partials/_flashes.html.twig' %}
<h1>Neue Buchung</h1> <h1>Neue Buchung</h1>
@@ -86,102 +136,61 @@
{% endif %} {% endif %}
<div class="grid grid-cols-2 gap-4"> <div class="grid grid-cols-2 gap-4">
{% if participant.skiPass is defined %} {{ _self.service_field(participant, 'skiPass', 'Skipass', {
{{ form_row(participant.skiPass, { 'attr': {
'attr': { 'hx-trigger': 'change',
'hx-trigger': 'change', 'hx-post': path('app_booking_create_step_2_refresh'),
'hx-post': path('app_booking_create_step_2_refresh'), 'hx-swap': 'none'
'hx-swap': 'none' }
} }) }}
}) }}
{% else %} {{ _self.service_field(participant, 'courses', 'Kurse', {
<div> 'attr': {
Skipass nicht wählbar 'hx-trigger': 'change',
</div> 'hx-post': path('app_booking_create_step_2_refresh'),
{% endif %} 'hx-swap': 'none'
{% if participant.courses is defined %} }
{{ form_row(participant.courses, { }) }}
'attr': {
'hx-trigger': 'change', {{ _self.service_field(participant, 'additionalServices', 'Zusatzleistungen', {
'hx-post': path('app_booking_create_step_2_refresh'), 'attr': {
'hx-swap': 'none' 'hx-trigger': 'change',
} 'hx-post': path('app_booking_create_step_2_refresh'),
}) }} 'hx-swap': 'none'
{% else %} }
<div> }) }}
Kurse nicht wählbar
</div> {{ _self.service_field(participant, 'rentals', 'Leihmaterial', {
{% endif %} 'attr': {
{% if participant.additionalServices is defined %} 'hx-trigger': 'change',
{{ form_row(participant.additionalServices, { 'hx-post': path('app_booking_create_step_2_refresh'),
'attr': { 'hx-swap': 'none'
'hx-trigger': 'change', }
'hx-post': path('app_booking_create_step_2_refresh'), }) }}
'hx-swap': 'none'
} {{ _self.checkbox_field(participant, 'rentalInsurance', 'Leihmaterial-Versicherung', {
}) }} 'attr': {
{% else %} 'hx-trigger': 'change',
<div> 'hx-post': path('app_booking_create_step_2_refresh'),
Zusatzleistungen nicht wählbar 'hx-swap': 'none'
</div> }
{% endif %} }) }}
{% if participant.rentals is defined %}
{{ form_row(participant.rentals, { {{ _self.service_field(participant, 'board', 'Verpflegung', {
'attr': { 'attr': {
'hx-trigger': 'change', 'hx-trigger': 'change',
'hx-post': path('app_booking_create_step_2_refresh'), 'hx-post': path('app_booking_create_step_2_refresh'),
'hx-swap': 'none' 'hx-swap': 'none'
} }
}) }} }) }}
{% else %}
<div> {{ _self.service_field(participant, 'insurance', 'Reiseversicherung', {
Leihmaterial nicht wählbar 'attr': {
</div> 'hx-trigger': 'change',
{% endif %} 'hx-post': path('app_booking_create_step_2_refresh'),
{% if participant.rentalInsurance is defined %} 'hx-swap': 'none'
<fieldset> }
<legend class="font-semibold mb-1"> }) }}
Leihmaterial-Versicherung
</legend>
{{ form_row(participant.rentalInsurance, {
'attr': {
'hx-trigger': 'change',
'hx-post': path('app_booking_create_step_2_refresh'),
'hx-swap': 'none'
}
}) }}
</fieldset>
{% else %}
<div>
Leihmat.-Versicherung nicht wählbar
</div>
{% endif %}
{% if participant.board is defined %}
{{ form_row(participant.board, {
'attr': {
'hx-trigger': 'change',
'hx-post': path('app_booking_create_step_2_refresh'),
'hx-swap': 'none'
}
}) }}
{% else %}
<div>
Verpflegung nicht wählbar
</div>
{% endif %}
{% if participant.insurance is defined %}
{{ form_row(participant.insurance, {
'attr': {
'hx-trigger': 'change',
'hx-post': path('app_booking_create_step_2_refresh'),
'hx-swap': 'none'
}
}) }}
{% else %}
<div>
Versicherung nicht wählbar
</div>
{% endif %}
</div> </div>
{# Transportation Services Section #} {# Transportation Services Section #}