mirror of
https://github.com/MarijnDoeve/TijdVoorDeTest.git
synced 2026-07-11 12:28:23 +02:00
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:
@@ -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->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')]
|
#[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');
|
||||||
|
|||||||
Reference in New Issue
Block a user