116 lines
3.7 KiB
Vue
116 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import ItFullScreenModal from "@/components/ui/ItFullScreenModal.vue";
|
|
import { useCourseSessionsStore } from "@/stores/courseSessions";
|
|
import type { UserState } from "@/stores/user";
|
|
import type { CourseSession } from "@/types";
|
|
import { useRouter } from "vue-router";
|
|
import { getCompetenceBaseUrl } from "@/utils/utils";
|
|
|
|
const router = useRouter();
|
|
|
|
defineProps<{
|
|
show: boolean;
|
|
courseSession: CourseSession | undefined;
|
|
mediaUrl?: string;
|
|
user: UserState | undefined;
|
|
}>();
|
|
|
|
const emit = defineEmits(["closemodal", "logout"]);
|
|
|
|
const clickLink = (to: string | undefined) => {
|
|
if (to) {
|
|
router.push(to);
|
|
emit("closemodal");
|
|
}
|
|
};
|
|
|
|
const courseSessionsStore = useCourseSessionsStore();
|
|
</script>
|
|
|
|
<template>
|
|
<ItFullScreenModal :show="show" @closemodal="emit('closemodal')">
|
|
<div>
|
|
<div>
|
|
<div v-if="user?.loggedIn" class="-mx-4 border-b px-8 pb-4">
|
|
<div class="-ml-4 flex">
|
|
<div v-if="user?.avatar_url">
|
|
<img
|
|
class="inline-block h-16 w-16 rounded-full"
|
|
:src="user?.avatar_url"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="ml-6">
|
|
<h3>{{ user?.first_name }} {{ user?.last_name }}</h3>
|
|
<button
|
|
class="mt-2 inline-block flex items-center"
|
|
@click="clickLink('/settings')"
|
|
>
|
|
<it-icon-settings class="inline-block" />
|
|
<span class="ml-3">{{ $t("general.settings") }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div v-if="courseSession" class="mt-6 border-b">
|
|
<h4 class="text-sm text-gray-900">{{ courseSession.course.title }}</h4>
|
|
<ul class="mt-6">
|
|
<template v-if="courseSessionsStore.currentCourseSessionHasCockpit">
|
|
<li class="mb-6">
|
|
<button @click="clickLink(`${courseSession.course_url}/cockpit`)">
|
|
{{ $t("cockpit.title") }}
|
|
</button>
|
|
</li>
|
|
<li class="mb-6">
|
|
<button @click="clickLink(courseSession.learning_path_url)">
|
|
{{ $t("a.VorschauTeilnehmer") }}
|
|
</button>
|
|
</li>
|
|
</template>
|
|
<template v-else>
|
|
<li class="mb-6">
|
|
<button @click="clickLink(courseSession.learning_path_url)">
|
|
{{ $t("general.learningPath") }}
|
|
</button>
|
|
</li>
|
|
<li class="mb-6">
|
|
<button @click="clickLink(getCompetenceBaseUrl(courseSession))">
|
|
{{ $t("competences.title") }}
|
|
</button>
|
|
</li>
|
|
</template>
|
|
<li class="mb-6">
|
|
<button
|
|
data-cy="medialibrary-link"
|
|
@click="clickLink(`${courseSession?.media_library_url}`)"
|
|
>
|
|
{{ $t("a.Mediathek") }}
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="mt-6 border-b">
|
|
<ul>
|
|
<li class="mb-6">
|
|
<button data-cy="medialibrary-link" @click="clickLink('/')">
|
|
myVBV
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<button
|
|
v-if="user?.loggedIn"
|
|
type="button"
|
|
class="mt-6 flex items-center"
|
|
@click="$emit('logout')"
|
|
>
|
|
<it-icon-logout class="inline-block" />
|
|
<span class="ml-1">{{ $t("mainNavigation.logout") }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ItFullScreenModal>
|
|
</template>
|