75 lines
2.2 KiB
Vue
75 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, ref } from "vue";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import { useTranslation } from "i18next-vue";
|
|
import { useFetch } from "@vueuse/core";
|
|
import { useCurrentCourseSession } from "@/composables";
|
|
|
|
const props = defineProps<{
|
|
userId: string;
|
|
courseSlug: string;
|
|
}>();
|
|
|
|
const { t } = useTranslation();
|
|
|
|
const pages = ref([
|
|
{ label: t("general.learningPath"), route: "cockpitProfileLearningPath" },
|
|
]);
|
|
|
|
const courseSession = useCurrentCourseSession();
|
|
const { data: user } = useFetch(
|
|
`/api/core/profile/${courseSession.value.id}/${props.userId}`
|
|
).json();
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
onMounted(() => {
|
|
// if current route name not in pages, redirect to first page
|
|
if (route.name && !pages.value.find((page) => page.route === route.name)) {
|
|
router.push({
|
|
name: pages.value[0].route,
|
|
params: { userId: props.userId, courseSlug: props.courseSlug },
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="user" class="flex flex-col bg-gray-200">
|
|
<div class="relative border-b bg-white shadow-md">
|
|
<div class="container-large pb-0">
|
|
<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>
|
|
|
|
<div class="mb-12 mt-2 flex items-center">
|
|
<img class="mr-8 h-48 w-48 rounded-full" :src="user.avatar_url" />
|
|
<div class="flex flex-col">
|
|
<h2 class="mb-2">{{ user.first_name }} {{ user.last_name }}</h2>
|
|
<p class="mb-2">{{ user.email }}</p>
|
|
<p class="text-gray-800">{{ $t("a.Teilnehmer") }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ul class="flex flex-row px-4 lg:px-8">
|
|
<li
|
|
v-for="page in pages"
|
|
:key="page.route"
|
|
class="relative top-px mr-12 pb-3"
|
|
:class="[route.name === page.route ? 'border-b-2 border-blue-900 pb-3' : '']"
|
|
>
|
|
<router-link :to="{ name: page.route }">
|
|
{{ page.label }}
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<router-view class="flex flex-grow py-0" />
|
|
</div>
|
|
</template>
|