base views and store

src/views/admin/unit/repair/RepairClosed.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="flex flex-col w-full h-full gap-2 justify-center">
+    <Pagination
+      :items="repairs"
+      :totalCount="totalCount"
+      :indicateLoading="loading == 'loading'"
+      @load-data="(offset, count, search) => fetchDoneRepairs(offset, count, search)"
+      @search="(search) => fetchDoneRepairs(0, maxEntriesPerPage, search, true)"
+    >
+      <template #pageRow="{ row }: { row: RepairViewModel }">
+        <RepairListItem :repair="row" />
+      </template>
+    </Pagination>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { useAbilityStore } from "@/stores/ability";
+import { useRepairStore } from "@/stores/admin/unit/repair";
+import type { RepairViewModel } from "@/viewmodels/admin/unit/repair.models";
+import Pagination from "@/components/Pagination.vue";
+import RepairListItem from "@/components/admin/unit/repair/RepairListItem.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useRepairStore, ["repairs", "totalCount", "loading"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchDoneRepairs(0, this.maxEntriesPerPage, "", true);
+  },
+  methods: {
+    ...mapActions(useRepairStore, ["fetchDoneRepairs"]),
+  },
+});
+</script>