change of models

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

@@ -0,0 +1,55 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full">
+    <Pagination
+      :items="damageReports"
+      :totalCount="totalCount"
+      :indicateLoading="false"
+      @load-data="(offset, count, search) => {}"
+      @search="(search) => {}"
+    >
+      <template #pageRow="{ row }: { row: DamageReportViewModel }">
+        <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 gap-2 items-center">
+            <PencilSquareIcon v-if="!row.done" class="w-5 h-5" />
+            <PhotoIcon v-if="row.providedImage" />
+            <p>{{ row.reported }} - {{ row.status }}</p>
+          </div>
+          <div class="p-2">
+            <p>Beschreibung: {{ row.description }}</p>
+          </div>
+        </div>
+      </template>
+    </Pagination>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import { useWearableDamageReportStore } from "@/stores/admin/unit/wearable/damageReport";
+import Pagination from "@/components/Pagination.vue";
+import type { DamageReportViewModel } from "@/viewmodels/admin/unit/damageReport/damageReport.models";
+import { PhotoIcon, PencilSquareIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    wearableId: String,
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+    ...mapState(useWearableDamageReportStore, ["damageReports", "loading", "totalCount"]),
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  methods: {
+    ...mapActions(useWearableDamageReportStore, ["fetchDamageReportForWearable"]),
+    fetchItem() {
+      this.fetchDamageReportForWearable();
+    },
+  },
+});
+</script>