feat: implement hx-boost for reliable loading indication

This commit is contained in:
Björn Fromme
2025-12-07 14:11:50 +01:00
parent f0b84c9943
commit 21600dc2d6
32 changed files with 163 additions and 271 deletions
@@ -107,11 +107,11 @@ class IndexController extends AbstractController
}
/**
* Cancels the active booking session and returns to the login page.
* Cancels the active booking session and returns to the appropriate page.
*
* This endpoint allows users to exit the booking flow at any time by
* clearing the booking session data and redirecting them back to the
* regular login screen.
* clearing the booking session data and redirecting them to the account
* dashboard (if logged in) or login page (if guest).
*/
#[Route('/bookings/cancel', name: 'app_booking_cancel')]
public function cancel(Request $request): Response
@@ -127,8 +127,10 @@ class IndexController extends AbstractController
// Add a flash message to inform the user
$this->addFlash('info', 'Buchung abgebrochen.');
// Redirect to login page
return $this->hxRedirect($request, $this->generateUrl('app_login'));
// Redirect to account dashboard if logged in, otherwise to login page
$targetRoute = null !== $this->getUser() ? 'app_account' : 'app_login';
return $this->redirectToRoute($targetRoute);
}
return $this->render('booking/modal_cancel.html.twig');
@@ -55,12 +55,6 @@ class Step1Controller extends AbstractController
}
$form = $this->createForm(BookingCreateStep1Type::class, $bookingCreateDto, [
'attr' => [
'hx-post' => $this->generateUrl('app_booking_create_step_1'),
'hx-target' => '#form-wrapper',
'hx-select' => '#form-wrapper',
'hx-swap' => 'outerHTML',
],
'validation_groups' => ['booking_create_step_1'],
]);
@@ -80,7 +74,7 @@ class Step1Controller extends AbstractController
// Clear baseline snapshot when moving to step 2
$this->bookingService->clearBaselineSnapshot($request);
return $this->hxRedirect($request, $this->generateUrl('app_booking_create_step_2'));
return $this->redirectToRoute('app_booking_create_step_2');
}
// Get complete summary data (pricing, rooms, CMS data)
@@ -94,7 +94,7 @@ class Step2Controller extends AbstractController
$this->bookingService->saveBookingDto($request, $bookingCreateDto, BookingDto::MODE_CREATE);
// Proceed to Step 3
return $this->hxRedirect($request, $this->generateUrl('app_booking_create_step_3'));
return $this->redirectToRoute('app_booking_create_step_3');
}
// Generate cards data with validation state if form was submitted and failed
@@ -112,17 +112,6 @@ class Step2Controller extends AbstractController
'summaryData' => $summaryData,
];
// HTMX request: render blocks only
if ($this->isHxRequest($request)) {
return $this->htmxOobResponse(
'booking/create/step_2.html.twig',
['participant_cards', 'booking_summary'],
$templateData,
$this->generateUrl('app_booking_create_step_2')
);
}
// Regular request: render full template
return $this->render('booking/create/step_2.html.twig', $templateData);
}
@@ -162,7 +151,7 @@ class Step2Controller extends AbstractController
$this->addNotificationsAsFlashMessages($notifications);
// HTMX redirect to cards view
return $this->hxRedirect($request, $this->generateUrl('app_booking_create_step_2'));
return $this->redirectToRoute('app_booking_create_step_2');
}
// Get complete summary data (pricing, rooms, CMS data)
@@ -174,29 +163,8 @@ class Step2Controller extends AbstractController
'bookingDto' => $bookingDto,
'summaryData' => $summaryData,
'refreshRouteName' => 'app_booking_create_step_2_participant_refresh',
'submitRouteName' => 'app_booking_create_step_2_participant',
];
// HTMX request: render blocks only with OOB swap
if ($this->isHxRequest($request)) {
$response = $this->htmxOobResponse(
'booking/_participant_form.html.twig',
['participant_form', 'booking_summary'],
$templateData,
$this->generateUrl('app_booking_create_step_2_participant', ['index' => $index])
);
// Add notifications to render response if present
if (false === empty($notifications)) {
$response->headers->set('HX-Trigger', json_encode([
'showNotifications' => $notifications,
]));
}
return $response;
}
// Regular request: render full template
return $this->render('booking/create/step_2_participant.html.twig', $templateData);
}
@@ -226,8 +194,7 @@ class Step2Controller extends AbstractController
$request,
$bookingDto,
$index,
'app_booking_create_step_2_participant_refresh',
'app_booking_create_step_2_participant'
'app_booking_create_step_2_participant_refresh'
);
}
}
@@ -103,7 +103,7 @@ class Step3Controller extends AbstractController
$this->addFlash('info', $message);
return $this->hxRedirect($request, $this->generateUrl('app_booking_create_step_4'));
return $this->redirectToRoute('app_booking_create_step_4');
}
// Not a fallback scenario - show validation error
@@ -153,7 +153,7 @@ class Step3Controller extends AbstractController
$this->addFlash('info', $inquiryResponse->message);
}
return $this->hxRedirect($request, $this->generateUrl('app_booking_create_step_4'));
return $this->redirectToRoute('app_booking_create_step_4');
} catch (TimeoutException $e) {
return $this->handleApiError(
'Booking inquiry timeout',
@@ -104,7 +104,7 @@ class Step4Controller extends AbstractController
$this->clearTravelDataCache($bookingCreateDto);
$this->bookingService->clearBookingDto($request, BookingDto::MODE_CREATE);
return $this->hxRedirect($request, $this->generateUrl('app_booking_create_success'));
return $this->redirectToRoute('app_booking_create_success');
} catch (TimeoutException $e) {
return $this->handleApiError(
'Booking creation timeout',
+33 -63
View File
@@ -71,8 +71,7 @@ class IndexController extends AbstractController
$password = $this->crypt->decrypt($user->getPassword());
// Load form data from session (or API on first load)
$loadResult = $this->dataLoader->loadFormData($request, $id, $email, $password);
$bookingDto = $loadResult['bookingDto'];
$bookingDto = $this->dataLoader->loadFormData($request, $id, $email, $password);
if (null === $bookingDto) {
$this->addFlash('error', 'Buchungsdaten nicht (mehr) verfügbar');
@@ -80,16 +79,6 @@ class IndexController extends AbstractController
return $this->redirectToRoute('app_bookings');
}
// Show staleness warning if applicable
if (null !== $loadResult['stalenessWarning']) {
$this->addFlash('info', $loadResult['stalenessWarning']);
}
// Reset staleness timer when first loading the cards view (not HTMX requests)
if (false === $this->isHxRequest($request)) {
$this->dataLoader->resetStalenessTimer($request, $bookingDto);
}
// Fetch booking data for display (surcharges, canceled status, etc.)
$bookingData = $this->dataLoader->fetchBookingData($email, $password, $id);
if (null === $bookingData || $bookingData instanceof Notification) {
@@ -129,17 +118,6 @@ class IndexController extends AbstractController
'hasValidationErrors' => $form->isSubmitted() && false === $form->isValid(),
];
// If HTMX request, render only blocks to avoid layout duplication
if ($this->isHxRequest($request)) {
return $this->htmxOobResponse(
'booking/edit/index.html.twig',
['participant_cards', 'booking_summary'],
$templateData,
$this->generateUrl('app_booking_edit', ['id' => $id])
);
}
// Regular request: render full template
return $this->render('booking/edit/index.html.twig', $templateData);
}
@@ -215,7 +193,7 @@ class IndexController extends AbstractController
$this->addNotificationsAsFlashMessages($notifications);
// Redirect back to cards
return $this->hxRedirect($request, $this->generateUrl('app_booking_edit', ['id' => $id]));
return $this->redirectToRoute('app_booking_edit', ['id' => $id]);
}
// Get complete summary data (pricing, rooms, CMS data)
@@ -233,32 +211,10 @@ class IndexController extends AbstractController
'summaryData' => $summaryData,
'refreshRouteName' => 'app_booking_edit_participant_refresh',
'refreshRouteParams' => ['id' => $id, 'index' => $index],
'submitRouteName' => 'app_booking_edit_participant',
'submitRouteParams' => ['id' => $id, 'index' => $index],
'cancelRouteName' => 'app_booking_edit',
'cancelRouteParams' => ['id' => $id],
];
// HTMX request: render blocks only with OOB swap
if ($this->isHxRequest($request)) {
$response = $this->htmxOobResponse(
'booking/_participant_form.html.twig',
['participant_form', 'booking_summary'],
$templateData,
$this->generateUrl('app_booking_edit_participant', ['id' => $id, 'index' => $index])
);
// Add notifications to render response if present
if (false === empty($notifications)) {
$response->headers->set('HX-Trigger', json_encode([
'showNotifications' => $notifications,
]));
}
return $response;
}
// Regular request: render full template
return $this->render('booking/edit/participant.html.twig', $templateData);
}
@@ -331,8 +287,6 @@ class IndexController extends AbstractController
'summaryData' => $summaryData,
'refreshRouteName' => 'app_booking_edit_participant_refresh',
'refreshRouteParams' => ['id' => $id, 'index' => $index],
'submitRouteName' => 'app_booking_edit_participant',
'submitRouteParams' => ['id' => $id, 'index' => $index],
'cancelRouteName' => 'app_booking_edit',
'cancelRouteParams' => ['id' => $id],
]
@@ -350,40 +304,56 @@ class IndexController extends AbstractController
/**
* Reloads booking data from API, discarding all session changes.
*
* GET: Returns modal HTML for confirmation
* POST: Clears session and redirects to reload the booking
*/
#[Route(
path: '/bookings/{id}/edit/reload',
name: 'app_booking_edit_reload',
requirements: ['id' => '\d+'],
methods: ['POST']
requirements: ['id' => '\d+']
)]
#[IsGranted('ROLE_USER')]
public function reloadFromApi(int $id, Request $request): Response
{
// Clear session to discard all changes
$this->bookingService->clearBookingDto($request, BookingDto::MODE_EDIT);
if (Request::METHOD_POST === $request->getMethod()) {
// Clear session to discard all changes
$this->bookingService->clearBookingDto($request, BookingDto::MODE_EDIT);
$this->addFlash('success', 'Änderungen verworfen, Daten neu geladen');
$this->addFlash('success', 'Änderungen verworfen, Daten neu geladen');
return $this->hxRedirect($request, $this->generateUrl('app_booking_edit', ['id' => $id]));
return $this->redirectToRoute('app_booking_edit', ['id' => $id]);
}
return $this->render('booking/edit/modal_reload.html.twig', [
'bookingId' => $id,
]);
}
/**
* Handles "Zurück" button - clears session and returns to bookings list.
* Handles "Zurück" button - shows confirmation modal or clears session.
*
* GET: Returns modal HTML for confirmation
* POST: Clears session and redirects to bookings list
*/
#[Route(
path: '/bookings/{id}/edit/cancel',
name: 'app_booking_edit_cancel',
requirements: ['id' => '\d+'],
methods: ['POST']
requirements: ['id' => '\d+']
)]
#[IsGranted('ROLE_USER')]
public function cancelEdit(Request $request): Response
public function cancelEdit(int $id, Request $request): Response
{
// Clear session to discard dirty state
$this->bookingService->clearBookingDto($request, BookingDto::MODE_EDIT);
if (Request::METHOD_POST === $request->getMethod()) {
// Clear session to discard dirty state
$this->bookingService->clearBookingDto($request, BookingDto::MODE_EDIT);
return $this->hxRedirect($request, $this->generateUrl('app_bookings'));
return $this->redirectToRoute('app_bookings');
}
return $this->render('booking/edit/modal_cancel.html.twig', [
'bookingId' => $id,
]);
}
/**
@@ -420,7 +390,7 @@ class IndexController extends AbstractController
'booking_id' => $id,
]);
return $this->hxRedirect($request, $this->generateUrl('app_booking_edit', ['id' => $id]));
return $this->redirectToRoute('app_booking_edit', ['id' => $id]);
}
} catch (TimeoutException $e) {
$this->addFlash('error', 'Die Anfrage hat zu lange gedauert. Bitte versuchen Sie es erneut.');
@@ -433,6 +403,6 @@ class IndexController extends AbstractController
$this->addFlash('error', 'Es ist ein Fehler in der Kommunikation mit dem Buchungssystem aufgetreten');
}
return $this->hxRedirect($request, $this->generateUrl('app_booking_edit', ['id' => $id]));
return $this->redirectToRoute('app_booking_edit', ['id' => $id]);
}
}
@@ -114,7 +114,6 @@ trait ParticipantCardFlowTrait
BookingDto $bookingDto,
int $index,
string $refreshRouteName,
string $submitRouteName,
): Response {
// Create form with validation disabled
$form = $this->createParticipantForm($bookingDto, $index, [
@@ -143,7 +142,6 @@ trait ParticipantCardFlowTrait
'bookingDto' => $bookingDto,
'summaryData' => $summaryData,
'refreshRouteName' => $refreshRouteName,
'submitRouteName' => $submitRouteName,
]
);