re #6193issue-6193

2 files changed, 90 insertions, 40 deletions

diff --git a/resources/vue/apps/questionnaires/QuestionnaireAnswer.vue b/resources/vue/apps/questionnaires/QuestionnaireAnswer.vue
index 178930c..169550a 100644
--- a/resources/vue/apps/questionnaires/QuestionnaireAnswer.vue
+++ b/resources/vue/apps/questionnaires/QuestionnaireAnswer.vue
@@ -7,8 +7,6 @@
           :data-dialog="asDialog ? true : null"
           :data-secure="activateFormSecure"
     >
-
-
         <div v-if="questionnaireData.questions[currentPage]">
 
             <div class="questionnaire_answer">
@@ -40,14 +38,11 @@
             <button :style="{visibility: currentPage > 0 ? 'visible' : 'hidden'}" class="button arr_left" @click="prevPage">
                 {{ $gettext('zurück') }}
             </button>
-
                 <button :style="{visibility: currentPage < totalPages - 1 ? 'visible' : 'hidden'}" class="button arr_right" @click="nextPage">
                     {{ $gettext('weiter') }}
                 </button>
-
         </div>
 
-
         <div class="terms">
             <span v-if="questionnaireData.anonymous == 1 ">{{ $gettext('Die Teilnahme ist anonym.') }}</span>
             <span v-else>{{ $gettext('Die Teilnahme ist nicht anonym.') }}</span>
@@ -55,7 +50,35 @@
             <span v-if="questionnaireData.stopdate">{{ $gettext('Sie können den Fragebogen beantworten bis zum %{date} um %{time} Uhr.', {date:getFormattedDate, time:getFormattedTime}) }}</span>
         </div>
 
+        <div data-dialog-button style="text-align: center;">
+
+            <template v-if="config.isAnswerable">
+                <button class="button">{{ $gettext('Speichern') }}</button>
+            </template>
+            <template v-if="config.resultsVisible">
+                <button class="button">{{ $gettext('Ergebnisse anzeigen') }}</button>
+            </template>
+            <template v-if="config.isEditable && (!config.isRunning || config.countAnswers.length > 0)">
+                <button class="button">{{ $gettext('Bearbeiten') }}</button>
+            </template>
+            <template v-if="config.isEditable">
+                <button class="button">{{ $gettext('Kontext auswählen') }}</button>
+            </template>
+            <template v-if="config.isCopyable">
+                <button class="button">{{ $gettext('Kopieren') }}</button>
+            </template>
+            <template v-if="config.isEditable && !config.isRunning">
+                <button class="button">{{ $gettext('Starten') }}</button>
+            </template>
+            <template v-if="config.isEditable && config.isRunning">
+                <button class="button">{{ $gettext('Beenden') }}</button>
+            </template>
+
+
+        </div>
+
     </form>
+    {{ config }}
 </template>
 
 <script setup>
@@ -77,7 +100,8 @@ import LikertAnswer from '../../components/questionnaires/LikertAnswer.vue';
 import AutomatedDataAnswer from '../../components/questionnaires/AutomatedDataAnswer.vue';
 
 const props = defineProps({
-    questionnaireData: Object
+    questionnaireData: Object,
+    config: Object
 })
 
 const currentPage = ref(0)
@@ -117,4 +141,7 @@ const getFormattedTime = computed(() => {
 })
 
 
+
+
+
 </script>
diff --git a/resources/vue/components/questionnaires/VoteAnswer.vue b/resources/vue/components/questionnaires/VoteAnswer.vue
index 7ee5cbd..57ff98a 100644
--- a/resources/vue/components/questionnaires/VoteAnswer.vue
+++ b/resources/vue/components/questionnaires/VoteAnswer.vue
@@ -1,18 +1,6 @@
-<!--
-$answers = $vote->questiondata['options'];
-$indexMap = count($answers) ? range(0, count($answers) - 1) : [];
-if ($vote->questiondata['randomize']) {
-shuffle($indexMap);
-}
-
-$response = $vote->getMyAnswer();
-$responseData = $response['answerdata'] ? $response['answerdata']->getArrayCopy() : [];
--->
-
 <template>
 
     <div :class="{ mandatory: question.questiondata.mandatory == 1}">
-        <!-- TODO questionnaire/_answer_description_container as template? -->
         <div class="description_container">
             <div class="icon_container">
                 <StudipIcon shape="vote"
@@ -26,31 +14,50 @@ $responseData = $response['answerdata'] ? $response['answerdata']->getArrayCopy(
                 <div v-html="question.questiondata.description"></div>
             </article>
         </div>
-        <!-- -->
         <!-- hidden invalidation notice -->
 
         <ul class="clean">
 
-            <li v-for="(answer, index) in shuffledOptions"
-                :key="index">
-                <label>
+            <li v-for="option in shuffledOptions" :key="option.index">
+                <!-- name="answers[<?= $vote->getId() ?>][answerdata][answers][<?= $index ?>]" -->
                     <input
                         :type="question.questiondata.multiplechoice == 1 ? 'checkbox' : 'radio'"
-                        :name="'question-' + question.id"
-                        :value="answer"
+                        :name="'answers[' + question.id + '][answerdata][answers][' + option.index + ']'"
+                        :value="option.index"
                         v-model="userAnswer"
+                        :id="'question-' + question.id + '-' + option.index"
                     />
-
-                    {{ answer }}
-                </label>
-
+                <label :for="'question-' + question.id + '-' + option.index" class="question-label">{{ option.answer }}</label>
             </li>
 
+            <template v-if="question.questiondata.freetextfield == 1">
+                <li>
+                    <input
+                        :type="question.questiondata.multiplechoice == 1 ? 'checkbox' : 'radio'"
+                        :name="'question-' + question.id"
+                        v-model="freeTextEnabled"
+                        id="free_answer"
+                        :aria-label="$gettext('Geben Sie eine andere Antwort an')"
+                        />
+                    <label id="free_answer_label" for="free_answer" class="question-label">{{ $gettext('Sonstiges') + ':' }}</label>
+
+                    <div>
+                        <textarea
+                            v-model="freeTextAnswer"
+                            :disabled="!freeTextEnabled"
+                            aria-labelledby="free_answer_label"
+                        ></textarea>
+                    </div>
+
+                </li>
+            </template>
+
         </ul>
 
     </div>
 
     <pre>{{ userAnswer }}</pre>
+    <pre>{{ freeTextAnswer }}</pre>
 
 </template>
 
@@ -68,31 +75,38 @@ const props = defineProps({
 })
 
 const shuffledOptions = ref([])
-const userAnswer = ref(null) // Radio
-// Für Checkbox später automatisch Array
+const userAnswer = ref([])
+const freeTextAnswer = ref('')
+const freeTextEnabled = ref(false)
 
 function prepareAnswers() {
-    const options = [...props.question.questiondata.options]
+    const options = props.question.questiondata.options
+
+    // Antworten mit Originalindex kombinieren
+    const mapped = options.map((answer, index) => ({
+        answer,
+        index
+    }))
 
+    // Shuffle falls aktiviert
     if (props.question.questiondata.randomize == 1) {
-        for (let i = options.length - 1; i > 0; i--) {
+        for (let i = mapped.length - 1; i > 0; i--) {
             const j = Math.floor(Math.random() * (i + 1))
-            ;[options[i], options[j]] = [options[j], options[i]]
+            ;[mapped[i], mapped[j]] = [mapped[j], mapped[i]]
         }
     }
 
-    shuffledOptions.value = options
+    shuffledOptions.value = mapped
 }
 
+
 function initUserAnswer() {
+    const answers = props.question.responseData?.answers ?? []
+
     if (props.question.questiondata.multiplechoice == 1) {
-        // Checkbox → Array
-        userAnswer.value = Array.isArray(props.question.responseData)
-            ? props.question.responseData
-            : []
+        userAnswer.value = answers
     } else {
-        // Radio → Einzelwert
-        userAnswer.value = props.question.responseData || null
+        userAnswer.value = answers[0] ?? null
     }
 }
 
@@ -112,3 +126,12 @@ watch(
 
 </script>
 
+<style scoped lang="scss">
+
+
+    .question-label {
+        display: inline !important;
+    }
+
+
+</style>