fix: keep browser history intact when navigating between cards view and participant form

This commit is contained in:
Björn Fromme
2025-10-31 12:46:37 +01:00
parent cfd346d5df
commit 34a8d42fc3
7 changed files with 136 additions and 70 deletions
@@ -120,7 +120,8 @@ class Step2Controller extends AbstractController
return $this->htmxOobResponse(
'booking/create/step_2.html.twig',
['participant_cards', 'booking_summary'],
$templateData
$templateData,
$this->generateUrl('app_booking_create_step_2')
);
}
@@ -169,21 +170,28 @@ class Step2Controller extends AbstractController
// Get detailed pricing data for summary sidebar
$summary = $this->bookingService->getRoomSummaryAndParticipantCount($bookingDto);
// Render form and sidebar with OOB swap using htmxOobResponse
// This ensures both initial load and refresh use the same block-based rendering
return $this->htmxOobResponse(
'booking/_participant_form.html.twig',
['participant_form', 'booking_summary'],
[
'form' => $form->createView(),
'participantIndex' => $index,
'bookingDto' => $bookingDto,
'summaryData' => $summaryData,
'pricingData' => $summary['pricing'],
'refreshRouteName' => 'app_booking_create_step_2_participant_refresh',
'submitRouteName' => 'app_booking_create_step_2_participant',
]
);
$templateData = [
'form' => $form->createView(),
'participantIndex' => $index,
'bookingDto' => $bookingDto,
'summaryData' => $summaryData,
'pricingData' => $summary['pricing'],
'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)) {
return $this->htmxOobResponse(
'booking/_participant_form.html.twig',
['participant_form', 'booking_summary'],
$templateData,
$this->generateUrl('app_booking_create_step_2_participant', ['index' => $index])
);
}
// Regular request: render full template
return $this->render('booking/create/step_2_participant.html.twig', $templateData);
}
/**
+30 -22
View File
@@ -188,7 +188,8 @@ class IndexController extends AbstractController
return $this->htmxOobResponse(
'booking/edit/index.html.twig',
['participant_cards', 'booking_summary'],
$templateData
$templateData,
$this->generateUrl('app_booking_edit', ['id' => $id])
);
}
@@ -274,27 +275,34 @@ class IndexController extends AbstractController
// Fetch mutable data for form constraints
$mutableData = $this->travelDataService->getMutabilityData($bookingData->dateId);
// Render form and sidebar with OOB swap using htmxOobResponse
// This ensures both initial load and refresh use the same block-based rendering
return $this->htmxOobResponse(
'booking/_participant_form.html.twig',
['participant_form', 'booking_summary'],
[
'form' => $form->createView(),
'participantIndex' => $index,
'bookingDto' => $bookingDto,
'bookingData' => $bookingData,
'mutableData' => $mutableData,
'summaryData' => $summaryData,
'pricingData' => $summary['pricing'],
'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],
]
);
$templateData = [
'form' => $form->createView(),
'participantIndex' => $index,
'bookingDto' => $bookingDto,
'bookingData' => $bookingData,
'mutableData' => $mutableData,
'summaryData' => $summaryData,
'pricingData' => $summary['pricing'],
'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)) {
return $this->htmxOobResponse(
'booking/_participant_form.html.twig',
['participant_form', 'booking_summary'],
$templateData,
$this->generateUrl('app_booking_edit_participant', ['id' => $id, 'index' => $index])
);
}
// Regular request: render full template
return $this->render('booking/edit/participant.html.twig', $templateData);
}
/**
+10 -2
View File
@@ -121,10 +121,11 @@ trait HxTrait
* @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
* @param string|null $pushUrl Optional URL to push to browser history
*
* @return Response Response containing all rendered blocks with OOB context
*/
protected function htmxOobResponse(string $templateName, array $blockNames, array $context = []): Response
protected function htmxOobResponse(string $templateName, array $blockNames, array $context = [], ?string $pushUrl = null): Response
{
$html = '';
// Add a flag to the context so templates can conditionally add the hx-swap-oob attribute.
@@ -135,6 +136,13 @@ trait HxTrait
$html .= $this->renderBlockView($templateName, $blockName, $oobContext);
}
return new Response($html);
$response = new Response($html);
// Set HX-Push-Url header if URL is provided
if (null !== $pushUrl) {
$response->headers->set('HX-Push-Url', $pushUrl);
}
return $response;
}
}