Style question add answers

H2-invent · Nov 20, 2023 · 5a883cb · 5a883cb
1 parent a5bf998
commit 5a883cb
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 60 deletions.
diff --git a/assets/app.js b/assets/app.js
@@ -7,4 +7,12 @@ import './styles/app.css';
 import './scripts/tailmater.js';
 import './scripts/datatables.js';
 
-document.getElementById('snackbar-trigger')?.click();
+import $ from 'jquery';
+global.$ = global.jQuery = $;
+import {initFreeFields} from "./scripts/freeField";
+
+document.getElementById('snackbar-trigger')?.click();
+
+$(document).ready(function() {
+    initFreeFields();
+});
diff --git a/assets/scripts/freeField.js b/assets/scripts/freeField.js
@@ -0,0 +1,39 @@
+import $ from "jquery";
+
+function addFormToCollection($collectionHolderClass) {
+    var $collectionHolder = $('.' + $collectionHolderClass);
+    var prototype = $collectionHolder.data('prototype');
+    var index = $collectionHolder.data('index');
+    var newForm = prototype;
+    newForm = newForm.replace(/__name__/g, index);
+    $collectionHolder.data('index', index + 1);
+    //console.log('index', index);
+    let $newFormLi = $('<li></li>').append(newForm);
+    $collectionHolder.append($newFormLi);
+    addTagFormDeleteLink($newFormLi);
+    $newFormLi.find('input').first().focus();
+}
+
+function addTagFormDeleteLink($tagFormLi) {
+    var $removeFormButton = $('<a href="#" class="deleteFreeField" type="remove-group"><div class="text-danger px-1 " data-toggle="tooltip" title="Lösche Freifeld" data-original-title="Lösche Freifeld">X</div></a>');
+    $tagFormLi.append($removeFormButton);
+    $removeFormButton.on('click', function(e) {
+        e.preventDefault();
+        $tagFormLi.remove();
+    });
+}
+
+function initFreeFields(){
+    $('#add_item_link').off('click')
+    var $groupsCollectionHolder = $('ul.freeField');
+    $groupsCollectionHolder.find('li').each(function() {
+        addTagFormDeleteLink($(this));
+    });
+    $groupsCollectionHolder.data('index', $groupsCollectionHolder.find('input').length);
+    $('#add_item_link').on('click', function(e) {
+        var $collectionHolderClass = $(e.currentTarget).data('collectionHolderClass');
+        addFormToCollection($collectionHolderClass);
+    })
+};
+
+export {initFreeFields};
diff --git a/assets/styles/tailmater.css b/assets/styles/tailmater.css
@@ -714,6 +714,10 @@ td, th {
     .shadow-material {
         box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
     }
+
+    .text-muted {
+        @apply text-gray-400;
+    }
 }
 
 html, body {
@@ -822,6 +826,10 @@ footer > ul > li {
     }
 }
 
+form > fieldset .btn {
+    @apply !bg-surface-200;
+}
+
 form > fieldset {
     @apply card-filled !bg-surface-100 dark:bg-surfacedark-300 w-full max-w-2xl mb-5;
 }
@@ -905,12 +913,6 @@ hr {
     @apply text-red-600 hover:text-red-800;
 }
 
-@layer base {
-    .text-muted {
-        @apply text-gray-400;
-    }
-}
-
 main > article > #content a {
     @apply text-primary-600 hover:underline;
 }
@@ -1070,3 +1072,7 @@ ul.stacked-list > li > div:first-child > p:nth-child(2) {
 ul.stacked-list > li > div:last-child {
     @apply shrink-0 sm:flex sm:flex-col sm:items-end text-sm;
 }
+
+ul.dynamic-list > li {
+    @apply flex pb-3 gap-x-5;
+}
diff --git a/src/Controller/QuestionController.php b/src/Controller/QuestionController.php
@@ -130,7 +130,7 @@ public function delete(
         $this->em->remove($question);
         $this->em->flush();
 
-        return $this->redirectToRoute('question');
+        return $this->redirectToRoute('akademie_admin');
     }
 
     private function handleForm(FormInterface $form, ?Question $originalQuestion = null): ?Question

diff --git a/src/Form/Type/Questionnaire/QuestionnaireType.php b/src/Form/Type/Questionnaire/QuestionnaireType.php
@@ -46,7 +46,7 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
             SubmitType::class,
             [
                 'attr' => [
-                    'class' => 'btn btn-primary'
+                    'class' => 'btn'
                 ],
                 'label' => 'save.word',
                 'translation_domain' => 'general',

diff --git a/templates/questionnaire/question/create.html.twig b/templates/questionnaire/question/create.html.twig
@@ -20,33 +20,26 @@
         {% if error %}
             <div class="text-error-600">{% trans %}question.error{% endtrans %}</div>
         {% endif %}
-        <ul data-prototype="
-                                <div class='d-flex flex-column'>
-                                    {{ form_widget(form.answers.vars.prototype.label)|e('html_attr') }}
-                                    {{ form_widget(form.answers.vars.prototype.isCorrect)|e('html_attr') }}
-                                </div>
+        <ul class="answers dynamic-list freeField mb-2"
+            data-prototype="
+                    <div>{{ form_widget(form.answers.vars.prototype.label)|e('html_attr') }}</div>
+                    <div>{{ form_widget(form.answers.vars.prototype.isCorrect)|e('html_attr') }}</div>
                         ">
             {% for answerItem in form.answers %}
                 <li>
-                    <div>
-                        <div>{{ form_widget(answerItem.label) }}</div>
-                        <div>{{ form_widget(answerItem.isCorrect) }}</div>
-                    </div>
+                    <div>{{ form_widget(answerItem.label) }}</div>
+                    <div>{{ form_widget(answerItem.isCorrect) }}</div>
                 </li>
             {% endfor %}
         </ul>
-        <button type="button"
-                id="add_item_link"
-                class="btn"
-                data-collection-holder-class="answers">{% trans %}question.answer.add{% endtrans %}
+        <button type="button" id="add_item_link" class="btn" data-collection-holder-class="answers">
+            {% trans %}question.answer.add{% endtrans %}
         </button>
     </fieldset>
-    <fieldset>
-        <legend>Answers</legend>
-        {{ form_row(form.answers) }}
-    </fieldset>
     {{ form_row(form.save, {row_attr: {class: 'form-buttons'}}) }}
-
+    <div class="hidden">
+        {{ form_rest(form) }}
+    </div>
     {{ form_end(form) }}
 
 {% endblock %}
diff --git a/templates/questionnaire/question/details.html.twig b/templates/questionnaire/question/details.html.twig
@@ -1,40 +1,34 @@
 {% extends 'base.html.twig' %}
 {% trans_default_domain 'questionnaire' %}
+
+{% block title %}
+    {% trans %}question.show{% endtrans %}
+{% endblock %}
+
 {% block body %}
     {% trans_default_domain 'questionnaire' %}
-    <div>
-        <div>
-            <div>
-                <h5>{{ question.label }}</h5>
-                {% if question.hint is not empty %}
-                    <p>{{ question.hint }}</p>
-                {% endif %}
-                <p>{% trans %}question.evaluationValue{% endtrans %}: {{ question.evalValue }}</p>
-                <table>
-                    <thead>
-                    <tr>
-                        <th>{{ question.type }}</th>
-                    </tr>
-                    </thead>
-                    {% for answer in question.answers %}
-                        {% if answer.isCorrect %}
-                            <tr>
-                                <td>{{ answer.label }}</td>
-                            </tr>
-                        {% else %}
-                            <tr>
-                                <td>{{ answer.label }}</td>
-                            </tr>
-                        {% endif %}
-                    {% endfor %}
-                </table>
-            </div>
-            <div>
-                <a
-                   href="{{ path('question_edit', {'id': question.id}) }}">{% trans from 'general' %}edit{% endtrans %}</a>
-                <a
-                   href="{{ path('question_delete', {'id': question.id}) }}">{% trans from 'general' %}remove{% endtrans %}</a>
-            </div>
+    <div class="dl-wrapper xl:!w-1/2 mb-5">
+        <div class="dl-head">
+            <h3>{{ question.label }}</h3>
+            {% if question.hint is not empty %}
+                <p>{{ question.hint }}</p>
+            {% endif %}
+            <p>{% trans %}question.evaluationValue{% endtrans %}: {{ question.evalValue }}</p>
+            <p>Type: {{ question.type }}</p>
+        </div>
+        <div class="dl-content">
+            <dl>
+                {% for answer in question.answers %}
+                    <div>
+                        <dt>{{ answer.label }}</dt>
+                        <dd>{{ answer.isCorrect ? '<span class="material-symbols-outlined">check_circle</span>' }}</dd>
+                    </div>
+                {% endfor %}
+            </dl>
         </div>
     </div>
+    <div>
+        <a class="btn" href="{{ path('question_edit', {'id': question.id}) }}">{% trans from 'general' %}edit{% endtrans %}</a>
+        <a class="btn btn-danger" href="{{ path('question_delete', {'id': question.id}) }}">{% trans from 'general' %}remove{% endtrans %}</a>
+    </div>
 {% endblock %}