From aea17dff29b71c5bfafdb40ff4af9165276bcab8 Mon Sep 17 00:00:00 2001
From: Nico-AP <n.pfiffner@ikmz.uzh.ch>
Date: Thu, 5 Dec 2024 17:24:36 +0100
Subject: [PATCH] ui: Optimize admin interface for editing question items and
 question scales.

---
 .../ddm_core/css/research-interface-base.css  | 23 ++++++++++++++++++-
 ddm/questionnaire/models.py                   |  2 +-
 .../templates/ddm_questionnaire/edit.html     |  8 +++----
 .../templates/ddm_questionnaire/edit_set.html | 18 +++++++++++----
 .../questionnaire_configuration.adoc          |  4 ++--
 5 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/ddm/core/static/ddm_core/css/research-interface-base.css b/ddm/core/static/ddm_core/css/research-interface-base.css
index 5ebf026..ada0ae7 100644
--- a/ddm/core/static/ddm_core/css/research-interface-base.css
+++ b/ddm/core/static/ddm_core/css/research-interface-base.css
@@ -158,6 +158,27 @@
     color: lightgray;
 }
 
-.item-set-table input[type="text"]{
+.item-set-table input[type="text"],
+.item-set-table input[type="number"] {
     width: 100%;
 }
+
+.item-set-table .num-input-col {
+	width: 5%;
+	min-width: 80px;
+}
+
+.item-set-table .check-input-col {
+	width: 8%;
+	min-width: 80px;
+    text-align: center;
+}
+
+.item-set-table td {
+    vertical-align: middle;
+    text-align: center;
+}
+
+.item-set-table .checkmark {
+	display: inline-block;
+}
diff --git a/ddm/questionnaire/models.py b/ddm/questionnaire/models.py
index 6887bc0..a3f4297 100644
--- a/ddm/questionnaire/models.py
+++ b/ddm/questionnaire/models.py
@@ -407,6 +407,7 @@ class Meta:
         'QuestionBase',
         on_delete=models.CASCADE
     )
+    index = models.IntegerField()
     label = models.CharField(
         max_length=255,
         null=True,
@@ -418,7 +419,6 @@ class Meta:
         blank=True,
         verbose_name="Label Right"
     )
-    index = models.IntegerField()
     value = models.IntegerField()
     randomize = models.BooleanField(default=False)
 
diff --git a/ddm/questionnaire/templates/ddm_questionnaire/edit.html b/ddm/questionnaire/templates/ddm_questionnaire/edit.html
index 04ffba0..489d864 100644
--- a/ddm/questionnaire/templates/ddm_questionnaire/edit.html
+++ b/ddm/questionnaire/templates/ddm_questionnaire/edit.html
@@ -44,26 +44,26 @@
       {% if forloop.first %}
       <thead>
       <tr>
+        <th>Index</th>
         {% if object.question_type == "semantic_diff" %}
           <th>Label</th>
           <th>Label Right</th>
         {% else %}
           <th>Label</th>
         {% endif %}
-        <th>Index</th>
         <th>Value</th>
         <th>Randomize</th>
       </tr>
       </thead>
       {% endif %}
       <tr>
+        <td>{{ item.index }}</td>
         {% if object.question_type == "semantic_diff" %}
           <td>{{ item.label }}</td>
           <td>{{ item.label_alt }}</td>
         {% else %}
           <td>{{ item.label }}</td>
         {% endif %}
-        <td>{{ item.index }}</td>
         <td>{{ item.value }}</td>
         <td>{{ item.randomize }}</td>
       </tr>
@@ -86,15 +86,15 @@
       {% if forloop.first %}
       <thead>
       <tr>
-        <th>Label</th>
         <th>Index</th>
+        <th>Label</th>
         <th>Value</th>
       </tr>
       </thead>
       {% endif %}
       <tr>
-        <td>{{ point.label }}</td>
         <td>{{ point.index }}</td>
+        <td>{{ point.label }}</td>
         <td>{{ point.value }}</td>
       </tr>
       {% empty %}
diff --git a/ddm/questionnaire/templates/ddm_questionnaire/edit_set.html b/ddm/questionnaire/templates/ddm_questionnaire/edit_set.html
index 5e7c6af..36c48a0 100644
--- a/ddm/questionnaire/templates/ddm_questionnaire/edit_set.html
+++ b/ddm/questionnaire/templates/ddm_questionnaire/edit_set.html
@@ -1,4 +1,4 @@
-{% extends 'ddm_core/page_with_form.html' %}
+{% extends "ddm_core/page_with_form.html" %}
 
 {% block page_title %}Edit {{ context_title }}{% endblock %}
 
@@ -8,14 +8,22 @@
 <form method="post">
   {% csrf_token %}
   {{ formset.management_form }}
-  <table class="table mt-4 item-set-table">
+  <table class="table mt-4 item-set-table border-bottom">
 
     {% for form in formset.forms %}
 
     {% if forloop.first %}
     <thead>
     <tr>
-      {% for field in form.visible_fields %}<th>{{ field.label }}</th>{% endfor %}
+      {% for field in form.visible_fields %}
+        <th
+            {% if field.label in "Index,Value" %}
+              class="num-input-col"
+            {% elif field.label in "Randomize,Löschen,Add border,Delete" or field.label == "Löschen" %}
+              class="check-input-col"
+            {% endif %}
+        >{{ field.label }}</th>
+      {% endfor %}
     </tr>
     </thead>
     {% endif %}
@@ -24,9 +32,9 @@
       <tr><td class="border-bottom-0">{{ form.non_field_errors }}</td></tr>
     {% endif %}
 
-    <tr>
+    <tr class="border-bottom-0">
       {% for field in form.visible_fields %}
-      <td>
+      <td class="border-bottom-0">
         {% if forloop.first %}
         {% for hidden in form.hidden_fields %}
         {{ hidden }}
diff --git a/docs/modules/researchers/pages/project_configuration/questionnaire/questionnaire_configuration.adoc b/docs/modules/researchers/pages/project_configuration/questionnaire/questionnaire_configuration.adoc
index bc34a86..28022ee 100644
--- a/docs/modules/researchers/pages/project_configuration/questionnaire/questionnaire_configuration.adoc
+++ b/docs/modules/researchers/pages/project_configuration/questionnaire/questionnaire_configuration.adoc
@@ -87,14 +87,14 @@ For Single Choice Questions, Multiple Choice Questions, Matrix Questions and Sem
 participants answer in relation to question items. To configure question items, the following
 settings are available:
 
+Index:: Defines the order in which the items are displayed.
+
 Label:: The label/text of the item that is displayed to participants related to an item.
 For semantic differential questions, this is the label displayed on the left-hand side of the scale.
 
 Label Right:: Only for semantic differential questions. The label displayed on the
 right-hand side of the scale.
 
-Index:: Defines the order in which the items are displayed.
-
 Value:: Is (_a_) the identifier of an item and (_b_) used to indicate which
 item(s) has or have been selected in the data export (only for Single and Multi
 Choice Questions).