From 4ea0f9b5a12546c8ccd9ed1ae5d945ff5d49cf4a Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Sun, 3 Nov 2024 15:34:48 +0100
Subject: [PATCH] vehicle and base list items

---
 components/CollectionDetail.vue    |  3 ++-
 components/base/ListImageItem.vue  | 12 ++++++++++++
 components/base/ListItem.vue       | 15 +++++++++++++++
 components/shared/List.vue         | 19 +++++++++++++++++--
 pages/[...slug].vue                |  5 +++--
 types/collection/baseCollection.ts |  6 +++---
 types/collection/lookup.ts         |  1 +
 types/collection/vehicle.ts        |  6 ++++++
 types/component/sharedList.ts      |  3 ++-
 9 files changed, 61 insertions(+), 9 deletions(-)
 create mode 100644 components/base/ListImageItem.vue
 create mode 100644 components/base/ListItem.vue
 create mode 100644 types/collection/vehicle.ts

diff --git a/components/CollectionDetail.vue b/components/CollectionDetail.vue
index 84e8760..c58b008 100644
--- a/components/CollectionDetail.vue
+++ b/components/CollectionDetail.vue
@@ -48,10 +48,11 @@ import type { PropType } from "vue";
 import type Article from "../types/collection/article";
 import type Operation from "../types/collection/operation";
 import type Event from "../types/collection/event";
+import type Vehicle from "../types/collection/vehicle";
 
 const baseUrl = useStrapiUrl().replace("/api", "");
 
 defineProps({
-  data: Object as PropType<Article | Operation | Event>,
+  data: Object as PropType<Article | Operation | Event | Vehicle>,
 });
 </script>
diff --git a/components/base/ListImageItem.vue b/components/base/ListImageItem.vue
new file mode 100644
index 0000000..5fe27f0
--- /dev/null
+++ b/components/base/ListImageItem.vue
@@ -0,0 +1,12 @@
+<template>
+  <p>ListImageItem: {{ data }}</p>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type BaseCollection from "~/types/collection/baseCollection";
+
+defineProps({
+  data: Object as PropType<BaseCollection>,
+});
+</script>
diff --git a/components/base/ListItem.vue b/components/base/ListItem.vue
new file mode 100644
index 0000000..d9d2a5a
--- /dev/null
+++ b/components/base/ListItem.vue
@@ -0,0 +1,15 @@
+<template>
+  <p>
+    ListItem:
+    {{ data }}
+  </p>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type BaseCollection from "../../types/collection/baseCollection";
+
+defineProps({
+  data: Object as PropType<BaseCollection>,
+});
+</script>
diff --git a/components/shared/List.vue b/components/shared/List.vue
index 93d63fb..1121c16 100644
--- a/components/shared/List.vue
+++ b/components/shared/List.vue
@@ -1,12 +1,27 @@
 <template>
-  <p>{{ data }}</p>
+  <div v-for="item in collection" :key="item.slug" class="contents">
+    <BaseListImageItem v-if="data?.lookup.imageItem" :data="item" />
+    <BaseListItem v-else :data="item" />
+  </div>
 </template>
 
 <script setup lang="ts">
 import type { PropType } from "vue";
 import type SharedList from "../../types/component/sharedList";
+import type BaseCollection from "~/types/collection/baseCollection";
 
-defineProps({
+const { find } = useStrapi();
+
+const props = defineProps({
   data: Object as PropType<SharedList>,
 });
+
+const { data: collections } = await useAsyncData("collection", () =>
+  find<BaseCollection>(props.data?.lookup.collection ?? "", {
+    populate: {
+      populate: "*",
+    },
+  })
+);
+const collection = ref<Array<BaseCollection> | undefined>(collections.value?.data);
 </script>
diff --git a/pages/[...slug].vue b/pages/[...slug].vue
index d44de09..71ab37b 100644
--- a/pages/[...slug].vue
+++ b/pages/[...slug].vue
@@ -11,6 +11,7 @@ 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";
@@ -48,14 +49,14 @@ const { data: pages } = await useAsyncData("pages", () =>
 );
 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);
+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>(activeLookup?.collection ?? "", {
+    find<Article | Operation | Event | Vehicle>(activeLookup?.collection ?? "", {
       populate: "*",
       filters: {
         slug: params[2] ?? params[1],
diff --git a/types/collection/baseCollection.ts b/types/collection/baseCollection.ts
index b4c6aa4..8d4cc8a 100644
--- a/types/collection/baseCollection.ts
+++ b/types/collection/baseCollection.ts
@@ -4,15 +4,15 @@ import type ContentField from "../field/content";
 export default interface BaseCollection {
   id: number;
   documentId: string;
-  title: string;
-  description: string;
   slug: string;
-  date: string;
   createdAt: string;
   updatedAt: string;
   publishedAt: string;
   locale: string;
 
+  title: string;
+  description: string;
+  date: string | undefined;
   content: ContentField | undefined;
   image: BaseImage | undefined;
   attachment: Array<BaseImage>;
diff --git a/types/collection/lookup.ts b/types/collection/lookup.ts
index 8cf0934..c192970 100644
--- a/types/collection/lookup.ts
+++ b/types/collection/lookup.ts
@@ -2,6 +2,7 @@ export default interface Lookup {
   id: number;
   documentId: string;
   collection: string;
+  imageItem: boolean;
   reference: string;
   createdAt: string;
   updatedAt: string;
diff --git a/types/collection/vehicle.ts b/types/collection/vehicle.ts
new file mode 100644
index 0000000..3cd10b0
--- /dev/null
+++ b/types/collection/vehicle.ts
@@ -0,0 +1,6 @@
+import type BaseImage from "../component/baseImage";
+import type BaseCollection from "./baseCollection";
+
+export default interface Vehicle extends BaseCollection {
+  date: undefined;
+}
diff --git a/types/component/sharedList.ts b/types/component/sharedList.ts
index f20a513..cf537bf 100644
--- a/types/component/sharedList.ts
+++ b/types/component/sharedList.ts
@@ -1,7 +1,8 @@
+import type Lookup from "../collection/lookup";
 import type BaseComponent from "./baseComponent";
 
 export default interface SharedList extends BaseComponent {
   __component: "shared.list";
-  list: string;
   enable_detail: boolean;
+  lookup: Lookup;
 }