From 44b55d9bbbc22329e19a28d040e93a6194a88ef3 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Sun, 3 Nov 2024 11:21:44 +0100
Subject: [PATCH] navigation on collections and dynamic routing improvements

---
 components/CollectionDetail.vue    | 18 +++++++++
 components/ContentBuilder.vue      | 24 ++++++-----
 components/Header.vue              |  4 +-
 components/shared/Hero.vue         |  8 ++--
 pages/[...slug].vue                | 64 +++++++++++++++++++++---------
 pages/index.vue                    |  2 +-
 types/collection/article.ts        | 14 ++-----
 types/collection/baseCollection.ts | 12 ++++++
 types/collection/event.ts          |  5 +++
 types/collection/lookup.ts         |  9 +++++
 types/collection/operation.ts      |  5 +++
 11 files changed, 117 insertions(+), 48 deletions(-)
 create mode 100644 components/CollectionDetail.vue
 create mode 100644 types/collection/baseCollection.ts
 create mode 100644 types/collection/event.ts
 create mode 100644 types/collection/lookup.ts
 create mode 100644 types/collection/operation.ts

diff --git a/components/CollectionDetail.vue b/components/CollectionDetail.vue
new file mode 100644
index 0000000..a609ccf
--- /dev/null
+++ b/components/CollectionDetail.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="min-h-[calc(100vh-9rem)] container mx-auto py-12">
+    {{ data }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type SharedHero from "../types/component/sharedHero";
+import type { ComponentTypes } from "../types/component/baseComponent";
+import type Article from "../types/collection/article";
+import type Operation from "../types/collection/operation";
+import type Event from "../types/collection/event";
+
+defineProps({
+  data: Object as PropType<Article | Operation | Event>,
+});
+</script>
diff --git a/components/ContentBuilder.vue b/components/ContentBuilder.vue
index ca3b99e..3ad73aa 100644
--- a/components/ContentBuilder.vue
+++ b/components/ContentBuilder.vue
@@ -1,14 +1,16 @@
 <template>
-  <SharedHero v-if="hero" :data="hero" />
-  <div class="container mx-auto py-12 min-h-[50vh]">
-    <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" />
-      <DynamicZoneEmphasiseArticle v-else-if="item.__component == 'dynamic-zone.emphasise-article'" :data="item" />
-      <DynamicZoneFullImage v-else-if="item.__component == 'dynamic-zone.full-image'" :data="item" />
-      <DynamicZoneFullText v-else-if="item.__component == 'dynamic-zone.full-text'" :data="item" />
-      <DynamicZoneGallery v-else-if="item.__component == 'dynamic-zone.gallery'" :data="item" />
-      <SharedList v-else-if="item.__component == 'shared.list'" :data="item" />
+  <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]">
+      <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" />
+        <DynamicZoneEmphasiseArticle v-else-if="item.__component == 'dynamic-zone.emphasise-article'" :data="item" />
+        <DynamicZoneFullImage v-else-if="item.__component == 'dynamic-zone.full-image'" :data="item" />
+        <DynamicZoneFullText v-else-if="item.__component == 'dynamic-zone.full-text'" :data="item" />
+        <DynamicZoneGallery v-else-if="item.__component == 'dynamic-zone.gallery'" :data="item" />
+        <SharedList v-else-if="item.__component == 'shared.list'" :data="item" />
+      </div>
     </div>
   </div>
 </template>
@@ -19,7 +21,7 @@ import type SharedHero from "../types/component/sharedHero";
 import type { ComponentTypes } from "../types/component/baseComponent";
 
 defineProps({
-  hero: Object as PropType<SharedHero>,
+  hero: { type: Object as PropType<SharedHero>, required: false, default: null },
   content: Array<ComponentTypes>,
 });
 </script>
diff --git a/components/Header.vue b/components/Header.vue
index 674ad96..1b89705 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -9,7 +9,7 @@
           primary-link
           v-for="link in navbar.navbar_items"
           :key="link.id"
-          :to="`/${link.URL}/${link.default_active_child}`"
+          :to="`/${link.URL}/${link.default_active_child ?? ''}`"
           :class="link.URL == params?.[0] ? 'active' : ''"
         >
           {{ link.name }}
@@ -26,7 +26,7 @@
         v-for="sublink in navbar_sub_items"
         :key="sublink.id"
         :to="`/${params?.[0]}/${sublink.URL}`"
-        :class="sublink.URL == params?.[1] ? 'active' : ''"
+        :class="sublink.URL == params?.[1] && !params[2] ? 'active' : ''"
       >
         {{ sublink.name }}
       </NuxtLink>
diff --git a/components/shared/Hero.vue b/components/shared/Hero.vue
index 6c201c0..1920ede 100644
--- a/components/shared/Hero.vue
+++ b/components/shared/Hero.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="w-full max-h-60 h-60">
+  <div class="flex flex-col w-full max-h-72 h-72 overflow-hidden">
     <NuxtPicture
       preload
       loading="lazy"
-      class="w-full h-full object-cover object-center"
+      class="w-full h-60 object-cover object-center"
       :src="baseUrl + data?.banner.url"
-      :imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
+      :imgAttrs="{ class: 'w-full h-60 object-cover object-center' }"
     />
-    <div primary class="h-12 w-full px-12 justify-center items-center gap-5 flex">
+    <div primary class="h-12 min-h-12 w-full px-12 justify-center items-center gap-5 flex">
       <p>{{ data?.title }}</p>
     </div>
   </div>
diff --git a/pages/[...slug].vue b/pages/[...slug].vue
index b7c3dfe..d44de09 100644
--- a/pages/[...slug].vue
+++ b/pages/[...slug].vue
@@ -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>
diff --git a/pages/index.vue b/pages/index.vue
index 81e519f..59f6d58 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,6 @@
 <template>
   <NuxtLayout name="landing">
-    <ContentBuilder class="min-h-[calc(100vh-9rem)] w-full" :content="content" />
+    <ContentBuilder :content="content" />
   </NuxtLayout>
 </template>
 
diff --git a/types/collection/article.ts b/types/collection/article.ts
index 5be8f1e..3f59a6f 100644
--- a/types/collection/article.ts
+++ b/types/collection/article.ts
@@ -1,13 +1,5 @@
-export default interface Article {
-  id: number;
-  documentId: string;
-  title: string;
-  description: string;
-  slug: string;
+import type BaseCollection from "./baseCollection";
+
+export default interface Article extends BaseCollection {
   content: Array<{ type: string; children: Array<{ type: string; text: string }>; level?: number }>;
-  date: string;
-  createdAt: string;
-  updatedAt: string;
-  publishedAt: string;
-  locale: string;
 }
diff --git a/types/collection/baseCollection.ts b/types/collection/baseCollection.ts
new file mode 100644
index 0000000..a4408d8
--- /dev/null
+++ b/types/collection/baseCollection.ts
@@ -0,0 +1,12 @@
+export default interface BaseCollection {
+  id: number;
+  documentId: string;
+  title: string;
+  description: string;
+  slug: string;
+  date: string;
+  createdAt: string;
+  updatedAt: string;
+  publishedAt: string;
+  locale: string;
+}
diff --git a/types/collection/event.ts b/types/collection/event.ts
new file mode 100644
index 0000000..6206029
--- /dev/null
+++ b/types/collection/event.ts
@@ -0,0 +1,5 @@
+import type BaseCollection from "./baseCollection";
+
+export default interface Event extends BaseCollection {
+  content: Array<{ type: string; children: Array<{ type: string; text: string }>; level?: number }>;
+}
diff --git a/types/collection/lookup.ts b/types/collection/lookup.ts
new file mode 100644
index 0000000..8501cf8
--- /dev/null
+++ b/types/collection/lookup.ts
@@ -0,0 +1,9 @@
+export default interface Lookup {
+  id: number;
+  documentId: string;
+  collection: string;
+  reference: string;
+  createdAt: Date;
+  updatedAt: Date;
+  publishedAt: Date;
+}
diff --git a/types/collection/operation.ts b/types/collection/operation.ts
new file mode 100644
index 0000000..db197d9
--- /dev/null
+++ b/types/collection/operation.ts
@@ -0,0 +1,5 @@
+import type BaseCollection from "./baseCollection";
+
+export default interface Operation extends BaseCollection {
+  content: Array<{ type: string; children: Array<{ type: string; text: string }>; level?: number }>;
+}