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">
|
<script setup lang="ts">
|
||||||
import LinkCard from "@/components/mediaLibrary/LinkCard.vue";
|
import LinkCard from "@/components/mediaLibrary/LinkCard.vue";
|
||||||
import MediaLink from "@/components/mediaLibrary/MediaLink.vue";
|
import MediaLink from "@/components/mediaLibrary/MediaLink.vue";
|
||||||
import MLCategoryLayout from "@/pages/mediaLibrary/MLCategoryLayout.vue";
|
|
||||||
import { useMediaLibraryStore } from "@/stores/mediaLibrary";
|
import { useMediaLibraryStore } from "@/stores/mediaLibrary";
|
||||||
import * as log from "loglevel";
|
import * as log from "loglevel";
|
||||||
import { computed } from "vue";
|
import { computed } from "vue";
|
||||||
|
|
@ -48,9 +47,21 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Teleport v-if="mediaStore.mediaLibraryPage && mediaCategory" to="body">
|
<div
|
||||||
<MLCategoryLayout>
|
v-if="mediaCategory"
|
||||||
<template #header>
|
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="flex justify-between">
|
||||||
<div class="lg:w-6/12">
|
<div class="lg:w-6/12">
|
||||||
<h3 class="font-normal text-large mb-3">Handlungsfeld</h3>
|
<h3 class="font-normal text-large mb-3">Handlungsfeld</h3>
|
||||||
|
|
@ -64,91 +75,89 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
<template #body>
|
</div>
|
||||||
<section class="mb-20 mt-8 lg:w-2/3">
|
<div class="container-large">
|
||||||
<h2 class="mb-4">{{ mediaCategory.description_title }}</h2>
|
<section class="mb-20 mt-8 lg:w-2/3">
|
||||||
<p class="mb-4">{{ mediaCategory.description_text }}</p>
|
<h2 class="mb-4">{{ mediaCategory.description_title }}</h2>
|
||||||
<ul>
|
<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
|
<li
|
||||||
v-for="item in mediaCategory.items"
|
v-for="mediaItem in getMaxDisplayItemsForType(
|
||||||
:key="item"
|
content_collection.value.contents[0].type,
|
||||||
class="mb-2 flex items-center"
|
content_collection.value.contents
|
||||||
|
)"
|
||||||
|
:key="mediaItem.id"
|
||||||
>
|
>
|
||||||
<it-icon-check
|
<LinkCard
|
||||||
class="h-8 w-8 text-sky-500 mr-4 flex-none"
|
v-if="displayAsCard(mediaItem.type)"
|
||||||
></it-icon-check>
|
:title="mediaItem.value.title"
|
||||||
{{ item.value }}
|
: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>
|
</li>
|
||||||
</ul>
|
</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>
|
</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>
|
</template>
|
||||||
</MLCategoryLayout>
|
</div>
|
||||||
</Teleport>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<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">
|
<script setup lang="ts">
|
||||||
import MediaLink from "@/components/mediaLibrary/MediaLink.vue";
|
import MediaLink from "@/components/mediaLibrary/MediaLink.vue";
|
||||||
import MLCategoryLayout from "@/pages/mediaLibrary/MLCategoryLayout.vue";
|
|
||||||
import { useMediaLibraryStore } from "@/stores/mediaLibrary";
|
import { useMediaLibraryStore } from "@/stores/mediaLibrary";
|
||||||
import * as log from "loglevel";
|
import * as log from "loglevel";
|
||||||
import { computed } from "vue";
|
import { computed } from "vue";
|
||||||
|
|
@ -35,44 +34,56 @@ const mediaList = computed(() => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Teleport v-if="mediaList" to="body">
|
<div
|
||||||
<MLCategoryLayout>
|
v-if="mediaCategory"
|
||||||
<template #header>
|
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>
|
<h1 class="mb-4">{{ mediaList.title }}</h1>
|
||||||
</template>
|
</div>
|
||||||
<template #body>
|
</div>
|
||||||
<section class="mb-20">
|
<div class="container-large">
|
||||||
<ul class="border-t">
|
<section class="mb-20">
|
||||||
<li
|
<ul class="border-t">
|
||||||
v-for="item in mediaList.contents"
|
<li
|
||||||
:key="item.id"
|
v-for="item in mediaList.contents"
|
||||||
class="flex items-center justify-between border-b py-4"
|
: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">
|
<div class="flex items-center justify-between">
|
||||||
<img class="mr-6 max-h-[70px]" :src="item.value.icon_url" />
|
<div v-if="item.value.icon_url">
|
||||||
</div>
|
<img class="mr-6 max-h-[70px]" :src="item.value.icon_url" />
|
||||||
<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="">
|
<div>
|
||||||
<media-link
|
<h4 class="text-bold">{{ item.value.title }}</h4>
|
||||||
:to="item.value.url"
|
<p v-if="item.value.description" class="mb-2">
|
||||||
:blank="item.value.open_window"
|
{{ item.value.description }}
|
||||||
class="link"
|
</p>
|
||||||
>{{ item.value.link_display_text }}
|
|
||||||
</media-link>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
</ul>
|
<div class="">
|
||||||
</section>
|
<media-link
|
||||||
</template>
|
:to="item.value.url"
|
||||||
</MLCategoryLayout>
|
:blank="item.value.open_window"
|
||||||
</Teleport>
|
class="link"
|
||||||
|
>{{ item.value.link_display_text }}
|
||||||
|
</media-link>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
|
||||||
|
|
@ -1,27 +1,15 @@
|
||||||
{
|
{
|
||||||
"extends": "@vue/tsconfig/tsconfig.web.json",
|
"extends": "@vue/tsconfig/tsconfig.web.json",
|
||||||
"include": [
|
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||||
"env.d.ts",
|
"exclude": ["src/**/__tests__/*"],
|
||||||
"src/**/*",
|
|
||||||
"src/**/*.vue"
|
|
||||||
],
|
|
||||||
"exclude": [
|
|
||||||
"src/**/__tests__/*"
|
|
||||||
],
|
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"lib": [
|
"lib": ["ES2021", "DOM", "DOM.Iterable"],
|
||||||
"ES2021",
|
|
||||||
"DOM",
|
|
||||||
"DOM.Iterable"
|
|
||||||
],
|
|
||||||
"composite": true,
|
"composite": true,
|
||||||
"strict": true,
|
"strict": true,
|
||||||
"allowJs": true,
|
"allowJs": true,
|
||||||
"baseUrl": ".",
|
"baseUrl": ".",
|
||||||
"paths": {
|
"paths": {
|
||||||
"@/*": [
|
"@/*": ["./src/*"]
|
||||||
"./src/*"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue