back/next buttons, re #6193

2 files changed, 63 insertions, 24 deletions

diff --git a/app/views/questionnaire/answer.php b/app/views/questionnaire/answer.php
index 38e6551..779eb67 100644
--- a/app/views/questionnaire/answer.php
+++ b/app/views/questionnaire/answer.php
@@ -45,26 +45,26 @@ $questionnaire_data = [
     'title'            => $questionnaire->title,
 ];
 
-$grouped = collect();
-$current = collect();
+$grouped = [];
+$current = [];
 $page = 1;
 
 foreach ($questionnaire_data['questions'] as $question) {
-    $current->push($question);
+    $current[] = $question;
     $current['page'] = $page;
 
     if ($question['questiontype'] === 'Pagebreak') {
-        $grouped->push($current);
-        $current = collect();
+        $grouped[] = $current;
+        $current = [];
         $page++;
     }
 }
 
-if ($current->isNotEmpty()) {
-    $grouped->push($current);
+if (count($current) > 0) {
+    $grouped[] = $current;
 }
 
-$questionnaire_data['questions'] = $grouped->values();
+$questionnaire_data['questions'] = $grouped;
 
 
 ?>
diff --git a/resources/vue/apps/questionnaires/QuestionnaireAnswer.vue b/resources/vue/apps/questionnaires/QuestionnaireAnswer.vue
index e954fb0..178930c 100644
--- a/resources/vue/apps/questionnaires/QuestionnaireAnswer.vue
+++ b/resources/vue/apps/questionnaires/QuestionnaireAnswer.vue
@@ -8,24 +8,46 @@
           :data-secure="activateFormSecure"
     >
 
-        <div class="questionnaire_answer" v-for="(data, index) in questionnaireData.questions" :key="index">
-            Seite {{ data.page }}:
-            <article v-for="element in data">
-
-                <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 v-if="questionnaireData.questions[currentPage]">
+
+            <div class="questionnaire_answer">
+
+                Seite {{ currentPage + 1 }} von {{ totalPages }}
+
+                <article
+                    v-for="element in questionnaireData.questions[currentPage]"
+                    :key="element.id">
+
+                    <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>
 
         </div>
 
+        <!-- Navigation -->
+        <div>
+            <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>
@@ -38,7 +60,7 @@
 
 <script setup>
 import { $gettext } from "../../../assets/javascripts/lib/gettext";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 
 /* Import Design Element views */
 import QuestionnaireInfoView from '../../components/questionnaires/QuestionnaireInfoView.vue';
@@ -58,6 +80,21 @@ const props = defineProps({
     questionnaireData: Object
 })
 
+const currentPage = ref(0)
+const totalPages = computed(() => props.questionnaireData.questions.length)
+
+const nextPage = () => {
+    if (currentPage.value < totalPages.value - 1) {
+        currentPage.value++
+    }
+}
+
+const prevPage = () => {
+    if (currentPage.value > 0) {
+        currentPage.value--
+    }
+}
+
 const getFormattedDate = computed(() => {
     if (!props.questionnaireData?.stopdate) return ''
 
@@ -78,4 +115,6 @@ const getFormattedTime = computed(() => {
             minute: '2-digit'
         })
 })
+
+
 </script>