show details to damage

src/views/admin/unit/damageReport/Overview.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <div v-if="activeDamageReportObj != null" class="flex flex-col gap-2 w-full">
+      <div>
+        <label for="status">Status</label>
+        <input id="status" type="text" readonly :value="activeDamageReportObj.status" />
+      </div>
+      <br />
+      <div>
+        <label for="description">Beschreibung des Schadens</label>
+        <textarea id="description" readonly :value="activeDamageReportObj.description"></textarea>
+      </div>
+      <div>
+        <label for="location">Fundort</label>
+        <textarea id="location" readonly :value="activeDamageReportObj.location || '---'"></textarea>
+      </div>
+      <div>
+        <label for="note">Anmerkung für Bearbeiter</label>
+        <textarea id="note" readonly :value="activeDamageReportObj.note || '---'"></textarea>
+      </div>
+      <div>
+        <label for="reportedBy">Gemeldet von</label>
+        <input id="reportedBy" type="text" readonly :value="activeDamageReportObj.reportedBy || '---'" />
+      </div>
+      <div>
+        <label>Bild</label>
+        <div ref="imgs"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import { useDamageReportStore } from "@/stores/admin/unit/damageReport/damageReport";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    damageReportId: String,
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(useDamageReportStore, ["activeDamageReportObj"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.loadImages();
+  },
+  methods: {
+    ...mapActions(useDamageReportStore, ["loadDamageReportImage"]),
+    loadImages() {
+      for (const i of this.activeDamageReportObj?.images ?? []) {
+        this.loadDamageReportImage(i)
+          .then((response) => {
+            const contentType =
+              response.headers && response.headers["content-type"] ? response.headers["content-type"] : "image/*";
+            const blob = new Blob([response.data], { type: contentType });
+            const img = document.createElement("img");
+            img.src = window.URL.createObjectURL(blob);
+            img.alt = "Schadensbild";
+            img.classList = "h-35 w-auto";
+            (this.$refs.imgs as HTMLElement).appendChild(img);
+          })
+          .catch((err) => {
+            console.log(err);
+          });
+      }
+    },
+  },
+});
+</script>