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

Rename "Media Center" to "Media Library"

This commit is contained in:
Daniel Egger 2022-09-30 17:55:35 +02:00
parent 827e7a0fc0
commit 9d1eff5a42
13 changed files with 83 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/components/MainNavigationBar.vue
View File

@ -170,9 +170,9 @@ const profileDropdownData = [
Shop
</router-link>
<router-link
to="/mediacenter/versicherungsvermittlerin-media/overview"
to="/media/versicherungsvermittlerin-media/overview"
class="nav-item"
:class="{ 'nav-item--active': isInRoutePath(['/mediacenter']) }"
:class="{ 'nav-item--active': isInRoutePath(['/media']) }"
>
Mediathek
</router-link>

2
client/src/components/mediaCenter/LinkCard.vue → client/src/components/mediaLibrary/LinkCard.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import MediaLink from "@/components/mediaCenter/MediaLink.vue";
import MediaLink from "@/components/mediaLibrary/MediaLink.vue";
export interface Props {
title: string;

0
client/src/components/mediaCenter/MediaLink.vue → client/src/components/mediaLibrary/MediaLink.vue
View File

0
client/src/components/mediaCenter/OverviewCard.vue → client/src/components/mediaLibrary/OverviewCard.vue
View File

8
client/src/router/index.ts
View File

@ -25,13 +25,13 @@ const router = createRouter({
component: () => import("@/views/ShopView.vue"),
},
{
path: "/mediacenter/:mediaCenterPageSlug",
path: "/media/:mediaLibraryPageSlug",
props: true,
component: () => import("@/views/MediaCenterView.vue"),
component: () => import("@/views/MediaLibraryView.vue"),
children: [
{
path: "overview",
component: () => import("@/views/MediaCenterMainView.vue"),
component: () => import("@/views/MediaLibraryMainView.vue"),
},
{
path: "handlungsfelder/:mediaCategorySlug",
@ -40,7 +40,7 @@ const router = createRouter({
},
{
path: "handlungsfelder",
component: () => import("@/views/MediaCenterCategoryOverview.vue"),
component: () => import("@/views/MediaLibraryCategoryOverview.vue"),
},
{
path: "handlungsfeldlist",

39
client/src/stores/mediaCenter.ts
View File

@ -1,39 +0,0 @@
import { itGet } from "@/fetchHelpers";
import type { MediaLibraryPage } from "@/types";
import { defineStore } from "pinia";
export type MediaCenterStoreState = {
mediaCenterPage: MediaLibraryPage | undefined;
selectedLearningPath: { id: number; name: string };
availableLearningPaths: { id: number; name: string }[];
};
export const useMediaCenterStore = defineStore({
id: "mediaCenter",
state: () => {
return {
mediaCenterPage: undefined,
selectedLearningPath: { id: 1, name: "Alle Lehrgänge" },
availableLearningPaths: [
{ id: 1, name: "Alle Lehrgänge" },
{ id: 2, name: "Versicherungsvermittler/in" },
],
} as MediaCenterStoreState;
},
getters: {},
actions: {
async loadMediaCenterPage(slug: string, reload = false) {
if (this.mediaCenterPage && !reload) {
return this.mediaCenterPage;
}
const mediaCenterPageData = await itGet(`/api/course/page/${slug}/`);
if (!mediaCenterPageData) {
throw `No mediaCenterPageData found with: ${slug}`;
}
this.mediaCenterPage = mediaCenterPageData;
return this.mediaCenterPage;
},
},
});

39
client/src/stores/mediaLibrary.ts Normal file
View File

@ -0,0 +1,39 @@
import { itGet } from "@/fetchHelpers";
import type { MediaLibraryPage } from "@/types";
import { defineStore } from "pinia";
export type MediaLibraryStoreState = {
mediaLibraryPage: MediaLibraryPage | undefined;
selectedLearningPath: { id: number; name: string };
availableLearningPaths: { id: number; name: string }[];
};
export const useMediaLibraryStore = defineStore({
id: "mediaLibrary",
state: () => {
return {
mediaLibraryPage: undefined,
selectedLearningPath: { id: 1, name: "Alle Lehrgänge" },
availableLearningPaths: [
{ id: 1, name: "Alle Lehrgänge" },
{ id: 2, name: "Versicherungsvermittler/in" },
],
} as MediaLibraryStoreState;
},
getters: {},
actions: {
async loadMediaLibraryPage(slug: string, reload = false) {
if (this.mediaLibraryPage && !reload) {
return this.mediaLibraryPage;
}
const mediaLibraryPageData = await itGet(`/api/course/page/${slug}/`);
if (!mediaLibraryPageData) {
throw `No mediaLibraryPageData found with: ${slug}`;
}
this.mediaLibraryPage = mediaLibraryPageData;
return this.mediaLibraryPage;
},
},
});

28
client/src/views/MediaCategoryDetailView.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts">
import LinkCard from "@/components/mediaCenter/LinkCard.vue";
import MediaLink from "@/components/mediaCenter/MediaLink.vue";
import { useMediaCenterStore } from "@/stores/mediaCenter";
import LinkCard from "@/components/mediaLibrary/LinkCard.vue";
import MediaLink from "@/components/mediaLibrary/MediaLink.vue";
import { useMediaLibraryStore } from "@/stores/mediaLibrary";
import HandlungsfeldLayout from "@/views/HandlungsfeldLayout.vue";
import * as log from "loglevel";
import { computed } from "vue";
@ -140,7 +140,7 @@ const field = {
description:
"Lernmedium: Verkehrsrechtsschutz – Buch «Sach- und Vermögensversicherungen/Kapitel 12.3»",
linkText: "Handlungsfeldanzeigen",
link: "http://localhost:8000/mediacenter/handlungsfeld",
link: "http://localhost:8000/media/handlungsfeld",
openWindow: false,
},
{
@ -149,7 +149,7 @@ const field = {
description:
"Lernmedium: Verkehrsrechtsschutz – Buch «Sach- und Vermögensversicherungen/Kapitel 12.3»",
linkText: "Handlungsfeldanzeigen",
link: "http://localhost:8000/mediacenter/handlungsfeld",
link: "http://localhost:8000/media/handlungsfeld",
openWindow: false,
},
],
@ -163,10 +163,10 @@ const props = defineProps<{
log.debug("MediaCategoryDetailView created", props.mediaCategorySlug);
const mediaStore = useMediaCenterStore();
const mediaStore = useMediaLibraryStore();
const mediaCategory = computed(() => {
return mediaStore.mediaCenterPage?.children.find(
return mediaStore.mediaLibraryPage?.children.find(
(category) => category.slug === props.mediaCategorySlug
);
});
@ -199,7 +199,7 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
</script>
<template>
<Teleport v-if="mediaStore.mediaCenterPage && mediaCategory" to="body">
<Teleport v-if="mediaStore.mediaLibraryPage && mediaCategory" to="body">
<HandlungsfeldLayout>
<template #header>
<div class="flex justify-between">
@ -252,18 +252,15 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
/>
<div v-else class="flex items-center justify-between border-b py-4">
<h4 class="text-bold">{{ subItem.title }}</h4>
<media-link
:blank="subItem.openWindow"
:to="subItem.link"
class="link"
>{{ subItem.linkText }}</media-link
>
<media-link :blank="subItem.openWindow" :to="subItem.link" class="link"
>{{ subItem.linkText }}
</media-link>
</div>
</li>
</ul>
<router-link
v-if="hasMoreItemsForType(item.type, item.items)"
to="/mediacenter/handlungsfeldlist"
to="/media/handlungsfeldlist"
class="flex items-center"
>
<span>Alle anschauen</span>
@ -279,6 +276,7 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
.it-icon-hf {
color: blue;
}
.it-icon-hf > * {
@apply m-auto;
}

10
client/src/views/MediaCenterCategoryOverview.vue → client/src/views/MediaLibraryCategoryOverview.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { useMediaCenterStore } from "@/stores/mediaCenter";
import { useMediaLibraryStore } from "@/stores/mediaLibrary";
import * as log from "loglevel";
import { ref, watch } from "vue";
@ -56,7 +56,7 @@ const fields = [
},
];
const mediaStore = useMediaCenterStore();
const mediaStore = useMediaLibraryStore();
const dropdownSelected = ref(mediaStore.selectedLearningPath);
watch(dropdownSelected, (newValue) =>
@ -72,15 +72,15 @@ watch(dropdownSelected, (newValue) =>
<h1>Handlungsfelder</h1>
<!-- <ItDropdownSelect v-model="dropdownSelected" :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
</div>
<div v-if="mediaStore.mediaCenterPage">
<div v-if="mediaStore.mediaLibraryPage">
<ul class="grid gap-5 grid-cols-1 lg:grid-cols-4">
<li
v-for="cat in mediaStore.mediaCenterPage.children"
v-for="cat in mediaStore.mediaLibraryPage.children"
:key="cat.id"
class="bg-white p-4"
>
<router-link
:to="`/mediacenter/${mediaStore.mediaCenterPage.slug}/handlungsfelder/${cat.slug}`"
:to="`/media/${mediaStore.mediaLibraryPage.slug}/handlungsfelder/${cat.slug}`"
>
<img class="m-auto" :src="`/static/icons/demo/${cat.overview_icon}.svg`" />
<h3 class="text-base text-center">{{ cat.title }}</h3>

14
client/src/views/MediaCenterMainView.vue → client/src/views/MediaLibraryMainView.vue
View File

@ -1,12 +1,12 @@
<script setup lang="ts">
import OverviewCard from "@/components/mediaCenter/OverviewCard.vue";
import { useMediaCenterStore } from "@/stores/mediaCenter";
import OverviewCard from "@/components/mediaLibrary/OverviewCard.vue";
import { useMediaLibraryStore } from "@/stores/mediaLibrary";
import * as log from "loglevel";
import { ref, watch } from "vue";
log.debug("MediaMainView created");
const mediaStore = useMediaCenterStore();
const mediaStore = useMediaLibraryStore();
const dropdownSelected = ref(mediaStore.selectedLearningPath);
watch(dropdownSelected, (newValue) =>
@ -25,20 +25,20 @@ watch(dropdownSelected, (newValue) =>
<!-- :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
</div>
<OverviewCard
v-if="mediaStore.mediaCenterPage"
v-if="mediaStore.mediaLibraryPage"
title="Handlungsfelder"
call2-action="Anschauen"
:link="`/mediacenter/${mediaStore.mediaCenterPage.slug}/handlungsfelder`"
:link="`/media/${mediaStore.mediaLibraryPage.slug}/handlungsfelder`"
description="Finde alle Ressourcen der Handlungsfelder wie Lernmedien, Links und andere nützliche Informationen."
icon="handlungsfelder-overview"
class="mb-6"
>
</OverviewCard>
<OverviewCard
v-if="mediaStore.mediaCenterPage"
v-if="mediaStore.mediaLibraryPage"
title="Lernmedien"
call2-action="Anschauen"
:link="`/mediacenter/${mediaStore.mediaCenterPage.slug}/lernmedien`"
:link="`/media/${mediaStore.mediaLibraryPage.slug}/lernmedien`"
description="Finde eine vollständige Liste der Bücher und anderen Medien, auf die im Kurs verwiesen wird."
icon="lernmedien-overview"
class="mb-6"

12
client/src/views/MediaCenterView.vue → client/src/views/MediaLibraryView.vue
View File

@ -1,21 +1,21 @@
<script setup lang="ts">
import { useMediaCenterStore } from "@/stores/mediaCenter";
import { useMediaLibraryStore } from "@/stores/mediaLibrary";
import * as log from "loglevel";
import { onMounted } from "vue";
log.debug("MediaCenterView created");
log.debug("MediaLibraryView created");
const props = defineProps<{
mediaCenterPageSlug: string;
mediaLibraryPageSlug: string;
}>();
const mediaCenterStore = useMediaCenterStore();
const mediaLibraryStore = useMediaLibraryStore();
onMounted(async () => {
log.debug("MediaCenterView mounted", props.mediaCenterPageSlug);
log.debug("MediaLibraryView mounted", props.mediaLibraryPageSlug);
try {
await mediaCenterStore.loadMediaCenterPage(props.mediaCenterPageSlug);
await mediaLibraryStore.loadMediaLibraryPage(props.mediaLibraryPageSlug);
} catch (error) {
log.error(error);
}

9
client/src/views/MediaList.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import MediaLink from "@/components/mediaCenter/MediaLink.vue";
import MediaLink from "@/components/mediaLibrary/MediaLink.vue";
import HandlungsfeldLayout from "@/views/HandlungsfeldLayout.vue";
const data = {
@ -73,9 +73,9 @@ const data = {
</div>
</div>
<div class="">
<media-link :to="item.link" :blank="item.openWindow" class="link">{{
item.linkText
}}</media-link>
<media-link :to="item.link" :blank="item.openWindow" class="link"
>{{ item.linkText }}
</media-link>
</div>
</li>
</ul>
@ -89,6 +89,7 @@ const data = {
.it-icon-hf {
color: blue;
}
.it-icon-hf > * {
@apply m-auto;
}

2
server/vbv_lernwelt/media_library/tests/test_api.py
View File

@ -6,7 +6,7 @@ from vbv_lernwelt.course.creators.test_course import create_test_course
from vbv_lernwelt.media_library.models import MediaLibraryPage
class MediaCenterAPITestCase(APITestCase):
class MediaLibraryAPITestCase(APITestCase):
def setUp(self) -> None:
create_default_users()
create_test_course()