407 lines
14 KiB
Vue
407 lines
14 KiB
Vue
<script setup lang="ts">
|
|
import log from "loglevel";
|
|
import { getLoginURL } from "@/router/utils";
|
|
import AccountMenu from "@/components/header/AccountMenu.vue";
|
|
import MobileMenu from "@/components/header/MobileMenu.vue";
|
|
import NotificationPopover from "@/components/notifications/NotificationPopover.vue";
|
|
import NotificationPopoverContent from "@/components/notifications/NotificationPopoverContent.vue";
|
|
import ItFullScreenModal from "@/components/ui/ItFullScreenModal.vue";
|
|
import { useCourseSessionsStore } from "@/stores/courseSessions";
|
|
import { useNotificationsStore } from "@/stores/notifications";
|
|
import { useUserStore } from "@/stores/user";
|
|
import { useRouteLookups } from "@/utils/route";
|
|
import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
|
|
import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
|
|
import { computed, onMounted, reactive } from "vue";
|
|
import { useTranslation } from "i18next-vue";
|
|
import CoursePreviewBar from "@/components/header/CoursePreviewBar.vue";
|
|
import {
|
|
getCockpitUrl,
|
|
getCompetenceNaviUrl,
|
|
getLearningMentorUrl,
|
|
getLearningPathUrl,
|
|
getMediaCenterUrl,
|
|
isVVLearningMentor,
|
|
} from "@/utils/utils";
|
|
import { useVVByLink } from "@/composables";
|
|
|
|
log.debug("MainNavigationBar created");
|
|
|
|
const breakpoints = useBreakpoints(breakpointsTailwind);
|
|
const userStore = useUserStore();
|
|
const courseSessionsStore = useCourseSessionsStore();
|
|
const notificationsStore = useNotificationsStore();
|
|
const vvBuyLink = useVVByLink();
|
|
const {
|
|
inCockpit,
|
|
inCompetenceProfile,
|
|
inLearningMentor,
|
|
inCourse,
|
|
inLearningPath,
|
|
inMediaLibrary,
|
|
inAppointments,
|
|
} = useRouteLookups();
|
|
|
|
const { t } = useTranslation();
|
|
const state = reactive({
|
|
showMobileNavigationMenu: false,
|
|
showMobileProfileMenu: false,
|
|
});
|
|
|
|
function popoverClick(event: Event) {
|
|
if (breakpoints.smaller("lg").value) {
|
|
event.preventDefault();
|
|
state.showMobileProfileMenu = true;
|
|
}
|
|
}
|
|
|
|
const selectedCourseSessionTitle = computed(() => {
|
|
return courseSessionsStore.currentCourseSession?.title;
|
|
});
|
|
|
|
const appointmentsUrl = computed(() => {
|
|
const currentCourseSession = courseSessionsStore.currentCourseSession;
|
|
if (currentCourseSession) {
|
|
return `/dashboard/due-dates?session=${currentCourseSession.id}`;
|
|
} else {
|
|
return `/dashboard/due-dates`;
|
|
}
|
|
});
|
|
|
|
onMounted(() => {
|
|
log.debug("MainNavigationBar mounted");
|
|
});
|
|
|
|
const hasLearningPathMenu = computed(() =>
|
|
Boolean(
|
|
courseSessionsStore.currentCourseSession?.actions.includes("learning-path") &&
|
|
inCourse()
|
|
)
|
|
);
|
|
|
|
const hasCompetenceNaviMenu = computed(() =>
|
|
Boolean(
|
|
courseSessionsStore.currentCourseSession?.actions.includes("competence-navi") &&
|
|
inCourse()
|
|
)
|
|
);
|
|
|
|
const hasMediaLibraryMenu = computed(() =>
|
|
Boolean(
|
|
courseSessionsStore.currentCourseSession?.actions.includes("media-library") &&
|
|
inCourse()
|
|
)
|
|
);
|
|
|
|
const hasCockpitMenu = computed(() =>
|
|
Boolean(courseSessionsStore.currentCourseSession?.actions.includes("expert-cockpit"))
|
|
);
|
|
|
|
const hasPreviewMenu = computed(() =>
|
|
Boolean(courseSessionsStore.currentCourseSession?.actions.includes("preview"))
|
|
);
|
|
|
|
const hasAppointmentsMenu = computed(() =>
|
|
Boolean(
|
|
courseSessionsStore.currentCourseSession?.actions.includes("appointments") &&
|
|
userStore.loggedIn &&
|
|
inCourse()
|
|
)
|
|
);
|
|
|
|
const hasNotificationsMenu = computed(() => {
|
|
return userStore.loggedIn;
|
|
});
|
|
|
|
const hasLearningMentor = computed(() => {
|
|
if (!inCourse()) {
|
|
return false;
|
|
}
|
|
|
|
if (!courseSessionsStore.currentCourseSession) {
|
|
return false;
|
|
}
|
|
|
|
const courseSession = courseSessionsStore.currentCourseSession;
|
|
return courseSession.actions.includes("learning-mentor");
|
|
});
|
|
|
|
const mentorTabTitle = computed(() =>
|
|
courseSessionsStore.currentCourseSession?.course.configuration.is_uk
|
|
? "a.Praxisbildner"
|
|
: "a.Lernbegleitung"
|
|
);
|
|
|
|
const hasSessionTitle = computed(() => {
|
|
return courseSessionsStore.currentCourseSession?.title && inCourse();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<CoursePreviewBar v-if="courseSessionsStore.isCourseSessionPreviewActive" />
|
|
<div v-else>
|
|
<Teleport to="body">
|
|
<MobileMenu
|
|
v-if="userStore.loggedIn"
|
|
:show="state.showMobileNavigationMenu"
|
|
:course-session="courseSessionsStore.currentCourseSession"
|
|
:has-media-library-menu="hasMediaLibraryMenu"
|
|
:has-cockpit-menu="hasCockpitMenu"
|
|
:has-preview-menu="hasPreviewMenu"
|
|
:has-learning-path-menu="hasLearningPathMenu"
|
|
:has-competence-navi-menu="hasCompetenceNaviMenu"
|
|
:has-learning-mentor="hasLearningMentor"
|
|
:has-notifications-menu="hasNotificationsMenu"
|
|
:has-appointments-menu="hasAppointmentsMenu"
|
|
:media-url="
|
|
getMediaCenterUrl(courseSessionsStore.currentCourseSession?.course?.slug)
|
|
"
|
|
:user="userStore"
|
|
@closemodal="state.showMobileNavigationMenu = false"
|
|
@logout="userStore.handleLogout()"
|
|
/>
|
|
</Teleport>
|
|
<Teleport to="body">
|
|
<ItFullScreenModal
|
|
v-if="userStore.loggedIn"
|
|
:show="state.showMobileProfileMenu"
|
|
@closemodal="state.showMobileProfileMenu = false"
|
|
>
|
|
<AccountMenu @close="state.showMobileProfileMenu = false" />
|
|
</ItFullScreenModal>
|
|
</Teleport>
|
|
<Transition name="nav">
|
|
<nav class="bg-blue-900 text-white">
|
|
<div class="mx-auto px-4 lg:px-8">
|
|
<div class="relative flex h-16 justify-between">
|
|
<div class="absolute inset-y-0 left-0 flex items-center lg:hidden">
|
|
<!-- Mobile menu button -->
|
|
<div
|
|
data-cy="navigation-mobile-menu-button"
|
|
class="flex"
|
|
@click="state.showMobileNavigationMenu = true"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="h-8 w-8 text-white hover:text-sky-500 focus:text-sky-500 focus:outline-none"
|
|
>
|
|
<it-icon-menu class="h-8 w-8" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-1 items-stretch justify-start">
|
|
<div class="hidden flex-shrink-0 items-center lg:flex">
|
|
<div class="flex items-center">
|
|
<router-link to="/" class="flex">
|
|
<it-icon-vbv class="-ml-3 -mt-6 mr-3 h-8 w-16" />
|
|
</router-link>
|
|
<router-link to="/" class="flex">
|
|
<div
|
|
class="ml-1 border-l border-white pl-3 pr-10 text-2xl text-white"
|
|
>
|
|
{{ t("general.title") }}
|
|
</div>
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Satisfy the type checker; these menu items are
|
|
only relevant if there is a current course session -->
|
|
<template v-if="courseSessionsStore.currentCourseSession">
|
|
<div class="hidden space-x-8 lg:flex">
|
|
<router-link
|
|
v-if="hasCockpitMenu"
|
|
data-cy="navigation-cockpit-link"
|
|
:to="
|
|
getCockpitUrl(
|
|
courseSessionsStore.currentCourseSession.course.slug
|
|
)
|
|
"
|
|
class="nav-item"
|
|
:class="{ 'nav-item--active': inCockpit() }"
|
|
>
|
|
{{ t("cockpit.title") }}
|
|
</router-link>
|
|
|
|
<router-link
|
|
v-if="hasPreviewMenu"
|
|
data-cy="navigation-preview-link"
|
|
:to="
|
|
getLearningPathUrl(
|
|
courseSessionsStore.currentCourseSession.course.slug
|
|
)
|
|
"
|
|
target="_blank"
|
|
class="nav-item"
|
|
>
|
|
<div class="flex items-center">
|
|
<span>{{ t("a.Vorschau Teilnehmer") }}</span>
|
|
<it-icon-external-link class="ml-2" />
|
|
</div>
|
|
</router-link>
|
|
<router-link
|
|
v-if="hasLearningPathMenu"
|
|
data-cy="navigation-learning-path-link"
|
|
:to="
|
|
getLearningPathUrl(
|
|
courseSessionsStore.currentCourseSession.course.slug
|
|
)
|
|
"
|
|
class="nav-item"
|
|
:class="{ 'nav-item--active': inLearningPath() }"
|
|
>
|
|
{{ t("general.learningPath") }}
|
|
</router-link>
|
|
|
|
<router-link
|
|
v-if="hasCompetenceNaviMenu"
|
|
data-cy="navigation-competence-profile-link"
|
|
:to="
|
|
getCompetenceNaviUrl(
|
|
courseSessionsStore.currentCourseSession.course.slug
|
|
)
|
|
"
|
|
class="nav-item"
|
|
:class="{ 'nav-item--active': inCompetenceProfile() }"
|
|
>
|
|
{{ t("competences.title") }}
|
|
</router-link>
|
|
|
|
<router-link
|
|
v-if="hasLearningMentor"
|
|
data-cy="navigation-learning-mentor-link"
|
|
:to="
|
|
getLearningMentorUrl(
|
|
courseSessionsStore.currentCourseSession.course.slug
|
|
)
|
|
"
|
|
class="nav-item"
|
|
:class="{ 'nav-item--active': inLearningMentor() }"
|
|
>
|
|
{{ t(mentorTabTitle) }}
|
|
</router-link>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="flex items-stretch justify-start space-x-8">
|
|
<router-link
|
|
v-if="hasMediaLibraryMenu"
|
|
:to="
|
|
getMediaCenterUrl(
|
|
courseSessionsStore.currentCourseSession?.course.slug
|
|
)
|
|
"
|
|
data-cy="medialibrary-link"
|
|
class="nav-item-no-mobile"
|
|
:class="{ 'nav-item--active': inMediaLibrary() }"
|
|
>
|
|
<it-icon-media-library class="h-8 w-8" />
|
|
</router-link>
|
|
<router-link
|
|
v-if="isVVLearningMentor(courseSessionsStore.currentCourseSession)"
|
|
:to="vvBuyLink.href.value"
|
|
data-cy="buy-vv-link"
|
|
class="nav-item-no-mobile"
|
|
>
|
|
{{ $t("a.Lehrgang kaufen") }}
|
|
</router-link>
|
|
<router-link
|
|
v-if="hasAppointmentsMenu"
|
|
:to="appointmentsUrl"
|
|
data-cy="all-duedates-link"
|
|
class="nav-item"
|
|
:class="{ 'nav-item--active': inAppointments() }"
|
|
>
|
|
<it-icon-calendar-light class="h-8 w-8" />
|
|
</router-link>
|
|
|
|
<!-- Notification Bell & Menu -->
|
|
<div v-if="hasNotificationsMenu" class="nav-item leading-none">
|
|
<NotificationPopover>
|
|
<template #toggleButtonContent>
|
|
<div class="relative h-8 w-8">
|
|
<div>
|
|
<it-icon-notification class="h-8 w-8" />
|
|
<div
|
|
v-if="notificationsStore.hasUnread"
|
|
aria-label="unread notifications"
|
|
class="absolute inset-y-0 right-0 h-1.5 w-1.5 rounded-full bg-sky-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template #popoverContent>
|
|
<NotificationPopoverContent />
|
|
</template>
|
|
</NotificationPopover>
|
|
</div>
|
|
|
|
<div
|
|
v-if="hasSessionTitle"
|
|
class="nav-item hidden items-center lg:inline-flex"
|
|
>
|
|
<div class="" data-cy="current-course-session-title">
|
|
{{ selectedCourseSessionTitle }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-item">
|
|
<div
|
|
v-if="userStore.loggedIn"
|
|
class="flex items-center"
|
|
data-cy="header-profile"
|
|
>
|
|
<Popover class="relative">
|
|
<PopoverButton @click="popoverClick($event)">
|
|
<div v-if="userStore.avatar_url">
|
|
<img
|
|
class="inline-block h-8 w-8 rounded-full"
|
|
:src="userStore.avatar_url"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div v-else>
|
|
{{ userStore.getFullName }}
|
|
</div>
|
|
</PopoverButton>
|
|
|
|
<PopoverPanel
|
|
v-slot="{ close }"
|
|
class="absolute -right-2 top-8 z-50 w-[500px] bg-white shadow-lg"
|
|
>
|
|
<div class="p-4">
|
|
<AccountMenu @close="close" />
|
|
</div>
|
|
</PopoverPanel>
|
|
</Popover>
|
|
</div>
|
|
<div v-else>
|
|
<a class="" :href="getLoginURL({ lang: userStore.language })">
|
|
Login
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</Transition>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="postcss" scoped>
|
|
.nav-item {
|
|
@apply inline-flex items-center border-b-4 border-transparent px-1 pt-1 text-white hover:text-sky-500;
|
|
}
|
|
|
|
.nav-item-no-mobile {
|
|
@apply hidden items-center border-b-4 border-transparent px-1 pt-1 text-white hover:text-sky-500 lg:inline-flex;
|
|
}
|
|
|
|
.nav-item--active {
|
|
@apply border-sky-500;
|
|
}
|
|
</style>
|