340 lines
15 KiB
Twig
340 lines
15 KiB
Twig
{% use 'form_div_layout.html.twig' %}
|
|
|
|
{# Macro to render a static (read-only) field value with consistent formatting #}
|
|
{% macro render_static_field(label, value) %}
|
|
<div class="mb-1">
|
|
<label class="font-semibold block">{{ label }}</label>
|
|
<div class="text-sm text-gray-600">{{ value ?: '-' }}</div>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{# Macro to render info icon tooltip for descriptions #}
|
|
{% macro info_tooltip(description) %}
|
|
<div class="pt-px pl-1" {{ stimulus_controller('tooltip') }}>
|
|
<button type="button" data-tooltip-target="trigger" class="text-blue-600 hover:text-blue-800">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
|
|
</svg>
|
|
</button>
|
|
<template data-tooltip-target="template">
|
|
<div class="text-sm">
|
|
{{ description|raw }}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{%- block form_row -%}
|
|
{%- set row_attr = row_attr|merge({ 'class': (row_attr.class|default('') ~ ' mb-1')|trim }) -%}
|
|
{%- set widget_attr = {} -%}
|
|
{%- if help is not empty -%}
|
|
{%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
|
|
{%- endif -%}
|
|
{%- if form.vars.expanded is defined and form.vars.expanded -%}
|
|
<fieldset{% with {attr: row_attr} %}{{ block('attributes') }}{% endwith %}>
|
|
<legend class="font-semibold mb-1">
|
|
{{- form_label(form, null, {element: 'span'}) -}}
|
|
</legend>
|
|
{{- form_widget(form, widget_attr) -}}
|
|
{{- form_errors(form) -}}
|
|
{{- form_help(form) -}}
|
|
</fieldset>
|
|
{%- else -%}
|
|
<div{% with {attr: row_attr} %}{{ block('attributes') }}{% endwith %}>
|
|
{{- form_label(form) -}}
|
|
{{- form_widget(form, widget_attr) -}}
|
|
{{- form_errors(form) -}}
|
|
{{- form_help(form) -}}
|
|
</div>
|
|
{%- endif -%}
|
|
{%- endblock form_row -%}
|
|
|
|
{%- block form_label -%}
|
|
{% set class = 'font-semibold' %}
|
|
{% if errors|length %}
|
|
{% set class = class ~ ' text-red-700' %}
|
|
{% endif %}
|
|
{% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ class)|trim}) %}
|
|
{{ parent() }}
|
|
{%- endblock form_label -%}
|
|
|
|
{%- block form_errors -%}
|
|
{%- if errors|length > 0 -%}
|
|
<ul class="pb-2">
|
|
{%- for error in errors -%}
|
|
<li class="text-red-700">{{ error.message }}</li>
|
|
{%- endfor -%}
|
|
</ul>
|
|
{%- endif -%}
|
|
{%- endblock form_errors -%}
|
|
|
|
{%- block form_widget_simple -%}
|
|
{%- set type = type|default('text') -%}
|
|
{%- set tooltip = null -%}
|
|
{%- if attr['data-tooltip'] is defined -%}
|
|
{%- set tooltip = attr['data-tooltip'] -%}
|
|
{%- set attr = attr|filter((v, k) => k != 'data-tooltip') -%}
|
|
{%- endif -%}
|
|
{%- if type != 'hidden' -%}
|
|
{%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-field')|trim }) -%}
|
|
{%- if errors|length -%}
|
|
{%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-field--has-error' }) -%}
|
|
{%- endif -%}
|
|
{%- if disabled is defined and disabled == true -%}
|
|
{%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
|
|
{%- endif -%}
|
|
{%- endif -%}
|
|
<div{% if tooltip is not null %} {{ stimulus_controller('tooltip', { 'content': tooltip }) }}{% endif %}>
|
|
{{ parent() }}
|
|
{%- if disabled is defined and disabled == true -%}
|
|
<input type="hidden" name="{{ form.vars.full_name }}" value="{{ form.vars.value }}">
|
|
{%- endif -%}
|
|
</div>
|
|
{%- endblock form_widget_simple -%}
|
|
|
|
{%- block textarea_widget -%}
|
|
{%- set tooltip = null -%}
|
|
{%- if attr['data-tooltip'] is defined -%}
|
|
{%- set tooltip = attr['data-tooltip'] -%}
|
|
{%- set attr = attr|filter((v, k) => k != 'data-tooltip') -%}
|
|
{%- endif -%}
|
|
{%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-field')|trim }) -%}
|
|
{%- if errors|length -%}
|
|
{%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-field--has-error' }) -%}
|
|
{%- endif -%}
|
|
{%- if disabled is defined and disabled == true -%}
|
|
{%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
|
|
{%- endif -%}
|
|
<div{% if tooltip is not null %} {{ stimulus_controller('tooltip', { 'content': tooltip }) }}{% endif %}>
|
|
{{ parent() }}
|
|
{%- if disabled is defined and disabled == true -%}
|
|
<input type="hidden" name="{{ form.vars.full_name }}" value="{{ form.vars.value }}">
|
|
{%- endif -%}
|
|
</div>
|
|
{%- endblock textarea_widget -%}
|
|
|
|
{%- block checkbox_widget -%}
|
|
{%- set tooltip = null -%}
|
|
{%- if attr['data-tooltip'] is defined -%}
|
|
{%- set tooltip = attr['data-tooltip'] -%}
|
|
{%- set attr = attr|filter((v, k) => k != 'data-tooltip') -%}
|
|
{%- endif -%}
|
|
{%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-checkbox')|trim }) -%}
|
|
{%- if errors|length -%}
|
|
{%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-checkbox--has-error' }) -%}
|
|
{%- endif -%}
|
|
<div{% if tooltip is not null %} {{ stimulus_controller('tooltip', { 'content': tooltip }) }}{% endif %}>
|
|
<input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
|
|
</div>
|
|
{%- endblock checkbox_widget -%}
|
|
|
|
{%- block radio_widget -%}
|
|
{%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-radio')|trim }) -%}
|
|
{%- if errors|length -%}
|
|
{%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-radio--has-error' }) -%}
|
|
{%- endif -%}
|
|
{%- set tooltip = null -%}
|
|
{%- if attr['data-tooltip'] is defined -%}
|
|
{%- set tooltip = attr['data-tooltip'] -%}
|
|
{%- set attr = attr|filter((v, k) => k != 'data-tooltip') -%}
|
|
{%- endif -%}
|
|
<div{% if tooltip is not null %} {{ stimulus_controller('tooltip', { 'content': tooltip }) }}{% endif %}>
|
|
<input type="radio" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
|
|
</div>
|
|
{%- endblock radio_widget -%}
|
|
|
|
{% block checkbox_row %}
|
|
{%- import _self as forms -%}
|
|
{%- set tooltip = null -%}
|
|
{%- if form.vars.attr['data-tooltip'] is defined -%}
|
|
{%- set tooltip = form.vars.attr['data-tooltip'] -%}
|
|
{%- endif -%}
|
|
{%- set description = form.vars.attr['data-description'] ?? null -%}
|
|
<div class="{{ html_classes('flex', { 'cursor-not-allowed': form.vars.attr.readonly is defined }) }}" {% if tooltip is not null %} {{ stimulus_controller('tooltip', { 'content': tooltip }) }}{% endif %}>
|
|
<label for="{{ form.vars.id }}" class="{{ html_classes('relative flex items-start', { 'pointer-events-none': form.vars.attr.readonly is defined }) }}">
|
|
<div class="flex h-6 items-center">
|
|
{{ form_widget(form) }}
|
|
</div>
|
|
<div class="{{ html_classes('ml-2 leading-6', { 'text-red-700': errors|length }) }}">
|
|
{{ form.vars.label | raw }}
|
|
{{- form_errors(form) -}}
|
|
</div>
|
|
</label>
|
|
{%- if description is not null -%}
|
|
{{ forms.info_tooltip(description) }}
|
|
{%- endif -%}
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block radio_row %}
|
|
{%- import _self as forms -%}
|
|
{%- set tooltip = null -%}
|
|
{%- if form.vars.attr['data-tooltip'] is defined -%}
|
|
{%- set tooltip = form.vars.attr['data-tooltip'] -%}
|
|
{%- endif -%}
|
|
{%- set description = form.vars.attr['data-description'] ?? null -%}
|
|
<div class="{{ html_classes('flex', { 'cursor-not-allowed': form.vars.attr.readonly is defined }) }}" {% if tooltip is not null %} {{ stimulus_controller('tooltip', { 'content': tooltip }) }}{% endif %}>
|
|
<label for="{{ form.vars.id }}" class="{{ html_classes('relative flex items-start', { 'pointer-events-none': form.vars.attr.readonly is defined }) }}">
|
|
<div class="flex h-6 items-center">
|
|
{{ form_widget(form) }}
|
|
</div>
|
|
<div class="{{ html_classes('ml-2 leading-6', { 'text-red-700': errors|length }) }}">
|
|
{{ form.vars.label | raw }}
|
|
{{- form_errors(form) -}}
|
|
</div>
|
|
</label>
|
|
{%- if description is not null -%}
|
|
{{ forms.info_tooltip(description) }}
|
|
{%- endif -%}
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{%- block choice_widget_collapsed -%}
|
|
{%- set tooltip = null -%}
|
|
{%- if attr['data-tooltip'] is defined -%}
|
|
{%- set tooltip = attr['data-tooltip'] -%}
|
|
{%- set attr = attr|filter((v, k) => k != 'data-tooltip') -%}
|
|
{%- endif -%}
|
|
{%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-field')|trim }) -%}
|
|
{%- if errors|length -%}
|
|
{%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-field--has-error' }) -%}
|
|
{%- endif -%}
|
|
{%- if disabled is defined and disabled == true -%}
|
|
{%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
|
|
{%- endif -%}
|
|
<div{% if tooltip is not null %} {{ stimulus_controller('tooltip', { 'content': tooltip }) }}{% endif %}>
|
|
{%- if attr.readonly is defined %}
|
|
<div class="cursor-not-allowed">
|
|
{{ parent() }}
|
|
</div>
|
|
{% else %}
|
|
{{ parent() }}
|
|
{% endif %}
|
|
</div>
|
|
{%- endblock choice_widget_collapsed -%}
|
|
|
|
{%- block choice_widget_expanded -%}
|
|
{%- for child in form %}
|
|
{%- set child_attr = {} -%}
|
|
{%- if attr['hx-trigger'] is defined -%}
|
|
{%- set child_attr = child_attr|merge({
|
|
'hx-trigger': attr['hx-trigger'],
|
|
'hx-post': attr['hx-post'],
|
|
'hx-swap': attr['hx-swap']
|
|
}) -%}
|
|
{%- endif -%}
|
|
{%- if child.vars.attr['data-tooltip'] is defined -%}
|
|
{%- set child_attr = child_attr|merge({'data-tooltip': child.vars.attr['data-tooltip']}) -%}
|
|
{%- endif -%}
|
|
{{- form_row(child, { 'attr': child_attr }) -}}
|
|
{% endfor -%}
|
|
{%- endblock choice_widget_expanded -%}
|
|
|
|
{%- block multiselect_widget -%}
|
|
<div class="relative" {{ stimulus_controller('multiselect', { 'placeholder': form.vars.empty_label }) }}>
|
|
<div {{ stimulus_action('multiselect', 'toggle', 'click')}}
|
|
role="button"
|
|
class="relative rounded-md border border-gray-300 flex items-start space-x-2 px-3">
|
|
<div {{ stimulus_target('multiselect', 'label') }} class="flex-1 min-h-8 py-1.5 text-gray-900 text-sm"></div>
|
|
{{ icon('dots', 'w-4 h-4 mt-2') }}
|
|
</div>
|
|
<div {{ stimulus_target('multiselect', 'dropdown')}} class="absolute z-10 top-full -mt-1.5 left-0 inset-x-0 max-h-48 overflow-y-scroll px-3 py-2 bg-white shadow-lg rounded-md rounded-t-none border border-gray-300 border-t-0 hidden">
|
|
{% for item in form.children %}
|
|
{{ form_row(item, { 'attr': { 'data-action': 'multiselect#update', 'data-multiselect-target': 'choice', 'data-label': item.vars.label } }) }}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{%- endblock multiselect_widget -%}
|
|
|
|
{%- block birthday_widget -%}
|
|
{%- set placeholders = {
|
|
'day': 'Tag',
|
|
'month': 'Monat',
|
|
'year': 'Jahr'
|
|
} -%}
|
|
{%- set field_order = ['day', 'month', 'year'] -%}
|
|
{%- set attr = attr|merge({'class': (attr.class|default('') ~ ' flex items-center space-x-2')|trim}) -%}
|
|
<div {{ block('widget_container_attributes') }}>
|
|
{%- for field_name in field_order -%}
|
|
{%- set child = form[field_name] -%}
|
|
{%- set child_attr = child.vars.attr|default({}) -%}
|
|
{%- set child_attr = child_attr|merge({
|
|
'placeholder': placeholders[field_name],
|
|
'class': (child_attr.class|default('') ~ ' form-field')|trim
|
|
}) -%}
|
|
|
|
{{- form_widget(child, {'attr': child_attr}) -}}
|
|
{% if not loop.last %}
|
|
<span class="block flex-shrink-0">.</span>
|
|
{% endif %}
|
|
{%- endfor -%}
|
|
</div>
|
|
{%- endblock birthday_widget -%}
|
|
|
|
{% block insurance_choice_widget %}
|
|
{%- if expanded -%}
|
|
{%- for child in form %}
|
|
{%- set child_attr = {} -%}
|
|
|
|
{%- if attr['hx-trigger'] is defined -%}
|
|
{%- set child_attr = child_attr|merge({
|
|
'hx-trigger': attr['hx-trigger'],
|
|
'hx-post': attr['hx-post'],
|
|
'hx-swap': attr['hx-swap']
|
|
}) -%}
|
|
{%- endif -%}
|
|
|
|
{%- if child.vars.attr is defined -%}
|
|
{%- set child_attr = child_attr|merge(child.vars.attr) -%}
|
|
{%- endif -%}
|
|
|
|
{%- set insurance = insurances[child.vars.value] ?? null -%}
|
|
{%- set urlsProductInfo = insurance is not null ? insurance.getAllUrlsProductInfo() : [] -%}
|
|
|
|
<div class="flex">
|
|
{{- form_row(child, { 'attr': child_attr }) -}}
|
|
|
|
{%- if urlsProductInfo is not empty -%}
|
|
<div class="pt-px pl-1" {{ stimulus_controller('tooltip') }}>
|
|
<button type="button" data-tooltip-target="trigger" class="text-blue-600 hover:text-blue-800">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
|
|
</svg>
|
|
</button>
|
|
<template data-tooltip-target="template">
|
|
<div class="text-sm">
|
|
{%- for url in urlsProductInfo -%}
|
|
<a href="{{ url }}" target="_blank" rel="noopener noreferrer" class="block">
|
|
Produktinformation {{ loop.index }}
|
|
</a>
|
|
{%- endfor -%}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
{%- endif -%}
|
|
</div>
|
|
{% endfor -%}
|
|
{%- else -%}
|
|
{{- parent() -}}
|
|
{%- endif -%}
|
|
{% endblock %}
|
|
|
|
{% block step_select_choice_widget %}
|
|
<div {{ stimulus_controller('step-input', { 'min': form.vars.min_value, 'max': form.vars.max_value }) }}>
|
|
{{ form_widget(form, { 'attr': {
|
|
'data-step-input-target': 'field',
|
|
'class': 'hidden',
|
|
} }) }}
|
|
<div class="flex space-x-2">
|
|
<button type="button" class="button button--small bg-button" {{ stimulus_target('step-input', 'buttonDec') }} {{ stimulus_action('step-input', 'decrease') }}>
|
|
-
|
|
</button>
|
|
<div {{ stimulus_target('step-input', 'display') }}></div>
|
|
<button type="button" class="button button--small bg-button--secondary" {{ stimulus_target('step-input', 'buttonInc') }} {{ stimulus_action('step-input', 'increase') }}>
|
|
+
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|