Add back links to media library frontend
This commit is contained in:
Daniel Egger
parent
3c386f31ca
commit
d9d741f4c6
|
|
@ -1,7 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import LinkCard from "@/components/mediaLibrary/LinkCard.vue";
|
||||
import MediaLink from "@/components/mediaLibrary/MediaLink.vue";
|
||||
import MLCategoryLayout from "@/pages/mediaLibrary/MLCategoryLayout.vue";
|
||||
import { useMediaLibraryStore } from "@/stores/mediaLibrary";
|
||||
import * as log from "loglevel";
|
||||
import { computed } from "vue";
|
||||
|
|
@ -48,9 +47,21 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport v-if="mediaStore.mediaLibraryPage && mediaCategory" to="body">
|
||||
<MLCategoryLayout>
|
||||
<template #header>
|
||||
<div
|
||||
v-if="mediaCategory"
|
||||
class="fixed top-0 overflow-y-scroll bg-white h-full w-full"
|
||||
>
|
||||
<div class="bg-gray-200">
|
||||
<div class="container-large">
|
||||
<nav>
|
||||
<a
|
||||
class="block my-9 cursor-pointer flex items-center"
|
||||
:href="`${mediaStore.mediaLibraryPage.frontend_url}/category`"
|
||||
>
|
||||
<it-icon-arrow-left />
|
||||
<span>zurück</span></a
|
||||
>
|
||||
</nav>
|
||||
<div class="flex justify-between">
|
||||
<div class="lg:w-6/12">
|
||||
<h3 class="font-normal text-large mb-3">Handlungsfeld</h3>
|
||||
|
|
@ -64,91 +75,89 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
<section class="mb-20 mt-8 lg:w-2/3">
|
||||
<h2 class="mb-4">{{ mediaCategory.description_title }}</h2>
|
||||
<p class="mb-4">{{ mediaCategory.description_text }}</p>
|
||||
<ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-large">
|
||||
<section class="mb-20 mt-8 lg:w-2/3">
|
||||
<h2 class="mb-4">{{ mediaCategory.description_title }}</h2>
|
||||
<p class="mb-4">{{ mediaCategory.description_text }}</p>
|
||||
<ul>
|
||||
<li
|
||||
v-for="item in mediaCategory.items"
|
||||
:key="item"
|
||||
class="mb-2 flex items-center"
|
||||
>
|
||||
<it-icon-check class="h-8 w-8 text-sky-500 mr-4 flex-none"></it-icon-check>
|
||||
{{ item.value }}
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<template
|
||||
v-for="content_collection in mediaCategory.body"
|
||||
:key="content_collection.value.title"
|
||||
>
|
||||
<section v-if="content_collection.value?.contents?.length" class="mb-20">
|
||||
<h2 class="mb-4">{{ content_collection.value.title }}</h2>
|
||||
<p class="mb-4 lg:w-2/3">
|
||||
{{ content_collection.value.description }}
|
||||
</p>
|
||||
<ul
|
||||
:class="{
|
||||
'grid gap-4 grid-cols-1 lg:grid-cols-2': displayAsCard(
|
||||
content_collection.value.contents[0].type
|
||||
),
|
||||
'border-t': !displayAsCard(content_collection.value.contents[0].type),
|
||||
'mb-6': hasMoreItemsForType(
|
||||
content_collection.value.contents[0].type,
|
||||
content_collection.value.contents
|
||||
),
|
||||
}"
|
||||
>
|
||||
<li
|
||||
v-for="item in mediaCategory.items"
|
||||
:key="item"
|
||||
class="mb-2 flex items-center"
|
||||
v-for="mediaItem in getMaxDisplayItemsForType(
|
||||
content_collection.value.contents[0].type,
|
||||
content_collection.value.contents
|
||||
)"
|
||||
:key="mediaItem.id"
|
||||
>
|
||||
<it-icon-check
|
||||
class="h-8 w-8 text-sky-500 mr-4 flex-none"
|
||||
></it-icon-check>
|
||||
{{ item.value }}
|
||||
<LinkCard
|
||||
v-if="displayAsCard(mediaItem.type)"
|
||||
:title="mediaItem.value.title"
|
||||
:icon="mediaItem.value.icon_url"
|
||||
:description="mediaItem.value.description"
|
||||
:url="mediaItem.value.url"
|
||||
:link-text="mediaItem.value.link_display_text"
|
||||
:open-window="mediaItem.value.open_window"
|
||||
/>
|
||||
<div v-else class="flex items-center justify-between border-b py-4">
|
||||
<h4 class="text-bold">{{ mediaItem.value.title }}</h4>
|
||||
<media-link
|
||||
:blank="mediaItem.value.open_window"
|
||||
:to="mediaItem.value.url"
|
||||
class="link"
|
||||
>{{ mediaItem.value.link_display_text }}
|
||||
</media-link>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<router-link
|
||||
v-if="
|
||||
hasMoreItemsForType(
|
||||
content_collection.value.contents[0].type,
|
||||
content_collection.value.contents
|
||||
)
|
||||
"
|
||||
:to="`${mediaCategory.frontend_url}/media`"
|
||||
class="flex items-center"
|
||||
>
|
||||
<span>Alle anschauen</span>
|
||||
<it-icon-arrow-right></it-icon-arrow-right>
|
||||
</router-link>
|
||||
</section>
|
||||
|
||||
<template
|
||||
v-for="content_collection in mediaCategory.body"
|
||||
:key="content_collection.value.title"
|
||||
>
|
||||
<section v-if="content_collection.value?.contents?.length" class="mb-20">
|
||||
<h2 class="mb-4">{{ content_collection.value.title }}</h2>
|
||||
<p class="mb-4 lg:w-2/3">
|
||||
{{ content_collection.value.description }}
|
||||
</p>
|
||||
<ul
|
||||
:class="{
|
||||
'grid gap-4 grid-cols-1 lg:grid-cols-2': displayAsCard(
|
||||
content_collection.value.contents[0].type
|
||||
),
|
||||
'border-t': !displayAsCard(content_collection.value.contents[0].type),
|
||||
'mb-6': hasMoreItemsForType(
|
||||
content_collection.value.contents[0].type,
|
||||
content_collection.value.contents
|
||||
),
|
||||
}"
|
||||
>
|
||||
<li
|
||||
v-for="mediaItem in getMaxDisplayItemsForType(
|
||||
content_collection.value.contents[0].type,
|
||||
content_collection.value.contents
|
||||
)"
|
||||
:key="mediaItem.id"
|
||||
>
|
||||
<LinkCard
|
||||
v-if="displayAsCard(mediaItem.type)"
|
||||
:title="mediaItem.value.title"
|
||||
:icon="mediaItem.value.icon_url"
|
||||
:description="mediaItem.value.description"
|
||||
:url="mediaItem.value.url"
|
||||
:link-text="mediaItem.value.link_display_text"
|
||||
:open-window="mediaItem.value.open_window"
|
||||
/>
|
||||
<div v-else class="flex items-center justify-between border-b py-4">
|
||||
<h4 class="text-bold">{{ mediaItem.value.title }}</h4>
|
||||
<media-link
|
||||
:blank="mediaItem.value.open_window"
|
||||
:to="mediaItem.value.url"
|
||||
class="link"
|
||||
>{{ mediaItem.value.link_display_text }}
|
||||
</media-link>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<router-link
|
||||
v-if="
|
||||
hasMoreItemsForType(
|
||||
content_collection.value.contents[0].type,
|
||||
content_collection.value.contents
|
||||
)
|
||||
"
|
||||
:to="`${mediaCategory.frontend_url}/media`"
|
||||
class="flex items-center"
|
||||
>
|
||||
<span>Alle anschauen</span>
|
||||
<it-icon-arrow-right></it-icon-arrow-right>
|
||||
</router-link>
|
||||
</section>
|
||||
</template>
|
||||
</template>
|
||||
</MLCategoryLayout>
|
||||
</Teleport>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -1,39 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div class="fixed top-0 overflow-y-scroll bg-white h-full w-full">
|
||||
<div class="bg-gray-200">
|
||||
<div class="container-large">
|
||||
<nav>
|
||||
<a
|
||||
class="block my-9 cursor-pointer flex items-center"
|
||||
@click="router.go(-1)"
|
||||
>
|
||||
<it-icon-arrow-left />
|
||||
<span>zurück</span></a
|
||||
>
|
||||
</nav>
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-large">
|
||||
<slot name="body"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.it-icon-hf {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.it-icon-hf > * {
|
||||
@apply m-auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import MediaLink from "@/components/mediaLibrary/MediaLink.vue";
|
||||
import MLCategoryLayout from "@/pages/mediaLibrary/MLCategoryLayout.vue";
|
||||
import { useMediaLibraryStore } from "@/stores/mediaLibrary";
|
||||
import * as log from "loglevel";
|
||||
import { computed } from "vue";
|
||||
|
|
@ -35,44 +34,56 @@ const mediaList = computed(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport v-if="mediaList" to="body">
|
||||
<MLCategoryLayout>
|
||||
<template #header>
|
||||
<div
|
||||
v-if="mediaCategory"
|
||||
class="fixed top-0 overflow-y-scroll bg-white h-full w-full"
|
||||
>
|
||||
<div class="bg-gray-200">
|
||||
<div class="container-large">
|
||||
<nav>
|
||||
<a
|
||||
class="block my-9 cursor-pointer flex items-center"
|
||||
:href="mediaStore.mediaLibraryPage.frontend_url"
|
||||
>
|
||||
<it-icon-arrow-left />
|
||||
<span>zurück</span></a
|
||||
>
|
||||
</nav>
|
||||
<h1 class="mb-4">{{ mediaList.title }}</h1>
|
||||
</template>
|
||||
<template #body>
|
||||
<section class="mb-20">
|
||||
<ul class="border-t">
|
||||
<li
|
||||
v-for="item in mediaList.contents"
|
||||
:key="item.id"
|
||||
class="flex items-center justify-between border-b py-4"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div v-if="item.value.icon_url">
|
||||
<img class="mr-6 max-h-[70px]" :src="item.value.icon_url" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-bold">{{ item.value.title }}</h4>
|
||||
<p v-if="item.value.description" class="mb-2">
|
||||
{{ item.value.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-large">
|
||||
<section class="mb-20">
|
||||
<ul class="border-t">
|
||||
<li
|
||||
v-for="item in mediaList.contents"
|
||||
:key="item.id"
|
||||
class="flex items-center justify-between border-b py-4"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div v-if="item.value.icon_url">
|
||||
<img class="mr-6 max-h-[70px]" :src="item.value.icon_url" />
|
||||
</div>
|
||||
<div class="">
|
||||
<media-link
|
||||
:to="item.value.url"
|
||||
:blank="item.value.open_window"
|
||||
class="link"
|
||||
>{{ item.value.link_display_text }}
|
||||
</media-link>
|
||||
<div>
|
||||
<h4 class="text-bold">{{ item.value.title }}</h4>
|
||||
<p v-if="item.value.description" class="mb-2">
|
||||
{{ item.value.description }}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</template>
|
||||
</MLCategoryLayout>
|
||||
</Teleport>
|
||||
</div>
|
||||
<div class="">
|
||||
<media-link
|
||||
:to="item.value.url"
|
||||
:blank="item.value.open_window"
|
||||
class="link"
|
||||
>{{ item.value.link_display_text }}
|
||||
</media-link>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -1,27 +1,15 @@
|
|||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.web.json",
|
||||
"include": [
|
||||
"env.d.ts",
|
||||
"src/**/*",
|
||||
"src/**/*.vue"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/__tests__/*"
|
||||
],
|
||||
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||
"exclude": ["src/**/__tests__/*"],
|
||||
"compilerOptions": {
|
||||
"lib": [
|
||||
"ES2021",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"lib": ["ES2021", "DOM", "DOM.Iterable"],
|
||||
"composite": true,
|
||||
"strict": true,
|
||||
"allowJs": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./src/*"
|
||||
]
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue