Add self evaluation back button

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">

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>

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">

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">