114 lines
3.5 KiB
Vue
114 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import * as log from "loglevel";
|
|
import { computed, onMounted } from "vue";
|
|
|
|
import CompetenceDetail from "@/pages/competence/ActionCompetenceDetail.vue";
|
|
import LearningPathPathView from "@/pages/learningPath/learningPathPage/LearningPathPathView.vue";
|
|
import {
|
|
useCourseSessionDetailQuery,
|
|
useCourseDataWithCompletion,
|
|
} from "@/composables";
|
|
|
|
const props = defineProps<{
|
|
userId: string;
|
|
courseSlug: string;
|
|
}>();
|
|
|
|
log.debug("CockpitUserProfilePage created", props.userId);
|
|
|
|
const courseCompletionData = useCourseDataWithCompletion(
|
|
props.courseSlug,
|
|
props.userId
|
|
);
|
|
|
|
onMounted(async () => {
|
|
log.debug("CockpitUserProfilePage mounted");
|
|
});
|
|
|
|
const lpQueryResult = useCourseDataWithCompletion(props.courseSlug, props.userId);
|
|
|
|
const learningPath = computed(() => {
|
|
return lpQueryResult.learningPath.value;
|
|
});
|
|
|
|
const { findUser } = useCourseSessionDetailQuery();
|
|
|
|
const user = computed(() => {
|
|
return findUser(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="mb-12 flex flex-row items-center">
|
|
<img class="mr-8 h-44 w-44 rounded-full" :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-[center_left_-4px] bg-no-repeat pl-6">
|
|
{{ $t("messages.sendMessage") }}
|
|
</p>
|
|
</div>
|
|
</header>
|
|
<main>
|
|
<div v-if="learningPath" class="mb-8 w-full bg-white pb-1 pt-2">
|
|
<!-- TODO: rework this section with next redesign -->
|
|
<LearningPathPathView
|
|
:use-mobile-layout="false"
|
|
:hide-buttons="true"
|
|
:learning-path="learningPath"
|
|
:next-learning-content="undefined"
|
|
:override-circle-url-base="`/course/${props.courseSlug}/cockpit/profile/${props.userId}`"
|
|
></LearningPathPathView>
|
|
</div>
|
|
<ul class="mb-5 flex flex-row border-b-2">
|
|
<li class="relative top-px mr-12 pb-3" :class="setActiveClasses(true)">
|
|
<button>{{ $t("competences.competences") }}</button>
|
|
</li>
|
|
<li class="mr-12">
|
|
<button>{{ $t("general.transferTask_other") }}</button>
|
|
</li>
|
|
<li class="mr-12">
|
|
<button>{{ $t("general.exam_other") }}</button>
|
|
</li>
|
|
<li class="mr-12">
|
|
<button>{{ $t("general.certificate_other") }}</button>
|
|
</li>
|
|
</ul>
|
|
<div>
|
|
<ul class="bg-white px-8">
|
|
<li
|
|
v-for="competence in courseCompletionData.actionCompetences.value ?? []"
|
|
:key="competence.id"
|
|
class="border-b border-gray-500 p-8 last:border-0"
|
|
>
|
|
<CompetenceDetail
|
|
:competence="competence"
|
|
:course-slug="props.courseSlug"
|
|
:show-assess-again="false"
|
|
:is-inline="true"
|
|
></CompetenceDetail>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|