Fix URL in SinglePerformanceCriteria

client/src/components/competences/CompetenceDetail.vue

@@ -4,6 +4,7 @@ import ItProgress from "@/components/ui/ItProgress.vue";
 import ItToggleArrow from "@/components/ui/ItToggleArrow.vue";
 import { useCompetenceStore } from "@/stores/competence";
 import type { CompetencePage } from "@/types";
+import log from "loglevel";
 import { ref } from "vue";
 
 const competenceStore = useCompetenceStore();
@@ -20,6 +21,8 @@ const props = withDefaults(defineProps<Props>(), {
   isInline: false,
 });
 
+log.debug("PerformanceCriteriaRow created", props);
+
 const isOpen = ref(false);
 
 const togglePerformanceCriteria = () => {

client/src/pages/competence/CompetenceIndexPage.vue

@@ -14,6 +14,8 @@ const props = defineProps<{
   courseSlug: string;
 }>();
 
+log.debug("CompetenceIndexPage created", props);
+
 const competenceStore = useCompetenceStore();
 
 const failedCriteria = computed(() => {

client/src/pages/competence/PerformanceCriteriaPage.vue

@@ -8,8 +8,6 @@ import type { Ref } from "vue";
 import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 
-log.debug("PerformanceCriteriaPage created");
-
 const props = defineProps<{
   courseSlug: string;
 }>();
@@ -20,6 +18,8 @@ interface MenuItem {
   iconName: string;
 }
 
+log.debug("PerformanceCriteriaPage created", props);
+
 const competenceStore = useCompetenceStore();
 
 const shownCriteria = computed(() => {

client/src/pages/competence/SinglePerformanceCriteriaPage.vue

@@ -1,12 +1,17 @@
 <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 { computed } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
+const props = defineProps<{
+  courseSlug: string;
+  criteriaSlug: string;
+}>();
+
 log.debug("SinglePerformanceCriteriaPage.vue setup");
 
 const competenceStore = useCompetenceStore();
@@ -15,68 +20,40 @@ const circleStore = useCircleStore();
 const route = useRoute();
 const router = useRouter();
 
-let currentQuestion: PerformanceCriteria | undefined;
-let competencePage: CompetencePage | undefined;
+const singleCriteria = computed(() => {
+  return competenceStore.flatPerformanceCriteria().find((criteria) => {
+    return criteria.slug === props.criteriaSlug;
+  });
+});
 
-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);
-//   }
-// }
+function close() {
+  router.push(`/course/${props.courseSlug}/competence`);
+}
 </script>
 
 <template>
-  <div v-if="competencePage" class="absolute bottom-0 top-0 w-full bg-white">
+  <div v-if="singleCriteria" class="absolute bottom-0 top-0 w-full bg-white">
     <LearningContentContainer
       :title="''"
       :next-button-text="$t('general.save')"
       @exit="router.back()"
       @next="router.back()"
     >
-      <div v-if="currentQuestion" class="container-medium">
+      <div v-if="singleCriteria" class="container-medium">
         <div class="mt-4 border p-6 lg:mt-8 lg:p-12">
           <h2 class="heading-2">
-            {{ currentQuestion.competence_id }} {{ currentQuestion.title }}
+            {{ singleCriteria.competence_id }} {{ singleCriteria.title }}
           </h2>
 
           <div class="mt-4 flex flex-col justify-between gap-6 lg:mt-8 lg:flex-row">
             <button
               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',
+                'border-green-500': singleCriteria.completion_status === 'success',
+                'border-2': singleCriteria.completion_status === 'success',
               }"
               data-cy="success"
-              @click="circleStore.markCompletion(currentQuestion, 'success')"
+              @click="circleStore.markCompletion(singleCriteria, 'success')"
             >
               <it-icon-smiley-happy class="mr-4 h-16 w-16"></it-icon-smiley-happy>
               <span class="text-large font-bold">{{ $t("selfEvaluation.yes") }}</span>
@@ -84,11 +61,11 @@ findCriteria();
             <button
               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',
+                'border-orange-500': singleCriteria.completion_status === 'fail',
+                'border-2': singleCriteria.completion_status === 'fail',
               }"
               data-cy="fail"
-              @click="circleStore.markCompletion(currentQuestion, 'fail')"
+              @click="circleStore.markCompletion(singleCriteria, 'fail')"
             >
               <it-icon-smiley-thinking class="mr-4 h-16 w-16"></it-icon-smiley-thinking>
               <span class="text-xl font-bold">{{ $t("selfEvaluation.no") }}</span>

client/src/router/index.ts

@@ -69,6 +69,7 @@ const router = createRouter({
         },
         {
           path: "criteria",
+          props: true,
           component: () => import("@/pages/competence/PerformanceCriteriaPage.vue"),
         },
         {

client/src/stores/completion.ts

@@ -54,9 +54,7 @@ export const useCompletionStore = defineStore({
             const userStore = useUserStore();
             userId = userStore.id;
           }
-          bustItGetCache(
-            `/api/course/completion/${completionData[0].course}/${userId}/`
-          );
+          bustItGetCache(`/api/course/completion/${courseSessionId}/${userId}/`);
         }
 
         return completionData as CourseCompletion[];