Refine survey editor flow and auth styling
This commit is contained in:
Jürgen Mummert
@@ -40,30 +40,22 @@
|
||||
.survey-brand-strip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
justify-content: center;
|
||||
gap: 1.5rem;
|
||||
max-width: 1400px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 0;
|
||||
margin-right: max(var(--survey-page-gutter), calc((100% - 1400px) / 2));
|
||||
margin-bottom: clamp(2rem, 4vw, 3.5rem);
|
||||
margin-left: max(var(--survey-page-gutter), calc((100% - 1400px) / 2));
|
||||
padding: 1rem 1.25rem 0.5rem;
|
||||
}
|
||||
|
||||
.survey-brand-logo {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
flex-shrink: 1;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
margin-right: max(var(--survey-page-gutter), calc((100% - 1400px) / 2));
|
||||
margin-top: 0;
|
||||
margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
|
||||
padding: 0.5rem 0 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.survey-brand-logo.primary {
|
||||
width: auto;
|
||||
max-width: min(100%, 320px);
|
||||
height: 75px;
|
||||
height: 82px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.survey-brand-logo.secondary {
|
||||
@@ -240,6 +232,72 @@
|
||||
box-shadow: 0 12px 32px rgba(34, 34, 34, 0.06);
|
||||
}
|
||||
|
||||
.survey-list-grid {
|
||||
grid-template-columns: 1fr;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.survey-list-card {
|
||||
display: grid;
|
||||
gap: 0.9rem;
|
||||
padding: 1.1rem 1.15rem;
|
||||
}
|
||||
|
||||
.survey-list-card__head {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.survey-list-card__title-wrap {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.survey-list-card__title-wrap h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.survey-list-card__stats {
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.survey-list-card__actions {
|
||||
margin-top: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.survey-list-card__actions .survey-question-action-form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.survey-list-card__toggle-form {
|
||||
flex-shrink: 0;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.survey-publish-toggle--compact {
|
||||
min-height: 2.8rem;
|
||||
padding: 0.45rem 0.65rem 0.45rem 0.85rem;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.survey-publish-toggle--compact .survey-publish-toggle__track {
|
||||
width: 3rem;
|
||||
height: 1.7rem;
|
||||
}
|
||||
|
||||
.survey-publish-toggle--compact .survey-publish-toggle__thumb {
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
}
|
||||
|
||||
.survey-publish-toggle--compact.is-on .survey-publish-toggle__thumb {
|
||||
transform: translateX(1.25rem);
|
||||
}
|
||||
|
||||
.survey-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -270,6 +328,89 @@
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.survey-button-row--form-actions {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.survey-button-row--editor-actions {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.survey-publish-toggle-form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.survey-publish-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.9rem;
|
||||
padding: 0.55rem 0.7rem 0.55rem 1rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(0, 100, 173, 0.18);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: var(--survey-blue);
|
||||
cursor: pointer;
|
||||
min-height: 3.2rem;
|
||||
}
|
||||
|
||||
.survey-publish-toggle.is-on {
|
||||
border-color: rgba(0, 174, 151, 0.3);
|
||||
background: rgba(0, 174, 151, 0.08);
|
||||
}
|
||||
|
||||
.survey-publish-toggle__copy {
|
||||
display: grid;
|
||||
gap: 0.05rem;
|
||||
text-align: left;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.survey-publish-toggle__label {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--survey-gray-dark);
|
||||
}
|
||||
|
||||
.survey-publish-toggle__value {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.survey-publish-toggle__track {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: 3.35rem;
|
||||
height: 1.9rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(162, 168, 180, 0.45);
|
||||
transition: background 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.survey-publish-toggle.is-on .survey-publish-toggle__track {
|
||||
background: rgba(0, 174, 151, 0.72);
|
||||
}
|
||||
|
||||
.survey-publish-toggle__thumb {
|
||||
position: absolute;
|
||||
top: 0.15rem;
|
||||
left: 0.15rem;
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 12px rgba(34, 34, 34, 0.18);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.survey-publish-toggle.is-on .survey-publish-toggle__thumb {
|
||||
transform: translateX(1.45rem);
|
||||
}
|
||||
|
||||
.survey-button {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
@@ -287,6 +428,11 @@
|
||||
.survey-button.secondary { background: rgba(255,255,255,0.86); color: var(--survey-blue); border-color: rgba(0,100,173,0.18); }
|
||||
.survey-button.danger { background: rgba(157, 82, 118, 0.12); color: var(--survey-purple); border-color: rgba(157, 82, 118, 0.22); }
|
||||
|
||||
.survey-button-compact {
|
||||
padding: 0.65rem 0.9rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.survey-form-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
@@ -302,6 +448,7 @@
|
||||
.survey-label textarea,
|
||||
.survey-label select {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid rgba(162,168,180,0.5);
|
||||
padding: 0.8rem 0.9rem;
|
||||
@@ -319,6 +466,16 @@
|
||||
background: rgba(252,228,214,0.42);
|
||||
}
|
||||
|
||||
.survey-question-toggles {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.survey-question-toggles .survey-inline-check {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.survey-alert {
|
||||
border-radius: 1.2rem;
|
||||
padding: 1rem 1.1rem;
|
||||
@@ -327,6 +484,15 @@
|
||||
border: 1px solid rgba(162,168,180,0.35);
|
||||
}
|
||||
|
||||
.survey-alert.success {
|
||||
background: linear-gradient(135deg, rgba(0, 174, 151, 0.2), rgba(255,255,255,0.96));
|
||||
border-color: rgba(0, 174, 151, 0.62);
|
||||
color: #085e57;
|
||||
box-shadow: 0 18px 40px rgba(0, 174, 151, 0.16);
|
||||
font-weight: 700;
|
||||
border-left: 0.45rem solid rgba(0, 174, 151, 0.92);
|
||||
}
|
||||
|
||||
.survey-alert.error { border-color: rgba(157, 82, 118, 0.28); color: var(--survey-purple); }
|
||||
.survey-alert.warning { border-color: rgba(236, 124, 50, 0.28); color: var(--survey-orange); }
|
||||
|
||||
@@ -336,6 +502,178 @@
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
}
|
||||
|
||||
.survey-kpis--compact {
|
||||
grid-template-columns: minmax(0, 360px);
|
||||
}
|
||||
|
||||
.survey-editor-layout {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.survey-editor-meta {
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.survey-question-editor-shell {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.survey-section-head {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.survey-accordion-list {
|
||||
display: grid;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.survey-accordion-item {
|
||||
border: 1px solid rgba(162, 168, 180, 0.34);
|
||||
border-radius: 1.3rem;
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.survey-accordion-header {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.survey-accordion-toggle {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 1rem 1.1rem;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.survey-accordion-item .handorgel__header__button,
|
||||
.survey-accordion-item .handorgel__header__button:hover,
|
||||
.survey-accordion-item .handorgel__header__button:focus {
|
||||
background: transparent;
|
||||
border-top: 0;
|
||||
color: inherit;
|
||||
transition: background 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.survey-accordion-item .handorgel__header__button:hover,
|
||||
.survey-accordion-item .handorgel__header__button:focus,
|
||||
.survey-accordion-item .handorgel__header--opened .handorgel__header__button {
|
||||
background: var(--survey-blue);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.survey-accordion-item .handorgel__header__button:hover .survey-accordion-index,
|
||||
.survey-accordion-item .handorgel__header__button:focus .survey-accordion-index,
|
||||
.survey-accordion-item .handorgel__header--opened .survey-accordion-index,
|
||||
.survey-accordion-item .handorgel__header__button:hover .survey-accordion-copy strong,
|
||||
.survey-accordion-item .handorgel__header__button:focus .survey-accordion-copy strong,
|
||||
.survey-accordion-item .handorgel__header--opened .survey-accordion-copy strong {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.survey-accordion-item .handorgel__header__button:hover .survey-badge,
|
||||
.survey-accordion-item .handorgel__header__button:focus .survey-badge,
|
||||
.survey-accordion-item .handorgel__header--opened .survey-badge {
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.survey-accordion-heading {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.8rem;
|
||||
min-width: 0;
|
||||
flex: 1 1 280px;
|
||||
}
|
||||
|
||||
.survey-accordion-index {
|
||||
display: inline-flex;
|
||||
min-width: 2ch;
|
||||
justify-content: flex-end;
|
||||
font-family: "Blogger Sans", sans-serif;
|
||||
font-weight: 700;
|
||||
color: var(--survey-orange);
|
||||
}
|
||||
|
||||
.survey-accordion-copy {
|
||||
display: grid;
|
||||
gap: 0.2rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.survey-accordion-copy strong {
|
||||
color: var(--survey-blue);
|
||||
font-family: "Blogger Sans", sans-serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.survey-accordion-copy span {
|
||||
color: var(--survey-gray-dark);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.survey-accordion-actions {
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
flex: 1 0 auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.survey-accordion-panel {
|
||||
border-top: 1px solid rgba(162, 168, 180, 0.24);
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
}
|
||||
|
||||
.survey-accordion-panel .handorgel__content__inner {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
padding: 1.4rem;
|
||||
}
|
||||
|
||||
.survey-condition-card {
|
||||
padding: 1rem 1.1rem;
|
||||
}
|
||||
|
||||
.survey-button-row--question-actions {
|
||||
margin-top: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.survey-question-action-form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.survey-dirty-hint {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
min-height: 3rem;
|
||||
max-width: 100%;
|
||||
padding: 0.8rem 1rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(189, 29, 29, 0.14);
|
||||
border: 1px solid rgba(189, 29, 29, 0.35);
|
||||
color: #a11f1f;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.survey-dirty-hint[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.survey-progress {
|
||||
width: 100%;
|
||||
height: 0.75rem;
|
||||
@@ -367,24 +705,96 @@
|
||||
grid-template-columns: 0.95fr 1.05fr;
|
||||
}
|
||||
|
||||
.survey-editor-layout > .survey-editor-meta {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.survey-editor-layout > [data-survey-question-editor] {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.survey-editor-layout > .survey-editor-side {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.survey-results-layout {
|
||||
grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.survey-list-card__head {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.survey-list-card__toggle-form {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.survey-list-card__toggle-form .survey-publish-toggle {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.survey-brand-strip {
|
||||
padding: 0.75rem 0.75rem 0.25rem;
|
||||
}
|
||||
|
||||
.survey-brand-logo.primary {
|
||||
height: 64px;
|
||||
max-width: min(100%, 260px);
|
||||
}
|
||||
|
||||
.survey-brand-logo.secondary {
|
||||
height: 75px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.survey-kpis--compact {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.survey-accordion-header {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.survey-accordion-actions {
|
||||
width: auto;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.survey-accordion-toggle {
|
||||
padding: 0.95rem 1rem;
|
||||
}
|
||||
|
||||
.survey-publish-toggle:not(.survey-publish-toggle--compact) {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var surveyEditor = document.querySelector('[data-survey-handorgel]');
|
||||
|
||||
var resetEditorViewport = function () {
|
||||
if (!surveyEditor) {
|
||||
return;
|
||||
}
|
||||
|
||||
window.scrollTo(0, 0);
|
||||
};
|
||||
|
||||
if (surveyEditor && window.history && 'scrollRestoration' in window.history) {
|
||||
window.history.scrollRestoration = 'manual';
|
||||
}
|
||||
|
||||
resetEditorViewport();
|
||||
window.addEventListener('load', function () {
|
||||
window.setTimeout(resetEditorViewport, 0);
|
||||
}, { once: true });
|
||||
|
||||
document.querySelectorAll('[data-survey-range]').forEach(function (input) {
|
||||
var targetId = input.getAttribute('data-survey-range-target');
|
||||
var output = targetId ? document.getElementById(targetId) : null;
|
||||
@@ -428,5 +838,117 @@
|
||||
select.addEventListener('change', toggle);
|
||||
toggle();
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-copy-text]').forEach(function (button) {
|
||||
var originalLabel = button.getAttribute('data-copy-label') || button.textContent;
|
||||
var successLabel = button.getAttribute('data-copy-success') || originalLabel;
|
||||
|
||||
var copyText = function (value) {
|
||||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||
return navigator.clipboard.writeText(value);
|
||||
}
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
var helper = document.createElement('textarea');
|
||||
helper.value = value;
|
||||
helper.setAttribute('readonly', 'readonly');
|
||||
helper.style.position = 'absolute';
|
||||
helper.style.left = '-9999px';
|
||||
document.body.appendChild(helper);
|
||||
helper.select();
|
||||
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(helper);
|
||||
resolve();
|
||||
} catch (error) {
|
||||
document.body.removeChild(helper);
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
button.addEventListener('click', function () {
|
||||
var text = button.getAttribute('data-copy-text') || '';
|
||||
|
||||
if (!text) {
|
||||
return;
|
||||
}
|
||||
|
||||
copyText(text).then(function () {
|
||||
button.textContent = successLabel;
|
||||
window.setTimeout(function () {
|
||||
button.textContent = originalLabel;
|
||||
}, 1800);
|
||||
}).catch(function () {
|
||||
button.textContent = originalLabel;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-survey-dirty-form]').forEach(function (form) {
|
||||
var formId = form.getAttribute('id') || '';
|
||||
var hint = form.querySelector('[data-survey-dirty-hint]');
|
||||
|
||||
if (!hint && formId) {
|
||||
hint = document.querySelector('[data-survey-dirty-hint-for="' + formId + '"]');
|
||||
}
|
||||
|
||||
if (!hint) {
|
||||
return;
|
||||
}
|
||||
|
||||
var serializeForm = function () {
|
||||
var entries = [];
|
||||
var formData = new FormData(form);
|
||||
|
||||
formData.forEach(function (value, key) {
|
||||
entries.push(key + '=' + String(value));
|
||||
});
|
||||
|
||||
return entries.join('&');
|
||||
};
|
||||
|
||||
var initialState = serializeForm();
|
||||
|
||||
var updateDirtyState = function () {
|
||||
hint.hidden = serializeForm() === initialState;
|
||||
};
|
||||
|
||||
var markDirty = function () {
|
||||
updateDirtyState();
|
||||
};
|
||||
|
||||
hint.hidden = true;
|
||||
|
||||
form.addEventListener('input', markDirty);
|
||||
form.addEventListener('change', markDirty);
|
||||
form.addEventListener('reset', function () {
|
||||
window.setTimeout(function () {
|
||||
hint.hidden = true;
|
||||
}, 0);
|
||||
});
|
||||
});
|
||||
|
||||
if (typeof handorgel === 'function') {
|
||||
document.querySelectorAll('[data-survey-handorgel]').forEach(function (element) {
|
||||
var accordion = new handorgel(element, {
|
||||
collapsible: true,
|
||||
multiSelectable: false,
|
||||
initialOpenTransition: true,
|
||||
initialOpenTransitionDelay: 0
|
||||
});
|
||||
|
||||
if (accordion && Array.isArray(accordion.folds)) {
|
||||
accordion.folds.forEach(function (fold) {
|
||||
if (fold && fold.expanded) {
|
||||
fold.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
resetEditorViewport();
|
||||
});
|
||||
</script>
|
||||
@@ -1,11 +1,20 @@
|
||||
{% trans_default_domain 'messages' %}
|
||||
|
||||
{% include '@Survey/frontend/_survey_assets.html.twig' %}
|
||||
<link rel="stylesheet" href="{{ asset('assets/handorgel/css/handorgel.min.css') }}">
|
||||
{% include '@Survey/frontend/_survey_branding.html.twig' %}
|
||||
|
||||
{% set moduleHeadline = (headline is iterable ? headline.text|default('') : headline|default(''))|striptags|trim %}
|
||||
|
||||
<section class="survey-shell survey-grid">
|
||||
{% for message in app.flashes('success') %}
|
||||
<div class="survey-alert success">{{ message }}</div>
|
||||
{% endfor %}
|
||||
|
||||
{% for message in app.flashes('error') %}
|
||||
<div class="survey-alert error">{{ message }}</div>
|
||||
{% endfor %}
|
||||
|
||||
{% if moduleHeadline %}
|
||||
<header>
|
||||
<h2>{{ moduleHeadline }}</h2>
|
||||
@@ -14,177 +23,264 @@
|
||||
|
||||
{% if loginRequired %}
|
||||
<div class="survey-alert warning">{{ 'survey.edit.login_required'|trans }}</div>
|
||||
{% elseif entryNotAllowed|default(false) %}
|
||||
<div class="survey-card survey-grid">
|
||||
<div class="survey-alert warning">{{ 'survey.edit.entry_not_allowed'|trans }}</div>
|
||||
<div class="survey-button-row">
|
||||
{% if backUrl %}<a class="survey-button secondary" href="{{ backUrl }}">{{ 'survey.edit.back_to_list'|trans }}</a>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% elseif createMode %}
|
||||
<div class="survey-card">
|
||||
<h3>{{ 'survey.edit.create_title'|trans }}</h3>
|
||||
<p>{{ 'survey.edit.create_text'|trans }}</p>
|
||||
{{ form_start(surveyForm, {attr: {class: 'survey-form-grid'}}) }}
|
||||
<label class="survey-label">{{ 'survey.edit.label_title'|trans }}{{ form_widget(surveyForm.title) }}{{ form_errors(surveyForm.title) }}</label>
|
||||
<input type="hidden" name="REQUEST_TOKEN" value="{{ contao.request_token }}">
|
||||
{{ form_widget(surveyForm._token) }}
|
||||
<label class="survey-label">{{ 'survey.edit.label_survey_title'|trans }}{{ form_widget(surveyForm.title) }}{{ form_errors(surveyForm.title) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.label_description'|trans }}{{ form_widget(surveyForm.description) }}</label>
|
||||
<label class="survey-inline-check">{{ form_widget(surveyForm.published) }}<span>{{ 'survey.edit.publish_directly'|trans }}</span></label>
|
||||
<div class="survey-button-row">
|
||||
<button class="survey-button primary">{{ 'survey.edit.create_submit'|trans }}</button>
|
||||
{% if backUrl %}<a class="survey-button secondary" href="{{ backUrl }}">{{ 'survey.edit.back_to_list'|trans }}</a>{% endif %}
|
||||
</div>
|
||||
{{ form_end(surveyForm) }}
|
||||
{{ form_end(surveyForm, {render_rest: false}) }}
|
||||
</div>
|
||||
{% else %}
|
||||
{% set locked = survey.isLocked == '1' %}
|
||||
<div class="survey-button-row">
|
||||
<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 %}
|
||||
{% if publicUrl %}<a class="survey-button primary" href="{{ publicUrl }}" target="_blank" rel="noreferrer">{{ 'survey.edit.public_view_open'|trans }}</a>{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="survey-kpis">
|
||||
<article class="survey-card"><strong>{{ 'survey.edit.public_link'|trans }}</strong><div>{% if publicUrl %}<a href="{{ publicUrl }}" target="_blank" rel="noreferrer">{{ publicUrl }}</a>{% else %}{{ 'survey.edit.no_public_page'|trans }}{% endif %}</div></article>
|
||||
<article class="survey-card"><strong>{{ 'survey.edit.status'|trans }}</strong><div class="survey-meta"><span class="survey-badge {{ survey.published ? 'success' : 'neutral' }}">{{ survey.published ? 'survey.edit.published'|trans : 'survey.edit.draft'|trans }}</span>{% if locked %}<span class="survey-badge warning">{{ 'survey.edit.locked'|trans }}</span>{% endif %}</div></article>
|
||||
<article class="survey-card"><strong>{{ 'survey.edit.editors'|trans }}</strong><div>{{ 'survey.edit.editors_count'|trans({'%count%': editors|length}) }}</div></article>
|
||||
{% if publicUrl %}
|
||||
<button
|
||||
type="button"
|
||||
class="survey-button secondary"
|
||||
data-copy-text="{{ publicUrl|e('html_attr') }}"
|
||||
data-copy-label="{{ 'survey.edit.copy_public_link'|trans|e('html_attr') }}"
|
||||
data-copy-success="{{ 'survey.edit.copy_public_link_success'|trans|e('html_attr') }}"
|
||||
>{{ 'survey.edit.copy_public_link'|trans }}</button>
|
||||
{% endif %}
|
||||
<form method="post" class="survey-publish-toggle-form">
|
||||
<input type="hidden" name="REQUEST_TOKEN" value="{{ contao.request_token }}">
|
||||
<input type="hidden" name="_survey_action" value="toggle-published">
|
||||
<input type="hidden" name="item_id" value="{{ survey.id }}">
|
||||
<input type="hidden" name="_token" value="{{ csrf_token('toggle-published-' ~ survey.id) }}">
|
||||
<button
|
||||
type="submit"
|
||||
class="survey-publish-toggle{{ survey.published ? ' is-on' : '' }}"
|
||||
aria-pressed="{{ survey.published ? 'true' : 'false' }}"
|
||||
>
|
||||
<span class="survey-publish-toggle__track" aria-hidden="true">
|
||||
<span class="survey-publish-toggle__thumb"></span>
|
||||
</span>
|
||||
<span class="survey-publish-toggle__copy">
|
||||
<span class="survey-publish-toggle__label">{{ 'survey.edit.status'|trans }}</span>
|
||||
<span class="survey-publish-toggle__value">{{ survey.published ? 'survey.edit.published'|trans : 'survey.edit.draft'|trans }}</span>
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{% if locked %}
|
||||
<div class="survey-alert warning">{{ 'survey.edit.structure_locked'|trans }}</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="survey-grid-columns">
|
||||
<div class="survey-grid">
|
||||
<div class="survey-card">
|
||||
<h3>{{ 'survey.edit.metadata'|trans }}</h3>
|
||||
{{ form_start(surveyForm, {attr: {class: 'survey-form-grid'}}) }}
|
||||
<label class="survey-label">{{ 'survey.edit.label_title'|trans }}{{ form_widget(surveyForm.title) }}{{ form_errors(surveyForm.title) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.label_description'|trans }}{{ form_widget(surveyForm.description) }}</label>
|
||||
<label class="survey-inline-check">{{ form_widget(surveyForm.published) }}<span>{{ 'survey.edit.publish_survey'|trans }}</span></label>
|
||||
<div class="survey-button-row"><button class="survey-button primary">{{ 'survey.edit.save'|trans }}</button></div>
|
||||
{{ form_end(surveyForm) }}
|
||||
</div>
|
||||
{% set surveyMetaFormId = 'survey-meta-form' %}
|
||||
{% set newQuestionFormId = 'survey-question-form-new' %}
|
||||
|
||||
<div class="survey-card">
|
||||
<h3>{{ 'survey.edit.editors_title'|trans }}</h3>
|
||||
<div class="survey-grid">
|
||||
{% for editor in editors %}
|
||||
<div>
|
||||
<strong>{{ ([editor.firstname, editor.lastname]|join(' ')|trim|striptags) ?: (editor.email|striptags|trim) }}</strong><br>
|
||||
<span>{{ editor.email|striptags|trim }}</span>
|
||||
</div>
|
||||
{% else %}
|
||||
<div>{{ 'survey.edit.no_editors'|trans }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="survey-card">
|
||||
<h3>{{ 'survey.edit.responses_title'|trans }}</h3>
|
||||
<div class="survey-grid">
|
||||
{% for submission in submissions %}
|
||||
<article>
|
||||
<div class="survey-meta">
|
||||
<span class="survey-badge neutral">{{ 'survey.list.answers'|trans({'%count%': submission.answerCount}) }}</span>
|
||||
<span class="survey-badge {{ submission.isFinished ? 'success' : 'warning' }}">{{ submission.isFinished ? 'survey.edit.completed'|trans : 'survey.edit.open'|trans }}</span>
|
||||
<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>
|
||||
<article id="survey-metadata" class="survey-accordion-item">
|
||||
<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-copy">
|
||||
<strong>Metadaten bearbeiten</strong>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</h4>
|
||||
<div class="survey-accordion-panel handorgel__content">
|
||||
<div class="handorgel__content__inner">
|
||||
{{ form_start(surveyForm, {action: metadataFormActionUrl, attr: {class: 'survey-form-grid', id: surveyMetaFormId, 'data-survey-dirty-form': '1'}}) }}
|
||||
<input type="hidden" name="REQUEST_TOKEN" value="{{ contao.request_token }}">
|
||||
<input type="hidden" name="{{ surveyForm.published.vars.full_name }}" value="{{ survey.published ? '1' : '0' }}">
|
||||
{{ form_widget(surveyForm._token) }}
|
||||
{{ form_errors(surveyForm) }}
|
||||
<label class="survey-label">{{ 'survey.edit.label_survey_title'|trans }}{{ form_widget(surveyForm.title) }}{{ form_errors(surveyForm.title) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.label_description'|trans }}{{ form_widget(surveyForm.description) }}</label>
|
||||
<div class="survey-button-row survey-button-row--form-actions">
|
||||
<button class="survey-button primary">{{ 'survey.edit.save_metadata'|trans }}</button>
|
||||
<div class="survey-dirty-hint" data-survey-dirty-hint-for="{{ surveyMetaFormId }}" hidden>{{ 'survey.edit.dirty_metadata'|trans }}</div>
|
||||
</div>
|
||||
{{ form_end(surveyForm, {render_rest: false}) }}
|
||||
</div>
|
||||
<div>{{ 'survey.edit.started_at'|trans }}: {{ submission.startedAt ? submission.startedAt|date('d.m.Y H:i') : 'survey.edit.unknown'|trans }}</div>
|
||||
<div>{{ 'survey.edit.completed_at'|trans }}: {{ submission.completedAt ? submission.completedAt|date('d.m.Y H:i') : 'survey.edit.unknown'|trans }}</div>
|
||||
<div>{{ 'survey.edit.participation_code'|trans }}: {{ submission.token }}</div>
|
||||
</article>
|
||||
{% else %}
|
||||
<div>{{ 'survey.edit.no_submissions'|trans }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="survey-grid">
|
||||
<div class="survey-card" data-survey-question-editor>
|
||||
<div class="survey-meta"><h3>{{ 'survey.edit.questions_title'|trans }}</h3>{% if activeQuestionId %}<span class="survey-badge neutral">{{ 'survey.edit.edit_mode'|trans }}</span>{% endif %}</div>
|
||||
{% if not locked %}
|
||||
{% set questionType = questionForm.type.vars.value ?: 'yes_no_maybe' %}
|
||||
{{ form_start(questionForm, {attr: {class: 'survey-form-grid'}}) }}
|
||||
<label class="survey-label">{{ 'survey.edit.label_type'|trans }}{{ form_widget(questionForm.type, {attr: {'data-survey-question-type': '1'}}) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.label_question'|trans }}{{ form_widget(questionForm.question) }}{{ form_errors(questionForm.question) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.label_description'|trans }}{{ form_widget(questionForm.description) }}</label>
|
||||
<label class="survey-inline-check">{{ form_widget(questionForm.mandatory) }}<span>{{ 'survey.edit.mandatory'|trans }}</span></label>
|
||||
<label class="survey-inline-check">{{ form_widget(questionForm.published) }}<span>{{ 'survey.edit.active'|trans }}</span></label>
|
||||
<label class="survey-inline-check yes-no-config-field"{% if questionType != 'yes_no_maybe' %} style="display:none"{% endif %}>{{ form_widget(questionForm.allowMaybe) }}<span>{{ 'survey.edit.allow_maybe'|trans }}</span></label>
|
||||
<div class="yes-no-config-field survey-grid-columns"{% if questionType != 'yes_no_maybe' %} style="display:none;grid-template-columns: repeat(2, minmax(0, 1fr));"{% else %} style="grid-template-columns: repeat(2, minmax(0, 1fr));"{% endif %}>
|
||||
<label class="survey-label">{{ 'survey.edit.jump_yes'|trans }}{{ form_widget(questionForm.jumpOnYes) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.jump_no'|trans }}{{ form_widget(questionForm.jumpOnNo) }}</label>
|
||||
</div>
|
||||
<label class="survey-inline-check choice-config-field"{% if questionType != 'choice' %} style="display:none"{% endif %}>{{ form_widget(questionForm.allowMultiple) }}<span>{{ 'survey.edit.allow_multiple'|trans }}</span></label>
|
||||
<div class="choice-config-field survey-grid-columns"{% if questionType != 'choice' %} style="display:none;grid-template-columns: repeat(2, minmax(0, 1fr));"{% else %} style="grid-template-columns: repeat(2, minmax(0, 1fr));"{% endif %}>
|
||||
<label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 1}) }}{{ form_widget(questionForm.answerOption1) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 2}) }}{{ form_widget(questionForm.answerOption2) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 3}) }}{{ form_widget(questionForm.answerOption3) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 4}) }}{{ form_widget(questionForm.answerOption4) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 5}) }}{{ form_widget(questionForm.answerOption5) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 6}) }}{{ form_widget(questionForm.answerOption6) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 7}) }}{{ form_widget(questionForm.answerOption7) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 8}) }}{{ form_widget(questionForm.answerOption8) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 9}) }}{{ form_widget(questionForm.answerOption9) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 10}) }}{{ form_widget(questionForm.answerOption10) }}</label>
|
||||
</div>
|
||||
<div class="range-config-field survey-grid-columns"{% if questionType != 'range' %} style="display:none;grid-template-columns: repeat(3, minmax(0, 1fr));"{% else %} style="grid-template-columns: repeat(3, minmax(0, 1fr));"{% endif %}>
|
||||
<label class="survey-label">{{ 'survey.edit.range_min'|trans }}{{ form_widget(questionForm.rangeMin) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.range_max'|trans }}{{ form_widget(questionForm.rangeMax) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.range_step'|trans }}{{ form_widget(questionForm.rangeStep) }}</label>
|
||||
</div>
|
||||
<div class="survey-button-row"><button class="survey-button primary">{{ activeQuestionId ? 'survey.edit.update_question'|trans : 'survey.edit.save_question'|trans }}</button></div>
|
||||
{{ form_end(questionForm) }}
|
||||
{% endif %}
|
||||
|
||||
<div class="survey-grid">
|
||||
{% for question in questions %}
|
||||
<article class="survey-card">
|
||||
<div class="survey-meta">
|
||||
<span class="survey-badge neutral">{{ question.type }}</span>
|
||||
{% 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">
|
||||
<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>
|
||||
</span>
|
||||
</span>
|
||||
<span class="survey-meta survey-accordion-actions">
|
||||
<span class="survey-badge neutral">{{ ('survey.survey.question_type_' ~ question.type)|trans }}</span>
|
||||
{% if question.mandatory %}<span class="survey-badge warning">{{ 'survey.edit.mandatory_badge'|trans }}</span>{% endif %}
|
||||
{% if loop.first %}<span class="survey-badge success">{{ 'survey.edit.start_badge'|trans }}</span>{% endif %}
|
||||
</div>
|
||||
<h4>{{ question.question|striptags|trim }}</h4>
|
||||
<p>{{ (question.description|striptags|trim) ?: 'survey.edit.no_extra_description'|trans }}</p>
|
||||
{% if not locked %}
|
||||
<div class="survey-button-row">
|
||||
<a class="survey-button secondary" href="?survey={{ survey.id }}&question={{ question.id }}">{{ 'survey.list.edit'|trans }}</a>
|
||||
<form method="post">
|
||||
<input type="hidden" name="_survey_action" value="delete-question">
|
||||
<input type="hidden" name="item_id" value="{{ question.id }}">
|
||||
<input type="hidden" name="_token" value="{{ csrf_token('delete-question-' ~ question.id) }}">
|
||||
<button class="survey-button danger" onclick="return confirm('{{ 'survey.edit.delete_question_confirm'|trans|e('js') }}');">{{ 'survey.edit.delete'|trans }}</button>
|
||||
</form>
|
||||
</span>
|
||||
</button>
|
||||
</h4>
|
||||
<div class="survey-accordion-panel handorgel__content">
|
||||
<div class="handorgel__content__inner" data-survey-question-editor>
|
||||
{% if questionItemForm %}
|
||||
{% set questionType = questionItemForm.type.vars.value ?: question.type ?: 'yes_no_maybe' %}
|
||||
{{ form_start(questionItemForm, {attr: {class: 'survey-form-grid', id: questionFormId, 'data-survey-dirty-form': '1'}}) }}
|
||||
<input type="hidden" name="REQUEST_TOKEN" value="{{ contao.request_token }}">
|
||||
{{ form_errors(questionItemForm) }}
|
||||
<label class="survey-label">{{ 'survey.edit.label_type'|trans }}{{ form_widget(questionItemForm.type, {attr: {'data-survey-question-type': '1'}}) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.label_question'|trans }}{{ form_widget(questionItemForm.question) }}{{ form_errors(questionItemForm.question) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.label_description'|trans }}{{ form_widget(questionItemForm.description) }}</label>
|
||||
<div class="survey-question-toggles">
|
||||
<label class="survey-inline-check">{{ form_widget(questionItemForm.mandatory) }}<span>{{ 'survey.edit.mandatory'|trans }}</span></label>
|
||||
<label class="survey-inline-check">{{ form_widget(questionItemForm.published) }}<span>{{ 'survey.edit.active'|trans }}</span></label>
|
||||
<label class="survey-inline-check yes-no-config-field"{% if questionType != 'yes_no_maybe' %} style="display:none"{% endif %}>{{ form_widget(questionItemForm.allowMaybe) }}<span>{{ 'survey.edit.allow_maybe'|trans }}</span></label>
|
||||
<label class="survey-inline-check choice-config-field"{% if questionType != 'choice' %} style="display:none"{% endif %}>{{ form_widget(questionItemForm.allowMultiple) }}<span>{{ 'survey.edit.allow_multiple'|trans }}</span></label>
|
||||
</div>
|
||||
<div class="yes-no-config-field survey-grid-columns"{% if questionType != 'yes_no_maybe' %} style="display:none;grid-template-columns: repeat(2, minmax(0, 1fr));"{% else %} style="grid-template-columns: repeat(2, minmax(0, 1fr));"{% endif %}>
|
||||
<label class="survey-label">{{ 'survey.edit.jump_yes'|trans }}{{ form_widget(questionItemForm.jumpOnYes) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.jump_no'|trans }}{{ form_widget(questionItemForm.jumpOnNo) }}</label>
|
||||
</div>
|
||||
<div class="choice-config-field survey-grid-columns"{% if questionType != 'choice' %} style="display:none;grid-template-columns: repeat(2, minmax(0, 1fr));"{% else %} style="grid-template-columns: repeat(2, minmax(0, 1fr));"{% endif %}>
|
||||
<label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 1}) }}{{ form_widget(questionItemForm.answerOption1) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 2}) }}{{ form_widget(questionItemForm.answerOption2) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 3}) }}{{ form_widget(questionItemForm.answerOption3) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 4}) }}{{ form_widget(questionItemForm.answerOption4) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 5}) }}{{ form_widget(questionItemForm.answerOption5) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 6}) }}{{ form_widget(questionItemForm.answerOption6) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 7}) }}{{ form_widget(questionItemForm.answerOption7) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 8}) }}{{ form_widget(questionItemForm.answerOption8) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 9}) }}{{ form_widget(questionItemForm.answerOption9) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 10}) }}{{ form_widget(questionItemForm.answerOption10) }}</label>
|
||||
</div>
|
||||
<div class="range-config-field survey-grid-columns"{% if questionType != 'range' %} style="display:none;grid-template-columns: repeat(3, minmax(0, 1fr));"{% else %} style="grid-template-columns: repeat(3, minmax(0, 1fr));"{% endif %}>
|
||||
<label class="survey-label">{{ 'survey.edit.range_min'|trans }}{{ form_widget(questionItemForm.rangeMin) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.range_max'|trans }}{{ form_widget(questionItemForm.rangeMax) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.range_step'|trans }}{{ form_widget(questionItemForm.rangeStep) }}</label>
|
||||
</div>
|
||||
{{ form_end(questionItemForm) }}
|
||||
|
||||
<div class="survey-button-row survey-button-row--form-actions survey-button-row--question-actions">
|
||||
<button class="survey-button primary" type="submit" form="{{ questionFormId }}">{{ 'survey.edit.save_this_question'|trans }}</button>
|
||||
{% if not locked %}
|
||||
<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-question">
|
||||
<input type="hidden" name="item_id" value="{{ question.id }}">
|
||||
<input type="hidden" name="_token" value="{{ csrf_token('delete-question-' ~ question.id) }}">
|
||||
<button class="survey-button danger" onclick="return confirm('{{ 'survey.edit.delete_question_confirm'|trans|e('js') }}');">{{ 'survey.edit.delete'|trans }}</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
<div class="survey-dirty-hint" data-survey-dirty-hint-for="{{ questionFormId }}" hidden>{{ 'survey.edit.dirty_question'|trans }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</article>
|
||||
{% else %}
|
||||
<div>{{ 'survey.edit.no_questions'|trans }}</div>
|
||||
{% endfor %}
|
||||
|
||||
{% if not locked %}
|
||||
<article id="survey-question-new" class="survey-accordion-item">
|
||||
<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">+</span>
|
||||
<span class="survey-accordion-copy">
|
||||
<strong>{{ 'survey.edit.new_question'|trans }}</strong>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</h4>
|
||||
<div class="survey-accordion-panel handorgel__content">
|
||||
<div class="handorgel__content__inner" data-survey-question-editor>
|
||||
{% if newQuestionForm %}
|
||||
{% set questionType = newQuestionForm.type.vars.value ?: 'yes_no_maybe' %}
|
||||
{{ form_start(newQuestionForm, {attr: {class: 'survey-form-grid', id: newQuestionFormId, 'data-survey-dirty-form': '1'}}) }}
|
||||
<input type="hidden" name="REQUEST_TOKEN" value="{{ contao.request_token }}">
|
||||
{{ form_errors(newQuestionForm) }}
|
||||
<label class="survey-label">{{ 'survey.edit.label_type'|trans }}{{ form_widget(newQuestionForm.type, {attr: {'data-survey-question-type': '1'}}) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.label_question'|trans }}{{ form_widget(newQuestionForm.question) }}{{ form_errors(newQuestionForm.question) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.label_description'|trans }}{{ form_widget(newQuestionForm.description) }}</label>
|
||||
<div class="survey-question-toggles">
|
||||
<label class="survey-inline-check">{{ form_widget(newQuestionForm.mandatory) }}<span>{{ 'survey.edit.mandatory'|trans }}</span></label>
|
||||
<label class="survey-inline-check">{{ form_widget(newQuestionForm.published) }}<span>{{ 'survey.edit.active'|trans }}</span></label>
|
||||
<label class="survey-inline-check yes-no-config-field"{% if questionType != 'yes_no_maybe' %} style="display:none"{% endif %}>{{ form_widget(newQuestionForm.allowMaybe) }}<span>{{ 'survey.edit.allow_maybe'|trans }}</span></label>
|
||||
<label class="survey-inline-check choice-config-field"{% if questionType != 'choice' %} style="display:none"{% endif %}>{{ form_widget(newQuestionForm.allowMultiple) }}<span>{{ 'survey.edit.allow_multiple'|trans }}</span></label>
|
||||
</div>
|
||||
<div class="yes-no-config-field survey-grid-columns"{% if questionType != 'yes_no_maybe' %} style="display:none;grid-template-columns: repeat(2, minmax(0, 1fr));"{% else %} style="grid-template-columns: repeat(2, minmax(0, 1fr));"{% endif %}>
|
||||
<label class="survey-label">{{ 'survey.edit.jump_yes'|trans }}{{ form_widget(newQuestionForm.jumpOnYes) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.jump_no'|trans }}{{ form_widget(newQuestionForm.jumpOnNo) }}</label>
|
||||
</div>
|
||||
<div class="choice-config-field survey-grid-columns"{% if questionType != 'choice' %} style="display:none;grid-template-columns: repeat(2, minmax(0, 1fr));"{% else %} style="grid-template-columns: repeat(2, minmax(0, 1fr));"{% endif %}>
|
||||
<label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 1}) }}{{ form_widget(newQuestionForm.answerOption1) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 2}) }}{{ form_widget(newQuestionForm.answerOption2) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 3}) }}{{ form_widget(newQuestionForm.answerOption3) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 4}) }}{{ form_widget(newQuestionForm.answerOption4) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 5}) }}{{ form_widget(newQuestionForm.answerOption5) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 6}) }}{{ form_widget(newQuestionForm.answerOption6) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 7}) }}{{ form_widget(newQuestionForm.answerOption7) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 8}) }}{{ form_widget(newQuestionForm.answerOption8) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 9}) }}{{ form_widget(newQuestionForm.answerOption9) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 10}) }}{{ form_widget(newQuestionForm.answerOption10) }}</label>
|
||||
</div>
|
||||
<div class="range-config-field survey-grid-columns"{% if questionType != 'range' %} style="display:none;grid-template-columns: repeat(3, minmax(0, 1fr));"{% else %} style="grid-template-columns: repeat(3, minmax(0, 1fr));"{% endif %}>
|
||||
<label class="survey-label">{{ 'survey.edit.range_min'|trans }}{{ form_widget(newQuestionForm.rangeMin) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.range_max'|trans }}{{ form_widget(newQuestionForm.rangeMax) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.range_step'|trans }}{{ form_widget(newQuestionForm.rangeStep) }}</label>
|
||||
</div>
|
||||
<div class="survey-button-row survey-button-row--form-actions">
|
||||
<button class="survey-button primary">{{ 'survey.edit.save_new_question'|trans }}</button>
|
||||
<div class="survey-dirty-hint" data-survey-dirty-hint-for="{{ newQuestionFormId }}" hidden>{{ 'survey.edit.dirty_new_question'|trans }}</div>
|
||||
</div>
|
||||
{{ form_end(newQuestionForm) }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="survey-grid survey-editor-side">
|
||||
<div class="survey-card">
|
||||
<div class="survey-meta"><h3>{{ 'survey.edit.conditions_title'|trans }}</h3>{% if activeConditionId %}<span class="survey-badge neutral">{{ 'survey.edit.edit_mode'|trans }}</span>{% endif %}</div>
|
||||
{% if not locked %}
|
||||
{{ form_start(conditionForm, {attr: {class: 'survey-form-grid'}}) }}
|
||||
<label class="survey-label">{{ 'survey.edit.source_question'|trans }}{{ form_widget(conditionForm.sourceQuestion) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.answer'|trans }}{{ form_widget(conditionForm.answerValue) }}</label>
|
||||
<label class="survey-label">{{ 'survey.edit.next_question'|trans }}{{ form_widget(conditionForm.targetQuestion) }}</label>
|
||||
<div class="survey-button-row"><button class="survey-button primary">{{ activeConditionId ? 'survey.edit.update_condition'|trans : 'survey.edit.save_condition'|trans }}</button></div>
|
||||
{{ form_end(conditionForm) }}
|
||||
{% endif %}
|
||||
|
||||
<div class="survey-meta survey-section-head"><h3>{{ 'survey.edit.conditions_title'|trans }}</h3></div>
|
||||
<div class="survey-grid">
|
||||
{% for condition in conditions %}
|
||||
<article class="survey-card">
|
||||
<div><strong>{{ 'survey.edit.condition_prefix'|trans({'%value%': condition.answerValue|striptags|trim}) }}</strong></div>
|
||||
<div>{{ (condition.sourceQuestionLabel|striptags|trim) ?: 'survey.edit.question_fallback'|trans({'%id%': condition.sourceQuestion}) }}</div>
|
||||
<div>{{ 'survey.edit.continue_to'|trans({'%target%': ((condition.targetQuestionLabel|striptags|trim) ?: ('survey.edit.question_fallback'|trans({'%id%': condition.targetQuestion})))}) }}</div>
|
||||
{% if not locked %}
|
||||
<div class="survey-button-row">
|
||||
<a class="survey-button secondary" href="?survey={{ survey.id }}&condition={{ condition.id }}">{{ 'survey.edit.edit_condition'|trans }}</a>
|
||||
<form method="post">
|
||||
<input type="hidden" name="_survey_action" value="delete-condition">
|
||||
<input type="hidden" name="item_id" value="{{ condition.id }}">
|
||||
<input type="hidden" name="_token" value="{{ csrf_token('delete-condition-' ~ condition.id) }}">
|
||||
<button class="survey-button danger" onclick="return confirm('{{ 'survey.edit.delete_condition_confirm'|trans|e('js') }}');">{{ 'survey.edit.delete'|trans }}</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
<article class="survey-card survey-condition-card">
|
||||
{% set sourceLabel = (condition.sourceQuestionLabel|default('')|striptags|trim) ?: ('survey.edit.question_fallback'|trans({'%id%': condition.sourceQuestion})) %}
|
||||
{% set targetLabel = (condition.targetQuestionLabel|default('')|striptags|trim) ?: ('survey.edit.question_fallback'|trans({'%id%': condition.targetQuestion})) %}
|
||||
<div><strong>Frage {{ condition.sourceQuestion }}: {{ sourceLabel }}</strong></div>
|
||||
<div>{{ 'survey.edit.condition_prefix'|trans({'%value%': condition.answerValue|default('')|striptags|trim|capitalize}) }}</div>
|
||||
<div>weiter zu Frage {{ condition.targetQuestion }}: {{ targetLabel }}</div>
|
||||
</article>
|
||||
{% else %}
|
||||
<div>{{ 'survey.edit.no_conditions'|trans }}</div>
|
||||
@@ -194,4 +290,5 @@
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</section>
|
||||
</section>
|
||||
<script src="{{ asset('assets/handorgel/js/handorgel.min.js') }}"></script>
|
||||
@@ -6,6 +6,14 @@
|
||||
{% set moduleHeadline = (headline is iterable ? headline.text|default('') : headline|default(''))|striptags|trim %}
|
||||
|
||||
<section class="survey-shell survey-grid">
|
||||
{% for message in app.flashes('success') %}
|
||||
<div class="survey-alert success">{{ message }}</div>
|
||||
{% endfor %}
|
||||
|
||||
{% for message in app.flashes('error') %}
|
||||
<div class="survey-alert error">{{ message }}</div>
|
||||
{% endfor %}
|
||||
|
||||
{% if moduleHeadline %}
|
||||
<header>
|
||||
<h2>{{ moduleHeadline }}</h2>
|
||||
@@ -21,22 +29,43 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="survey-grid">
|
||||
<div class="survey-grid survey-list-grid">
|
||||
{% for survey in surveys %}
|
||||
<article class="survey-card">
|
||||
<div class="survey-meta">
|
||||
<h3>{{ survey.title|striptags|trim }}</h3>
|
||||
<span class="survey-badge {{ survey.published ? 'success' : 'neutral' }}">{{ survey.published ? 'survey.list.published'|trans : 'survey.list.draft'|trans }}</span>
|
||||
{% if survey.isLocked %}
|
||||
<span class="survey-badge warning">{{ 'survey.list.locked'|trans }}</span>
|
||||
{% endif %}
|
||||
<article class="survey-card survey-list-card">
|
||||
<div class="survey-list-card__head">
|
||||
<div class="survey-list-card__title-wrap">
|
||||
<h3>{{ survey.title|striptags|trim }}</h3>
|
||||
{% if survey.isLocked %}
|
||||
<div class="survey-meta">
|
||||
<span class="survey-badge warning">{{ 'survey.list.locked'|trans }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<form method="post" class="survey-publish-toggle-form survey-list-card__toggle-form">
|
||||
<input type="hidden" name="REQUEST_TOKEN" value="{{ contao.request_token }}">
|
||||
<input type="hidden" name="_survey_action" value="toggle-published">
|
||||
<input type="hidden" name="item_id" value="{{ survey.id }}">
|
||||
<input type="hidden" name="_token" value="{{ csrf_token('toggle-published-' ~ survey.id) }}">
|
||||
<button
|
||||
type="submit"
|
||||
class="survey-publish-toggle survey-publish-toggle--compact{{ survey.published ? ' is-on' : '' }}"
|
||||
aria-pressed="{{ survey.published ? 'true' : 'false' }}"
|
||||
>
|
||||
<span class="survey-publish-toggle__track" aria-hidden="true">
|
||||
<span class="survey-publish-toggle__thumb"></span>
|
||||
</span>
|
||||
<span class="survey-publish-toggle__copy">
|
||||
<span class="survey-publish-toggle__label">{{ 'survey.edit.status'|trans }}</span>
|
||||
<span class="survey-publish-toggle__value">{{ survey.published ? 'survey.list.published'|trans : 'survey.list.draft'|trans }}</span>
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<p>{{ (survey.description|striptags|trim) ?: 'survey.list.no_description'|trans }}</p>
|
||||
<div class="survey-meta">
|
||||
<div class="survey-meta survey-list-card__stats">
|
||||
<span class="survey-badge neutral">{{ 'survey.list.questions'|trans({'%count%': survey.questionCount}) }}</span>
|
||||
<span class="survey-badge neutral">{{ 'survey.list.answers'|trans({'%count%': survey.answerCount}) }}</span>
|
||||
<span class="survey-badge neutral">{{ 'survey.list.participations'|trans({'%count%': survey.participationCount}) }}</span>
|
||||
</div>
|
||||
<div class="survey-button-row">
|
||||
<div class="survey-button-row survey-list-card__actions">
|
||||
{% if survey.editUrl %}
|
||||
<a class="survey-button primary" href="{{ survey.editUrl }}">{{ 'survey.list.edit'|trans }}</a>
|
||||
{% endif %}
|
||||
@@ -46,6 +75,13 @@
|
||||
{% if survey.resultsUrl %}
|
||||
<a class="survey-button secondary" href="{{ survey.resultsUrl }}" target="_blank" rel="noreferrer">{{ 'survey.list.show_results'|trans }}</a>
|
||||
{% endif %}
|
||||
<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>
|
||||
</article>
|
||||
{% else %}
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<article class="survey-card">
|
||||
<div class="survey-meta">
|
||||
<h2>{{ survey.title|striptags|trim }}</h2>
|
||||
<span class="survey-badge neutral">{{ 'survey.results.completed_submissions'|trans({'%count%': completedSubmissionCount}) }}</span>
|
||||
<span class="survey-badge neutral">{{ 'survey.results.participations'|trans({'%count%': completedSubmissionCount}) }}</span>
|
||||
<span class="survey-badge neutral">{{ 'survey.results.questions'|trans({'%count%': questionResults|length}) }}</span>
|
||||
</div>
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
<article class="survey-card survey-results-card">
|
||||
<div class="survey-meta">
|
||||
<h3>{{ question.question|striptags|trim }}</h3>
|
||||
<span class="survey-badge neutral">{{ 'survey.results.answers'|trans({'%count%': question.totalAnswers}) }}</span>
|
||||
<span class="survey-badge neutral">{{ 'survey.results.participations'|trans({'%count%': completedSubmissionCount}) }}</span>
|
||||
<span class="survey-badge neutral">{{ 'survey.results.response_rate'|trans({'%rate%': question.responseRate}) }}</span>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user