fix: make SelfEvaluation.vue preview-friendly

client/src/components/learningPath/SelfEvaluation.vue

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