From eb3db902b923794396d78dd7dd2886082454ca90 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Tue, 9 May 2023 18:17:31 +0200
Subject: [PATCH] Add query url and clickable navigation to SelfEvaluation

---
 .../selfEvaluationPage/SelfEvaluation.vue     | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/client/src/pages/learningPath/selfEvaluationPage/SelfEvaluation.vue b/client/src/pages/learningPath/selfEvaluationPage/SelfEvaluation.vue
index 74d66c01..793c50e0 100644
--- a/client/src/pages/learningPath/selfEvaluationPage/SelfEvaluation.vue
+++ b/client/src/pages/learningPath/selfEvaluationPage/SelfEvaluation.vue
@@ -8,37 +8,36 @@ import LearningContentContainer from "@/pages/learningPath/learningContentPage/L
 import LearningContentMultiLayout from "@/pages/learningPath/learningContentPage/layouts/LearningContentMultiLayout.vue";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
 import eventBus from "@/utils/eventBus";
-import { computed, onUnmounted, reactive } from "vue";
+import { useRouteQuery } from "@vueuse/router";
+import { computed, onUnmounted } from "vue";
 
 log.debug("LearningContent.vue setup");
 
 const circleStore = useCircleStore();
 const courseSession = useCourseSessionsStore();
 
-const state = reactive({
-  questionIndex: 0,
-});
+const questionIndex = useRouteQuery("step", "0", { transform: Number, mode: "push" });
 
 const props = defineProps<{
   learningUnit: LearningUnit;
 }>();
 
 const questions = computed(() => props.learningUnit?.children);
-const currentQuestion = computed(() => questions.value[state.questionIndex]);
-const showPreviousButton = computed(() => state.questionIndex != 0);
+const currentQuestion = computed(() => questions.value[questionIndex.value]);
+const showPreviousButton = computed(() => questionIndex.value != 0);
 const showNextButton = computed(
-  () => state.questionIndex + 1 < questions.value?.length && questions.value?.length > 1
+  () => questionIndex.value + 1 < questions.value?.length && questions.value?.length > 1
 );
 const showExitButton = computed(
   () =>
-    questions.value?.length === 1 || questions.value?.length === state.questionIndex + 1
+    questions.value?.length === 1 || questions.value?.length === questionIndex.value + 1
 );
 
 function handleContinue() {
   log.debug("handleContinue");
-  if (state.questionIndex + 1 < questions.value.length) {
-    log.debug("increment questionIndex", state.questionIndex);
-    state.questionIndex += 1;
+  if (questionIndex.value + 1 < questions.value.length) {
+    log.debug("increment questionIndex", questionIndex.value);
+    questionIndex.value += 1;
   } else {
     log.debug("continue to next learning content");
     circleStore.continueFromSelfEvaluation(props.learningUnit);
@@ -47,8 +46,8 @@ function handleContinue() {
 
 function handleBack() {
   log.debug("handleBack");
-  if (state.questionIndex > 0 && state.questionIndex < questions.value.length) {
-    state.questionIndex -= 1;
+  if (questionIndex.value > 0 && questionIndex.value < questions.value.length) {
+    questionIndex.value -= 1;
   }
 }
 
@@ -69,7 +68,7 @@ onUnmounted(() => {
       @exit="circleStore.closeSelfEvaluation(props.learningUnit)"
     >
       <LearningContentMultiLayout
-        :current-step="state.questionIndex"
+        :current-step="questionIndex"
         :subtitle="$t('selfEvaluation.title')"
         :title="$t('selfEvaluation.title', { title: learningUnit.title })"
         learning-content-type="learningmodule"
@@ -78,6 +77,7 @@ onUnmounted(() => {
         :show-exit-button="showExitButton"
         :show-start-button="false"
         :show-previous-button="showPreviousButton"
+        :base-url="props.learningUnit.evaluate_url"
         @previous="handleBack()"
         @next="handleContinue()"
       >