enable viewing of uploaded files to inspection points

src/components/admin/unit/inspection/FileInput.vue

@@ -2,6 +2,7 @@
   <div class="flex flex-col h-fit w-full border border-primary rounded-md">
     <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
       <p>{{ inspectionPoint.title }}</p>
+      <DocumentCheckIcon class="w-5 h-5 cursor-pointer" @click="openDetailView" />
     </div>
     <div class="p-2">
       <p v-if="inspectionPoint.description" class="pb-2">Beschreibung: {{ inspectionPoint.description }}</p>
@@ -32,9 +33,11 @@
 </template>
 
 <script setup lang="ts">
-import { defineComponent, type PropType } from "vue";
+import { defineAsyncComponent, defineComponent, markRaw, type PropType } from "vue";
 import type { InspectionPointViewModel } from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
-import { CheckIcon } from "@heroicons/vue/24/outline";
+import { CheckIcon, DocumentCheckIcon } from "@heroicons/vue/24/outline";
+import { mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
 </script>
 
 <script lang="ts">
@@ -72,10 +75,17 @@ export default defineComponent({
     },
   },
   methods: {
+    ...mapActions(useModalStore, ["openModal"]),
     selectFile(e: Event) {
       this.$emit("update:upload", (e.target as HTMLInputElement).files?.[0] ?? null);
       this.value = "set";
     },
+    openDetailView() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/unit/inspection/UploadedFileViewModal.vue"))),
+        this.inspectionPoint
+      );
+    },
   },
 });
 </script>

src/components/admin/unit/inspection/OkNotOk.vue

@@ -6,18 +6,19 @@
     <div class="p-2">
       <p v-if="inspectionPoint.description" class="pb-2">Beschreibung: {{ inspectionPoint.description }}</p>
       <hr v-if="inspectionPoint.description" />
-      <RadioGroup v-model="value" :name="inspectionPoint.id" class="flex flex-row gap-2" :disabled="!editable">
-        <RadioGroupOption
+      <div class="flex flex-row gap-2">
+        <button
           v-for="option in options"
           :key="option.key"
-          button
           :primary="value == option.key"
           :primary-outline="value != option.key"
+          :disabled="!editable"
           :value="option.key"
+          @click="value = option.key"
         >
           {{ option.title }}
-        </RadioGroupOption>
-      </RadioGroup>
+        </button>
+      </div>
     </div>
   </div>
 </template>
@@ -50,7 +51,7 @@ export default defineComponent({
       options: [
         { key: "true", title: "OK" },
         { key: "false", title: "nicht OK" },
-      ],
+      ] as Array<{ key: "true" | "false"; title: string }>,
     };
   },
   computed: {

src/components/admin/unit/inspection/UploadedFileViewModal.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="w-full h-full flex flex-col gap-2">
+    <Spinner v-if="status == 'loading'" />
+    <div class="grow">
+      <iframe v-if="data.others == 'pdf'" ref="viewer" class="w-full h-full" />
+      <img v-else ref="viewer" class="w-full h-full object-contain" />
+    </div>
+
+    <div class="flex flex-row gap-2 justify-end">
+      <a ref="download" button primary class="w-fit!">download</a>
+      <button primary-outline class="w-fit!" @click="closeModal">schließen</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import { useInspectionStore } from "@/stores/admin/unit/inspection/inspection";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+    };
+  },
+  computed: {
+    ...mapState(useModalStore, ["data"]),
+    ...mapState(useInspectionStore, ["activeInspectionObj"]),
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useInspectionStore, ["fetchUploadedFileByPointId"]),
+    fetchItem() {
+      this.status = "loading";
+      this.fetchUploadedFileByPointId(this.data.id)
+        .then((response) => {
+          this.status = { status: "success" };
+          const blob = new Blob([response.data], { type: this.data.others == "pdf" ? "application/pdf" : "image/png" });
+          (this.$refs.viewer as HTMLIFrameElement).src = window.URL.createObjectURL(blob);
+
+          const fileURL = window.URL.createObjectURL(new Blob([response.data]));
+          const fileLink = this.$refs.download as HTMLAnchorElement;
+          fileLink.href = fileURL;
+          console.log(this.data);
+          fileLink.setAttribute(
+            "download",
+            this.data.others == "pdf" ? `${this.data.title}.pdf` : `${this.data.title}.png`
+          );
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>