105 lines
3.5 KiB
Vue
105 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import { useCircleStore } from "@/stores/circle";
|
|
import { useCompetenceStore } from "@/stores/competence";
|
|
import type { CompetencePage, PerformanceCriteria } from "@/types";
|
|
import * as log from "loglevel";
|
|
|
|
import LearningContentContainer from "@/components/learningPath/LearningContentContainer.vue";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
|
log.debug("SinglePerformanceCriteriaPage.vue setup");
|
|
|
|
const competenceStore = useCompetenceStore();
|
|
const circleStore = useCircleStore();
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
let currentQuestion: PerformanceCriteria | undefined;
|
|
let competencePage: CompetencePage | undefined;
|
|
|
|
const findCriteria = () => {
|
|
for (const page of competenceStore.competenceProfilePage
|
|
?.children as CompetencePage[]) {
|
|
for (const criteria of page.children) {
|
|
if (criteria.slug === route.params["criteriaSlug"]) {
|
|
currentQuestion = criteria;
|
|
competencePage = page;
|
|
break;
|
|
}
|
|
}
|
|
if (competencePage) {
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
|
|
findCriteria();
|
|
// onMounted(() => {
|
|
// console.log(route.params)
|
|
// });
|
|
|
|
// const questions = computed(() => props.learningUnit?.children);
|
|
// const currentQuestion = computed(() => questions.value[state.questionIndex]);
|
|
//
|
|
// function handleContinue() {
|
|
// log.debug("handleContinue");
|
|
// if (state.questionIndex + 1 < questions.value.length) {
|
|
// log.debug("increment questionIndex", state.questionIndex);
|
|
// state.questionIndex += 1;
|
|
// } else {
|
|
// log.debug("continue to next learning content");
|
|
// circleStore.continueFromSelfEvaluation(props.learningUnit);
|
|
// }
|
|
// }
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="competencePage" class="absolute top-0 w-full bottom-0 bg-white">
|
|
<LearningContentContainer
|
|
:title="''"
|
|
:exit-text="$t('general.back')"
|
|
:next-button-text="$t('general.save')"
|
|
@exit="router.back()"
|
|
@next="router.back()"
|
|
>
|
|
<div v-if="currentQuestion" class="container-medium">
|
|
<div class="mt-4 lg:mt-8 p-6 lg:p-12 border">
|
|
<h2 class="heading-2">
|
|
{{ currentQuestion.competence_id }} {{ currentQuestion.title }}
|
|
</h2>
|
|
|
|
<div class="mt-4 lg:mt-8 flex flex-col lg:flex-row justify-between gap-6">
|
|
<button
|
|
class="flex-1 inline-flex items-center text-left p-4 border"
|
|
:class="{
|
|
'border-green-500': currentQuestion.completion_status === 'success',
|
|
'border-2': currentQuestion.completion_status === 'success',
|
|
}"
|
|
data-cy="success"
|
|
@click="circleStore.markCompletion(currentQuestion, 'success')"
|
|
>
|
|
<it-icon-smiley-happy class="w-16 h-16 mr-4"></it-icon-smiley-happy>
|
|
<span class="font-bold text-large"> {{ $t("selfEvaluation.yes") }} </span>
|
|
</button>
|
|
<button
|
|
class="flex-1 inline-flex items-center text-left p-4 border"
|
|
:class="{
|
|
'border-orange-500': currentQuestion.completion_status === 'fail',
|
|
'border-2': currentQuestion.completion_status === 'fail',
|
|
}"
|
|
data-cy="fail"
|
|
@click="circleStore.markCompletion(currentQuestion, 'fail')"
|
|
>
|
|
<it-icon-smiley-thinking class="w-16 h-16 mr-4"></it-icon-smiley-thinking>
|
|
<span class="font-bold text-xl"> {{ $t("selfEvaluation.no") }} </span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</LearningContentContainer>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|