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

navigation on collections and dynamic routing improvements

Browse source
This commit is contained in:
Julian Krauser 2024-11-03 11:21:44 +01:00
parent 5c56af0dad
commit 44b55d9bbb
11 changed files with 117 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

64
pages/[...slug].vue
View file

@ -1,41 +1,37 @@
<template>
<NuxtLayout name="default">
<NotFound v-if="active_page_id == ''" />
<ContentBuilder v-else class="min-h-[calc(100vh-9rem)] w-full" :hero="hero" :content="content" />
<NotFound v-if="notFound" />
<ContentBuilder v-else-if="showContentBuilder" :hero="page?.hero" :content="page?.content" />
<CollectionDetail v-else :data="detail" />
</NuxtLayout>
</template>
<script setup lang="ts">
import type Article from "../types/collection/article";
import type Event from "../types/collection/event";
import type Lookup from "../types/collection/lookup";
import type Operation from "../types/collection/operation";
import type Page from "../types/collection/page";
import type NavbarSubItem from "../types/component/itemsNavbarSubItem";
import type Global from "../types/single/global";
const {
params: { slug: params },
} = useRoute();
const baseUrl = useStrapiUrl().replace("/api", "");
const { findOne } = useStrapi();
const { findOne, find } = useStrapi();
const { data: global } = await useAsyncData("global", () => findOne<Global>("global"));
const {
navbar: { navbar_items },
} = global.value?.data ?? ({} as Global);
const navbar_sub_items = computed(() => {
return navbar_items.find((ni) => ni.URL == params[0])?.navbar_sub_items ?? [];
});
const active_item = computed(() => {
return navbar_items.find((ni) => ni.URL == params[0])?.page;
});
const active_sub_item = computed(() => {
return navbar_sub_items.value.find((si) => si.URL == params[1])?.page;
});
const active_page_id = computed<string>(() => {
return active_sub_item.value?.documentId ?? active_item.value?.documentId ?? "";
});
const navbar_sub_items = ref<NavbarSubItem[]>(navbar_items.find((ni) => ni.URL == params[0])?.navbar_sub_items ?? []);
const active_item = ref<Page | null | undefined>(navbar_items.find((ni) => ni.URL == params[0])?.page);
const active_sub_item = ref<Page | null | undefined>(navbar_sub_items.value.find((si) => si.URL == params[1])?.page);
const active_page_id = ref<string>(active_sub_item.value?.documentId ?? active_item.value?.documentId ?? "");
const { data: pages } = await useAsyncData("pages", () =>
findOne<Page>("pages", active_page_id.value, {
findOne<Page | Array<Page>>("pages", active_page_id.value, {
populate: {
populate: "*",
content: {
@ -45,7 +41,37 @@ const { data: pages } = await useAsyncData("pages", () =>
populate: "*",
},
},
filters: {
...(active_page_id.value == "" ? { slug: params[0] } : {}),
},
})
);
const { content, hero } = pages.value?.data ?? {};
const page = ref<Page | undefined>(Array.isArray(pages.value?.data) ? pages.value.data[0] : pages.value?.data);
let detail = ref<Article | Operation | Event | undefined>(undefined);
const searchDetail = params[2] || (params[1] && navbar_sub_items.value.length == 0);
if (searchDetail) {
const paramsFind = params[2] ? [params[0], params[1]] : [params[0]];
const { data: lookup } = await useAsyncData("lookup", () => find<Lookup>("collection-lookups"));
const activeLookup: Lookup | undefined = lookup.value?.data.find((l) => paramsFind.includes(l.reference));
const { data: details } = await useAsyncData("detail", () =>
find<Article | Operation | Event>(activeLookup?.collection ?? "", {
populate: "*",
filters: {
slug: params[2] ?? params[1],
},
})
);
detail.value = details.value?.data[0];
}
const notFound = computed(() => {
if (searchDetail) return !detail.value;
else return active_page_id.value == "" && !page.value?.content && !page.value?.hero;
});
const showContentBuilder = computed(() => {
if (searchDetail) return !detail.value;
else return !!page.value?.content || !!page.value?.hero;
});
</script>

2
pages/index.vue
View file

@ -1,6 +1,6 @@
<template>
<NuxtLayout name="landing">
<ContentBuilder class="min-h-[calc(100vh-9rem)] w-full" :content="content" />
<ContentBuilder :content="content" />
</NuxtLayout>
</template>