wip: feedback about booked and assigned rooms

src/Controller/Booking/CreateStep2Controller.php

@@ -4,11 +4,11 @@ declare(strict_types=1);
 
 namespace App\Controller\Booking;
 
+use App\Controller\Traits\HtmxControllerTrait;
 use App\Form\BookingCreateStep2Type;
 use App\Form\Model\BookingCreateDto;
 use App\Form\Model\ParticipantDto;
 use App\Service\BookingService;
-use App\Validator\Constraints\Participant;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
@@ -23,6 +23,7 @@ use Symfony\Component\Routing\Attribute\Route;
 class CreateStep2Controller extends AbstractController
 {
     use BookingCreateTrait;
+    use HtmxControllerTrait;
 
     public function __construct(
         private readonly BookingService $bookingService,
@@ -61,9 +62,12 @@ class CreateStep2Controller extends AbstractController
             return $this->redirectToRoute('app_booking_create_step_3');
         }
 
+        $roomAssignmentCounts = $this->bookingService->getRoomAssignmentCounts($bookingCreateDto);
+
         return $this->render('booking/create_step_2.html.twig', [
             'bookingCreateDto' => $bookingCreateDto,
             'participantsCount' => $participantsCount,
+            'assignmentCounts' => $roomAssignmentCounts,
             'form' => $form->createView(),
         ]);
     }
@@ -76,6 +80,7 @@ class CreateStep2Controller extends AbstractController
     public function refreshParticipantForm(Request $request): Response
     {
         $bookingCreateDto = $this->bookingService->getOrCreateBookingCreateDto($request);
+        $participantsCount = $this->getParticipantsCount($bookingCreateDto);
 
         // Process form data without validation to capture current state
         $form = $this->createForm(BookingCreateStep2Type::class, $bookingCreateDto, [
@@ -85,9 +90,20 @@ class CreateStep2Controller extends AbstractController
 
         $form->handleRequest($request);
 
-        return $this->renderBlock('booking/create_step_2.html.twig', 'participants_form', [
-            'form' => $form->createView(),
-        ]);
+        $roomAssignmentCounts = $this->bookingService->getRoomAssignmentCounts($bookingCreateDto);
+
+        // The DTO is now updated with the latest selection.
+        // We can now render the blocks with the fresh data.
+        return $this->htmxOobResponse(
+            'booking/create_step_2.html.twig',
+            ['participants_form', 'booking_summary'],
+            [
+                'form' => $form->createView(),
+                'bookingCreateDto' => $bookingCreateDto,
+                'participantsCount' => $participantsCount,
+                'assignmentCounts' => $roomAssignmentCounts,
+            ]
+        );
     }
 
     private function getParticipantsCount(BookingCreateDto $bookingCreateDto): int

src/Controller/Traits/HtmxControllerTrait.php

@@ -0,0 +1,37 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Controller\Traits;
+
+use Symfony\Component\HttpFoundation\Response;
+
+/**
+ * Provides helper methods for handling HTMX responses.
+ *
+ * This trait should be used in controllers that extend Symfony's AbstractController,
+ * as it relies on the renderBlockView() method.
+ */
+trait HtmxControllerTrait
+{
+    /**
+     * Renders multiple Twig blocks for an HTMX Out-of-Band swap response.
+     *
+     * @param string               $templateName the name of the Twig template
+     * @param string[]             $blockNames   an array of block names to render
+     * @param array<string, mixed> $context      the context to pass to the template
+     */
+    protected function htmxOobResponse(string $templateName, array $blockNames, array $context = []): Response
+    {
+        $html = '';
+        // Add a flag to the context so templates can conditionally add the hx-swap-oob attribute.
+        $oobContext = $context + ['htmx_oob_swap' => true];
+
+        foreach ($blockNames as $blockName) {
+            // Use renderBlockView() to get the raw HTML string for each block.
+            $html .= $this->renderBlockView($templateName, $blockName, $oobContext);
+        }
+
+        return new Response($html);
+    }
+}

src/Service/BookingService.php

@@ -102,4 +102,22 @@ class BookingService
 
         return $participantsCount;
     }
+
+
+    /**
+     * Calculates the number of participants assigned to each room ID.
+     *
+     * @return array<int, int> an array where the key is the room ID and the value is the count of assigned participants
+     */
+    public function getRoomAssignmentCounts(BookingCreateDto $bookingCreateDto): array
+    {
+        $counts = [];
+        foreach ($bookingCreateDto->participants as $participant) {
+            if (null !== $participant->assignedRoomId) {
+                $counts[$participant->assignedRoomId] = ($counts[$participant->assignedRoomId] ?? 0) + 1;
+            }
+        }
+
+        return $counts;
+    }
 }

templates/booking/create_step_2.html.twig

@@ -2,14 +2,15 @@
 
 {% block content %}
     {% include '_partials/_flashes.html.twig' %}
-    <h1>Neue Buchung</h1>    
+    <h1>Neue Buchung</h1>
     <div class="grid grid-cols-3 gap-8">
         <div class="col-span-2">
             <h2>Teilnehmer</h2>
             {{ form_start(form) }}
             {% do form.participants.setRendered %}
+            {# This block contains the participant form fields #}
             {% block participants_form %}
-                <div id="participants-form" class="space-y-8 pb-8">
+                <div id="participants-form" class="space-y-8 pb-8"{% if htmx_oob_swap is defined and htmx_oob_swap %} hx-swap-oob="true"{% endif %}>
                     {% for participant in form.participants %}
                         <fieldset class="border rounded-md p-8 pt-4">
                             <legend class="font-bold text-xl px-2">
@@ -27,12 +28,11 @@
                                 {{ form_row(participant.mobile) }}
                             </div>
                             <div class="grid grid-cols-1 gap-4 pt-4">
+                                {# hx-swap="none" tells HTMX not to do a normal swap, as OOB will handle it #}
                                 {{ form_row(participant.assignedRoomId, {
                                     'attr': {
                                         'hx-post': path('app_booking_create_step_2_refresh'),
-                                        'hx-target': '#participants-form',
-                                        'hx-select': '#participants-form',
-                                        'hx-swap': 'outerHTML'
+                                        'hx-swap': 'none'
                                     }
                                 }) }}
                             </div>
@@ -48,43 +48,52 @@
             {{ form_end(form) }}
         </div>
         <div>
-            <h3>Zusammenfassung</h3>
-            <h4>
-                Reise
-            </h4>
-            <p>
-                {{ bookingCreateDto.travelData.label }}
-            </p>
-            <h4>
-                Datum
-            </h4>
-            <p>
-                {{ bookingCreateDto.travelData.dateFrom | date('d.m.Y') }} - {{ bookingCreateDto.travelData.dateTo | date('d.m.Y') }}
-            </p>
-            <h4>
-                Unterkunft
-            </h4>
-            <p>
-                {{ bookingCreateDto.travelData.hotel.name }}
-            </p>
-            {% if participantsCount > 0 %}
-                <h4>
-                    Anzahl Teilnehmer
-                </h4>
-                <p>
-                    {{ participantsCount }}
-                </p>
-            {% endif %}
-            <h4>
-                Zimmer
-            </h4>
-            <ul>
-                {% for roomSelection in bookingCreateDto.selectedRooms %}
-                    <li>
-                        {{ roomSelection.quantity }}x {{ roomSelection.roomLabel }}
-                    </li>
-                {% endfor %}
-            </ul>
+            {# This block contains the booking summary #}
+            {% block booking_summary %}
+                <div id="booking-summary"{% if htmx_oob_swap is defined and htmx_oob_swap %} hx-swap-oob="true"{% endif %}>
+                    <h3>Zusammenfassung</h3>
+                    <h4>
+                        Reise
+                    </h4>
+                    <p>
+                        {{ bookingCreateDto.travelData.label }}
+                    </p>
+                    <h4>
+                        Datum
+                    </h4>
+                    <p>
+                        {{ bookingCreateDto.travelData.dateFrom | date('d.m.Y') }} - {{ bookingCreateDto.travelData.dateTo | date('d.m.Y') }}
+                    </p>
+                    <h4>
+                        Unterkunft
+                    </h4>
+                    <p>
+                        {{ bookingCreateDto.travelData.hotel.name }}
+                    </p>
+                    {% if participantsCount > 0 %}
+                        <h4>
+                            Anzahl Teilnehmer
+                        </h4>
+                        <p>
+                            {{ participantsCount }}
+                        </p>
+                    {% endif %}
+                    <h4>
+                        Zimmer
+                    </h4>
+                    <ul>
+                        {% for roomSelection in bookingCreateDto.selectedRooms %}
+                            {% set assignedCount = assignmentCounts[roomSelection.roomId] ?? 0 %}
+                            <li>
+                                {{ roomSelection.roomLabel }}
+                                <span class="text-sm pl-2 {% if assignedCount == roomSelection.quantity %}text-green-600{% else %}text-gray-500{% endif %}">
+                                    ({{ assignedCount }}/{{ roomSelection.quantity }})
+                                </span>
+                            </li>
+                        {% endfor %}
+                    </ul>
+                </div>
+            {% endblock %}
         </div>
     </div>
 {% endblock %}