nested array for questionnaire questions

6 files changed, 92 insertions, 39 deletions

diff --git a/app/views/questionnaire/answer.php b/app/views/questionnaire/answer.php
index 80e20d4..38e6551 100644
--- a/app/views/questionnaire/answer.php
+++ b/app/views/questionnaire/answer.php
@@ -44,7 +44,33 @@ $questionnaire_data = [
     'stopdate'         => $questionnaire->stopdate,
     'title'            => $questionnaire->title,
 ];
+
+$grouped = collect();
+$current = collect();
+$page = 1;
+
+foreach ($questionnaire_data['questions'] as $question) {
+    $current->push($question);
+    $current['page'] = $page;
+
+    if ($question['questiontype'] === 'Pagebreak') {
+        $grouped->push($current);
+        $current = collect();
+        $page++;
+    }
+}
+
+if ($current->isNotEmpty()) {
+    $grouped->push($current);
+}
+
+$questionnaire_data['questions'] = $grouped->values();
+
+
 ?>
+
+
+
 <?= Studip\VueApp::create('questionnaires/QuestionnaireAnswer')
     ->withProps(['questionnaireData' => $questionnaire_data]) ?>
 
diff --git a/resources/vue/apps/questionnaires/QuestionnaireAnswer.vue b/resources/vue/apps/questionnaires/QuestionnaireAnswer.vue
index 96548c1..e954fb0 100644
--- a/resources/vue/apps/questionnaires/QuestionnaireAnswer.vue
+++ b/resources/vue/apps/questionnaires/QuestionnaireAnswer.vue
@@ -8,20 +8,20 @@
           :data-secure="activateFormSecure"
     >
 
-        <div class="questionnaire_answer">
-            <article v-for="question in questionnaireData.questions">
-                {{ question.questiontype }}
-                <QuestionnaireInfoView v-if="question.questiontype == 'QuestionnaireInfo'" :question="question" />
-                <HeadlineView v-if="question.questiontype == 'Headline'" :question="question" />
-                <DividerView v-if="question.questiontype == 'Divider'" />
-                <BlankLineView v-if="question.questiontype == 'BlankLine'" />
-                <PagebreakView v-if="question.questiontype == 'Pagebreak'" />
+        <div class="questionnaire_answer" v-for="(data, index) in questionnaireData.questions" :key="index">
+            Seite {{ data.page }}:
+            <article v-for="element in data">
 
-                <VoteAnswer v-if="question.questiontype == 'Vote'" :question="question"/>
-                <FreetextAnswer v-if="question.questiontype == 'Freetext'" :question="question"/>
-                <RangescaleAnswer v-if="question.questiontype == 'Rangescale'" :question="question"/>
-                <LikertAnswer v-if="question.questiontype == 'LikertScale'" :question="question"/>
-                <AutomatedDataAnswer v-if="question.questiontype == 'QuestionnaireAutomatedData'" :question="question"/>
+                <QuestionnaireInfoView v-if="element.questiontype == 'QuestionnaireInfo'" :question="element" />
+                <HeadlineView v-if="element.questiontype == 'Headline'" :question="element" />
+                <DividerView v-if="element.questiontype == 'Divider'" />
+                <BlankLineView v-if="element.questiontype == 'BlankLine'" />
+
+                <VoteAnswer v-if="element.questiontype == 'Vote'" :question="element"/>
+                <FreetextAnswer v-if="element.questiontype == 'Freetext'" :question="element"/>
+                <RangescaleAnswer v-if="element.questiontype == 'Rangescale'" :question="element"/>
+                <LikertAnswer v-if="element.questiontype == 'LikertScale'" :question="element"/>
+                <AutomatedDataAnswer v-if="element.questiontype == 'QuestionnaireAutomatedData'" :question="element"/>
             </article>
 
         </div>
diff --git a/resources/vue/components/questionnaires/AutomatedDataAnswer.vue b/resources/vue/components/questionnaires/AutomatedDataAnswer.vue
index d71c2ba..8932da0 100644
--- a/resources/vue/components/questionnaires/AutomatedDataAnswer.vue
+++ b/resources/vue/components/questionnaires/AutomatedDataAnswer.vue
@@ -6,11 +6,12 @@
 
 </style>
 
-<script>
-export default {
-    name: 'AutomatedDataAnswer',
-    props: {
-        question: Array
-    },
-};
+<script setup>
+const props = defineProps({
+    question: {
+        type: Object,
+        required: true
+    }
+})
+
 </script>
diff --git a/resources/vue/components/questionnaires/HeadlineView.vue b/resources/vue/components/questionnaires/HeadlineView.vue
index 746fd4a..fe0b40c 100644
--- a/resources/vue/components/questionnaires/HeadlineView.vue
+++ b/resources/vue/components/questionnaires/HeadlineView.vue
@@ -2,13 +2,13 @@
     <strong><p v-html="question.questiondata.description"></p></strong>
 </template>
 
-<script>
-export default {
-    name: 'HeadlineView',
-    props: {
-        question: Array
-    },
-};
+<script setup>
+const props = defineProps({
+    question: {
+        type: Object,
+        required: true
+    }
+})
 
 
 </script>
diff --git a/resources/vue/components/questionnaires/PagebreakView.vue b/resources/vue/components/questionnaires/PagebreakView.vue
index 63cf316..0c8683e 100644
--- a/resources/vue/components/questionnaires/PagebreakView.vue
+++ b/resources/vue/components/questionnaires/PagebreakView.vue
@@ -1,11 +1,36 @@
-<script setup lang="ts">
+<template>
+    <button :style="{visibility: hasPrevContent ? 'visible' : 'hidden'}" class="button arr_left" @click="prevContent">
+        {{ $gettext('zurück') }}
+    </button>
 
-</script>
+    <button :style="{visibility: hasNextContent ? 'visible' : 'hidden'}" class="button arr_right" @click="nextContent">
+        {{ $gettext('weiter') }}
+    </button>
 
-<template>
 
 </template>
 
-<style scoped lang="scss">
 
-</style>
+<script setup>
+import { computed } from 'vue';
+import {$gettext} from "../../../assets/javascripts/lib/gettext";
+import StudipIcon from "../StudipIcon.vue";
+
+const props = defineProps({
+    question: {
+        type: Object,
+        required: true
+    }
+})
+
+const hasPrevContent = computed(() => {
+        return true;
+})
+
+const hasNextContent = computed(() => {
+    return true;
+})
+
+
+
+</script>
diff --git a/resources/vue/components/questionnaires/RangescaleAnswer.vue b/resources/vue/components/questionnaires/RangescaleAnswer.vue
index 7b375ba..8932da0 100644
--- a/resources/vue/components/questionnaires/RangescaleAnswer.vue
+++ b/resources/vue/components/questionnaires/RangescaleAnswer.vue
@@ -6,11 +6,12 @@
 
 </style>
 
-<script>
-export default {
-    name: 'RangescaleAnswer',
-    props: {
-        question: Array
-    },
-};
+<script setup>
+const props = defineProps({
+    question: {
+        type: Object,
+        required: true
+    }
+})
+
 </script>