VBV-232: WIP - Refactor content navigation

client/src/components/learningPath/LearningContentNavigation.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+const props = defineProps<{
+  showBackButton: boolean;
+  questionIndex: number;
+  maxQuestionIndex: number;
+}>();
+
+defineEmits(["back", "continue"]);
+</script>
+
+<template>
+  <div>
+    <nav class="mt-16 flex lg:justify-between">
+      <button
+        v-if="showBackButton"
+        class="btn-secondary flex items-center mr-2"
+        @click="$emit('back')"
+        data-cy="previous-step"
+      >
+        <it-icon-arrow-left class="w-6 h-6 mr-2"></it-icon-arrow-left>
+        {{ $t("general.backCapitalized") }}
+      </button>
+      <button
+        class="btn-secondary flex items-center"
+        @click="$emit('continue')"
+        data-cy="next-step">
+        {{ $t("general.next") }}
+        <it-icon-arrow-right class="w-6 h-6 ml-2"></it-icon-arrow-right>
+      </button>
+    </nav>
+    <div
+      role="progressbar"
+      :aria-valuenow="questionIndex + 1"
+      :aria-valuemax="maxQuestionIndex"
+      :aria-valuemin="1"
+      class="absolute bottom-[86px] h-1 left-0 right-0 lg:left-4 lg:right-4 inline-flex gap-1"
+    >
+      <span
+        v-for="i in maxQuestionIndex"
+        class="w-full"
+        :class="{
+          'bg-sky-500': i <= questionIndex + 1,
+          'bg-gray-400': i > questionIndex + 1,
+        }"
+      ></span>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

client/src/components/learningPath/SelfEvaluation.vue

@@ -4,6 +4,7 @@ import type { LearningUnit } from "@/types";
 import * as log from "loglevel";
 
 import LearningContentContainer from "@/components/learningPath/LearningContentContainer.vue";
+import LearningContentNavigation from "./LearningContentNavigation.vue";
 import { COMPLETION_FAILURE, COMPLETION_SUCCESS } from "@/constants";
 import { computed, reactive } from "vue";
 
@@ -52,7 +53,7 @@ function handleBack() {
       @next="circleStore.closeSelfEvaluation(props.learningUnit)"
     >
       <div class="container-medium h-full">
-        <div class="mt-6 lg:mt-40">
+        <div class="mt-8 lg:mt-40">
           <h2 class="heading-2">
             {{ currentQuestion.competence_id }} {{ currentQuestion.title }}
           </h2>
@@ -92,40 +93,13 @@ function handleBack() {
             {{ $t("selfEvaluation.progressLink") }}
           </div>
         </div>
-        <nav class="mt-16 flex lg:justify-between">
+        <LearningContentNavigation
-          <button
+          :show-back-button="showBackButton"
-            v-if="showBackButton"
+          :question-index="state.questionIndex"
-            class="btn-secondary flex items-center mr-2"
+          :max-question-index="questions.length"
-            @click="handleBack()"
+          @back="handleBack"
-            data-cy="previous-step"
+          @continue="handleContinue"
-          >
+        ></LearningContentNavigation>
-            <it-icon-arrow-left class="w-6 h-6 mr-2"></it-icon-arrow-left>
-            {{ $t("general.backCapitalized") }}
-          </button>
-          <button
-            class="btn-secondary flex items-center"
-            @click="handleContinue()"
-            data-cy="next-step">
-            {{ $t("general.next") }}
-            <it-icon-arrow-right class="w-6 h-6 ml-2"></it-icon-arrow-right>
-          </button>
-        </nav>
-        <div
-          role="progressbar"
-          :aria-valuenow="state.questionIndex + 1"
-          :aria-valuemax="questions.length"
-          :aria-valuemin="1"
-          class="absolute bottom-[86px] h-1 left-0 right-0 lg:left-4 lg:right-4 inline-flex gap-1"
-        >
-          <span
-            v-for="i in questions.length"
-            class="w-full"
-            :class="{
-              'bg-sky-500': i <= state.questionIndex + 1,
-              'bg-gray-400': i > state.questionIndex + 1,
-            }"
-          ></span>
-        </div>
       </div>
     </LearningContentContainer>
   </div>