From fc4bda089552f85f69bb34a50f79ec8a1606a5fa Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Tue, 25 Oct 2022 16:43:50 +0200
Subject: [PATCH] Add self evaluation back button

---
 .../learningPath/LearningContent.vue          |  4 +-
 .../learningPath/LearningContentContainer.vue | 37 ++++++++++++-------
 .../learningPath/SelfEvaluation.vue           | 14 ++++++-
 .../SinglePerformanceCriteriaPage.vue         |  6 +--
 4 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/client/src/components/learningPath/LearningContent.vue b/client/src/components/learningPath/LearningContent.vue
index 76a1316a..85cb61e2 100644
--- a/client/src/components/learningPath/LearningContent.vue
+++ b/client/src/components/learningPath/LearningContent.vue
@@ -30,8 +30,8 @@ const block = computed(() => {
     <LearningContentContainer
       :title="learningContent.title"
       next-button-text="Abschliessen und weiter"
-      back-text="zurück zum Circle"
-      @back="circleStore.closeLearningContent(props.learningContent)"
+      exit-text="zurück zum Circle"
+      @exit="circleStore.closeLearningContent(props.learningContent)"
       @next="circleStore.continueFromLearningContent(props.learningContent)"
     >
       <div v-if="block.type === 'exercise' || block.type === 'test'" class="h-screen">
diff --git a/client/src/components/learningPath/LearningContentContainer.vue b/client/src/components/learningPath/LearningContentContainer.vue
index 4960c91c..546681c2 100644
--- a/client/src/components/learningPath/LearningContentContainer.vue
+++ b/client/src/components/learningPath/LearningContentContainer.vue
@@ -4,12 +4,13 @@ import * as log from "loglevel";
 log.debug("LeariningContentContainer.vue setup");
 
 const props = defineProps<{
-  backText: string;
+  exitText: string;
   title: string;
   nextButtonText: string;
+  showBackButton?: boolean;
 }>();
 
-const emit = defineEmits(["back", "next"]);
+const emit = defineEmits(["back", "next", "exit"]);
 </script>
 
 <template>
@@ -19,24 +20,34 @@ const emit = defineEmits(["back", "next"]);
         type="button"
         class="btn-text inline-flex items-center px-3 py-2"
         data-cy="close-learning-content"
-        @click="$emit('back')"
+        @click="$emit('exit')"
       >
         <it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
-        <span class="hidden lg:inline">{{ backText }}</span>
+        <span class="hidden lg:inline">{{ exitText }}</span>
       </button>
 
       <h1 class="text-large hidden lg:block" data-cy="ln-title">
         {{ title }}
       </h1>
-
-      <button
-        type="button"
-        class="btn-blue"
-        data-cy="complete-and-continue"
-        @click="$emit('next')"
-      >
-        {{ nextButtonText }}
-      </button>
+      <div>
+        <button
+          v-if="showBackButton"
+          type="button"
+          class="btn-secondary mr-4"
+          data-cy="cancel-and-back"
+          @click="$emit('back')"
+        >
+          Zurück
+        </button>
+        <button
+          type="button"
+          class="btn-blue"
+          data-cy="complete-and-continue"
+          @click="$emit('next')"
+        >
+          {{ nextButtonText }}
+        </button>
+      </div>
     </nav>
     <slot></slot>
   </div>
diff --git a/client/src/components/learningPath/SelfEvaluation.vue b/client/src/components/learningPath/SelfEvaluation.vue
index db9f300d..b2301571 100644
--- a/client/src/components/learningPath/SelfEvaluation.vue
+++ b/client/src/components/learningPath/SelfEvaluation.vue
@@ -20,6 +20,7 @@ const props = defineProps<{
 
 const questions = computed(() => props.learningUnit?.children);
 const currentQuestion = computed(() => questions.value[state.questionIndex]);
+const showBackButton = computed(() => state.questionIndex != 0);
 
 function handleContinue() {
   log.debug("handleContinue");
@@ -31,16 +32,25 @@ function handleContinue() {
     circleStore.continueFromSelfEvaluation(props.learningUnit);
   }
 }
+
+function handleBack() {
+  log.debug("handleBack");
+  if (state.questionIndex > 0 && state.questionIndex < questions.value.length) {
+    state.questionIndex -= 1;
+  }
+}
 </script>
 
 <template>
   <div v-if="learningUnit">
     <LearningContentContainer
       :title="`Selbsteinschätzung ${learningUnit.title}`"
-      :back-text="'zurück zum Circle'"
+      :exit-text="'zurück zum Circle'"
       :next-button-text="'Weiter'"
-      @back="circleStore.closeSelfEvaluation(props.learningUnit)"
+      :show-back-button="showBackButton"
+      @exit="circleStore.closeSelfEvaluation(props.learningUnit)"
       @next="handleContinue()"
+      @back="handleBack()"
     >
       <div class="container-medium">
         <div class="mt-2 lg:mt-8 text-gray-700">
diff --git a/client/src/pages/competence/SinglePerformanceCriteriaPage.vue b/client/src/pages/competence/SinglePerformanceCriteriaPage.vue
index 83af8dd6..c618ebb1 100644
--- a/client/src/pages/competence/SinglePerformanceCriteriaPage.vue
+++ b/client/src/pages/competence/SinglePerformanceCriteriaPage.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useCircleStore } from "@/stores/circle";
 import { useCompetenceStore } from "@/stores/competence";
-import type { CompetencePage, LearningUnit, PerformanceCriteria } from "@/types";
+import type { CompetencePage, PerformanceCriteria } from "@/types";
 import * as log from "loglevel";
 
 import LearningContentContainer from "@/components/learningPath/LearningContentContainer.vue";
@@ -58,9 +58,9 @@ findCriteria();
   <div v-if="competencePage" class="absolute top-0 w-full bottom-0 bg-white">
     <LearningContentContainer
       :title="''"
-      :back-text="'zurück'"
+      :exit-text="'zurück'"
       :next-button-text="'Speichern'"
-      @back="router.back()"
+      @exit="router.back()"
       @next="router.back()"
     >
       <div v-if="currentQuestion" class="container-medium">