From 9d81666a3c7a2b4538074e0650a6b20c42bfd806 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Sat, 18 Jan 2025 11:30:46 +0100
Subject: [PATCH] file download component

---
 components/ContentBuilder.vue                 |  1 +
 components/dynamicZone/FileDownload.vue       | 42 +++++++++++++++++++
 types/collection/article.ts                   |  2 +-
 types/collection/baseCollection.ts            |  6 +--
 types/collection/vehicle.ts                   |  2 +-
 types/component/baseComponent.ts              |  7 +++-
 types/component/{baseImage.ts => baseFile.ts} |  2 +-
 types/component/dynamicZoneColumnImageText.ts |  4 +-
 types/component/dynamicZoneFileDownload.ts    |  9 ++++
 types/component/dynamicZoneFullImage.ts       |  4 +-
 types/component/dynamicZoneGallery.ts         |  4 +-
 types/component/globalNavbar.ts               |  4 +-
 types/component/sharedHero.ts                 |  4 +-
 types/single/homepage.ts                      |  4 +-
 14 files changed, 75 insertions(+), 20 deletions(-)
 create mode 100644 components/dynamicZone/FileDownload.vue
 rename types/component/{baseImage.ts => baseFile.ts} (94%)
 create mode 100644 types/component/dynamicZoneFileDownload.ts

diff --git a/components/ContentBuilder.vue b/components/ContentBuilder.vue
index 89b9058..d52d322 100644
--- a/components/ContentBuilder.vue
+++ b/components/ContentBuilder.vue
@@ -9,6 +9,7 @@
         <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" />
+        <DynamicZoneFileDownload v-else-if="item.__component == 'dynamic-zone.file-download'" :data="item" />
         <SharedList v-else-if="item.__component == 'shared.list'" :data="item" />
         <br />
       </div>
diff --git a/components/dynamicZone/FileDownload.vue b/components/dynamicZone/FileDownload.vue
new file mode 100644
index 0000000..185d794
--- /dev/null
+++ b/components/dynamicZone/FileDownload.vue
@@ -0,0 +1,42 @@
+<template>
+  <div v-if="showComponent" class="flex flex-col gap-2 w-full min-h-fit max-w-4xl mx-auto">
+    <h1 class="text-center">{{ data?.title }}</h1>
+    <iframe v-if="data.file.mime == 'application/pdf'" :src="baseUrl + data.file.url" class="w-full h-[90vh]"></iframe>
+    <NuxtPicture
+      v-if="data.file.mime.includes('image')"
+      loading="lazy"
+      class="w-full object-cover object-center mx-auto"
+      :src="baseUrl + data?.file.url"
+      :imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
+    />
+    <a
+      v-if="data.enable_download"
+      :href="baseUrl + data.file.url"
+      :download="data.file.name"
+      target="_blank"
+      class="w-fit text-primary underline"
+    >
+      Datei herunterladen
+    </a>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type DynamicZoneFileDownload from "../../types/component/dynamicZoneFileDownload";
+
+const runtimeConfig = useRuntimeConfig();
+const baseUrl = runtimeConfig.public.strapi.url;
+
+const props = defineProps({
+  data: Object as PropType<DynamicZoneFileDownload>,
+});
+
+const showComponent = computed(() => {
+  if (props.data.file.mime == "application/pdf" || props.data.file.mime.includes("image")) {
+    return true;
+  } else {
+    return props.data.enable_download;
+  }
+});
+</script>
diff --git a/types/collection/article.ts b/types/collection/article.ts
index 404cb40..d151db8 100644
--- a/types/collection/article.ts
+++ b/types/collection/article.ts
@@ -1,4 +1,4 @@
-import type BaseImage from "../component/baseImage";
+import type BaseFile from "../component/baseFile";
 import type BaseCollection from "./baseCollection";
 
 export default interface Article extends BaseCollection {}
diff --git a/types/collection/baseCollection.ts b/types/collection/baseCollection.ts
index 8d4cc8a..aea31f1 100644
--- a/types/collection/baseCollection.ts
+++ b/types/collection/baseCollection.ts
@@ -1,4 +1,4 @@
-import type BaseImage from "../component/baseImage";
+import type BaseFile from "../component/baseFile";
 import type ContentField from "../field/content";
 
 export default interface BaseCollection {
@@ -14,6 +14,6 @@ export default interface BaseCollection {
   description: string;
   date: string | undefined;
   content: ContentField | undefined;
-  image: BaseImage | undefined;
-  attachment: Array<BaseImage>;
+  image: BaseFile | undefined;
+  attachment: Array<BaseFile>;
 }
diff --git a/types/collection/vehicle.ts b/types/collection/vehicle.ts
index 3cd10b0..8e8d21f 100644
--- a/types/collection/vehicle.ts
+++ b/types/collection/vehicle.ts
@@ -1,4 +1,4 @@
-import type BaseImage from "../component/baseImage";
+import type BaseFile from "../component/baseFile";
 import type BaseCollection from "./baseCollection";
 
 export default interface Vehicle extends BaseCollection {
diff --git a/types/component/baseComponent.ts b/types/component/baseComponent.ts
index 0b903bd..747253c 100644
--- a/types/component/baseComponent.ts
+++ b/types/component/baseComponent.ts
@@ -4,6 +4,7 @@ import type DynamicZoneEmphasiseArticle from "./dynamicZoneEmphasiseArticle";
 import type DynamicZoneFullImage from "./dynamicZoneFullImage";
 import type DynamicZoneFullText from "./dynamicZoneFullText";
 import type DynamicZoneGallery from "./dynamicZoneGallery";
+import type DynamicZoneFileDownload from "./dynamicZoneFileDownload";
 import type SharedList from "./sharedList";
 
 export default interface BaseComponent {
@@ -18,7 +19,8 @@ export type ComponentNames =
   | "dynamic-zone.full-image"
   | "dynamic-zone.emphasise-article"
   | "dynamic-zone.dual-column-text"
-  | "dynamic-zone.column-image-text";
+  | "dynamic-zone.column-image-text"
+  | "dynamic-zone.file-download";
 
 export type ComponentTypes =
   | SharedList
@@ -27,4 +29,5 @@ export type ComponentTypes =
   | DynamicZoneFullImage
   | DynamicZoneEmphasiseArticle
   | DynamicZoneDualColumnText
-  | DynamicZoneColumnImageText;
+  | DynamicZoneColumnImageText
+  | DynamicZoneFileDownload;
diff --git a/types/component/baseImage.ts b/types/component/baseFile.ts
similarity index 94%
rename from types/component/baseImage.ts
rename to types/component/baseFile.ts
index 1d4cdd2..ee55dea 100644
--- a/types/component/baseImage.ts
+++ b/types/component/baseFile.ts
@@ -1,4 +1,4 @@
-export default interface BaseImage {
+export default interface BaseFile {
   id: number;
   documentId: string;
   name: string;
diff --git a/types/component/dynamicZoneColumnImageText.ts b/types/component/dynamicZoneColumnImageText.ts
index 5c960bf..ea285ab 100644
--- a/types/component/dynamicZoneColumnImageText.ts
+++ b/types/component/dynamicZoneColumnImageText.ts
@@ -1,10 +1,10 @@
 import type ContentField from "../field/content";
 import type BaseComponent from "./baseComponent";
-import type BaseImage from "./baseImage";
+import type BaseFile from "./baseFile";
 
 export default interface DynamicZoneColumnImageText extends BaseComponent {
   __component: "dynamic-zone.column-image-text";
   text: ContentField;
   image_left: boolean;
-  image: BaseImage;
+  image: BaseFile;
 }
diff --git a/types/component/dynamicZoneFileDownload.ts b/types/component/dynamicZoneFileDownload.ts
new file mode 100644
index 0000000..7d51745
--- /dev/null
+++ b/types/component/dynamicZoneFileDownload.ts
@@ -0,0 +1,9 @@
+import type BaseComponent from "./baseComponent";
+import type BaseFile from "./baseFile";
+
+export default interface DynamicZoneFileDownload extends BaseComponent {
+  __component: "dynamic-zone.file-download";
+  enable_download: boolean;
+  title: string;
+  file: BaseFile;
+}
diff --git a/types/component/dynamicZoneFullImage.ts b/types/component/dynamicZoneFullImage.ts
index 8901f66..6e334f2 100644
--- a/types/component/dynamicZoneFullImage.ts
+++ b/types/component/dynamicZoneFullImage.ts
@@ -1,7 +1,7 @@
 import type BaseComponent from "./baseComponent";
-import type BaseImage from "./baseImage";
+import type BaseFile from "./baseFile";
 
 export default interface DynamicZoneFullImage extends BaseComponent {
   __component: "dynamic-zone.full-image";
-  image: BaseImage;
+  image: BaseFile;
 }
diff --git a/types/component/dynamicZoneGallery.ts b/types/component/dynamicZoneGallery.ts
index 4b34f42..1e30ab5 100644
--- a/types/component/dynamicZoneGallery.ts
+++ b/types/component/dynamicZoneGallery.ts
@@ -1,7 +1,7 @@
 import type BaseComponent from "./baseComponent";
-import type BaseImage from "./baseImage";
+import type BaseFile from "./baseFile";
 
 export default interface DynamicZoneGallery extends BaseComponent {
   __component: "dynamic-zone.gallery";
-  images: Array<BaseImage>;
+  images: Array<BaseFile>;
 }
diff --git a/types/component/globalNavbar.ts b/types/component/globalNavbar.ts
index 24a1cf6..dd65ba1 100644
--- a/types/component/globalNavbar.ts
+++ b/types/component/globalNavbar.ts
@@ -1,8 +1,8 @@
-import type BaseImage from "./baseImage";
+import type BaseFile from "./baseFile";
 import type NavbarItem from "./itemsNavbarItem";
 
 export default interface Navbar {
   id: number;
-  logo: BaseImage;
+  logo: BaseFile;
   navbar_items: NavbarItem[];
 }
diff --git a/types/component/sharedHero.ts b/types/component/sharedHero.ts
index dcd52bd..b726315 100644
--- a/types/component/sharedHero.ts
+++ b/types/component/sharedHero.ts
@@ -1,7 +1,7 @@
-import type BaseImage from "./baseImage";
+import type BaseFile from "./baseFile";
 
 export default interface SharedHero {
   id: number;
   title: string;
-  banner: BaseImage;
+  banner: BaseFile;
 }
diff --git a/types/single/homepage.ts b/types/single/homepage.ts
index 2a26c5a..aa33112 100644
--- a/types/single/homepage.ts
+++ b/types/single/homepage.ts
@@ -1,4 +1,4 @@
-import type BaseImage from "../component/baseImage";
+import type BaseFile from "../component/baseFile";
 import type { ComponentTypes } from "../component/baseComponent";
 
 export default interface Homepage {
@@ -8,7 +8,7 @@ export default interface Homepage {
   updatedAt: string;
   publishedAt: string;
   locale: string;
-  backdrop: BaseImage;
+  backdrop: BaseFile;
   hide_backdrop: boolean;
   content: Array<ComponentTypes>;
 }