Embed LearningPath diagram on person list of cockpit

client/src/components/learningPath/LearningPathDiagram.vue

@@ -5,6 +5,7 @@ import * as log from "loglevel";
 
 // @ts-ignore
 import colors from "@/colors.json";
+
 import { Circle } from "@/services/circle";
 import { LearningPath } from "@/services/learningPath";
 import type { LearningSequence, Topic } from "@/types";
@@ -37,7 +38,8 @@ const viewBox = computed(() => {
 const vueRouter = useRouter();
 
 onMounted(async () => {
-  log.debug("CircleDiagram mounted");
+  log.debug("LearningPathDiagram mounted");
+  console.log(props.learningPath);
   render();
 });
 

client/src/components/learningPath/LearningPathDiagramSmall.vue

@@ -29,4 +29,5 @@ learningPathStore
     diagram-type="horizontalSmall"
   ></LearningPathDiagram>
 </template>
+
 <style scoped></style>

client/src/components/ui/ItPersonRow.vue

@@ -6,17 +6,15 @@ const props = defineProps<{
 </script>
 
 <template>
-  <li
-    class="py-4 leading-[45px] border-t border-gray-500 flex flex-row justify-between"
-  >
-    <div class="flex flex-row">
-      <img class="h-[45px] rounded-full mr-2" :src="avatarUrl" />
-      <p class="text-bold leading-[45px]">{{ name }}</p>
+  <li class="py-4 border-t border-gray-500 flex flex-row items-stretch gap-4">
+    <div class="flex flex-row items-center w-64">
+      <img class="h-12 rounded-full mr-2" :src="avatarUrl" />
+      <div class="text-bold">{{ name }}</div>
     </div>
-    <div class="leading-[45px]">
+    <div class="flex-1 flex items-center">
       <slot name="center"></slot>
     </div>
-    <div class="leading-[45px]">
+    <div class="flex items-center">
       <slot name="link"></slot>
     </div>
   </li>

client/src/pages/cockpit/CockpitIndexPage.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
 import ItPersonRow from "@/components/ui/ItPersonRow.vue";
 import ItProgress from "@/components/ui/ItProgress.vue";
 import { useCockpitStore } from "@/stores/cockpit";
 import { useCompetenceStore } from "@/stores/competence";
+import { useLearningPathStore } from "@/stores/learningPath";
 import * as log from "loglevel";
 import { ref } from "vue";
 
@@ -14,6 +16,7 @@ log.debug("CockpitIndexPage created", props.courseSlug);
 
 const cockpitStore = useCockpitStore();
 const competenceStore = useCompetenceStore();
+const learningPathStore = useLearningPathStore();
 
 function userCountStatus(userId: number) {
   return competenceStore.calcStatusCount(
@@ -112,17 +115,37 @@ function setActiveCircle(index: number) {
               :avatar-url="csu.avatar_url"
             >
               <template #center>
-                <div class="flex flex-row">
-                  <div>KMU Teil 1</div>
-                  <ul class="ml-4 flex flex-row items-center">
-                    <li class="flex flex-row items-center mr-6">
+                <div class="flex flex-row items-center justify-between">
+                  <div class="flex flex-row items-center gap-4">
+                    <div class="h-12">
+                      <LearningPathDiagram
+                        v-if="
+                          learningPathStore.learningPathForUser(
+                            props.courseSlug,
+                            csu.user_id
+                          )
+                        "
+                        :learning-path="
+                          learningPathStore.learningPathForUser(
+                            props.courseSlug,
+                            csu.user_id
+                          )
+                        "
+                        :postfix="`cockpit-${csu.user_id}`"
+                        diagram-type="horizontalSmall"
+                      ></LearningPathDiagram>
+                    </div>
+                    <div>KMU Teil 1</div>
+                  </div>
+                  <div class="ml-4 flex flex-row items-center">
+                    <div class="flex flex-row items-center mr-6">
                       <it-icon-smiley-thinking
                         class="w-8 h-8 mr-2 inline-block"
                       ></it-icon-smiley-thinking>
                       <p class="text-bold inline-block">
                         {{ userCountStatus(csu.user_id).fail }}
                       </p>
-                    </li>
+                    </div>
                     <li class="flex flex-row items-center mr-6">
                       <it-icon-smiley-happy
                         class="w-8 h-8 mr-2 inline-block"
@@ -139,7 +162,7 @@ function setActiveCircle(index: number) {
                         {{ userCountStatus(csu.user_id).unknown }}
                       </p>
                     </li>
-                  </ul>
+                  </div>
                 </div>
               </template>
               <template #link>

client/src/pages/cockpit/CockpitUserProfilePage.vue

@@ -21,12 +21,7 @@ onMounted(async () => {
 });
 
 const learningPath = computed(() => {
-  if (learningPathStore.learningPaths.size > 0) {
-    const learningPathKey = `${props.courseSlug}-lp-${props.userId}`;
-    return learningPathStore.learningPaths.get(learningPathKey);
-  }
-
-  return undefined;
+  return learningPathStore.learningPathForUser(props.courseSlug, props.userId);
 });
 
 function courseSessionUser() {

client/src/stores/learningPath.ts

@@ -20,7 +20,18 @@ export const useLearningPathStore = defineStore({
       loading: false,
     } as LearningPathStoreState;
   },
-  getters: {},
+  getters: {
+    learningPathForUser: (state) => {
+      return (courseSlug: string, userId: number | string) => {
+        if (state.learningPaths.size > 0) {
+          const learningPathKey = `${courseSlug}-lp-${userId}`;
+          return state.learningPaths.get(learningPathKey);
+        }
+
+        return undefined;
+      };
+    },
+  },
   actions: {
     async loadLearningPath(
       slug: string,