mirror of
https://github.com/MarijnDoeve/TijdVoorDeTest.git
synced 2026-07-08 00:20:15 +02:00
Marijn
e57ed79b35
- Add SeasonVoter::EDIT guard to QuizQuestionController::view() - Add full-count check in reorder() to reject partial ordering payloads - Retry once in _persistOrder(); lock drag and show dismissible alert on failure - Remove tabindex="-1" from correct-answer toggle button (accessibility) - Replace 'EMPTY'|trans placeholder with proper copy - Add data-modal-title to question bank Edit button to prevent stale title
192 lines
12 KiB
Twig
192 lines
12 KiB
Twig
<div class="row">
|
|
<div class="col-md-8 col-12" data-controller="bo--modal"
|
|
data-action="turbo:frame-load->bo--modal#frameLoad turbo:submit-end->bo--modal#frameSubmitEnd">
|
|
<div class="mb-3">
|
|
<button class="btn btn-sm btn-outline-primary"
|
|
data-action="click->bo--modal#open"
|
|
data-src="{{ path('tvdt_backoffice_question_bank_new', {seasonCode: season.seasonCode}) }}"
|
|
data-modal-title="{{ 'Add question'|trans }}">
|
|
{{ 'Add question'|trans }}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center flex-wrap gap-2 mb-3">
|
|
<a class="badge rounded-pill text-decoration-none text-bg-primary{% if activeLabel is not null %} opacity-50{% endif %}"
|
|
href="{{ path('tvdt_backoffice_question_bank', {seasonCode: season.seasonCode}) }}">{{ 'All'|trans }}</a>
|
|
{% for label in season.questionLabels %}
|
|
<span class="d-inline-flex align-items-center gap-1">
|
|
<a class="badge rounded-pill text-decoration-none text-bg-{{ label.colour.value }}{% if activeLabel is not same as (label) %} opacity-50{% endif %}"
|
|
href="{{ path('tvdt_backoffice_question_bank', {seasonCode: season.seasonCode, label: label.slug}) }}">{{ label.name }}</a>
|
|
<form action="{{ path('tvdt_backoffice_question_bank_label_delete', {seasonCode: season.seasonCode, labelSlug: label.slug}) }}"
|
|
method="POST" class="d-inline">
|
|
<input type="hidden" name="_token" value="{{ csrf_token('delete_question_label') }}">
|
|
<button type="submit" class="btn btn-sm btn-link p-0 text-danger" aria-label="{{ 'Remove label'|trans }}"><i class="bi bi-trash"></i></button>
|
|
</form>
|
|
</span>
|
|
{% endfor %}
|
|
|
|
{% embed 'components/modal.html.twig' with {
|
|
id: 'addLabelModal',
|
|
title: 'Add label'|trans,
|
|
triggerLabel: 'Add label'|trans,
|
|
} %}
|
|
{% block modal_body %}
|
|
<form id="addLabelForm"
|
|
action="{{ path('tvdt_backoffice_question_bank_labels', {seasonCode: season.seasonCode}) }}"
|
|
method="POST">
|
|
<input type="hidden" name="_token" value="{{ csrf_token('add_question_label') }}">
|
|
<div class="mb-3">
|
|
<label for="addLabelName" class="form-label">{{ 'Name'|trans }}</label>
|
|
<input type="text" class="form-control" id="addLabelName" name="name" maxlength="64" required autofocus>
|
|
</div>
|
|
<div class="mb-1">
|
|
<label class="form-label d-block">{{ 'Colour'|trans }}</label>
|
|
<style>
|
|
.colour-swatch { opacity: .35; cursor: pointer; transition: opacity .1s, box-shadow .1s; font-size: .875rem; }
|
|
.btn-check:checked + .colour-swatch { opacity: 1; box-shadow: 0 0 0 3px rgba(255,255,255,.6); }
|
|
.colour-swatch:hover { opacity: .7; }
|
|
</style>
|
|
<div class="d-flex gap-2 flex-wrap">
|
|
{% for colour in labelColours %}
|
|
<input type="radio" class="btn-check" name="colour"
|
|
id="addLabelColour_{{ colour.value }}"
|
|
value="{{ colour.value }}" autocomplete="off"
|
|
{{ loop.first ? 'checked' }}>
|
|
<label class="badge rounded-pill text-bg-{{ colour.value }} colour-swatch px-3 py-2"
|
|
for="addLabelColour_{{ colour.value }}">
|
|
{{ colour.label|trans }}
|
|
</label>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</form>
|
|
{% endblock %}
|
|
{% block modal_footer %}
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'Cancel'|trans }}</button>
|
|
<button type="submit" class="btn btn-primary" form="addLabelForm">{{ 'Add label'|trans }}</button>
|
|
{% endblock %}
|
|
{% endembed %}
|
|
</div>
|
|
|
|
<table class="table align-middle">
|
|
<thead>
|
|
<tr>
|
|
<th>{{ 'Question'|trans }}</th>
|
|
<th>{{ 'Labels'|trans }}</th>
|
|
<th>{{ 'Reusable'|trans }}</th>
|
|
<th>{{ 'Used in'|trans }}</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for bankQuestion in bankQuestions %}
|
|
<tr>
|
|
<td>{{ bankQuestion.question }}</td>
|
|
<td>
|
|
{% for label in bankQuestion.labels %}
|
|
<span class="badge rounded-pill text-bg-{{ label.colour.value }}">{{ label.name }}</span>
|
|
{% endfor %}
|
|
</td>
|
|
<td>
|
|
{% if bankQuestion.reusable %}
|
|
<span class="badge text-bg-info">{{ 'Reusable'|trans }}</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% for usage in bankQuestion.usages %}
|
|
<div class="d-flex align-items-center gap-1">
|
|
<span>{{ usage.quiz.name }}</span>
|
|
<form action="{{ path('tvdt_backoffice_question_bank_unassign', {seasonCode: season.seasonCode, bankQuestion: bankQuestion.id, usage: usage.id}) }}"
|
|
method="POST" class="d-inline">
|
|
<input type="hidden" name="_token" value="{{ csrf_token('unassign_bank_question') }}">
|
|
<button type="submit" class="btn btn-sm btn-link p-0 text-danger" title="{{ 'Unassign'|trans }}">×</button>
|
|
</form>
|
|
{% if usage.quiz.isFinalized %}
|
|
<form action="{{ path('tvdt_backoffice_question_bank_sync', {seasonCode: season.seasonCode, bankQuestion: bankQuestion.id, usage: usage.id}) }}"
|
|
method="POST" class="d-inline">
|
|
<input type="hidden" name="_token" value="{{ csrf_token('sync_bank_question') }}">
|
|
<button type="submit" class="btn btn-sm btn-link p-0 text-primary" title="{{ 'Sync latest changes to this quiz'|trans }}">↻</button>
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</td>
|
|
<td class="text-end">
|
|
<div class="d-inline-flex align-items-center gap-2">
|
|
{% if bankQuestion.canBeAssigned and assignableQuizzes|length > 0 %}
|
|
<form action="{{ path('tvdt_backoffice_question_bank_assign', {seasonCode: season.seasonCode, bankQuestion: bankQuestion.id}) }}"
|
|
method="POST" class="d-inline-flex align-items-center gap-1">
|
|
<input type="hidden" name="_token" value="{{ csrf_token('assign_bank_question') }}">
|
|
<select class="form-select form-select-sm" name="quiz" required>
|
|
{% for quiz in assignableQuizzes %}
|
|
<option value="{{ quiz.id }}">{{ quiz.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<button type="submit" class="btn btn-sm btn-outline-primary" title="{{ 'Assign'|trans }}"><i class="bi bi-plus-lg"></i></button>
|
|
</form>
|
|
{% endif %}
|
|
<div class="btn-group btn-group-sm" role="group">
|
|
<button type="button" class="btn btn-outline-secondary"
|
|
data-action="click->bo--modal#open"
|
|
data-src="{{ path('tvdt_backoffice_question_bank_edit', {seasonCode: season.seasonCode, bankQuestion: bankQuestion.id}) }}"
|
|
data-modal-title="{{ 'Edit question'|trans }}"
|
|
title="{{ 'Edit'|trans }}"><i class="bi bi-pencil"></i></button>
|
|
<button type="button" class="btn btn-outline-danger" data-bs-toggle="modal"
|
|
data-bs-target="#deleteBankQuestion-{{ bankQuestion.id }}"
|
|
title="{{ 'Delete'|trans }}"><i class="bi bi-trash"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="deleteBankQuestion-{{ bankQuestion.id }}" data-bs-backdrop="static"
|
|
tabindex="-1" aria-labelledby="deleteBankQuestion-{{ bankQuestion.id }}Label" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title fs-5" id="deleteBankQuestion-{{ bankQuestion.id }}Label">{{ 'Please Confirm'|trans }}</h1>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body text-start">
|
|
{{ 'Are you sure you want to delete this question from the question bank?'|trans }}
|
|
{% if bankQuestion.isUsed %}
|
|
<br><strong>{{ 'This question has been used in a quiz. The copy in the quiz will not be affected.'|trans }}</strong>
|
|
{% endif %}
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'No'|trans }}</button>
|
|
<form action="{{ path('tvdt_backoffice_question_bank_delete', {seasonCode: season.seasonCode, bankQuestion: bankQuestion.id}) }}"
|
|
method="POST">
|
|
<input type="hidden" name="_token" value="{{ csrf_token('delete_bank_question') }}">
|
|
<button type="submit" class="btn btn-danger">{{ 'Yes'|trans }}</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="5">{{ 'No questions in the question bank yet'|trans }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
<div class="modal fade" tabindex="-1"
|
|
data-bo--modal-target="modal"
|
|
aria-labelledby="bankQuestionEditModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="bankQuestionEditModalLabel">{{ 'Edit question'|trans }}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<turbo-frame id="bank-question-modal-frame" data-bo--modal-target="frame"></turbo-frame>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 col-12">
|
|
{{ include('backoffice/help/season_question_bank.html.twig') }}
|
|
</div>
|
|
</div>
|