90 lines
2.5 KiB
Vue
90 lines
2.5 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: "profileLearningPath",
|
|
routeMatch: "profileLearningPath",
|
|
},
|
|
{
|
|
label: t("a.KompetenzNavi"),
|
|
route: "competenceMain",
|
|
routeMatch: "profileCompetence",
|
|
},
|
|
]);
|
|
|
|
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">
|
|
<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") }}
|
|
<span
|
|
v-if="
|
|
user.optional_attendance.some((id: string) => id === courseSession.id)
|
|
"
|
|
data-cy="optional-attendance"
|
|
>
|
|
{{ $t("a.Optionale Anwesenheit") }}
|
|
</span>
|
|
</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.matched.some((record) => record.name === page.routeMatch)
|
|
? 'border-b-2 border-blue-900 pb-3'
|
|
: '',
|
|
]"
|
|
>
|
|
<router-link :to="{ name: page.route }" :data-cy="page.routeMatch">
|
|
{{ page.label }}
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<router-view class="flex flex-grow py-0" />
|
|
</div>
|
|
</template>
|