next and running inspections

src/views/admin/unit/inspection/RunningInspections.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="flex flex-col w-full h-full gap-2 justify-center">
+    <Pagination
+      :items="inspections"
+      :totalCount="totalCount"
+      :indicateLoading="loading == 'loading'"
+      @load-data="(offset, count, search) => fetchRunningInspections(offset, count, search)"
+      @search="(search) => fetchRunningInspections(0, maxEntriesPerPage, search, true)"
+    >
+      <template #pageRow="{ row }: { row: MinifiedInspectionViewModel }">
+        <RouterLink
+          :to="{ name: 'admin-unit-inspection-execute', params: { inspectionId: 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.isOpen" class="w-5 h-5" />
+            <p>{{ row.inspectionPlan.title }} - in Arbeit seit {{ row.created }}</p>
+          </div>
+          <div v-if="row.context" class="p-2">
+            <p v-if="row.context">Kontext: {{ row.context }}</p>
+          </div>
+        </RouterLink>
+      </template>
+    </Pagination>
+
+    <div class="flex flex-row gap-4">
+      <RouterLink
+        v-if="can('create', 'unit', 'inspection')"
+        :to="{ name: 'admin-unit-inspection-start' }"
+        primary
+        button
+        class="w-fit!"
+      >
+        Prüfung starten
+      </RouterLink>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import Pagination from "@/components/Pagination.vue";
+import { useAbilityStore } from "@/stores/ability";
+import type { MinifiedInspectionViewModel } from "@/viewmodels/admin/unit/inspection/inspection.models";
+import { useInspectionStore } from "@/stores/admin/unit/inspection/inspection";
+import { PencilSquareIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useInspectionStore, ["inspections", "totalCount", "loading"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchRunningInspections(0, this.maxEntriesPerPage, "", true);
+  },
+  methods: {
+    ...mapActions(useInspectionStore, ["fetchRunningInspections"]),
+  },
+});
+</script>