ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cleanup: navigation (duplicated code, logic)

This commit is contained in:
Livio Bieri 2023-09-20 18:21:25 +02:00
parent fac25e6089
commit 46faea8c1c
5 changed files with 83 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/components/header/CoursePreviewBar.vue
View File

@ -2,6 +2,7 @@
import { useTranslation } from "i18next-vue"; import { useTranslation } from "i18next-vue";
import { useRouteLookups } from "@/utils/route"; import { useRouteLookups } from "@/utils/route";
import { useCurrentCourseSession } from "@/composables"; import { useCurrentCourseSession } from "@/composables";
import { getCompetenceBaseUrl } from "@/utils/utils";
const { inCompetenceProfile, inLearningPath } = useRouteLookups(); const { inCompetenceProfile, inLearningPath } = useRouteLookups();
const courseSession = useCurrentCourseSession(); const courseSession = useCurrentCourseSession();
@ -30,7 +31,7 @@ const { t } = useTranslation();
</router-link> </router-link>
<router-link <router-link
:to="courseSession.competence_url" :to="getCompetenceBaseUrl(courseSession)"
class="preview-nav-item" class="preview-nav-item"
:class="{ 'preview-nav-item--active': inCompetenceProfile() }" :class="{ 'preview-nav-item--active': inCompetenceProfile() }"
> >

98
client/src/components/header/MainNavigationBar.vue
View File

@ -15,6 +15,7 @@ import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
import { computed, onMounted, reactive } from "vue"; import { computed, onMounted, reactive } from "vue";
import { useTranslation } from "i18next-vue"; import { useTranslation } from "i18next-vue";
import CoursePreviewBar from "@/components/header/CoursePreviewBar.vue"; import CoursePreviewBar from "@/components/header/CoursePreviewBar.vue";
import { getCompetenceBaseUrl } from "@/utils/utils";
log.debug("MainNavigationBar created"); log.debug("MainNavigationBar created");
@ -57,8 +58,6 @@ onMounted(() => {
:course-session="courseSessionsStore.currentCourseSession" :course-session="courseSessionsStore.currentCourseSession"
:media-url="courseSessionsStore.currentCourseSession?.media_library_url" :media-url="courseSessionsStore.currentCourseSession?.media_library_url"
:user="userStore" :user="userStore"
:has-expert-navigation="courseSessionsStore.hasExpertNavigation"
:has-member-navigation="courseSessionsStore.hasMemberNavigation"
@closemodal="state.showMobileNavigationMenu = false" @closemodal="state.showMobileNavigationMenu = false"
@logout="userStore.handleLogout()" @logout="userStore.handleLogout()"
/> />
@ -104,60 +103,51 @@ onMounted(() => {
</div> </div>
</div> </div>
<div class="hidden space-x-8 lg:flex"> <!-- Satisfy the type checker; these menu items are
<!-- Navigation Links Desktop --> only relevant if there is a current course session -->
<template <template v-if="courseSessionsStore.currentCourseSession">
v-if=" <div class="hidden space-x-8 lg:flex">
courseSessionsStore.hasExpertNavigation && <template v-if="courseSessionsStore.currentCourseSessionHasCockpit">
courseSessionsStore.currentCourseSession <router-link
" :to="`${courseSessionsStore.currentCourseSession.course_url}/cockpit`"
> class="nav-item"
<router-link :class="{ 'nav-item--active': inCockpit() }"
:to="`${courseSessionsStore.currentCourseSession.course_url}/cockpit`" >
class="nav-item" {{ t("cockpit.title") }}
:class="{ 'nav-item--active': inCockpit() }" </router-link>
>
{{ t("cockpit.title") }}
</router-link>
<router-link <router-link
:to="courseSessionsStore.currentCourseSession.learning_path_url" :to="courseSessionsStore.currentCourseSession.learning_path_url"
target="_blank" target="_blank"
class="nav-item" class="nav-item"
> >
<div class="flex items-center"> <div class="flex items-center">
<span>{{ t("a.VorschauTeilnehmer") }}</span> <span>{{ t("a.VorschauTeilnehmer") }}</span>
<it-icon-external-link class="ml-2" /> <it-icon-external-link class="ml-2" />
</div> </div>
</router-link> </router-link>
</template> </template>
<template <template v-else>
v-if=" <router-link
courseSessionsStore.hasMemberNavigation && :to="courseSessionsStore.currentCourseSession.learning_path_url"
courseSessionsStore.currentCourseSession class="nav-item"
" :class="{ 'nav-item--active': inLearningPath() }"
> >
<router-link {{ t("general.learningPath") }}
:to="courseSessionsStore.currentCourseSession.learning_path_url" </router-link>
class="nav-item"
:class="{ 'nav-item--active': inLearningPath() }"
>
{{ t("general.learningPath") }}
</router-link>
<router-link <router-link
:to="`${courseSessionsStore.currentCourseSession.competence_url.replace( :to="
// TODO: remove the `competence_url` with url to Navi... getCompetenceBaseUrl(courseSessionsStore.currentCourseSession)
'/competences', "
'' class="nav-item"
)}`" :class="{ 'nav-item--active': inCompetenceProfile() }"
class="nav-item" >
:class="{ 'nav-item--active': inCompetenceProfile() }" {{ t("competences.title") }}
> </router-link>
{{ t("competences.title") }} </template>
</router-link> </div>
</template> </template>
</div>
</div> </div>
<div class="flex items-stretch justify-start space-x-8"> <div class="flex items-stretch justify-start space-x-8">

56
client/src/components/header/MobileMenu.vue
View File

@ -1,8 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import ItFullScreenModal from "@/components/ui/ItFullScreenModal.vue"; import ItFullScreenModal from "@/components/ui/ItFullScreenModal.vue";
import { useCourseSessionsStore } from "@/stores/courseSessions";
import type { UserState } from "@/stores/user"; import type { UserState } from "@/stores/user";
import type { CourseSession } from "@/types"; import type { CourseSession } from "@/types";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { getCompetenceBaseUrl } from "@/utils/utils";
const router = useRouter(); const router = useRouter();
@ -52,36 +54,32 @@ const courseSessionsStore = useCourseSessionsStore();
</div> </div>
<div> <div>
<div v-if="courseSession" class="mt-6 border-b"> <div v-if="courseSession" class="mt-6 border-b">
<h4 class="text-sm text-gray-900">{{ courseSession?.course.title }}</h4> <h4 class="text-sm text-gray-900">{{ courseSession.course.title }}</h4>
<ul class="mt-6"> <ul class="mt-6">
<li <template v-if="courseSessionsStore.currentCourseSessionHasCockpit">
v-if="courseSessionsStore.currentCourseSessionHasCockpit" <li class="mb-6">
class="mb-6" <button @click="clickLink(`${courseSession.course_url}/cockpit`)">
> {{ $t("cockpit.title") }}
<button @click="clickLink(`${courseSession?.course_url}/cockpit`)"> </button>
{{ $t("cockpit.title") }} </li>
</button> <li class="mb-6">
</li> <button @click="clickLink(courseSession.learning_path_url)">
<li class="mb-6"> {{ $t("a.VorschauTeilnehmer") }}
<button @click="clickLink(courseSession?.learning_path_url)"> </button>
{{ $t("general.learningPath") }} </li>
</button> </template>
</li> <template v-else>
<li class="mb-6"> <li class="mb-6">
<button <button @click="clickLink(courseSession.learning_path_url)">
@click=" {{ $t("general.learningPath") }}
clickLink( </button>
courseSession?.competence_url.replace( </li>
// TODO: remove the `competence_url` with url to Navi... <li class="mb-6">
'/competences', <button @click="clickLink(getCompetenceBaseUrl(courseSession))">
'' {{ $t("competences.title") }}
) </button>
) </li>
" </template>
>
{{ $t("competences.title") }}
</button>
</li>
<li class="mb-6"> <li class="mb-6">
<button <button
data-cy="medialibrary-link" data-cy="medialibrary-link"

14
client/src/stores/courseSessions.ts
View File

@ -142,18 +142,6 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
return Boolean(isCourseExpert && (inLearningPath() || inCompetenceProfile())); return Boolean(isCourseExpert && (inLearningPath() || inCompetenceProfile()));
}); });
const hasMemberNavigation = computed(() => {
return Boolean(
inCourse() && currentCourseSession.value && !currentCourseSessionHasCockpit.value
);
});
const hasExpertNavigation = computed(() => {
return Boolean(
inCourse() && currentCourseSession.value && currentCourseSessionHasCockpit.value
);
});
const circleExperts = computed(() => { const circleExperts = computed(() => {
const circleStore = useCircleStore(); const circleStore = useCircleStore();
const circleTranslationKey = circleStore.circle?.translation_key; const circleTranslationKey = circleStore.circle?.translation_key;
@ -283,8 +271,6 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
switchCourseSession, switchCourseSession,
hasCockpit, hasCockpit,
hasCourseSessionPreview, hasCourseSessionPreview,
hasMemberNavigation,
hasExpertNavigation,
currentCourseSessionHasCockpit, currentCourseSessionHasCockpit,
canUploadCircleDocuments, canUploadCircleDocuments,
circleDocuments, circleDocuments,

10
client/src/utils/utils.ts
View File

@ -1,3 +1,13 @@
import type { CourseSession } from "@/types";
export function assertUnreachable(msg: string): never { export function assertUnreachable(msg: string): never {
throw new Error("Didn't expect to get here, " + msg); throw new Error("Didn't expect to get here, " + msg);
} }
export function getCompetenceBaseUrl(courseSession: CourseSession): string {
return courseSession.competence_url.replace(
// TODO: remove the `competence_url` with url to Navi...
"/competences",
""
);
}