vehicle and base list items

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>

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>

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>

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>

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],

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>;

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;

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;
+}

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;
 }