ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

VBV-232: WIP - Refactor content navigation

This commit is contained in:
Christian Cueni 2023-01-13 16:19:38 +01:00
parent 434e911eea
commit 46368ee374
2 changed files with 59 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
client/src/components/learningPath/LearningContentNavigation.vue Normal file
View File

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

44
client/src/components/learningPath/SelfEvaluation.vue
View File

@ -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">
<button
v-if="showBackButton"
class="btn-secondary flex items-center mr-2"
@click="handleBack()"
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="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>
<LearningContentNavigation
:show-back-button="showBackButton"
:question-index="state.questionIndex"
:max-question-index="questions.length"
@back="handleBack"
@continue="handleContinue"
></LearningContentNavigation>
</div>
</LearningContentContainer>
</div>