61 lines
1.6 KiB
Vue
61 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { useCockpitStore } from "@/stores/cockpit";
|
|
import { useLearningPathStore } from "@/stores/learningPath";
|
|
import * as log from "loglevel";
|
|
import { computed, 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 learningPathStore = useLearningPathStore();
|
|
|
|
onMounted(async () => {
|
|
log.debug("CockpitUserProfilePage mounted");
|
|
});
|
|
|
|
const learningPath = computed(() => {
|
|
if (learningPathStore.learningPaths.size > 0) {
|
|
const learningPathKey = `${props.courseSlug}-lp-${props.userId}`;
|
|
return learningPathStore.learningPaths.get(learningPathKey);
|
|
}
|
|
|
|
return undefined;
|
|
});
|
|
|
|
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="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>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|