Refactor course url handling
This commit is contained in:
Daniel Egger
parent
41ead1dad4
commit
06d284b1ce
|
|
@ -24,7 +24,7 @@ const { t } = useTranslation();
|
|||
<div class="flex space-x-8">
|
||||
<router-link
|
||||
data-cy="preview-learn-path-link"
|
||||
:to="getLearningPathUrl(courseSession)"
|
||||
:to="getLearningPathUrl(courseSession.course.slug)"
|
||||
class="preview-nav-item"
|
||||
:class="{ 'preview-nav-item--active': inLearningPath() }"
|
||||
>
|
||||
|
|
@ -33,7 +33,7 @@ const { t } = useTranslation();
|
|||
|
||||
<router-link
|
||||
data-cy="preview-competence-profile-link"
|
||||
:to="getCompetenceNaviUrl(courseSession)"
|
||||
:to="getCompetenceNaviUrl(courseSession.course.slug)"
|
||||
class="preview-nav-item"
|
||||
:class="{ 'preview-nav-item--active': inCompetenceProfile() }"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -75,7 +75,9 @@ onMounted(() => {
|
|||
v-if="userStore.loggedIn"
|
||||
:show="state.showMobileNavigationMenu"
|
||||
:course-session="courseSessionsStore.currentCourseSession"
|
||||
:media-url="getMediaCenterUrl(courseSessionsStore.currentCourseSession)"
|
||||
:media-url="
|
||||
getMediaCenterUrl(courseSessionsStore.currentCourseSession?.course?.slug)
|
||||
"
|
||||
:user="userStore"
|
||||
@closemodal="state.showMobileNavigationMenu = false"
|
||||
@logout="userStore.handleLogout()"
|
||||
|
|
@ -142,7 +144,11 @@ onMounted(() => {
|
|||
|
||||
<router-link
|
||||
data-cy="navigation-preview-link"
|
||||
:to="getLearningPathUrl(courseSessionsStore.currentCourseSession)"
|
||||
:to="
|
||||
getLearningPathUrl(
|
||||
courseSessionsStore.currentCourseSession.course.slug
|
||||
)
|
||||
"
|
||||
target="_blank"
|
||||
class="nav-item"
|
||||
>
|
||||
|
|
@ -155,7 +161,11 @@ onMounted(() => {
|
|||
<template v-else>
|
||||
<router-link
|
||||
data-cy="navigation-learning-path-link"
|
||||
:to="getLearningPathUrl(courseSessionsStore.currentCourseSession)"
|
||||
:to="
|
||||
getLearningPathUrl(
|
||||
courseSessionsStore.currentCourseSession.course.slug
|
||||
)
|
||||
"
|
||||
class="nav-item"
|
||||
:class="{ 'nav-item--active': inLearningPath() }"
|
||||
>
|
||||
|
|
@ -165,7 +175,9 @@ onMounted(() => {
|
|||
<router-link
|
||||
data-cy="navigation-competence-profile-link"
|
||||
:to="
|
||||
getCompetenceNaviUrl(courseSessionsStore.currentCourseSession)
|
||||
getCompetenceNaviUrl(
|
||||
courseSessionsStore.currentCourseSession.course.slug
|
||||
)
|
||||
"
|
||||
class="nav-item"
|
||||
:class="{ 'nav-item--active': inCompetenceProfile() }"
|
||||
|
|
@ -180,7 +192,11 @@ onMounted(() => {
|
|||
<div class="flex items-stretch justify-start space-x-8">
|
||||
<router-link
|
||||
v-if="inCourse() && courseSessionsStore.currentCourseSession"
|
||||
:to="getMediaCenterUrl(courseSessionsStore.currentCourseSession)"
|
||||
:to="
|
||||
getMediaCenterUrl(
|
||||
courseSessionsStore.currentCourseSession.course.slug
|
||||
)
|
||||
"
|
||||
data-cy="medialibrary-link"
|
||||
class="nav-item-no-mobile"
|
||||
:class="{ 'nav-item--active': inMediaLibrary() }"
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ const courseSessionsStore = useCourseSessionsStore();
|
|||
<li class="mb-6">
|
||||
<button
|
||||
data-cy="navigation-mobile-preview-link"
|
||||
@click="clickLink(getLearningPathUrl(courseSession))"
|
||||
@click="clickLink(getLearningPathUrl(courseSession.course.slug))"
|
||||
>
|
||||
{{ $t("a.VorschauTeilnehmer") }}
|
||||
</button>
|
||||
|
|
@ -82,7 +82,7 @@ const courseSessionsStore = useCourseSessionsStore();
|
|||
<li class="mb-6">
|
||||
<button
|
||||
data-cy="navigation-mobile-learning-path-link"
|
||||
@click="clickLink(getLearningPathUrl(courseSession))"
|
||||
@click="clickLink(getLearningPathUrl(courseSession.course.slug))"
|
||||
>
|
||||
{{ $t("general.learningPath") }}
|
||||
</button>
|
||||
|
|
@ -90,7 +90,7 @@ const courseSessionsStore = useCourseSessionsStore();
|
|||
<li class="mb-6">
|
||||
<button
|
||||
data-cy="navigation-mobile-competence-profile-link"
|
||||
@click="clickLink(getCompetenceNaviUrl(courseSession))"
|
||||
@click="clickLink(getCompetenceNaviUrl(courseSession.course.slug))"
|
||||
>
|
||||
{{ $t("competences.title") }}
|
||||
</button>
|
||||
|
|
@ -99,7 +99,7 @@ const courseSessionsStore = useCourseSessionsStore();
|
|||
<li class="mb-6">
|
||||
<button
|
||||
data-cy="medialibrary-link"
|
||||
@click="clickLink(getMediaCenterUrl(courseSession))"
|
||||
@click="clickLink(getMediaCenterUrl(courseSession.course.slug))"
|
||||
>
|
||||
{{ $t("a.Mediathek") }}
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ const getNextStepLink = (courseSession: CourseSession) => {
|
|||
if (courseSessionsStore.hasCockpit(courseSession)) {
|
||||
return `${courseSession.course_url}/cockpit`;
|
||||
}
|
||||
return getLearningPathUrl(courseSession);
|
||||
return getLearningPathUrl(courseSession.course.slug);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -36,176 +36,178 @@ function userCountStatusForCircle(userId: string) {
|
|||
|
||||
<template>
|
||||
<div class="bg-gray-200">
|
||||
<div v-if="cockpitStore.currentCircle" class="container-large">
|
||||
<div class="mb-9 flex flex-col lg:flex-row lg:items-center lg:justify-between">
|
||||
<h1>Cockpit</h1>
|
||||
<ItDropdownSelect
|
||||
:model-value="cockpitStore.currentCircle"
|
||||
class="mt-4 w-full lg:mt-0 lg:w-96"
|
||||
:items="cockpitStore.circles"
|
||||
@update:model-value="cockpitStore.setCurrentCourseCircleFromEvent"
|
||||
></ItDropdownSelect>
|
||||
</div>
|
||||
<!-- Status -->
|
||||
<div class="mb-4 gap-4 lg:grid lg:grid-cols-3 lg:grid-rows-none">
|
||||
<div class="my-4 flex flex-col justify-between bg-white p-6 lg:my-0">
|
||||
<div>
|
||||
<h3 class="heading-3 mb-4 flex items-center gap-2">
|
||||
{{ $t("Trainerunterlagen") }}
|
||||
</h3>
|
||||
<div class="mb-4">
|
||||
{{ $t("cockpit.trainerFilesText") }}
|
||||
<div v-if="cockpitStore.circles?.length">
|
||||
<div v-if="cockpitStore.currentCircle" class="container-large">
|
||||
<div class="mb-9 flex flex-col lg:flex-row lg:items-center lg:justify-between">
|
||||
<h1>Cockpit</h1>
|
||||
<ItDropdownSelect
|
||||
:model-value="cockpitStore.currentCircle"
|
||||
class="mt-4 w-full lg:mt-0 lg:w-96"
|
||||
:items="cockpitStore.circles"
|
||||
@update:model-value="cockpitStore.setCurrentCourseCircleFromEvent"
|
||||
></ItDropdownSelect>
|
||||
</div>
|
||||
<!-- Status -->
|
||||
<div class="mb-4 gap-4 lg:grid lg:grid-cols-3 lg:grid-rows-none">
|
||||
<div class="my-4 flex flex-col justify-between bg-white p-6 lg:my-0">
|
||||
<div>
|
||||
<h3 class="heading-3 mb-4 flex items-center gap-2">
|
||||
{{ $t("Trainerunterlagen") }}
|
||||
</h3>
|
||||
<div class="mb-4">
|
||||
{{ $t("cockpit.trainerFilesText") }}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="https://vbvbern.sharepoint.com/sites/myVBV-AFA_K-CI"
|
||||
class="btn-secondary min-w-min"
|
||||
target="_blank"
|
||||
>
|
||||
{{ $t("MS Teams öffnen") }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="https://vbvbern.sharepoint.com/sites/myVBV-AFA_K-CI"
|
||||
class="btn-secondary min-w-min"
|
||||
target="_blank"
|
||||
>
|
||||
{{ $t("MS Teams öffnen") }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-4 flex flex-col justify-between bg-white p-6 lg:my-0">
|
||||
<div>
|
||||
<h3 class="heading-3 mb-4 flex items-center gap-2">
|
||||
{{ $t("a.Unterlagen für Teilnehmenden") }}
|
||||
</h3>
|
||||
<div class="mb-4">
|
||||
{{ $t("a.Stelle deinen Lernenden zusätzliche Inhalte zur Verfügung.") }}
|
||||
<div class="my-4 flex flex-col justify-between bg-white p-6 lg:my-0">
|
||||
<div>
|
||||
<h3 class="heading-3 mb-4 flex items-center gap-2">
|
||||
{{ $t("a.Unterlagen für Teilnehmenden") }}
|
||||
</h3>
|
||||
<div class="mb-4">
|
||||
{{ $t("a.Stelle deinen Lernenden zusätzliche Inhalte zur Verfügung.") }}
|
||||
</div>
|
||||
<!-- <div-->
|
||||
<!-- v-if="courseSessionsStore.circleDocuments.length"-->
|
||||
<!-- class="mb-4 flex items-center gap-x-2"-->
|
||||
<!-- >-->
|
||||
<!-- <it-icon-document />-->
|
||||
<!-- {{ courseSessionsStore.circleDocuments.length }} {{ $t("a.Unterlagen") }}-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<!-- <div-->
|
||||
<!-- v-if="courseSessionsStore.circleDocuments.length"-->
|
||||
<!-- class="mb-4 flex items-center gap-x-2"-->
|
||||
<!-- >-->
|
||||
<!-- <it-icon-document />-->
|
||||
<!-- {{ courseSessionsStore.circleDocuments.length }} {{ $t("a.Unterlagen") }}-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<div>
|
||||
<router-link
|
||||
:to="`/course/${props.courseSlug}/cockpit/documents`"
|
||||
class="btn-secondary min-w-min"
|
||||
>
|
||||
{{ $t("a.Zum Unterlagen-Upload") }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-4 flex flex-col justify-between bg-white p-6 lg:my-0">
|
||||
<div>
|
||||
<h3 class="heading-3 mb-4 flex items-center gap-2">
|
||||
{{ $t("Anwesenheitskontrolle Präsenzkurse") }}
|
||||
</h3>
|
||||
<div class="mb-4">
|
||||
{{
|
||||
$t(
|
||||
"Hier überprüfst und bestätigst du die Anwesenheit deiner Teilnehmenden."
|
||||
)
|
||||
}}
|
||||
<div>
|
||||
<router-link
|
||||
:to="`/course/${props.courseSlug}/cockpit/documents`"
|
||||
class="btn-secondary min-w-min"
|
||||
>
|
||||
{{ $t("a.Zum Unterlagen-Upload") }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<router-link
|
||||
:to="`/course/${props.courseSlug}/cockpit/attendance`"
|
||||
class="btn-secondary min-w-min"
|
||||
>
|
||||
{{ $t("Anwesenheit prüfen") }}
|
||||
</router-link>
|
||||
<div class="my-4 flex flex-col justify-between bg-white p-6 lg:my-0">
|
||||
<div>
|
||||
<h3 class="heading-3 mb-4 flex items-center gap-2">
|
||||
{{ $t("Anwesenheitskontrolle Präsenzkurse") }}
|
||||
</h3>
|
||||
<div class="mb-4">
|
||||
{{
|
||||
$t(
|
||||
"Hier überprüfst und bestätigst du die Anwesenheit deiner Teilnehmenden."
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<router-link
|
||||
:to="`/course/${props.courseSlug}/cockpit/attendance`"
|
||||
class="btn-secondary min-w-min"
|
||||
>
|
||||
{{ $t("Anwesenheit prüfen") }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4 bg-white p-6">
|
||||
<CockpitDates></CockpitDates>
|
||||
</div>
|
||||
<SubmissionsOverview
|
||||
:course-session="courseSession"
|
||||
:selected-circle="cockpitStore.currentCircle.id"
|
||||
></SubmissionsOverview>
|
||||
<div class="pt-4">
|
||||
<!-- progress -->
|
||||
<div
|
||||
v-if="courseSessionDetailResult.filterMembers().length > 0"
|
||||
class="bg-white p-6"
|
||||
>
|
||||
<h1 class="heading-3 mb-5">{{ $t("cockpit.progress") }}</h1>
|
||||
<ul>
|
||||
<ItPersonRow
|
||||
v-for="csu in courseSessionDetailResult.filterMembers()"
|
||||
:key="csu.user_id"
|
||||
:name="`${csu.first_name} ${csu.last_name}`"
|
||||
:avatar-url="csu.avatar_url"
|
||||
>
|
||||
<template #center>
|
||||
<div
|
||||
class="mt-2 flex w-full flex-col items-center justify-between lg:mt-0 lg:flex-row"
|
||||
>
|
||||
<LearningPathDiagram
|
||||
v-if="
|
||||
learningPathStore.learningPathForUser(
|
||||
props.courseSlug,
|
||||
csu.user_id
|
||||
)
|
||||
"
|
||||
:learning-path="
|
||||
<div class="mb-4 bg-white p-6">
|
||||
<CockpitDates></CockpitDates>
|
||||
</div>
|
||||
<SubmissionsOverview
|
||||
:course-session="courseSession"
|
||||
:selected-circle="cockpitStore.currentCircle.id"
|
||||
></SubmissionsOverview>
|
||||
<div class="pt-4">
|
||||
<!-- progress -->
|
||||
<div
|
||||
v-if="courseSessionDetailResult.filterMembers().length > 0"
|
||||
class="bg-white p-6"
|
||||
>
|
||||
<h1 class="heading-3 mb-5">{{ $t("cockpit.progress") }}</h1>
|
||||
<ul>
|
||||
<ItPersonRow
|
||||
v-for="csu in courseSessionDetailResult.filterMembers()"
|
||||
:key="csu.user_id"
|
||||
:name="`${csu.first_name} ${csu.last_name}`"
|
||||
:avatar-url="csu.avatar_url"
|
||||
>
|
||||
<template #center>
|
||||
<div
|
||||
class="mt-2 flex w-full flex-col items-center justify-between lg:mt-0 lg:flex-row"
|
||||
>
|
||||
<LearningPathDiagram
|
||||
v-if="
|
||||
learningPathStore.learningPathForUser(
|
||||
props.courseSlug,
|
||||
csu.user_id
|
||||
)
|
||||
"
|
||||
:learning-path="
|
||||
learningPathStore.learningPathForUser(
|
||||
props.courseSlug,
|
||||
csu.user_id
|
||||
) as LearningPath
|
||||
"
|
||||
:show-circle-slugs="[cockpitStore.currentCircle.slug]"
|
||||
diagram-type="singleSmall"
|
||||
class="mr-4"
|
||||
></LearningPathDiagram>
|
||||
<p class="lg:min-w-[150px]">
|
||||
{{ cockpitStore.currentCircle.title }}
|
||||
</p>
|
||||
<div class="ml-4 flex flex-row items-center">
|
||||
<div class="mr-6 flex flex-row items-center">
|
||||
<it-icon-smiley-thinking
|
||||
class="mr-2 inline-block h-8 w-8"
|
||||
></it-icon-smiley-thinking>
|
||||
<p class="text-bold inline-block w-6">
|
||||
{{ userCountStatusForCircle(csu.user_id).FAIL }}
|
||||
</p>
|
||||
:show-circle-slugs="[cockpitStore.currentCircle.slug]"
|
||||
diagram-type="singleSmall"
|
||||
class="mr-4"
|
||||
></LearningPathDiagram>
|
||||
<p class="lg:min-w-[150px]">
|
||||
{{ cockpitStore.currentCircle.title }}
|
||||
</p>
|
||||
<div class="ml-4 flex flex-row items-center">
|
||||
<div class="mr-6 flex flex-row items-center">
|
||||
<it-icon-smiley-thinking
|
||||
class="mr-2 inline-block h-8 w-8"
|
||||
></it-icon-smiley-thinking>
|
||||
<p class="text-bold inline-block w-6">
|
||||
{{ userCountStatusForCircle(csu.user_id).FAIL }}
|
||||
</p>
|
||||
</div>
|
||||
<li class="mr-6 flex flex-row items-center">
|
||||
<it-icon-smiley-happy
|
||||
class="mr-2 inline-block h-8 w-8"
|
||||
></it-icon-smiley-happy>
|
||||
<p class="text-bold inline-block w-6">
|
||||
{{ userCountStatusForCircle(csu.user_id).SUCCESS }}
|
||||
</p>
|
||||
</li>
|
||||
<li class="flex flex-row items-center">
|
||||
<it-icon-smiley-neutral
|
||||
class="mr-2 inline-block h-8 w-8"
|
||||
></it-icon-smiley-neutral>
|
||||
<p class="text-bold inline-block w-6">
|
||||
{{ userCountStatusForCircle(csu.user_id).UNKNOWN }}
|
||||
</p>
|
||||
</li>
|
||||
</div>
|
||||
<li class="mr-6 flex flex-row items-center">
|
||||
<it-icon-smiley-happy
|
||||
class="mr-2 inline-block h-8 w-8"
|
||||
></it-icon-smiley-happy>
|
||||
<p class="text-bold inline-block w-6">
|
||||
{{ userCountStatusForCircle(csu.user_id).SUCCESS }}
|
||||
</p>
|
||||
</li>
|
||||
<li class="flex flex-row items-center">
|
||||
<it-icon-smiley-neutral
|
||||
class="mr-2 inline-block h-8 w-8"
|
||||
></it-icon-smiley-neutral>
|
||||
<p class="text-bold inline-block w-6">
|
||||
{{ userCountStatusForCircle(csu.user_id).UNKNOWN }}
|
||||
</p>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #link>
|
||||
<router-link
|
||||
:to="`/course/${props.courseSlug}/cockpit/profile/${csu.user_id}`"
|
||||
class="link w-full lg:text-right"
|
||||
>
|
||||
{{ $t("general.profileLink") }}
|
||||
</router-link>
|
||||
</template>
|
||||
</ItPersonRow>
|
||||
</ul>
|
||||
</template>
|
||||
<template #link>
|
||||
<router-link
|
||||
:to="`/course/${props.courseSlug}/cockpit/profile/${csu.user_id}`"
|
||||
class="link w-full lg:text-right"
|
||||
>
|
||||
{{ $t("general.profileLink") }}
|
||||
</router-link>
|
||||
</template>
|
||||
</ItPersonRow>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="container-large mt-4">
|
||||
<span class="text-lg text-orange-600">
|
||||
{{ $t("a.Kein Circle verfügbar oder ausgewählt.") }}
|
||||
</span>
|
||||
<div v-else class="container-large mt-4">
|
||||
<span class="text-lg text-orange-600">
|
||||
{{ $t("a.Kein Circle verfügbar oder ausgewählt.") }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import eventBus from "@/utils/eventBus";
|
|||
import { useRouteQuery } from "@vueuse/router";
|
||||
import { computed, onUnmounted } from "vue";
|
||||
import { getPreviousRoute } from "@/router/history";
|
||||
import { getCompetenceNaviUrl } from "@/utils/utils";
|
||||
|
||||
log.debug("LearningContent.vue setup");
|
||||
|
||||
|
|
@ -127,7 +128,7 @@ onUnmounted(() => {
|
|||
<div class="mt-6 lg:mt-12">
|
||||
{{ $t("selfEvaluation.progressText") }}
|
||||
<router-link
|
||||
:to="courseSession.competence_url"
|
||||
:to="getCompetenceNaviUrl(courseSession.course.slug)"
|
||||
class="text-primary-500 underline"
|
||||
>
|
||||
{{ $t("selfEvaluation.progressLink") }}
|
||||
|
|
|
|||
|
|
@ -1,34 +1,31 @@
|
|||
import type { AssignmentType, CourseSession } from "@/types";
|
||||
import type { AssignmentType } from "@/types";
|
||||
import { useTranslation } from "i18next-vue";
|
||||
|
||||
export function assertUnreachable(msg: string): never {
|
||||
throw new Error("Didn't expect to get here, " + msg);
|
||||
}
|
||||
|
||||
function createCourseUrl(
|
||||
courseSession: CourseSession | undefined,
|
||||
specificSub: string
|
||||
): string {
|
||||
if (!courseSession) {
|
||||
return "";
|
||||
function createCourseUrl(courseSlug: string | undefined, specificSub: string): string {
|
||||
if (!courseSlug) {
|
||||
return "/";
|
||||
}
|
||||
|
||||
if (["learn", "media", "competence"].includes(specificSub)) {
|
||||
return `${courseSession.course_url}/${specificSub}`;
|
||||
return `/course/${courseSlug}/${specificSub}`;
|
||||
}
|
||||
return courseSession.course_url;
|
||||
return `/course/${courseSlug}`;
|
||||
}
|
||||
|
||||
export function getCompetenceNaviUrl(courseSession: CourseSession | undefined): string {
|
||||
return createCourseUrl(courseSession, "competence");
|
||||
export function getCompetenceNaviUrl(courseSlug: string | undefined): string {
|
||||
return createCourseUrl(courseSlug, "competence");
|
||||
}
|
||||
|
||||
export function getMediaCenterUrl(courseSession: CourseSession | undefined): string {
|
||||
return createCourseUrl(courseSession, "media");
|
||||
export function getMediaCenterUrl(courseSlug: string | undefined): string {
|
||||
return createCourseUrl(courseSlug, "media");
|
||||
}
|
||||
|
||||
export function getLearningPathUrl(courseSession: CourseSession | undefined): string {
|
||||
return createCourseUrl(courseSession, "learn");
|
||||
export function getLearningPathUrl(courseSlug: string | undefined): string {
|
||||
return createCourseUrl(courseSlug, "learn");
|
||||
}
|
||||
|
||||
export function getAssignmentTypeTitle(assignmentType: AssignmentType): string {
|
||||
|
|
|
|||
Loading…
Reference in New Issue