show reports inside admin ui

src/components/admin/unit/damageReport/DamageReportListItem.vue

@@ -2,11 +2,22 @@
   <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>
-        {{ damageReport.related.name }}
+        {{ damageReport?.related?.name ?? "Ohne Zuordnung" }}
+        <small v-if="damageReport?.related">({{ damageReport.related.code }})</small>
       </p>
+      <div class="flex flex-row gap-2">
+        <div v-if="damageReport.images.length != 0" class="cursor-pointer" title="hi">
+          <PhotoIcon class="w-5 h-5" />
+        </div>
+        <div v-if="damageReport.location" class="cursor-pointer" title="hi">
+          <MapPinIcon class="w-5 h-5" />
+        </div>
+        <div v-if="damageReport.reportedBy" class="cursor-pointer" title="hi">
+          <UserIcon class="w-5 h-5" />
+        </div>
+      </div>
     </div>
     <div class="p-2">
-      <p v-if="damageReport.related">Code: {{ damageReport.related.code }}</p>
       <p v-if="damageReport.description">Beschreibung: {{ damageReport.description }}</p>
     </div>
   </div>
@@ -17,6 +28,7 @@ import { defineComponent, type PropType } from "vue";
 import { mapState, mapActions } from "pinia";
 import { useAbilityStore } from "@/stores/ability";
 import type { DamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
+import { MapPinIcon, PhotoIcon, UserIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">

src/global.ts

@@ -0,0 +1,3 @@
+declare global {
+  type Optional<T> = T | { [K in keyof T]?: never };
+}

src/viewmodels/admin/unit/damageReport.models.ts

@@ -26,10 +26,12 @@ export type DamageReportViewModel = {
   status: string;
   done: boolean;
   description: string;
-  imageCount: number;
+  location: string;
+  note: string;
+  images: string[];
   reportedBy: string;
   maintenance?: MaintenanceViewModel;
-} & DamageReportAssigned;
+} & Optional<DamageReportAssigned>;
 
 export interface CreateDamageReportViewModel {
   description: string;