repair create and view

src/views/admin/unit/wearable/Repair.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full">
+    <Pagination
+      :items="repairs"
+      :totalCount="totalCount"
+      :indicateLoading="loading == 'loading'"
+      @load-data="(offset, count, search) => fetchRepairForWearable(offset, count, search)"
+      @search="(search) => fetchRepairForWearable(0, 25, search, true)"
+    >
+      <template #pageRow="{ row }: { row: RepairViewModel }">
+        <RouterLink
+          :to="{ name: 'admin-unit-repair-overview', params: { repairId: row.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 gap-2 items-center">
+            <PencilSquareIcon v-if="row.finishedAt == null" class="w-5 h-5" />
+            <p class="grow">{{ new Date(row.createdAt).toLocaleString("de") }} - {{ row.status }}</p>
+          </div>
+          <div class="p-2">
+            <p>Beschreibung: {{ row.description }}</p>
+          </div>
+        </RouterLink>
+      </template>
+    </Pagination>
+    <RouterLink
+      :to="{ name: 'admin-unit-repair-create', params: { type: 'wearable', relatedId: wearableId } }"
+      button
+      primary
+      class="w-fit!"
+    >
+      Reparatur erstellen
+    </RouterLink>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import { useWearableRepairStore } from "@/stores/admin/unit/wearable/repair";
+import Pagination from "@/components/Pagination.vue";
+import type { RepairViewModel } from "@/viewmodels/admin/unit/repair.models";
+import { PhotoIcon, PencilSquareIcon, MapPinIcon, WrenchScrewdriverIcon, UserIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    wearableId: String,
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+    ...mapState(useWearableRepairStore, ["repairs", "loading", "totalCount"]),
+  },
+  mounted() {
+    this.fetchRepairForWearable(0, 25, "", true);
+  },
+  methods: {
+    ...mapActions(useWearableRepairStore, ["fetchRepairForWearable"]),
+  },
+});
+</script>