Add survey question drag-sort and backend assets

- Frontend editor: drag-to-sort questions with dedicated sort assets/JS
- Backend list/search refinements for tl_survey and tl_survey_content
- Repository helpers for survey/question/editor queries
- Translations and AI handover notes update
This commit is contained in:
Jürgen Mummert
2026-06-14 09:13:07 +02:00
parent 79c4402aee
commit 1b16675ae9
23 changed files with 928 additions and 40 deletions
+2 -1
View File
@@ -2,8 +2,9 @@
declare(strict_types=1);
$GLOBALS['TL_CSS'][] = 'assets/survey-backend.css|static';
$GLOBALS['TL_CSS'][] = 'bundles/survey/css/survey-backend.css|static';
$GLOBALS['TL_CSS'][] = 'bundles/survey/css/auth-module.css|static';
$GLOBALS['TL_JAVASCRIPT'][] = 'bundles/survey/js/survey-backend.js|static';
$GLOBALS['TL_MODELS']['tl_survey'] = Mummert\SurveyBundle\Model\SurveyModel::class;
$GLOBALS['TL_MODELS']['tl_survey_category'] = Mummert\SurveyBundle\Model\SurveyCategoryModel::class;
+21 -11
View File
@@ -36,7 +36,7 @@ $GLOBALS['TL_DCA']['tl_survey'] = [
'panelLayout' => 'filter;sort,search,limit',
],
'label' => [
'fields' => ['title', 'categorySummary', 'assignedMembersSummary', 'templateSummary'],
'fields' => ['title', 'assignedMembersSummary', 'templateSummary', 'internalNote'],
'showColumns' => true,
],
'global_operations' => [
@@ -47,22 +47,26 @@ $GLOBALS['TL_DCA']['tl_survey'] = [
],
],
'operations' => [
'editheader' => [
'label' => ['Umfrage bearbeiten', 'Umfrage bearbeiten'],
'href' => 'act=edit',
'icon' => 'edit.svg',
'primary' => true,
'showInHeader' => false,
],
'edit' => [
'label' => ['Fragen bearbeiten', 'Fragen der Umfrage bearbeiten'],
'href' => 'table=tl_survey_content',
'icon' => 'children.svg',
],
'editheader' => [
'label' => ['Umfrage bearbeiten', 'Umfrage bearbeiten'],
'href' => 'act=edit',
'icon' => 'header.svg',
'primary' => true,
'showInHeader' => false,
],
'toggle' => [
'label' => &$GLOBALS['TL_LANG']['tl_survey']['toggleActive'],
'href' => 'act=toggle&field=isActive',
'icon' => 'visible.svg',
'primary' => true,
'showInHeader' => true,
'showInHeader' => false,
],
'publishedWarning' => [
'label' => &$GLOBALS['TL_LANG']['tl_survey']['publishedWarning'],
@@ -100,7 +104,7 @@ $GLOBALS['TL_DCA']['tl_survey'] = [
],
],
'palettes' => [
'default' => '{title_legend},title,category,description;{assignment_legend},assignedMembers;{publishing_legend},published,isActive,isTemplate;{meta_legend},createdAt,updatedAt',
'default' => '{title_legend},title,category,description,internalNote;{assignment_legend},assignedMembers;{publishing_legend},published,isActive,isTemplate;{meta_legend},createdAt,updatedAt',
],
'fields' => [
'id' => [
@@ -129,9 +133,15 @@ $GLOBALS['TL_DCA']['tl_survey'] = [
'eval' => ['rte' => 'tinyMCE', 'tl_class' => 'clr'],
'sql' => 'text NULL',
],
'internalNote' => [
'label' => &$GLOBALS['TL_LANG']['tl_survey']['internalNote'],
'inputType' => 'text',
'search' => true,
'eval' => ['maxlength' => 255, 'tl_class' => 'clr w50'],
'sql' => "varchar(255) NOT NULL default ''",
],
'category' => [
'label' => &$GLOBALS['TL_LANG']['tl_survey']['category'],
'filter' => true,
'inputType' => 'select',
'foreignKey' => 'tl_survey_category.title',
'eval' => ['multiple' => true, 'chosen' => true, 'tl_class' => 'clr'],
@@ -188,9 +198,9 @@ $GLOBALS['TL_DCA']['tl_survey'] = [
],
'assignedMembers' => [
'label' => &$GLOBALS['TL_LANG']['tl_survey']['assignedMembers'],
'inputType' => 'select',
'inputType' => 'checkboxWizard',
'options_callback' => [Mummert\SurveyBundle\EventListener\SurveyDcaListener::class, 'getMemberOptions'],
'eval' => ['multiple' => true, 'chosen' => true, 'tl_class' => 'clr'],
'eval' => ['multiple' => true, 'class' => 'survey-assigned-members-checkbox-wizard', 'tl_class' => 'clr'],
'load_callback' => [[Mummert\SurveyBundle\EventListener\SurveyDcaListener::class, 'loadSurveyAssignedMembers']],
'save_callback' => [[Mummert\SurveyBundle\EventListener\SurveyDcaListener::class, 'saveSurveyAssignedMembers']],
'sql' => 'blob NULL',
+8 -1
View File
@@ -32,7 +32,7 @@ $GLOBALS['TL_DCA']['tl_survey_content'] = [
'sorting' => [
'mode' => 4,
'fields' => ['sorting'],
'headerFields' => ['title', 'alias', 'published'],
'headerFields' => ['title', 'published'],
'child_record_class' => 'survey-question-record',
'panelLayout' => 'sort,search,limit',
],
@@ -44,6 +44,13 @@ $GLOBALS['TL_DCA']['tl_survey_content'] = [
'edit' => [
'href' => 'act=edit',
'icon' => 'edit.svg',
'primary' => true,
],
'cut' => [
'href' => 'act=paste&mode=cut',
'method' => 'POST',
'icon' => 'mover.svg',
'attributes' => 'data-action="contao--scroll-offset#store"',
],
'copy' => [
'href' => 'act=copy',
+1
View File
@@ -11,6 +11,7 @@ $GLOBALS['TL_LANG']['tl_survey']['templateSummary'] = ['Vorlage', 'Zeigt an, ob
$GLOBALS['TL_LANG']['tl_survey']['template_yes'] = 'Ja';
$GLOBALS['TL_LANG']['tl_survey']['template_no'] = 'Nein';
$GLOBALS['TL_LANG']['tl_survey']['description'] = ['Beschreibung', 'Einleitung für den Editor und das Frontend.'];
$GLOBALS['TL_LANG']['tl_survey']['internalNote'] = ['Interne Notiz', 'Nur im Backend sichtbare interne Notiz zur Umfrage.'];
$GLOBALS['TL_LANG']['tl_survey']['title_legend'] = 'Grunddaten';
$GLOBALS['TL_LANG']['tl_survey']['assignment_legend'] = 'Bearbeitende Mitglieder';
$GLOBALS['TL_LANG']['tl_survey']['publishing_legend'] = 'Sichtbarkeit';
+1
View File
@@ -11,6 +11,7 @@ $GLOBALS['TL_LANG']['tl_survey']['templateSummary'] = ['Template', 'Shows whethe
$GLOBALS['TL_LANG']['tl_survey']['template_yes'] = 'Yes';
$GLOBALS['TL_LANG']['tl_survey']['template_no'] = 'No';
$GLOBALS['TL_LANG']['tl_survey']['description'] = ['Description', 'Introduction for the editor and the frontend.'];
$GLOBALS['TL_LANG']['tl_survey']['internalNote'] = ['Internal note', 'Internal note for the survey, visible in the backend only.'];
$GLOBALS['TL_LANG']['tl_survey']['title_legend'] = 'Basic data';
$GLOBALS['TL_LANG']['tl_survey']['assignment_legend'] = 'Editing members';
$GLOBALS['TL_LANG']['tl_survey']['publishing_legend'] = 'Visibility';
@@ -708,6 +708,11 @@
margin: 0;
}
.survey-accordion-header-row {
display: flex;
align-items: stretch;
}
.survey-accordion-toggle {
display: flex;
width: 100%;
@@ -720,6 +725,82 @@
text-align: left;
}
.survey-accordion-sort-handle {
position: relative;
display: inline-flex;
flex: 0 0 auto;
min-width: 3.5rem;
padding: 0 1rem;
border: 0;
border-left: 1px solid rgba(162, 168, 180, 0.18);
background: transparent;
cursor: grab;
align-items: center;
justify-content: center;
align-self: stretch;
transition: background 0.2s ease, color 0.2s ease;
}
.survey-accordion-sort-handle:active {
cursor: grabbing;
}
.survey-accordion-item .handorgel__header__button:hover + .survey-accordion-sort-handle,
.survey-accordion-item .handorgel__header__button:focus + .survey-accordion-sort-handle,
.survey-accordion-item .handorgel__header--opened .survey-accordion-sort-handle,
.survey-accordion-sort-handle:hover,
.survey-accordion-sort-handle:focus {
background: var(--survey-blue);
color: #fff;
}
.survey-sort-icon {
display: inline-flex;
width: 0.95rem;
height: 1.28rem;
align-items: center;
justify-content: center;
color: #58a6da;
line-height: 0;
transform: translateY(1px);
}
.survey-sort-icon svg {
display: block;
width: 100%;
height: 100%;
transform: translateY(4px);
}
.survey-question-order-save-shell {
position: fixed;
top: 50%;
right: 1rem;
z-index: 40;
transform: translate(120%, -50%);
opacity: 0;
pointer-events: none;
transition: transform 0.26s ease, opacity 0.26s ease;
}
.survey-question-order-save-shell.is-visible {
transform: translate(0, -50%);
opacity: 1;
pointer-events: auto;
}
.survey-question-order-save {
box-shadow: 0 18px 40px rgba(0, 59, 102, 0.24);
}
.survey-accordion-item.is-reordering {
box-shadow: 0 20px 44px rgba(0, 59, 102, 0.18);
}
.survey-accordion-item.sortable-ghost {
opacity: 0.55;
}
.survey-accordion-item .handorgel__header__button,
.survey-accordion-item .handorgel__header__button:hover,
.survey-accordion-item .handorgel__header__button:focus {
@@ -994,6 +1075,22 @@
padding: 0.95rem 1rem;
}
.survey-accordion-sort-handle {
min-width: 3.1rem;
padding: 0 0.8rem;
}
.survey-question-order-save-shell {
top: auto;
right: 0.85rem;
bottom: 0.85rem;
transform: translate(0, 130%);
}
.survey-question-order-save-shell.is-visible {
transform: translate(0, 0);
}
}
</style>
<script>
@@ -1152,6 +1249,133 @@
});
});
var initializeQuestionSorting = function () {
var styleId = 'survey-question-sort-icon-runtime';
if (!document.getElementById(styleId)) {
var runtimeStyle = document.createElement('style');
runtimeStyle.id = styleId;
runtimeStyle.textContent = '' +
'.survey-sort-icon{' +
'width:1.14rem !important;' +
'height:1.52rem !important;' +
'color:#58a6da !important;' +
'background:none !important;' +
'transform:translateY(1px) !important;' +
'}' +
'.survey-sort-icon::before,.survey-sort-icon::after{' +
'content:none !important;' +
'}' +
'.survey-sort-icon svg{' +
'display:block !important;' +
'width:100% !important;' +
'height:100% !important;' +
'transform:translateY(4px);' +
'}' +
'.survey-sort-icon svg path:first-child{' +
'transform:translateY(1.4px);' +
'transform-box:fill-box;' +
'transform-origin:center;' +
'}' +
'.survey-sort-icon svg path:nth-child(2){' +
'transform:translateY(-1.4px);' +
'transform-box:fill-box;' +
'transform-origin:center;' +
'}' +
'.survey-sort-icon svg path[stroke]{' +
'stroke-width:2px;' +
'}';
document.head.appendChild(runtimeStyle);
}
if (typeof Sortable !== 'function') {
return;
}
var sortableList = document.querySelector('[data-survey-question-sortable]');
var orderForm = document.querySelector('[data-survey-question-order-shell]');
var orderInput = document.querySelector('[data-survey-question-order-input]');
if (!sortableList || !orderForm || !orderInput) {
return;
}
if (sortableList._surveyQuestionSortable) {
return;
}
var getOrderedIds = function () {
return Array.from(sortableList.querySelectorAll('[data-survey-question-item]')).map(function (item) {
return item.getAttribute('data-question-id') || '';
}).filter(function (value) {
return value !== '';
});
};
var initialOrder = getOrderedIds().join(',');
var updateOrderField = function () {
orderInput.value = getOrderedIds().join(',');
};
var updateQuestionIndices = function () {
sortableList.querySelectorAll('[data-survey-question-item]').forEach(function (item, index) {
var indexNode = item.querySelector('.survey-accordion-index');
if (indexNode) {
indexNode.textContent = (index + 1) + '.';
}
});
};
var updateSaveVisibility = function () {
var currentOrder = getOrderedIds().join(',');
var isDirty = currentOrder !== initialOrder;
orderForm.hidden = !isDirty;
orderForm.classList.toggle('is-visible', isDirty);
updateOrderField();
};
sortableList.querySelectorAll('[data-survey-question-sort-handle]').forEach(function (handle) {
handle.addEventListener('click', function (event) {
event.preventDefault();
event.stopPropagation();
});
});
updateQuestionIndices();
updateOrderField();
updateSaveVisibility();
var sortableInstance = Sortable.create(sortableList, {
animation: 180,
draggable: '[data-survey-question-item]',
handle: '[data-survey-question-sort-handle]',
ghostClass: 'sortable-ghost',
forceFallback: true,
fallbackTolerance: 3,
onStart: function (event) {
if (event.item) {
event.item.classList.add('is-reordering');
}
},
onEnd: function (event) {
if (event.item) {
event.item.classList.remove('is-reordering');
}
updateQuestionIndices();
updateSaveVisibility();
}
});
sortableList._surveyQuestionSortable = sortableInstance;
};
window.initializeSurveyQuestionSorting = initializeQuestionSorting;
if (typeof handorgel === 'function') {
document.querySelectorAll('[data-survey-handorgel]').forEach(function (element) {
var accordion = new handorgel(element, {
@@ -1171,6 +1395,8 @@
});
}
initializeQuestionSorting();
resetEditorViewport();
});
</script>
@@ -0,0 +1,119 @@
<style>
.survey-accordion-header-row {
display: flex;
align-items: stretch;
}
.survey-accordion-sort-handle {
position: relative;
flex: 0 0 auto;
min-width: 3.5rem;
padding: 0 1rem;
border: 0;
border-left: 1px solid rgba(162, 168, 180, 0.18);
background: transparent;
cursor: grab;
transition: background 0.2s ease, color 0.2s ease;
}
.survey-accordion-sort-handle:active {
cursor: grabbing;
}
.survey-accordion-item .handorgel__header__button:hover + .survey-accordion-sort-handle,
.survey-accordion-item .handorgel__header__button:focus + .survey-accordion-sort-handle,
.survey-accordion-item .handorgel__header--opened .survey-accordion-sort-handle,
.survey-accordion-sort-handle:hover,
.survey-accordion-sort-handle:focus {
background: var(--survey-blue);
color: #fff;
}
.survey-sort-icon {
position: relative;
display: inline-flex;
width: 0.9rem;
height: 1.2rem;
align-items: center;
justify-content: center;
color: #58a6da;
background-image:
linear-gradient(currentColor, currentColor),
linear-gradient(currentColor, currentColor),
linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-position: center 0.36rem, center center, center calc(100% - 0.36rem);
background-size: 0.78rem 2px, 0.78rem 2px, 0.78rem 2px;
}
.survey-sort-icon::before,
.survey-sort-icon::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 0.24rem solid transparent;
border-right: 0.24rem solid transparent;
}
.survey-sort-icon::before {
top: 0;
border-bottom: 0.24rem solid currentColor;
}
.survey-sort-icon::after {
bottom: 0;
border-top: 0.24rem solid currentColor;
}
.survey-question-order-save-shell {
position: fixed;
top: 50%;
right: 1rem;
z-index: 40;
transform: translate(120%, -50%);
opacity: 0;
pointer-events: none;
transition: transform 0.26s ease, opacity 0.26s ease;
}
.survey-question-order-save-shell.is-visible {
transform: translate(0, -50%);
opacity: 1;
pointer-events: auto;
}
.survey-question-order-save {
box-shadow: 0 18px 40px rgba(0, 59, 102, 0.24);
}
.survey-accordion-item.is-reordering {
box-shadow: 0 20px 44px rgba(0, 59, 102, 0.18);
}
.survey-accordion-item.sortable-ghost {
opacity: 0.55;
}
@media (max-width: 767px) {
.survey-accordion-sort-handle {
min-width: 3.1rem;
padding: 0 0.8rem;
}
.survey-question-order-save-shell {
top: auto;
right: 0.85rem;
bottom: 0.85rem;
transform: translate(0, 130%);
}
.survey-question-order-save-shell.is-visible {
transform: translate(0, 0);
}
}
</style>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
<script src="{{ asset('bundles/survey/js/survey-frontend-editor-sort.js') }}"></script>
@@ -1,6 +1,7 @@
{% trans_default_domain 'messages' %}
{% include '@Survey/frontend/_survey_assets.html.twig' %}
{% include '@Survey/frontend/_survey_question_sort_assets.html.twig' %}
<link rel="stylesheet" href="{{ asset('assets/handorgel/css/handorgel.min.css') }}">
{% include '@Survey/frontend/_survey_branding.html.twig' %}
@@ -47,6 +48,7 @@
{% else %}
{% set surveyMetaFormId = 'survey-meta-form' %}
{% set newQuestionFormId = 'survey-question-form-new' %}
{% set canQuestionReorder = canQuestionReorder|default(false) %}
<div class="survey-button-row survey-button-row--editor-actions">
{% if backUrl %}<a class="survey-button secondary" href="{{ backUrl }}">{{ 'survey.edit.back_to_list'|trans }}</a>{% endif %}
@@ -74,25 +76,48 @@
<div class="survey-grid-columns survey-editor-layout">
<div class="survey-question-editor-shell" data-survey-question-editor>
<div class="survey-accordion-list handorgel" data-survey-handorgel>
{% if canQuestionReorder %}
<form method="post" action="{{ metadataFormActionUrl }}" class="survey-question-order-save-shell" data-survey-question-order-shell hidden>
<input type="hidden" name="REQUEST_TOKEN" value="{{ contao.request_token }}">
<input type="hidden" name="_survey_action" value="reorder-questions">
<input type="hidden" name="item_id" value="{{ survey.id }}">
<input type="hidden" name="_token" value="{{ csrf_token('reorder-questions-' ~ survey.id) }}">
<input type="hidden" name="question_order" value="" data-survey-question-order-input>
<button class="survey-button primary survey-question-order-save">{{ 'survey.edit.save_question_order'|trans }}</button>
</form>
{% endif %}
<div class="survey-accordion-list handorgel" data-survey-handorgel{% if canQuestionReorder %} data-survey-question-sortable="1"{% endif %}>
{% for question in questions %}
{% set questionAnchor = 'survey-question-' ~ question.id %}
{% set isOpen = activeQuestionId == question.id %}
{% set questionItemForm = questionForms[question.id]|default(null) %}
{% set questionFormId = 'survey-question-form-' ~ question.id %}
<article id="{{ questionAnchor }}" class="survey-accordion-item">
<article id="{{ questionAnchor }}" class="survey-accordion-item"{% if canQuestionReorder %} data-survey-question-item data-question-id="{{ question.id }}"{% endif %}>
<h4 class="survey-accordion-header handorgel__header">
<button
type="button"
class="survey-accordion-toggle handorgel__header__button"
>
<span class="survey-accordion-heading">
<span class="survey-accordion-index">{{ loop.index }}.</span>
<span class="survey-accordion-copy">
<strong>{{ question.question|striptags|trim ?: ('survey.edit.question_fallback'|trans({'%id%': question.id})) }}</strong>
<div class="survey-accordion-header-row">
<button
type="button"
class="survey-accordion-toggle handorgel__header__button"
>
<span class="survey-accordion-heading">
<span class="survey-accordion-index">{{ loop.index }}.</span>
<span class="survey-accordion-copy">
<strong>{{ question.question|striptags|trim ?: ('survey.edit.question_fallback'|trans({'%id%': question.id})) }}</strong>
</span>
</span>
</span>
</button>
</button>
{% if canQuestionReorder %}
<button type="button" class="survey-accordion-sort-handle" data-survey-question-sort-handle aria-label="{{ 'survey.edit.reorder_question'|trans }}" title="{{ 'survey.edit.reorder_question'|trans }}">
<span class="survey-sort-icon" aria-hidden="true">
<svg viewBox="0 0 18 24" role="presentation" focusable="false">
<path d="M9 3 11.6 5.8H6.4z" fill="currentColor"></path>
<path d="M9 21 6.4 18.2h5.2z" fill="currentColor"></path>
<path d="M4.5 12h9" stroke="currentColor" stroke-linecap="round" stroke-width="1.8"></path>
</svg>
</span>
</button>
{% endif %}
</div>
</h4>
<div class="survey-accordion-panel handorgel__content">
<div class="handorgel__content__inner" data-survey-question-editor>
@@ -53,7 +53,6 @@
<input type="hidden" name="REQUEST_TOKEN" value="{{ contao.request_token }}">
<input type="hidden" name="_survey_action" value="duplicate-survey">
<input type="hidden" name="item_id" value="{{ survey.id }}">
<input type="hidden" name="_token" value="{{ csrf_token('duplicate-survey-' ~ survey.id) }}">
<button class="survey-button secondary" onclick="return confirm('{{ 'survey.list.duplicate_confirm'|trans({'%title%': survey.title|striptags|trim})|e('js') }}');">{{ 'survey.list.duplicate'|trans }}</button>
</form>
</div>
@@ -82,14 +81,12 @@
<input type="hidden" name="REQUEST_TOKEN" value="{{ contao.request_token }}">
<input type="hidden" name="_survey_action" value="duplicate-survey">
<input type="hidden" name="item_id" value="{{ survey.id }}">
<input type="hidden" name="_token" value="{{ csrf_token('duplicate-survey-' ~ survey.id) }}">
<button class="survey-button secondary" onclick="return confirm('{{ 'survey.list.duplicate_confirm'|trans({'%title%': survey.title|striptags|trim})|e('js') }}');">{{ 'survey.list.duplicate'|trans }}</button>
</form>
<form method="post" class="survey-question-action-form">
<input type="hidden" name="REQUEST_TOKEN" value="{{ contao.request_token }}">
<input type="hidden" name="_survey_action" value="delete-survey">
<input type="hidden" name="item_id" value="{{ survey.id }}">
<input type="hidden" name="_token" value="{{ csrf_token('delete-survey-' ~ survey.id) }}">
<button class="survey-button danger" onclick="return confirm('{{ 'survey.list.delete_confirm'|trans|e('js') }}') && confirm('{{ 'survey.list.delete_confirm_second'|trans|e('js') }}');">{{ 'survey.list.delete'|trans }}</button>
</form>
</div>
@@ -99,7 +96,6 @@
<input type="hidden" name="REQUEST_TOKEN" value="{{ contao.request_token }}">
<input type="hidden" name="_survey_action" value="publish-survey">
<input type="hidden" name="item_id" value="{{ survey.id }}">
<input type="hidden" name="_token" value="{{ csrf_token('publish-survey-' ~ survey.id) }}">
<button
type="submit"
class="survey-button primary survey-list-publish-button"
@@ -117,7 +113,6 @@
<input type="hidden" name="REQUEST_TOKEN" value="{{ contao.request_token }}">
<input type="hidden" name="_survey_action" value="toggle-active">
<input type="hidden" name="item_id" value="{{ survey.id }}">
<input type="hidden" name="_token" value="{{ csrf_token('toggle-active-' ~ survey.id) }}">
<button type="submit" class="survey-visibility-dot{{ survey.isActive ? ' is-on' : '' }}" title="{{ survey.isActive ? 'survey.edit.deactivate_survey'|trans : 'survey.edit.activate_survey'|trans }}" aria-label="{{ survey.isActive ? 'survey.edit.deactivate_survey'|trans : 'survey.edit.activate_survey'|trans }}"></button>
</form>
</div>