Ehrenamt/ff-webpage
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases 5 Packages Wiki Activity Actions

list and emphasize

Browse source
This commit is contained in:
Julian Krauser 2024-11-05 14:41:48 +01:00
parent af9e4557d1
commit f38f663608
12 changed files with 355 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/ContentBuilder.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="min-h-[calc(100vh-9rem)] w-full">
<SharedHero v-if="hero" :data="hero" />
<div class="container mx-auto py-12 min-h-[50vh] flex flex-col gap-2">
<div class="container mx-auto py-12 px-2 min-h-[50vh] flex flex-col gap-2">
<div v-for="item in content" class="contents">
<DynamicZoneColumnImageText v-if="item.__component == 'dynamic-zone.column-image-text'" :data="item" />
<DynamicZoneDualColumnText v-else-if="item.__component == 'dynamic-zone.dual-column-text'" :data="item" />

36
components/Header.vue
View file

@ -1,10 +1,35 @@
<template>
<div class="sticky top-0 h-fit">
<div primary class="h-24 min-h-fit w-full px-12 py-2.5 justify-between items-center gap-5 flex">
<div
primary
class="h-24 min-h-fit w-full px-4 md:px-12 py-2.5 justify-between items-center gap-5 flex overflow-hidden"
>
<NuxtLink to="/">
<img class="h-16 w-fit" :src="baseUrl + navbar.logo.url" />
<img class="h-16 w-fit min-w-fit" :src="baseUrl + navbar.logo.url" />
</NuxtLink>
<div class="self-stretch p-2.5 justify-center items-center gap-7 flex">
<div class="md:hidden">
<svg
v-if="!open"
viewBox="0 0 24 24"
class="h-10 w-10 cursor-pointer fill-none stroke-2 stroke-white"
@click="open = !open"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<svg
v-else
viewBox="0 0 24 24"
class="h-10 w-10 cursor-pointer fill-none stroke-2 stroke-white"
@click="open = !open"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</div>
<div
class="w-fit max-w-full p-2.5 justify-center items-center gap-7 flex flex-col md:flex-row md:flex-wrap"
:class="open ? 'max-md:absolute top-24 left-0 max-md:w-full bg-primary' : 'max-md:hidden'"
>
<NuxtLink
primary-link
v-for="link in navbar.navbar_items"
@ -19,7 +44,7 @@
<div
v-if="navbar_sub_items && navbar_sub_items?.length != 0"
primary
class="h-fit min-h-fit w-full px-12 border-t-2 border-white justify-center items-center gap-5 flex"
class="h-fit min-h-fit w-full px-4 md:px-12 border-t-2 border-white justify-center items-center gap-5 flex flex-row max-md:flex-wrap"
>
<NuxtLink
primary-sublink
@ -27,6 +52,7 @@
:key="sublink.id"
:to="`/${params?.[0]}/${sublink.URL}`"
:class="sublink.URL == params?.[1] && !params[2] ? 'active' : ''"
class="w-fit"
>
{{ sublink.name }}
</NuxtLink>
@ -46,6 +72,8 @@ const { findOne } = useStrapi();
const { data: global } = await useAsyncData("global", () => findOne<Global>("global"));
const { navbar } = global.value?.data ?? ({} as Global);
const open = ref(false);
const navbar_sub_items = computed(() => {
return navbar.navbar_items.find((ni) => ni.URL == params?.[0])?.navbar_sub_items;
});

36
components/base/ListImageItem.vue
View file

@ -1,12 +1,46 @@
<template>
<p>ListImageItem: {{ data }}</p>
<NuxtLink
class="w-full sm:w-72 h-96 rounded-lg shadow-md border border-gray-200 flex-col justify-start items-start inline-flex overflow-hidden"
:class="allowNavigation ? '' : 'pointer-events-none'"
:to="`${urlOverwrite ?? $route.path}/${data?.slug}`"
>
<NuxtPicture
loading="lazy"
class="w-full h-56 object-cover object-center"
:src="baseUrl + data?.image?.url"
:imgAttrs="{ class: 'w-full h-56 object-cover object-center' }"
/>
<div class="w-full h-44 relative bg-white">
<div class="w-full h-full px-2.5 py-5 flex flex-col justify-start items-start gap-2.5">
<h1>{{ data?.title }}</h1>
<p v-if="data?.date" class="self-stretch grow shrink basis-0 text-[#5c5c5c]">
{{
new Date(data?.date ?? "").toLocaleString("de-DE", {
day: "2-digit",
month: "long",
year: "numeric",
minute: "2-digit",
hour: "2-digit",
})
}}
</p>
<p class="self-stretch grow shrink basis-0 text-[#5c5c5c]">
{{ data?.description }}
</p>
</div>
</div>
</NuxtLink>
</template>
<script setup lang="ts">
import type { PropType } from "vue";
import type BaseCollection from "~/types/collection/baseCollection";
const baseUrl = useStrapiUrl().replace("/api", "");
defineProps({
data: Object as PropType<BaseCollection>,
allowNavigation: { type: Boolean, default: false },
urlOverwrite: { type: String, default: undefined },
});
</script>

46
components/base/ListItem.vue
View file

@ -1,8 +1,45 @@
<template>
<p>
ListItem:
{{ data }}
<NuxtLink
class="w-full h-fit py-2 bg-white shadow-md border border-gray-200 rounded-md justify-start items-start flex"
:class="allowNavigation ? '' : 'pointer-events-none'"
:to="`${urlOverwrite ?? $route.path}/${data?.slug}`"
>
<h1 v-if="numberOverwrite != undefined" class="w-24 text-center text-black text-4xl my-auto">
{{ numberOverwrite }}.
</h1>
<h1 v-else class="w-24 text-center text-black text-4xl my-auto">
{{
new Date(data?.date ?? "").toLocaleString("de-DE", {
day: "2-digit",
})
}}.
</h1>
<div class="grow shrink basis-0 flex-col justify-center items-center flex">
<h1 class="w-full">{{ data?.title }}</h1>
<p v-if="numberOverwrite != undefined" class="w-full text-[#5c5c5c]">
{{
new Date(data?.date ?? "").toLocaleString("de-DE", {
day: "2-digit",
month: "long",
year: "numeric",
minute: "2-digit",
hour: "2-digit",
})
}}
</p>
<p v-else class="w-full text-[#5c5c5c]">
{{
new Date(data?.date ?? "").toLocaleString("de-DE", {
minute: "2-digit",
hour: "2-digit",
})
}}
</p>
<p class="w-full text-[#5c5c5c]">
{{ data?.description }}
</p>
</div>
</NuxtLink>
</template>
<script setup lang="ts">
@ -11,5 +48,8 @@ import type BaseCollection from "../../types/collection/baseCollection";
defineProps({
data: Object as PropType<BaseCollection>,
numberOverwrite: { type: Number, default: undefined },
allowNavigation: { type: Boolean, default: false },
urlOverwrite: { type: String, default: undefined },
});
</script>

2
components/dynamicZone/ColumnImageText.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="flex flex-row gap-4">
<div class="flex flex-col md:flex-row gap-4">
<NuxtPicture
loading="lazy"
class="w-1/2 min-w-[50%] h-fit object-cover object-center"

2
components/dynamicZone/DualColumnText.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="flex flex-row gap-4">
<div class="flex flex-col md:flex-row gap-4">
<FieldContent :data="data?.left_side" />
<FieldContent :data="data?.right_side" />
</div>

11
components/dynamicZone/EmphasiseArticle.vue
View file

@ -1,5 +1,14 @@
<template>
<p>{{ data }}</p>
<div class="w-full flex flex-col justify-center">
<h1 class="text-center">{{ data?.titel }}</h1>
<p class="text-center text-[#5c5c5c]">{{ data?.description }}</p>
<br />
<div class="flex gap-2 w-full max-w-4xl mx-auto flex-row flex-wrap justify-center">
<div v-for="item in data?.articles" :key="item.slug" class="contents">
<BaseListImageItem :data="item" :allow-navigation="true" :url-overwrite="data?.base_url" />
</div>
</div>
</div>
</template>
<script setup lang="ts">

2
components/dynamicZone/FullImage.vue
View file

@ -1,7 +1,7 @@
<template>
<NuxtPicture
loading="lazy"
class="w-1/2 min-w-[50%] h-fit object-cover object-center mx-auto"
class="w-full md:w-1/2 md:min-w-[50%] h-fit object-cover object-center mx-auto"
:src="baseUrl + data?.image.url"
:imgAttrs="{ class: 'w-full h-fit object-cover object-center' }"
/>

4
components/dynamicZone/Gallery.vue
View file

@ -3,9 +3,9 @@
<NuxtPicture
v-for="img in data?.images"
loading="lazy"
class="w-fit h-48 object-cover object-center"
class="w-full h-fit md:w-fit md:h-48 object-cover object-center"
:src="baseUrl + img.url"
:imgAttrs="{ class: 'w-fit h-48 object-cover object-center' }"
:imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
/>
</div>
</template>

230
components/shared/List.vue
View file

@ -1,7 +1,77 @@
<template>
<div v-for="item in collection" :key="item.slug" class="contents">
<BaseListImageItem v-if="data?.lookup.image_item" :data="item" />
<BaseListItem v-else :data="item" />
<div v-if="data?.lookup.date_list" class="flex flex-row justify-between w-full max-w-4xl mx-auto">
<svg
viewBox="0 0 24 24"
class="h-5 w-5 cursor-pointer fill-none stroke-2 stroke-black"
:class="allowLeft ? '' : 'pointer-events-none opacity-75'"
@click="changeTimedData(allowLeft ?? 0)"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
</svg>
<h1>{{ activeYear }}</h1>
<svg
viewBox="0 0 24 24"
class="h-5 w-5 cursor-pointer fill-none stroke-2 stroke-black"
:class="allowRight ? '' : 'pointer-events-none opacity-75'"
@click="changeTimedData(allowRight ?? 0)"
>
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
</div>
<div
class="flex gap-2 w-full max-w-4xl mx-auto"
:class="data?.lookup.image_item ? 'flex-row flex-wrap justify-center' : ' flex-col'"
>
<div v-for="(item, index) in collection" :key="item.slug" class="contents">
<BaseListImageItem v-if="data?.lookup.image_item" :data="item" :allow-navigation="data.enable_detail" />
<BaseListItem
v-else-if="data?.lookup"
:data="item"
:number-overwrite="data.lookup.numbered_item ? getNumber(index) : undefined"
:allow-navigation="data.enable_detail"
/>
</div>
</div>
<div v-if="data?.lookup.date_list" class="flex flex-row w-full justify-between items-center select-none pt-4">
<p class="text-sm font-normal text-gray-500">
Elemente <span class="font-semibold text-gray-900">{{ showingText }}</span> von
<span class="font-semibold text-gray-900">{{ entryCount }}</span>
</p>
<ul class="flex flex-row text-sm h-8">
<li
class="flex h-8 w-8 items-center justify-center text-gray-500 bg-white border border-gray-300 first:rounded-s-lg last:rounded-e-lg"
:class="[
currentPage > 1 ? 'cursor-pointer hover:bg-gray-100 hover:text-gray-700' : 'opacity-50 pointer-events-none',
]"
@click="changeTimedPage(currentPage - 1)"
>
<svg viewBox="0 0 24 24" class="h-5 w-4 cursor-pointer fill-none stroke-2 stroke-black">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
</svg>
</li>
<li
v-for="page in displayedPagesNumbers"
:key="page"
class="flex h-8 w-8 items-center justify-center text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 first:rounded-s-lg last:rounded-e-lg"
:class="[currentPage == page ? 'font-bold border-primary' : '', page != '.' ? ' cursor-pointer' : '']"
@click="changeTimedPage(page)"
>
{{ typeof page == "number" ? page + 1 : "..." }}
</li>
<li
class="flex h-8 w-8 items-center justify-center text-gray-500 bg-white border border-gray-300 first:rounded-s-lg last:rounded-e-lg"
:class="[
currentPage + 1 < pagination.pageCount
? 'cursor-pointer hover:bg-gray-100 hover:text-gray-700'
: 'opacity-50 pointer-events-none',
]"
@click="changeTimedPage(currentPage + 1)"
>
<svg viewBox="0 0 24 24" class="h-4 w-4 cursor-pointer fill-none stroke-2 stroke-black">
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
</li>
</ul>
</div>
</template>
@ -10,18 +80,166 @@ import type { PropType } from "vue";
import type SharedList from "../../types/component/sharedList";
import type BaseCollection from "~/types/collection/baseCollection";
interface Meta {
page: number;
pageSize: number;
pageCount: number;
total: number;
}
const baseUrl = useStrapiUrl().replace("/api", "");
const { find } = useStrapi();
const props = defineProps({
data: Object as PropType<SharedList>,
});
const collection = ref<Array<BaseCollection> | undefined>();
const years = ref<Array<number>>([]);
const pagination = ref<Meta>({ page: 0, pageSize: 0, pageCount: 0, total: 0 });
const activeYear = ref<number>(0);
if (props.data?.lookup.date_list) {
const { data: year } = await useAsyncData<Array<number>>("distinct-years", () =>
$fetch(`${baseUrl}/api/custom/${props.data?.lookup.collection}/distinct-years`)
);
years.value = year.value ?? [];
activeYear.value = years.value[0] ?? 0;
}
const { data: collections } = await useAsyncData("collection", () =>
find<BaseCollection>(props.data?.lookup.collection ?? "", {
populate: {
populate: "*",
...(props.data?.lookup?.date_list
? {
sort: "date:desc",
filters: {
date: {
$between: [`${activeYear.value}-01-01T00:00:00.000Z`, `${activeYear.value}-12-31T23:59:59.999Z`],
},
},
pagination: {
page: 1,
pageSize: 10,
withCount: true,
},
}
: {}),
})
);
const collection = ref<Array<BaseCollection> | undefined>(collections.value?.data);
collection.value = collections.value?.data;
pagination.value = (collections.value?.meta.pagination as unknown as {
page: number;
pageSize: number;
pageCount: number;
total: number;
}) ?? {
page: 0,
pageSize: 0,
pageCount: 0,
total: 0,
};
const numberOffset = computed(() => {
return (pagination.value.page - 1) * pagination.value.pageSize;
});
const allowRight = computed<number | undefined>(() => {
return years.value.filter((y) => y < activeYear.value).sort((a, b) => b - a)[0];
});
const allowLeft = computed(() => {
return years.value.filter((y) => y > activeYear.value).sort((a, b) => a - b)[0];
});
const currentPage = computed(() => pagination.value.page);
const entryCount = computed(() => pagination.value.total);
const showingStart = computed(() => (currentPage.value - 1) * pagination.value.pageSize);
const showingEnd = computed(() => {
let max = (currentPage.value - 1) * pagination.value.pageSize + pagination.value.pageSize;
if (max > entryCount.value) max = entryCount.value;
return max;
});
const showingText = computed(() => `${entryCount.value != 0 ? showingStart.value + 1 : 0} - ${showingEnd.value}`);
const displayedPagesNumbers = computed(() => {
let stateOfPush = false;
return [...new Array(pagination.value.pageCount)].reduce((acc, curr, index) => {
if (
index <= 1 ||
index >= pagination.value.pageCount - 2 ||
(currentPage.value - 1 <= index && index <= currentPage.value + 1)
) {
acc.push(index);
stateOfPush = false;
return acc;
}
if (stateOfPush == true) return acc;
acc.push(".");
stateOfPush = true;
return acc;
}, []);
});
function getNumber(index: number): number {
if (props.data?.lookup.inverse_count) {
return pagination.value.pageCount - numberOffset.value - index + 1;
} else {
return numberOffset.value + index + 1;
}
}
async function changeTimedData(year: number) {
activeYear.value = year;
const data = await find<BaseCollection>(props.data?.lookup.collection ?? "", {
sort: "date:desc",
filters: {
date: {
$between: [`${activeYear.value}-01-01T00:00:00.000Z`, `${activeYear.value}-12-31T23:59:59.999Z`],
},
},
pagination: {
page: 1,
pageSize: 10,
withCount: true,
},
});
collection.value = data?.data;
pagination.value = (data?.meta.pagination as unknown as {
page: number;
pageSize: number;
pageCount: number;
total: number;
}) ?? {
page: 0,
pageSize: 0,
pageCount: 0,
total: 0,
};
}
async function changeTimedPage(page: number = 1) {
const data = await find<BaseCollection>(props.data?.lookup.collection ?? "", {
sort: "date:desc",
filters: {
date: {
$between: [`${activeYear.value}-01-01T00:00:00.000Z`, `${activeYear.value}-12-31T23:59:59.999Z`],
},
},
pagination: {
page,
pageSize: 10,
withCount: true,
},
});
collection.value = data?.data;
pagination.value = (data?.meta.pagination as unknown as {
page: number;
pageSize: number;
pageCount: number;
total: number;
}) ?? {
page: 0,
pageSize: 0,
pageCount: 0,
total: 0,
};
}
</script>

2
types/collection/lookup.ts
View file

@ -4,6 +4,8 @@ export default interface Lookup {
collection: string;
image_item: boolean;
date_list: boolean;
numbered_item: boolean;
inverse_count: boolean;
reference: string;
createdAt: string;
updatedAt: string;

1
types/component/dynamicZoneEmphasiseArticle.ts
View file

@ -6,4 +6,5 @@ export default interface DynamicZoneEmphasiseArticle extends BaseComponent {
titel: string;
description: string;
articles: Array<Article>;
base_url: string;
}