Add first simple profile page to test loading of learning path per user

client/src/pages/cockpit/CockpitIndexPage.vue

@@ -6,7 +6,11 @@ import { useCompetenceStore } from "@/stores/competence";
 import * as log from "loglevel";
 import { ref } from "vue";
 
-log.debug("CockpitIndexPage created");
+const props = defineProps<{
+  courseSlug: string;
+}>();
+
+log.debug("CockpitIndexPage created", props.courseSlug);
 
 const cockpitStore = useCockpitStore();
 const competenceStore = useCompetenceStore();
@@ -139,7 +143,11 @@ function setActiveCircle(index: number) {
                 </div>
               </template>
               <template #link>
-                {{ $t("cockpit.profileLink") }}
+                <router-link
+                  :to="`/course/${props.courseSlug}/cockpit/profile/${csu.user_id}`"
+                >
+                  {{ $t("cockpit.profileLink") }}
+                </router-link>
               </template>
             </ItPersonRow>
           </ul>

client/src/pages/cockpit/CockpitUserProfilePage.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { useCockpitStore } from "@/stores/cockpit";
+import { useCompetenceStore } from "@/stores/competence";
+import { useLearningPathStore } from "@/stores/learningPath";
+import * as log from "loglevel";
+import { onMounted } from "vue";
+
+import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
+
+const props = defineProps<{
+  userId: string;
+  courseSlug: string;
+}>();
+
+log.debug("CockpitUserProfilePage created", props.userId);
+
+const cockpitStore = useCockpitStore();
+const competenceStore = useCompetenceStore();
+const learningPathStore = useLearningPathStore();
+
+function userCountStatus(userId: number) {
+  return competenceStore.calcStatusCount(
+    competenceStore.flatPerformanceCriteria(userId)
+  );
+}
+
+onMounted(async () => {
+  log.debug("CockpitUserProfilePage mounted");
+
+  try {
+    await learningPathStore.loadLearningPath(props.courseSlug + "-lp");
+  } catch (error) {
+    log.error(error);
+  }
+});
+
+function courseSessionUser() {
+  return cockpitStore.courseSessionUsers?.find(
+    (csu) => csu.user_id === Number(props.userId)
+  );
+}
+</script>
+
+<template>
+  <div class="bg-gray-200">
+    <div class="container-large">
+      <div class="flex">
+        <img
+          class="rounded-full inline-block max-w-[150px] mb-4"
+          :src="courseSessionUser()?.avatar_url"
+        />
+      </div>
+      <div v-if="learningPathStore.learningPath">
+        <LearningPathDiagram
+          class="mx-auto max-w-[1920px] max-h-[90px] lg:max-h-[380px] w-full px-4"
+          diagram-type="horizontal"
+          :learning-path="learningPathStore.learningPath"
+        ></LearningPathDiagram>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

client/src/router/index.ts

@@ -104,6 +104,12 @@ const router = createRouter({
         {
           path: "",
           component: () => import("@/pages/cockpit/CockpitIndexPage.vue"),
+          props: true,
+        },
+        {
+          path: "profile/:userId",
+          component: () => import("@/pages/cockpit/CockpitUserProfilePage.vue"),
+          props: true,
         },
       ],
     },