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

fix: make SelfEvaluation.vue preview-friendly

This commit is contained in:
Livio Bieri 2024-03-06 10:00:36 +01:00
parent 1ab6566716
commit 7073beee49
1 changed files with 33 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,11 @@
<script setup lang="ts">
import { useCircleStore } from "@/stores/circle";
import type { CircleType, LearningUnit } from "@/types";
import type {
CircleType,
CourseCompletionStatus,
LearningUnit,
LearningUnitPerformanceCriteria,
} from "@/types";
import * as log from "loglevel";
import { useCourseDataWithCompletion, useCurrentCourseSession } from "@/composables";
@ -12,6 +17,7 @@ import { computed, onUnmounted } from "vue";
import { getPreviousRoute } from "@/router/history";
import { getCompetenceNaviUrl } from "@/utils/utils";
import SelfEvaluationRequestFeedbackPage from "@/pages/learningPath/selfEvaluationPage/SelfEvaluationRequestFeedbackPage.vue";
import { useCockpitStore } from "@/stores/cockpit";
log.debug("LearningContent.vue setup");
@ -24,6 +30,12 @@ const circleStore = useCircleStore();
const courseSession = useCurrentCourseSession();
const courseCompletionData = useCourseDataWithCompletion();
const isReadOnly = computed(
// a hack: If we are a mentor or expert, we are in read only mode
// we might preview / view this but can't change anything (buttons are disabled)
() => useCockpitStore().hasExpertCockpitType || useCockpitStore().hasMentorCockpitType
);
const questions = computed(() => props.learningUnit?.performance_criteria ?? []);
const numPages = computed(() => {
if (learningUnitHasFeedbackPage.value) {
@ -37,7 +49,8 @@ const questionIndex = useRouteQuery("step", "0", { transform: Number, mode: "pus
const previousRoute = getPreviousRoute();
const learningUnitHasFeedbackPage = computed(
() => courseSession.value.course.configuration.enable_learning_mentor
() =>
courseSession.value.course.configuration.enable_learning_mentor && !isReadOnly.value
);
const currentQuestion = computed(() => questions.value[questionIndex.value]);
@ -57,7 +70,7 @@ function handleContinue() {
// not answering a question is allowed especially,
// nonetheless we want to still know this state in the backend!
if (currentQuestion.value && currentQuestion.value.completion_status === "UNKNOWN") {
courseCompletionData.markCompletion(currentQuestion.value, "UNKNOWN");
markCompletion(currentQuestion.value, "UNKNOWN");
}
if (questionIndex.value + 1 < numPages.value) {
@ -69,6 +82,19 @@ function handleContinue() {
}
}
function markCompletion(
question: LearningUnitPerformanceCriteria,
status: CourseCompletionStatus
) {
if (isReadOnly.value) {
log.debug("We are in read only mode, so we do not mark the completion");
return;
} else {
log.debug("markCompletion", question, status);
courseCompletionData.markCompletion(question, status);
}
}
function handleBack() {
log.debug("handleBack");
if (questionIndex.value > 0 && questionIndex.value < numPages.value) {
@ -122,13 +148,14 @@ onUnmounted(() => {
class="mt-4 flex flex-col justify-between gap-8 lg:mt-8 lg:flex-row lg:gap-12"
>
<button
:disabled="isReadOnly"
class="inline-flex flex-1 items-center border p-4 text-left"
:class="{
'border-green-500': currentQuestion.completion_status === 'SUCCESS',
'border-2': currentQuestion.completion_status === 'SUCCESS',
}"
data-cy="success"
@click="courseCompletionData.markCompletion(currentQuestion, 'SUCCESS')"
@click="markCompletion(currentQuestion, 'SUCCESS')"
>
<it-icon-smiley-happy class="mr-4 h-16 w-16"></it-icon-smiley-happy>
<span class="text-large font-bold">
@ -136,13 +163,14 @@ onUnmounted(() => {
</span>
</button>
<button
:disabled="isReadOnly"
class="inline-flex flex-1 items-center border p-4 text-left"
:class="{
'border-orange-500': currentQuestion.completion_status === 'FAIL',
'border-2': currentQuestion.completion_status === 'FAIL',
}"
data-cy="fail"
@click="courseCompletionData.markCompletion(currentQuestion, 'FAIL')"
@click="markCompletion(currentQuestion, 'FAIL')"
>
<it-icon-smiley-thinking
class="mr-4 h-16 w-16"