component formatting and types

This commit is contained in:
Julian Krauser 2025-02-14 13:57:55 +01:00
parent c2a7d15eeb
commit ce745c06e5
60 changed files with 464 additions and 301 deletions

View file

@ -9,27 +9,32 @@
<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 Vehicle from "../types/collection/vehicle";
import type Page from "../types/collection/page";
import type NavbarSubItem from "../types/component/itemsNavbarSubItem";
import type Global from "../types/single/global";
import provideGlobal from "../composables/provideGlobal";
const {
params: { slug: params },
} = useRoute();
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 = 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 { navbar } = await provideGlobal();
const navbar_items = computed(() => {
return navbar?.navbar_items ?? [];
});
const navbar_sub_items = computed(() => {
return navbar_items.value.find((ni) => ni.URL == params[0])?.navbar_sub_items ?? [];
});
const active_item = computed(() => {
return navbar_items.value.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(() => {
return active_sub_item.value?.documentId ?? active_item.value?.documentId ?? "";
});
const { data: pages } = await useAsyncData("pages", () =>
findOne<Page | Array<Page>>("pages", active_page_id.value, {
@ -47,32 +52,48 @@ const { data: pages } = await useAsyncData("pages", () =>
},
})
);
const page = ref<Page | undefined>(Array.isArray(pages.value?.data) ? pages.value.data[0] : pages.value?.data);
const page = computed(() => {
return Array.isArray(pages.value?.data) ? pages.value.data[0] : pages.value?.data;
});
let detail = ref<Article | Operation | Event | Vehicle | 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 | Vehicle>(activeLookup?.collection ?? "", {
populate: "*",
filters: {
slug: params[2] ?? params[1],
},
})
);
detail.value = details.value?.data[0];
const searchDetail = computed(() => {
if (!active_sub_item.value) return params[1];
return params[2];
});
if (searchDetail.value) {
let collectionOfDetail = [
...new Set(
page.value?.content
.filter((c) => c.__component == "shared.list")
.filter((c) => c.lookup.enable_detail)
.map((c) => c.lookup.collection)
),
];
for (const element of collectionOfDetail) {
const { data: details } = await useAsyncData("detail", () =>
find<Article | Operation | Event | Vehicle>(element ?? "", {
populate: "*",
filters: {
slug: params[2] ?? params[1],
},
})
);
if (details.value?.data[0]) {
detail.value = details.value?.data[0];
break;
}
}
}
const notFound = computed(() => {
if (searchDetail) return !detail.value;
if (searchDetail.value) return !detail.value;
else return active_page_id.value == "" && !page.value?.content && !page.value?.hero;
});
const showContentBuilder = computed(() => {
if (searchDetail) return !detail.value;
if (searchDetail.value) return !detail.value;
else return !!page.value?.content || !!page.value?.hero;
});
</script>