From 4ff1a1097de5207c9a119d72ecc46815ae551ab8 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Wed, 7 Dec 2022 13:44:41 +0100
Subject: [PATCH] Embed LearningPath diagram on person list of cockpit

---
 .../learningPath/LearningPathDiagram.vue      |  4 ++-
 .../learningPath/LearningPathDiagramSmall.vue |  1 +
 client/src/components/ui/ItPersonRow.vue      | 14 ++++----
 client/src/pages/cockpit/CockpitIndexPage.vue | 35 +++++++++++++++----
 .../pages/cockpit/CockpitUserProfilePage.vue  |  7 +---
 client/src/stores/learningPath.ts             | 13 ++++++-
 6 files changed, 52 insertions(+), 22 deletions(-)

diff --git a/client/src/components/learningPath/LearningPathDiagram.vue b/client/src/components/learningPath/LearningPathDiagram.vue
index c3520900..911311c0 100644
--- a/client/src/components/learningPath/LearningPathDiagram.vue
+++ b/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();
 });
 
diff --git a/client/src/components/learningPath/LearningPathDiagramSmall.vue b/client/src/components/learningPath/LearningPathDiagramSmall.vue
index a6c3c081..d1b3d7d9 100644
--- a/client/src/components/learningPath/LearningPathDiagramSmall.vue
+++ b/client/src/components/learningPath/LearningPathDiagramSmall.vue
@@ -29,4 +29,5 @@ learningPathStore
     diagram-type="horizontalSmall"
   ></LearningPathDiagram>
 </template>
+
 <style scoped></style>
diff --git a/client/src/components/ui/ItPersonRow.vue b/client/src/components/ui/ItPersonRow.vue
index 5ab36d42..6d681d9c 100644
--- a/client/src/components/ui/ItPersonRow.vue
+++ b/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>
diff --git a/client/src/pages/cockpit/CockpitIndexPage.vue b/client/src/pages/cockpit/CockpitIndexPage.vue
index 8da32489..eec94bad 100644
--- a/client/src/pages/cockpit/CockpitIndexPage.vue
+++ b/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>
diff --git a/client/src/pages/cockpit/CockpitUserProfilePage.vue b/client/src/pages/cockpit/CockpitUserProfilePage.vue
index 6b4f627b..3fd2c5f0 100644
--- a/client/src/pages/cockpit/CockpitUserProfilePage.vue
+++ b/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() {
diff --git a/client/src/stores/learningPath.ts b/client/src/stores/learningPath.ts
index 88501067..a023161a 100644
--- a/client/src/stores/learningPath.ts
+++ b/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,