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>