damage report routing

src/router/index.ts

@@ -547,7 +547,7 @@ const router = createRouter({
             {
               path: "damage-report",
               name: "admin-unit-damage_report-route",
-              component: () => import("@/views/RouterView.vue"),
+              component: () => import("@/views/admin/unit/damageReport/DamageReportRouting.vue"),
               meta: { type: "read", section: "unit", module: "damage_report" },
               beforeEnter: [abilityAndNavUpdate],
               children: [
@@ -556,6 +556,11 @@ const router = createRouter({
                   name: "admin-unit-damage_report",
                   component: () => import("@/views/admin/unit/damageReport/DamageReport.vue"),
                 },
+                {
+                  path: "done",
+                  name: "admin-unit-damage_report-done",
+                  component: () => import("@/views/admin/unit/damageReport/DamageReport.vue"),
+                },
               ],
             },
             {

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

@@ -1,45 +1,17 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Schadensmeldungen</h1>
-      </div>
-    </template>
-    <template #diffMain>
-      <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
-        <div class="w-full flex flex-row justify-center">
-          <div
-            v-for="tab in tabs"
-            :key="tab.route"
-            @click="isActive = tab.route"
-            class="w-full p-0.5 first:pl-0 last:pr-0 cursor-pointer"
-          >
-            <p
-              :class="[
-                'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-none',
-                isActive == tab.route
-                  ? 'bg-red-200 shadow border-b-2 border-primary rounded-b-none'
-                  : ' hover:bg-red-200',
-              ]"
-            >
-              {{ tab.title }}
-            </p>
-          </div>
-        </div>
-        <Pagination
-          :items="damageReports"
-          :totalCount="totalCount"
-          :indicateLoading="loading == 'loading'"
-          @load-data="(offset, count, search) => fetchDamageReports(offset, count, search)"
-          @search="(search) => fetchDamageReports(0, maxEntriesPerPage, search, true)"
-        >
-          <template #pageRow="{ row }: { row: DamageReportViewModel }">
-            <DamageReportListItem :damageReport="row" />
-          </template>
-        </Pagination>
-      </div>
-    </template>
-  </MainTemplate>
+  <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
+    <Pagination
+      :items="damageReports"
+      :totalCount="totalCount"
+      :indicateLoading="loading == 'loading'"
+      @load-data="(offset, count, search) => fetchDamageReports(offset, count, search)"
+      @search="(search) => fetchDamageReports(0, maxEntriesPerPage, search, true)"
+    >
+      <template #pageRow="{ row }: { row: DamageReportViewModel }">
+        <DamageReportListItem :damageReport="row" />
+      </template>
+    </Pagination>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -57,12 +29,6 @@ import DamageReportListItem from "../../../../components/admin/unit/damageReport
 export default defineComponent({
   data() {
     return {
-      tabs: [
-        { route: "open", title: "offen" },
-        { route: "done", title: "bearbeitet" },
-      ],
-      isActive: "open",
-      currentPage: 0,
       maxEntriesPerPage: 25,
     };
   },

src/views/admin/unit/damageReport/DamageReportRouting.vue

@@ -0,0 +1,78 @@
+<template>
+  <MainTemplate>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Schadensmeldungen</h1>
+      </div>
+    </template>
+    <template #diffMain>
+      <div class="flex flex-col gap-2 grow px-7 overflow-hidden">
+        <div class="flex flex-col grow gap-2 overflow-hidden">
+          <div class="w-full flex flex-row max-lg:flex-wrap justify-center">
+            <RouterLink
+              v-for="tab in tabs"
+              :key="tab.route"
+              v-slot="{ isActive }"
+              :to="{ name: tab.route }"
+              class="w-1/2 md:w-1/3 lg:w-full p-0.5 first:pl-0 last:pr-0"
+            >
+              <p
+                :class="[
+                  'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-none',
+                  isActive ? 'bg-red-200 shadow border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
+                ]"
+              >
+                {{ tab.title }}
+              </p>
+            </RouterLink>
+          </div>
+          <RouterView />
+        </div>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent, defineComponent, markRaw } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { RouterLink, RouterView } from "vue-router";
+import { PencilIcon, TrashIcon } from "@heroicons/vue/24/outline";
+import { useModalStore } from "@/stores/modal";
+import { useAbilityStore } from "@/stores/ability";
+import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    equipmentId: String,
+  },
+  data() {
+    return {
+      tabs: [
+        { route: "admin-unit-damage_report", title: "offen" },
+        { route: "admin-unit-damage_report-done", title: "bearbeitet" },
+      ],
+    };
+  },
+  computed: {
+    ...mapState(useEquipmentStore, ["activeEquipmentObj"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchEquipmentByActiveId();
+  },
+  methods: {
+    ...mapActions(useEquipmentStore, ["fetchEquipmentByActiveId"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    openDeleteModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/DeleteMemberModal.vue"))),
+        this.equipmentId ?? ""
+      );
+    },
+  },
+});
+</script>