feat: open candidate edit/add forms in modals with dirty-aware dismissal

Rename-candidate modal always blocked backdrop-click dismissal via a
hardcoded static backdrop; wire it into the existing bo--modal
controller so outside clicks/Escape only get blocked once the name
field has actually been edited. Also move "Add Candidate" from a
full-page navigation into the same turbo-frame modal pattern already
used for editing quiz questions, keeping the full-page form as a
fallback for non-JS/turbo requests.
This commit is contained in:
2026-07-10 23:44:41 +02:00
parent 36238f45bb
commit 5cfeeb57f0
4 changed files with 86 additions and 7 deletions
+12 -2
View File
@@ -129,6 +129,8 @@ class SeasonController extends AbstractController
)] )]
public function addCandidates(Season $season, Request $request): Response public function addCandidates(Season $season, Request $request): Response
{ {
$isTurboFrame = $request->headers->has('Turbo-Frame');
$form = $this->createForm(AddCandidatesFormType::class); $form = $this->createForm(AddCandidatesFormType::class);
$form->handleRequest($request); $form->handleRequest($request);
@@ -140,10 +142,18 @@ class SeasonController extends AbstractController
$this->em->flush(); $this->em->flush();
return $this->redirectToRoute('tvdt_backoffice_season', ['seasonCode' => $season->seasonCode]); if ($isTurboFrame) {
return new Response('<turbo-frame id="add-candidates-modal-frame"></turbo-frame>');
} }
return $this->render('backoffice/season_add_candidates.html.twig', ['form' => $form, 'season' => $season]); return $this->redirectToRoute('tvdt_backoffice_season_candidates', ['seasonCode' => $season->seasonCode]);
}
$template = $isTurboFrame
? 'backoffice/season/_add_candidates_frame.html.twig'
: 'backoffice/season_add_candidates.html.twig';
return $this->render($template, ['form' => $form, 'season' => $season]);
} }
#[IsCsrfTokenValid('rename_candidate')] #[IsCsrfTokenValid('rename_candidate')]
@@ -0,0 +1,11 @@
<turbo-frame id="add-candidates-modal-frame">
{{ form_start(form, {attr: {novalidate: 'novalidate'}}) }}
<div class="modal-body">
{{ form_row(form.candidates) }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'Cancel'|trans }}</button>
<button type="submit" class="btn btn-primary">{{ 'Submit'|trans }}</button>
</div>
{{ form_end(form) }}
</turbo-frame>
@@ -1,8 +1,10 @@
<div class="row"> <div class="row" data-controller="bo--modal" data-action="turbo:submit-end->bo--modal#frameSubmitEnd">
<div class="col-md-6 col-12"> <div class="col-md-6 col-12">
<div class="mb-3"> <div class="mb-3">
<a class="btn btn-sm btn-outline-primary" <button type="button" class="btn btn-sm btn-outline-primary"
href="{{ path('tvdt_backoffice_add_candidates', {seasonCode: season.seasonCode}) }}">{{ 'Add Candidate'|trans }}</a> data-action="click->bo--modal#open"
data-src="{{ path('tvdt_backoffice_add_candidates', {seasonCode: season.seasonCode}) }}"
data-modal-title="{{ 'Add Candidate'|trans }}">{{ 'Add Candidate'|trans }}</button>
</div> </div>
<ul class="list-group mb-3"> <ul class="list-group mb-3">
{% for candidate in season.candidates %} {% for candidate in season.candidates %}
@@ -17,7 +19,9 @@
title="{{ 'Delete'|trans }}"><i class="bi bi-trash"></i></button> title="{{ 'Delete'|trans }}"><i class="bi bi-trash"></i></button>
</div> </div>
<div class="modal fade" id="renameCandidate-{{ candidate.id }}" data-bs-backdrop="static" <div class="modal fade" id="renameCandidate-{{ candidate.id }}"
data-controller="bo--modal" data-bo--modal-target="modal"
data-action="hidden.bs.modal->bo--modal#resetDirty"
tabindex="-1" aria-labelledby="renameCandidate-{{ candidate.id }}Label" aria-hidden="true"> tabindex="-1" aria-labelledby="renameCandidate-{{ candidate.id }}Label" aria-hidden="true">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
@@ -31,7 +35,8 @@
<input type="hidden" name="_token" value="{{ csrf_token('rename_candidate') }}"> <input type="hidden" name="_token" value="{{ csrf_token('rename_candidate') }}">
<label class="form-label" for="renameCandidateName-{{ candidate.id }}">{{ 'Name'|trans }}</label> <label class="form-label" for="renameCandidateName-{{ candidate.id }}">{{ 'Name'|trans }}</label>
<input type="text" class="form-control" id="renameCandidateName-{{ candidate.id }}" <input type="text" class="form-control" id="renameCandidateName-{{ candidate.id }}"
name="name" value="{{ candidate.name }}" maxlength="16" required autofocus> name="name" value="{{ candidate.name }}" maxlength="16" required autofocus
data-action="input->bo--modal#markDirty change->bo--modal#markDirty">
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'Cancel'|trans }}</button> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'Cancel'|trans }}</button>
@@ -69,6 +74,23 @@
{{ 'No candidates'|trans }} {{ 'No candidates'|trans }}
{% endfor %} {% endfor %}
</ul> </ul>
<div class="modal fade" tabindex="-1"
data-bo--modal-target="modal"
data-action="hidden.bs.modal->bo--modal#resetDirty"
aria-labelledby="addCandidatesModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="addCandidatesModalLabel">{{ 'Add Candidate'|trans }}</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<turbo-frame id="add-candidates-modal-frame"
data-bo--modal-target="frame"
data-action="input->bo--modal#markDirty change->bo--modal#markDirty"></turbo-frame>
</div>
</div>
</div>
</div> </div>
<div class="col-md-6 col-12"> <div class="col-md-6 col-12">
{{ include('backoffice/help/season_candidates.html.twig') }} {{ include('backoffice/help/season_candidates.html.twig') }}
@@ -104,6 +104,42 @@ final class SeasonControllerTest extends AbstractControllerWebTestCase
$this->assertNotInstanceOf(Candidate::class, $this->entityManager->getRepository(Candidate::class)->find($candidateId)); $this->assertNotInstanceOf(Candidate::class, $this->entityManager->getRepository(Candidate::class)->find($candidateId));
} }
public function testAddCandidates(): void
{
$this->client->request(Request::METHOD_GET, '/backoffice/season/krtek/add-candidate');
$form = $this->client->getCrawler()->filter('form')->form([
'add_candidates_form[candidates]' => "Nora\nPiet",
]);
$this->client->submit($form);
self::assertResponseRedirects('/backoffice/season/krtek/candidates');
$this->entityManager->clear();
$season = $this->entityManager->getRepository(Season::class)->findOneBy(['seasonCode' => 'krtek']);
$this->assertInstanceOf(Season::class, $season);
$names = array_map(static fn (Candidate $candidate): string => $candidate->name, $season->candidates->toArray());
$this->assertContains('Nora', $names);
$this->assertContains('Piet', $names);
}
public function testAddCandidatesViaTurboFrameReturnsEmptyFrame(): void
{
$this->client->xmlHttpRequest(Request::METHOD_GET, '/backoffice/season/krtek/add-candidate', server: ['HTTP_TURBO-FRAME' => 'add-candidates-modal-frame']);
$form = $this->client->getCrawler()->filter('form')->form([
'add_candidates_form[candidates]' => 'Sanne',
]);
$this->client->submit($form, [], ['HTTP_TURBO-FRAME' => 'add-candidates-modal-frame']);
self::assertResponseIsSuccessful();
$this->assertStringContainsString('<turbo-frame id="add-candidates-modal-frame"></turbo-frame>', (string) $this->client->getResponse()->getContent());
$this->entityManager->clear();
$season = $this->entityManager->getRepository(Season::class)->findOneBy(['seasonCode' => 'krtek']);
$this->assertInstanceOf(Season::class, $season);
$names = array_map(static fn (Candidate $candidate): string => $candidate->name, $season->candidates->toArray());
$this->assertContains('Sanne', $names);
}
public function testRenameCandidateIsDeniedForNonOwner(): void public function testRenameCandidateIsDeniedForNonOwner(): void
{ {
$candidate = $this->getCandidate('Tom'); $candidate = $this->getCandidate('Tom');