Add competence data to cockpit user profile page

client/src/components/competences/CompetenceDetail.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import PerformanceCriteriaRow from "@/components/competences/PerformanceCriteriaRow.vue";
 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 { ref } from "vue";

client/src/pages/cockpit/CockpitUserProfilePage.vue

@@ -1,9 +1,11 @@
 <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 { computed, onMounted } from "vue";
 
+import CompetenceDetail from "@/components/competences/CompetenceDetail.vue";
 import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
 
 const props = defineProps<{
@@ -14,6 +16,7 @@ const props = defineProps<{
 log.debug("CockpitUserProfilePage created", props.userId);
 
 const cockpitStore = useCockpitStore();
+const competenceStore = useCompetenceStore();
 const learningPathStore = useLearningPathStore();
 
 onMounted(async () => {
@@ -24,30 +27,74 @@ const learningPath = computed(() => {
   return learningPathStore.learningPathForUser(props.courseSlug, props.userId);
 });
 
-function courseSessionUser() {
+const user = computed(() => {
   return cockpitStore.courseSessionUsers?.find(
     (csu) => csu.user_id === Number(props.userId)
   );
+});
+
+function setActiveClasses(isActive: boolean) {
+  return isActive ? ["border-blue-900", "border-b-2"] : ["text-bg-900"];
 }
 </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="learningPath">
-        <LearningPathDiagram
-          class="mx-auto max-w-[1920px] max-h-[90px] lg:max-h-[380px] w-full px-4"
-          diagram-type="horizontal"
-          :learning-path="learningPath"
-          :postfix="userId"
-        ></LearningPathDiagram>
-      </div>
+    <div v-if="user" class="container-large">
+      <nav class="py-4 pb-4">
+        <router-link
+          class="btn-text inline-flex items-center pl-0"
+          :to="`/course/${props.courseSlug}/cockpit`"
+        >
+          <it-icon-arrow-left />
+          <span>{{ $t("general.back") }}</span>
+        </router-link>
+      </nav>
+      <header class="flex flex-row items-center mb-12">
+        <img class="w-44 h-44 rounded-full mr-8" :src="user.avatar_url" />
+        <div>
+          <h1 class="mb-2">{{ user.first_name }} {{ user.last_name }}</h1>
+          <p class="mb-2">{{ user.email }}</p>
+          <p class="bg-message bg-no-repeat pl-6 bg-[center_left_-4px]">
+            {{ $t("messages.sendMessage") }}
+          </p>
+        </div>
+      </header>
+      <main>
+        <div class="bg-white w-full mb-8" v-if="learningPath">
+          <LearningPathDiagram
+            class="mx-auto max-w-[1920px] max-h-[90px] lg:max-h-[380px] w-full px-4"
+            diagram-type="horizontal"
+            :learning-path="learningPath"
+            :postfix="userId"
+          ></LearningPathDiagram>
+        </div>
+        <ul class="flex flex-row border-b-2 mb-5">
+          <li class="mr-12 pb-3 relative top-px" :class="setActiveClasses(true)">
+            <button>{{ $t("competences.competences") }}</button>
+          </li>
+          <li class="mr-12">
+            <button>{{ $t("general.transferTask", 2) }}</button>
+          </li>
+          <li class="mr-12">
+            <button>{{ $t("general.exam", 2) }}</button>
+          </li>
+          <li class="mr-12">
+            <button>{{ $t("general.certificate", 2) }}</button>
+          </li>
+        </ul>
+        <div>
+          <ul v-if="competenceStore.competenceProfilePage(user.user_id)">
+            <li
+              v-for="competence in competenceStore.competences(user.user_id)"
+              :key="competence.id"
+              class="bg-white p-8 mb-8"
+            >
+              <CompetenceDetail :competence="competence"></CompetenceDetail>
+            </li>
+          </ul>
+        </div>
+      </main>
     </div>
   </div>
 </template>