243: Overhaul Question Creation View

selenium/helper/Configuration.py

@@ -13,7 +13,7 @@
 
 class ConfigurationSelectors:
     SELECT_LANGUAGE = (By.ID, "configurationGroupDTOsgeneral0\\.configurationDTOs0\\.value")
-    INPUT_ADDITIONAL_LOGO = (By.CSS_SELECTOR, "#configurationGroup\.label\.general > fieldset > ul > li:nth-child(2) > div > div > div > div.file-caption > div > input")
+    INPUT_ADDITIONAL_LOGO = (By.CSS_SELECTOR, "#configurationGroup\\.label\\.general > fieldset > ul > li:nth-child(2) > div > div > div > div.file-caption > div > input")
     INPUT_CASE_NUMBER_TYPE= (By.ID, "configurationGroupDTOsgeneral0\\.configurationDTOs2\\.value")
     INPUT_STORAGE_PATH_FOR_UPLOADS = (By.ID, "configurationGroupDTOsgeneral0\\.configurationDTOs3\\.value")
     INPUT_BASE_URL = (By.ID, "configurationGroupDTOsgeneral0\\.configurationDTOs4\\.value")

src/main/java/de/imi/mopat/model/enumeration/QuestionType.java

@@ -10,18 +10,18 @@
  */
 public enum QuestionType {
 
-    MULTIPLE_CHOICE("MULTIPLE_CHOICE", new MultipleChoiceOrDropdownStrategy()),
-    SLIDER("SLIDER", new SliderOrNumCheckBoxStrategy()),
-    NUMBER_CHECKBOX("NUMBER_CHECKBOX", new SliderOrNumCheckBoxStrategy()),
-    NUMBER_CHECKBOX_TEXT("NUMBER_CHECKBOX_TEXT", new NumberCheckBoxTextStrategy()),
-    DROP_DOWN("DROP_DOWN", new MultipleChoiceOrDropdownStrategy()),
-    FREE_TEXT("FREE_TEXT", new FreeTextOrBarcodeStrat()),
-    INFO_TEXT("INFO_TEXT", new DoNothing()),
-    NUMBER_INPUT("NUMBER_INPUT", new NumberInputStrat()),
-    DATE("DATE", new DateStrat()),
-    IMAGE("IMAGE", new ImageStrat()),
-    BODY_PART("BODY_PART", new BodyPartStrategy()),
-    BARCODE("BARCODE", new FreeTextOrBarcodeStrat());
+    MULTIPLE_CHOICE("MULTIPLE_CHOICE", new MultipleChoiceOrDropdownStrategy(), "/images/form-svgs/multipleChoice.svg"),
+    SLIDER("SLIDER", new SliderOrNumCheckBoxStrategy(), "/images/form-svgs/slider.svg"),
+    NUMBER_CHECKBOX("NUMBER_CHECKBOX", new SliderOrNumCheckBoxStrategy(), "/images/form-svgs/numbered.svg"),
+    NUMBER_CHECKBOX_TEXT("NUMBER_CHECKBOX_TEXT", new NumberCheckBoxTextStrategy(), "/images/form-svgs/checkboxFreetext.svg"),
+    DROP_DOWN("DROP_DOWN", new MultipleChoiceOrDropdownStrategy(), "/images/form-svgs/dropdown.svg"),
+    FREE_TEXT("FREE_TEXT", new FreeTextOrBarcodeStrat(), "/images/form-svgs/text.svg"),
+    INFO_TEXT("INFO_TEXT", new DoNothing(), "/images/form-svgs/info.svg"),
+    NUMBER_INPUT("NUMBER_INPUT", new NumberInputStrat(), "/images/form-svgs/numbers.svg"),
+    DATE("DATE", new DateStrat(), "/images/form-svgs/date.svg"),
+    IMAGE("IMAGE", new ImageStrat(), "/images/form-svgs/image.svg"),
+    BODY_PART("BODY_PART", new BodyPartStrategy(), "/images/form-svgs/body.svg"),
+    BARCODE("BARCODE", new FreeTextOrBarcodeStrat(), "/images/form-svgs/barcode.svg");
     private final String textValue;
     private static final Map<String, QuestionType> stringToEnum = new HashMap<String, QuestionType>();
 
@@ -33,10 +33,12 @@ public enum QuestionType {
     }
 
     private final CreateOrUpdateAnswerStrategy strategy;
+    private final String iconPath;
 
-    QuestionType(final String textValue, final CreateOrUpdateAnswerStrategy strategy) {
+    QuestionType(final String textValue, final CreateOrUpdateAnswerStrategy strategy, String iconPath) {
         this.textValue = textValue;
         this.strategy = strategy;
+        this.iconPath = iconPath;
     }
 
     public CreateOrUpdateAnswerStrategy getStrategy() {
@@ -55,4 +57,8 @@ public String getTextValue() {
     public static QuestionType fromString(final String textValue) {
         return stringToEnum.get(textValue);
     }
+
+    public String getIconPath() {
+        return iconPath;
+    }
 }

src/main/resources/less/admin/elements.less

@@ -86,6 +86,21 @@
     }
 }
 
+.glassy {
+    border-radius: 12px;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    margin-bottom: 15px;
+
+    > * {
+        margin: 10px;
+    }
+}
+
+.tabLegend {
+    margin-top: 20px;
+}
+
 .btn {
     box-shadow: @box-shadow-material-sm;
     transition: @transition-value;

src/main/resources/message/messages.properties

@@ -777,7 +777,6 @@ question.label.minimumText=text at minimum position
 question.label.modal.deleteLanguageContent=You are about to remove a language from this question. All content added for this language will be deleted as well.
 question.label.modal.deleteLanguageTitle=Remove language
 question.label.modal.remove=Remove
-question.label.multipleChoiceDropDown=Multiple choice/drop down
 question.label.notEnabled = Question is not initially activated
 question.label.notRequired=Question may be answered
 question.label.position=Position
@@ -787,7 +786,6 @@ question.label.required=Question must be answered
 question.label.score=Score
 question.label.showTooltip=Show tooltip while sliding
 question.label.showValueOnButton=Show current value on button
-question.label.sliderCheckbox=Slider/checkboxes
 question.label.sliderIcon.activateSliderIcons=Show icons above the slider. 
 question.label.sliderIcon.iconpicker=Choose an icon
 question.label.sliderIcon.numberOfIcons=Number of icons to show above the Slider: 

src/main/resources/message/messages_de_DE.properties

@@ -779,7 +779,6 @@ question.label.minimumText=Text an Minimum-Position
 question.label.modal.deleteLanguageContent=Sie sind dabei eine Sprache aus dieser Frage zu entfernen. Alle f\u00fcr diese Sprache hinzugef\u00fcgten Inhalte werden dabei ebenfalls gel\u00f6scht.
 question.label.modal.deleteLanguageTitle=Sprache entfernen
 question.label.modal.remove=Entfernen
-question.label.multipleChoiceDropDown=Mehrfachauswahl/Auswahlliste
 question.label.notEnabled=Frage ist initial nicht aktiviert
 question.label.notRequired=Frage darf beantwortet werden
 question.label.position=Position
@@ -789,7 +788,6 @@ question.label.required=Frage muss beantwortet werden
 question.label.score=Score
 question.label.showTooltip=Anzeigen des Tooltips beim verschieben
 question.label.showValueOnButton=Aktuellen Wert auf dem Schieberegler anzeigen
-question.label.sliderCheckbox=Schieberegler/Nummernauswahl
 question.label.sliderIcon.activateSliderIcons=Zeige Symbole \u00fcber dem Slider an. 
 question.label.sliderIcon.iconpicker=W\u00e4hlen Sie ein Symbol 
 question.label.sliderIcon.numberOfIcons=Anzahl der Symbole \u00fcber dem Slider:

src/main/resources/message/messages_en_GB.properties

@@ -774,7 +774,6 @@ question.label.minimumText=text at minimum position
 question.label.modal.deleteLanguageContent=You are about to remove a language from this question. All content added for this language will be deleted as well.
 question.label.modal.deleteLanguageTitle=Remove language
 question.label.modal.remove=Remove
-question.label.multipleChoiceDropDown=Multiple choice/drop down
 question.label.notEnabled = Question is not initially activated
 question.label.notRequired=Question may be answered
 question.label.position=Position
@@ -784,7 +783,6 @@ question.label.required=Question must be answered
 question.label.score=Score
 question.label.showTooltip=Show tooltip while sliding
 question.label.showValueOnButton=Show current value on button
-question.label.sliderCheckbox=Slider/checkboxes
 question.label.sliderIcon.activateSliderIcons=Show icons above the slider. 
 question.label.sliderIcon.iconpicker=Choose an icon
 question.label.sliderIcon.numberOfIcons=Number of icons to show above the Slider: 

src/main/resources/message/messages_es_ES.properties

@@ -688,7 +688,6 @@ question.label.minimumText=M\u00ednima posici\u00f3n del texto
 question.label.modal.deleteLanguageContent=\u00bfDesea usted eliminar este idioma?. Todo el contenido en este idioma se borrar\u00e1.
 question.label.modal.deleteLanguageTitle=Eliminar idioma
 question.label.modal.remove=Eliminar
-question.label.multipleChoiceDropDown=Selecci\u00f3n M\u00faltiple/men\u00fa desplegable
 question.label.notEnabled=La pregunta est\u00e1 inicialmente desactivada
 question.label.notRequired=La pregunta puede ser contestada
 question.label.position=Posici\u00f3n
@@ -698,7 +697,6 @@ question.label.required=La pregunta debe ser contestada
 question.label.score=Puntuaci\u00f3n
 question.label.showTooltip=Mostrar el Tooltip al deslizar
 question.label.showValueOnButton=Mostrar el valor actual en la barra de desplazamiento
-question.label.sliderCheckbox=Slider/Checkboxes
 question.label.startDate=Fecha m\u00e1s temprana
 question.label.stepsize=Tama\u00f1o de salto
 question.label.stepsizeFromZero=Tama\u00f1o de salto (iniciar desde cero o minimo dado)

src/main/webapp/WEB-INF/fragments/tabOptions.html

@@ -0,0 +1,61 @@
+<!--/*
+    * Thymeleaf fragment that shows all values of a map with
+    * optional support for localization     
+*/-->
+<th:block
+        layout:fragment="tabOptions(path, items, itemValue, itemLabel, itemIcon, localize, onChangeFunction, id, clazz)"
+>
+    <!-- Hidden input replaces the <select> binding -->
+    <input
+            type="hidden"
+            th:field="*{__${path}__}"
+            th:onchange="[(${onChangeFunction})]"
+            th:id="${id}"
+    />
+
+    <ul th:class="${clazz}" role="tablist">
+        <th:block th:each="i: ${items}">
+            <li class="nav-item">
+                <a class="nav-link questionTypeLink"
+                   href="#"
+                   th:data-value="${i[itemValue]}"
+                   th:data-target-id="${id}"
+                   th:title="${localize ? messages.get(#locale, '__${i[itemLabel]}__', '__${i[itemLabel]}__') : i[itemLabel]}"
+                   th:attr="data-bs-target=|#${i[itemValue]}_TAB|"
+                   onclick="var input = document.getElementById(this.getAttribute('data-target-id'));
+                   input.value = this.getAttribute('data-value');
+                   input.onchange();
+                   this.parentElement.parentElement.querySelectorAll('.nav-link').forEach((link) => {link.classList.remove('active');link.setAttribute('aria-selected', 'false');});
+                   this.classList.add('active');
+                   this.setAttribute('aria-selected', 'true');
+                   return false;"
+                   role="tab"
+                   data-bs-toggle="tab"
+                >
+
+                    <img th:src="@{${i[itemIcon]}}" width="64" height="25"
+                         th:title="${messages.get(#locale, '__${i[itemLabel]}__', '__${i[itemLabel]}__')}"/>
+                </a>
+            </li>
+        </th:block>
+    </ul>
+
+    <div class="tab-content">
+        <th:block th:each="i: ${items}">
+            <div class="tab-pane fade tabLegend" role="tabpanel" th:attr="id=|${i[itemValue]}_TAB|">
+                <legend>
+                    <th:block th:if="${localize}">
+                        <th:block
+                                th:text="${messages.get(#locale, '__${i[itemLabel]}__', '__${i[itemLabel]}__')}"
+                        />
+                    </th:block>
+                    <th:block th:unless="${localize}">
+                        <th:block th:text="${i[itemLabel]}"/>
+                    </th:block>
+                </legend>
+            </div>
+        </th:block>
+    </div>
+</th:block>
+
+