107 lines
3.4 KiB
Vue
107 lines
3.4 KiB
Vue
<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<{
|
|
userId: string;
|
|
courseSlug: string;
|
|
}>();
|
|
|
|
log.debug("CockpitUserProfilePage created", props.userId);
|
|
|
|
const cockpitStore = useCockpitStore();
|
|
const competenceStore = useCompetenceStore();
|
|
const learningPathStore = useLearningPathStore();
|
|
|
|
onMounted(async () => {
|
|
log.debug("CockpitUserProfilePage mounted");
|
|
});
|
|
|
|
const learningPath = computed(() => {
|
|
return learningPathStore.learningPathForUser(props.courseSlug, props.userId);
|
|
});
|
|
|
|
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 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"
|
|
:course-slug="props.courseSlug"
|
|
:show-assess-again="false"
|
|
></CompetenceDetail>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|