base views and store

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

@@ -18,7 +18,7 @@
         <div v-if="damageReport.reportedBy" class="cursor-pointer">
           <UserIcon class="w-5 h-5" />
         </div>
-        <div v-if="damageReport.maintenance" class="cursor-pointer">
+        <div v-if="damageReport.repair" class="cursor-pointer">
           <WrenchScrewdriverIcon class="w-5 h-5" />
         </div>
       </div>

src/components/admin/unit/repair/RepairListItem.vue

@@ -0,0 +1,37 @@
+<template>
+  <RouterLink
+    :to="{ name: 'admin-unit-repair-overview', params: { repairId: repair.id } }"
+    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>
+        {{ repair?.related?.name ?? "Ohne Zuordnung" }}
+        <small v-if="repair?.related">({{ repair.related.code }})</small>
+      </p>
+    </div>
+    <div class="p-2">
+      <p>vera: {{ new Date(repair.createdAt).toLocaleString("de") }}</p>
+      <p>Status: {{ repair.status }}</p>
+      <p v-if="repair.description">Beschreibung: {{ repair.description }}</p>
+    </div>
+  </RouterLink>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import type { RepairViewModel } from "@/viewmodels/admin/unit/repair.models";
+import { MapPinIcon, PhotoIcon, UserIcon, WrenchScrewdriverIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    repair: { type: Object as PropType<RepairViewModel>, default: {} },
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+});
+</script>