Marijn/TijdVoorDeTest
1
0
Fork 0
mirror of https://github.com/MarijnDoeve/TijdVoorDeTest.git synced 2026-07-07 16:10:15 +02:00
Code Issues Packages Projects Releases Activity

feat: replace fetch-based modal forms with Turbo Frames (#181)

Browse Source 
Enable @hotwired/turbo with Drive explicitly disabled, then migrate the
bo--modal-form Stimulus controller (custom fetch + X-Modal-Request pattern)
to a thin bo--modal controller that lets Turbo handle HTTP and DOM swap.
Adds frame templates for quiz questions and bank questions; controllers now
detect Turbo-Frame header instead of X-Modal-Request.
This commit is contained in:
Marijn Doeve
2026-07-06 23:13:55 +02:00
parent 3b6ff680e5
commit cb577d60d3
12 changed files with 175 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/backoffice/quiz/tab_overview.html.twig
+8 -8
View File
@@ -85,7 +85,8 @@
</a>
</div>
<div data-controller="bo--question-list bo--modal-form"
<div data-controller="bo--question-list bo--modal"
data-action="turbo:frame-load->bo--modal#frameLoad turbo:submit-end->bo--modal#frameSubmitEnd"
data-bo--question-list-reorder-url-value="{{ path('tvdt_backoffice_quiz_questions_reorder', {seasonCode: season.seasonCode, quiz: quiz.id}) }}"
data-bo--question-list-csrf-value="{{ csrf_token('question_reorder') }}"
data-bo--question-list-can-modify-value="{{ is_granted('QUIZ_MODIFY_CONTENT', quiz) ? 'true' : 'false' }}"
@@ -117,15 +118,15 @@
</div>
{% if is_granted('QUIZ_MODIFY_CONTENT', question) %}
<button class="btn btn-sm btn-outline-secondary flex-shrink-0"
data-action="click->bo--modal-form#open"
data-url="{{ path('tvdt_backoffice_quiz_question_edit', {seasonCode: season.seasonCode, quiz: quiz.id, question: question.id}) }}"
data-action="click->bo--modal#open"
data-src="{{ path('tvdt_backoffice_quiz_question_edit', {seasonCode: season.seasonCode, quiz: quiz.id, question: question.id}) }}"
data-modal-title="{{ 'Edit question'|trans }}">
<i class="bi bi-pencil"></i> {{ 'Edit'|trans }}
</button>
{% elseif quiz.isLocked %}
<button class="btn btn-sm btn-outline-secondary flex-shrink-0"
data-action="click->bo--modal-form#open"
data-url="{{ path('tvdt_backoffice_quiz_question_view', {seasonCode: season.seasonCode, quiz: quiz.id, question: question.id}) }}"
data-action="click->bo--modal#open"
data-src="{{ path('tvdt_backoffice_quiz_question_view', {seasonCode: season.seasonCode, quiz: quiz.id, question: question.id}) }}"
data-modal-title="{{ 'Question details'|trans }}">
<i class="bi bi-eye"></i> {{ 'View'|trans }}
</button>
@@ -139,7 +140,7 @@
</div>
<div class="modal fade" tabindex="-1"
data-bo--modal-form-target="modal"
data-bo--modal-target="modal"
aria-labelledby="questionEditModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
@@ -147,8 +148,7 @@
<h5 class="modal-title" id="questionEditModalLabel">{{ 'Edit question'|trans }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" data-bo--modal-form-target="modalBody"></div>
<div class="modal-footer" data-bo--modal-form-target="modalFooter"></div>
<turbo-frame id="question-modal-frame" data-bo--modal-target="frame"></turbo-frame>
</div>
</div>
</div>