wip: improved validation and feedback

templates/booking/_participant_card.html.twig

@@ -5,42 +5,25 @@
 {% set mode = mode|default('create') %}
 
 <div id="participant-card-{{ index }}"
-     class="border rounded p-4
-     {{ isCanceled ? 'border-gray-400 bg-gray-50' : (hasErrors ? 'border-red-500 bg-red-50' : '') }}">
+     class="{{ html_classes('border rounded p-4', { 'border-gray-400 bg-gray-50': isCanceled, 'border-red-700': not isValid }) }}">
     <div class="flex justify-between items-start">
         <div class="flex-1">
             <div class="flex items-center gap-2">
-                <h3 class="font-semibold {{ hasErrors ? 'text-red-800' : (isCanceled ? 'text-gray-600' : '') }}" {{ qa_attribute('participant-name', index) }}>
+                <h3 class="font-semibold {{ isCanceled ? 'text-gray-600' : '' }}" {{ qa_attribute('participant-name', index) }}>
                     {{ cardData.name }}
                 </h3>
                 {% if isCanceled %}
                     <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-700 text-white" {{ qa_attribute('participant-canceled', index) }}>
                         storniert
                     </span>
-                {% elseif hasErrors %}
-                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800" {{ qa_attribute('participant-incomplete', index) }}>
-                        <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
-                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
-                        </svg>
-                        Unvollständig
+                {% endif %}
+                {% if not isValid %}
+                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-700 text-white" {{ qa_attribute('participant-invalid', index) }}>
+                        unvollständige oder fehlerhafte Daten
                     </span>
                 {% endif %}
             </div>
             <p class="text-sm text-gray-600" {{ qa_attribute('participant-room-name', index) }}>{{ cardData.roomName }}</p>
-
-            {# Display specific error messages #}
-            {% if hasErrors and errorMessages|length > 0 %}
-                <div class="mt-2 space-y-1" {{ qa_attribute('participant-errors', index) }}>
-                    {% for errorMessage in errorMessages %}
-                        <p class="text-sm text-red-700">
-                            <svg class="w-4 h-4 inline mr-1" fill="currentColor" viewBox="0 0 20 20">
-                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
-                            </svg>
-                            {{ errorMessage }}
-                        </p>
-                    {% endfor %}
-                </div>
-            {% endif %}
         </div>
         <div class="flex items-center gap-4">
             <span class="font-medium {{ isCanceled ? 'text-gray-500' : '' }}" {{ qa_attribute('participant-price', index) }}>{{ cardData.price }}</span>
@@ -54,7 +37,7 @@
             {% else %}
                 {% if mode == 'edit' %}
                     <button type="button"
-                            class="button bg-button {{ hasErrors ? 'bg-button--primary' : 'bg-button--secondary' }}"
+                            class="button bg-button bg-button--secondary"
                             hx-get="{{ path('app_booking_edit_participant', {id: bookingId, index: index}) }}"
                             hx-target="#main-content"
                             hx-swap="innerHTML"
@@ -63,7 +46,7 @@
                     </button>
                 {% else %}
                     <button type="button"
-                            class="button bg-button {{ hasErrors ? 'bg-button--primary' : 'bg-button--secondary' }}"
+                            class="button bg-button bg-button--secondary"
                             hx-get="{{ path('app_booking_create_step_2_participant', {index: index}) }}"
                             hx-target="#main-content"
                             hx-swap="innerHTML"

templates/booking/create/step_2.html.twig

@@ -35,14 +35,10 @@
 
             <div id="participant-cards-grid" class="space-y-4">
                 {% for cardData in cardsData %}
-                    {% set hasErrors = loop.index0 in participantErrors|default([]) %}
-                    {% set errorMessages = participantErrorMessages[loop.index0]|default([]) %}
                     {% include 'booking/_participant_card.html.twig' with {
                         'cardData': cardData,
                         'index': loop.index0,
-                        'mode': 'create',
-                        'hasErrors': hasErrors,
-                        'errorMessages': errorMessages
+                        'mode': 'create'
                     } %}
                 {% endfor %}
             </div>

templates/booking/edit/index.html.twig

@@ -60,15 +60,11 @@
                 <div id="participant-cards-grid" class="space-y-4">
                     {% for participant in bookingDto.participants %}
                         {% set isCanceled = (bookingData.participantsStatus[loop.index0] ?? null) == 'S' %}
-                        {% set hasErrors = loop.index0 in participantErrors|default([]) %}
-                        {% set errorMessages = participantErrorMessages[loop.index0]|default([]) %}
                         {% include 'booking/_participant_card.html.twig' with {
                             'cardData': cardsData[loop.index0],
                             'index': loop.index0,
                             'mode': 'edit',
                             'isCanceled': isCanceled,
-                            'hasErrors': hasErrors,
-                            'errorMessages': errorMessages,
                             'bookingId': bookingData.id
                         } %}
                     {% endfor %}