From 5cfeeb57f0a3bf99e19bde9f7fd48bfd8f2e47e6 Mon Sep 17 00:00:00 2001
From: Marijn Doeve <marijn@doeve.me>
Date: Fri, 10 Jul 2026 23:44:41 +0200
Subject: [PATCH] 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.
---
 .../Backoffice/SeasonController.php           | 14 ++++++--
 .../season/_add_candidates_frame.html.twig    | 11 ++++++
 .../season/tab_candidates.html.twig           | 32 ++++++++++++++---
 .../Backoffice/SeasonControllerTest.php       | 36 +++++++++++++++++++
 4 files changed, 86 insertions(+), 7 deletions(-)
 create mode 100644 templates/backoffice/season/_add_candidates_frame.html.twig

diff --git a/src/Controller/Backoffice/SeasonController.php b/src/Controller/Backoffice/SeasonController.php
index ab63bbb..ca0e90c 100644
--- a/src/Controller/Backoffice/SeasonController.php
+++ b/src/Controller/Backoffice/SeasonController.php
@@ -129,6 +129,8 @@ class SeasonController extends AbstractController
     )]
     public function addCandidates(Season $season, Request $request): Response
     {
+        $isTurboFrame = $request->headers->has('Turbo-Frame');
+
         $form = $this->createForm(AddCandidatesFormType::class);
         $form->handleRequest($request);
 
@@ -140,10 +142,18 @@ class SeasonController extends AbstractController
 
             $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->redirectToRoute('tvdt_backoffice_season_candidates', ['seasonCode' => $season->seasonCode]);
         }
 
-        return $this->render('backoffice/season_add_candidates.html.twig', ['form' => $form, 'season' => $season]);
+        $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')]
diff --git a/templates/backoffice/season/_add_candidates_frame.html.twig b/templates/backoffice/season/_add_candidates_frame.html.twig
new file mode 100644
index 0000000..ab5898b
--- /dev/null
+++ b/templates/backoffice/season/_add_candidates_frame.html.twig
@@ -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>
diff --git a/templates/backoffice/season/tab_candidates.html.twig b/templates/backoffice/season/tab_candidates.html.twig
index 33fab63..6621621 100644
--- a/templates/backoffice/season/tab_candidates.html.twig
+++ b/templates/backoffice/season/tab_candidates.html.twig
@@ -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="mb-3">
-            <a class="btn btn-sm btn-outline-primary"
-               href="{{ path('tvdt_backoffice_add_candidates', {seasonCode: season.seasonCode}) }}">{{ 'Add Candidate'|trans }}</a>
+            <button type="button" class="btn btn-sm btn-outline-primary"
+                    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>
         <ul class="list-group mb-3">
             {% for candidate in season.candidates %}
@@ -17,7 +19,9 @@
                                 title="{{ 'Delete'|trans }}"><i class="bi bi-trash"></i></button>
                     </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">
                         <div class="modal-dialog">
                             <div class="modal-content">
@@ -31,7 +35,8 @@
                                         <input type="hidden" name="_token" value="{{ csrf_token('rename_candidate') }}">
                                         <label class="form-label" for="renameCandidateName-{{ candidate.id }}">{{ 'Name'|trans }}</label>
                                         <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 class="modal-footer">
                                         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'Cancel'|trans }}</button>
@@ -69,6 +74,23 @@
                 {{ 'No candidates'|trans }}
             {% endfor %}
         </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 class="col-md-6 col-12">
         {{ include('backoffice/help/season_candidates.html.twig') }}
diff --git a/tests/Controller/Backoffice/SeasonControllerTest.php b/tests/Controller/Backoffice/SeasonControllerTest.php
index 6c2fabc..956cfc3 100644
--- a/tests/Controller/Backoffice/SeasonControllerTest.php
+++ b/tests/Controller/Backoffice/SeasonControllerTest.php
@@ -104,6 +104,42 @@ final class SeasonControllerTest extends AbstractControllerWebTestCase
         $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
     {
         $candidate = $this->getCandidate('Tom');