wearable

src/components/admin/unit/wearable/WearableListItem.vue

@@ -0,0 +1,33 @@
+<template>
+  <RouterLink
+    :to="{ name: 'admin-unit-wearable-overview', params: { wearableId: wearable.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 justify-between items-center">
+      <p>
+        {{ wearable.name }}
+      </p>
+    </div>
+    <div class="p-2">
+      <p v-if="wearable.code">Code: {{ wearable.code }}</p>
+    </div>
+  </RouterLink>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import type { WearableViewModel } from "@/viewmodels/admin/unit/wearable/wearable.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    wearable: { type: Object as PropType<WearableViewModel>, default: {} },
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+});
+</script>

src/components/admin/unit/wearableType/CreateWearableTypeModal.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Typ erstellen</p>
+    </div>
+    <br />
+    <form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
+      <div>
+        <label for="type">Typ</label>
+        <input type="text" id="type" required />
+      </div>
+      <div>
+        <label for="description">Beschreibung (optional)</label>
+        <textarea id="description" class="h-18"></textarea>
+      </div>
+
+      <div class="flex flex-row gap-2">
+        <button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </form>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useWearableTypeStore } from "@/stores/admin/unit/wearableType/wearableType";
+import type { CreateWearableTypeViewModel } from "@/viewmodels/admin/unit/wearableType/wearableType.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+    };
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useWearableTypeStore, ["createWearableType"]),
+    triggerCreate(e: any) {
+      let formData = e.target.elements;
+      let createWearableType: CreateWearableTypeViewModel = {
+        type: formData.type.value,
+        description: formData.description.value,
+      };
+      this.status = "loading";
+      this.createWearableType(createWearableType)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>

src/components/admin/unit/wearableType/DeleteWearableTypeModal.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Ausrüstung-Type löschen</p>
+    </div>
+    <br />
+    <p class="text-center">Type {{ wearableType?.type }} löschen?</p>
+    <br />
+
+    <div class="flex flex-row gap-2">
+      <button
+        primary
+        type="submit"
+        :disabled="status == 'loading' || status?.status == 'success'"
+        @click="triggerDelete"
+      >
+        löschen
+      </button>
+      <Spinner v-if="status == 'loading'" class="my-auto" />
+      <SuccessCheckmark v-else-if="status?.status == 'success'" />
+      <FailureXMark v-else-if="status?.status == 'failed'" />
+    </div>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useWearableTypeStore } from "@/stores/admin/unit/wearableType/wearableType";
+import type { CreateWearableTypeViewModel } from "@/viewmodels/admin/unit/wearableType/wearableType.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+    };
+  },
+  computed: {
+    ...mapState(useModalStore, ["data"]),
+    ...mapState(useWearableTypeStore, ["wearableTypes"]),
+    wearableType() {
+      return this.wearableTypes.find((m) => m.id == this.data);
+    },
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useWearableTypeStore, ["deleteWearableType"]),
+    triggerDelete() {
+      this.status = "loading";
+      this.deleteWearableType(this.data)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.$router.push({ name: "admin-unit-wearable_type" });
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>

src/components/admin/unit/wearableType/WearableTypeListItem.vue

@@ -0,0 +1,27 @@
+<template>
+  <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 justify-between items-center">
+      <p>
+        {{ wearableType.type }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import type { WearableTypeViewModel } from "@/viewmodels/admin/unit/wearableType/wearableType.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    wearableType: { type: Object as PropType<WearableTypeViewModel>, default: {} },
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+});
+</script>

src/demodata/wearable.ts

@@ -0,0 +1,22 @@
+import type { WearableViewModel } from "../viewmodels/admin/unit/wearable/wearable.models";
+import { wearableTypeDemoData } from "./wearableType";
+
+export const wearableDemoData: Array<WearableViewModel> = [
+  {
+    id: "abc",
+    code: "0456984224498",
+    name: "B-Schlauch",
+    wearerId: "9469991d-fa22-4899-82ce-b1ba5de990dc",
+    wearer: {
+      id: "9469991d-fa22-4899-82ce-b1ba5de990dc",
+      salutation: { id: 3, salutation: "Herr" },
+      firstname: "Julian",
+      lastname: "Krauser",
+      nameaffix: "",
+      birthdate: new Date("2003-09-20"),
+      internalId: "1312",
+    },
+    wearableTypeId: wearableTypeDemoData[0].id,
+    wearableType: wearableTypeDemoData[0],
+  },
+];

src/demodata/wearableType.ts

@@ -0,0 +1,9 @@
+import type { WearableTypeViewModel } from "../viewmodels/admin/unit/wearableType/wearableType.models";
+
+export const wearableTypeDemoData: Array<WearableTypeViewModel> = [
+  {
+    id: "xyz",
+    type: "B-Schlauch",
+    description: "Shläuche vom Typ B",
+  },
+];

src/router/index.ts

@@ -17,6 +17,7 @@ import { resetVehicleStores, setVehicleId } from "./unit/vehicle";
 import { resetRespiratoryGearStores, setRespiratoryGearId } from "./unit/respiratoryGear";
 import { resetRespiratoryWearerStores, setRespiratoryWearerId } from "./unit/respiratoryWearer";
 import { resetRespiratoryMissionStores, setRespiratoryMissionId } from "./unit/respiratoryMission";
+import { resetWearableStores, setWearableId } from "./unit/wearable";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -450,6 +451,57 @@ const router = createRouter({
                 },
               ],
             },
+            {
+              path: "wearable",
+              name: "admin-unit-wearable-route",
+              component: () => import("@/views/RouterView.vue"),
+              meta: { type: "read", section: "unit", module: "wearable" },
+              beforeEnter: [abilityAndNavUpdate],
+              children: [
+                {
+                  path: "",
+                  name: "admin-unit-wearable",
+                  component: () => import("@/views/admin/unit/wearable/Wearable.vue"),
+                  beforeEnter: [resetWearableStores],
+                },
+                {
+                  path: "create",
+                  name: "admin-unit-wearable-create",
+                  component: () => import("@/views/admin/unit/wearable/CreateWearable.vue"),
+                  meta: { type: "create", section: "unit", module: "wearable" },
+                  beforeEnter: [abilityAndNavUpdate],
+                },
+                {
+                  path: ":wearableId",
+                  name: "admin-unit-wearable-routing",
+                  component: () => import("@/views/admin/unit/wearable/WearableRouting.vue"),
+                  beforeEnter: [setWearableId],
+                  props: true,
+                  children: [
+                    {
+                      path: "overview",
+                      name: "admin-unit-wearable-overview",
+                      component: () => import("@/views/admin/unit/wearable/Overview.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "report",
+                      name: "admin-unit-wearable-damage_report",
+                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      props: true,
+                    },
+                    {
+                      path: "edit",
+                      name: "admin-unit-wearable-edit",
+                      component: () => import("@/views/admin/unit/wearable/UpdateWearable.vue"),
+                      meta: { type: "update", section: "unit", module: "wearable" },
+                      beforeEnter: [abilityAndNavUpdate],
+                      props: true,
+                    },
+                  ],
+                },
+              ],
+            },
             {
               path: "respiratory-gear",
               name: "admin-unit-respiratory_gear-route",
@@ -687,6 +739,28 @@ const router = createRouter({
                 },
               ],
             },
+            {
+              path: "wearable-type",
+              name: "admin-unit-wearable_type-route",
+              component: () => import("@/views/RouterView.vue"),
+              meta: { type: "read", section: "unit", module: "wearable_type" },
+              beforeEnter: [abilityAndNavUpdate],
+              children: [
+                {
+                  path: "",
+                  name: "admin-unit-wearable_type",
+                  component: () => import("@/views/admin/unit/wearableType/WearableType.vue"),
+                },
+                {
+                  path: ":wearableTypeId/edit",
+                  name: "admin-unit-wearable_type-edit",
+                  component: () => import("@/views/admin/unit/wearableType/UpdateWearableType.vue"),
+                  meta: { type: "update", section: "unit", module: "wearable_type" },
+                  beforeEnter: [abilityAndNavUpdate],
+                  props: true,
+                },
+              ],
+            },
           ],
         },
         {

src/router/unit/wearable.ts

@@ -0,0 +1,20 @@
+import { useWearableStore } from "@/stores/admin/unit/wearable/wearable";
+
+export async function setWearableId(to: any, from: any, next: any) {
+  const WearableStore = useWearableStore();
+  WearableStore.activeWearable = to.params?.wearableId ?? null;
+
+  //useXYStore().$reset();
+
+  next();
+}
+
+export async function resetWearableStores(to: any, from: any, next: any) {
+  const WearableStore = useWearableStore();
+  WearableStore.activeWearable = null;
+  WearableStore.activeWearableObj = null;
+
+  //useXYStore().$reset();
+
+  next();
+}

src/stores/admin/navigation.ts

@@ -109,6 +109,7 @@ export const useNavigationStore = defineStore("navigation", {
           main: [
             ...(abilityStore.can("read", "unit", "equipment") ? [{ key: "equipment", title: "Gerätschaften" }] : []),
             ...(abilityStore.can("read", "unit", "vehicle") ? [{ key: "vehicle", title: "Fahrzeuge" }] : []),
+            ...(abilityStore.can("read", "unit", "wearable") ? [{ key: "wearable", title: "Kleidung" }] : []),
             ...(abilityStore.can("read", "unit", "respiratory_gear")
               ? [{ key: "respiratory_gear", title: "Atemschutz-Geräte" }]
               : []),
@@ -125,6 +126,9 @@ export const useNavigationStore = defineStore("navigation", {
             ...(abilityStore.can("read", "unit", "equipment_type")
               ? [{ key: "equipment_type", title: "Geräte-Typen" }]
               : []),
+            ...(abilityStore.can("read", "unit", "wearable_type")
+              ? [{ key: "wearable_type", title: "Kleidungs-Arten" }]
+              : []),
           ],
         },
         configuration: {

src/stores/admin/unit/wearable/wearable.ts

@@ -0,0 +1,108 @@
+import { defineStore } from "pinia";
+import type {
+  WearableViewModel,
+  CreateWearableViewModel,
+  UpdateWearableViewModel,
+} from "@/viewmodels/admin/unit/wearable/wearable.models";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+import { wearableDemoData } from "../../../../demodata/wearable";
+
+export const useWearableStore = defineStore("wearable", {
+  state: () => {
+    return {
+      wearables: [] as Array<WearableViewModel & { tab_pos: number }>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+      activeWearable: null as string | null,
+      activeWearableObj: null as WearableViewModel | null,
+      loadingActive: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchWearables(offset = 0, count = 25, search = "", clear = false) {
+      this.wearables = wearableDemoData.map((e, i) => ({ ...e, tab_pos: i }));
+      this.totalCount = this.wearables.length;
+      this.loading = "fetched";
+      return;
+      if (clear) this.wearables = [];
+      this.loading = "loading";
+      http
+        .get(`/admin/wearable?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
+        .then((result) => {
+          this.totalCount = result.data.total;
+          result.data.wearables
+            .filter((elem: WearableViewModel) => this.wearables.findIndex((m) => m.id == elem.id) == -1)
+            .map((elem: WearableViewModel, index: number): WearableViewModel & { tab_pos: number } => {
+              return {
+                ...elem,
+                tab_pos: index + offset,
+              };
+            })
+            .forEach((elem: WearableViewModel & { tab_pos: number }) => {
+              this.wearables.push(elem);
+            });
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    async getAllWearables(): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/wearable?noLimit=true`).then((res) => {
+        return { ...res, data: res.data.wearables };
+      });
+    },
+    async getWearablesByIds(ids: Array<string>): Promise<AxiosResponse<any, any>> {
+      return await http
+        .post(`/admin/wearable/ids`, {
+          ids,
+        })
+        .then((res) => {
+          return { ...res, data: res.data.wearables };
+        });
+    },
+    async searchWearables(search: string): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/wearable?search=${search}&noLimit=true`).then((res) => {
+        return { ...res, data: res.data.wearables };
+      });
+    },
+    fetchWearableByActiveId() {
+      this.activeWearableObj = wearableDemoData.find((e) => e.id == this.activeWearable) as WearableViewModel;
+      this.loading = "fetched";
+      return;
+      this.loadingActive = "loading";
+      http
+        .get(`/admin/wearable/${this.activeWearable}`)
+        .then((res) => {
+          this.activeWearableObj = res.data;
+          this.loadingActive = "fetched";
+        })
+        .catch((err) => {
+          this.loadingActive = "failed";
+        });
+    },
+    fetchWearableById(id: string) {
+      return http.get(`/admin/wearable/${id}`);
+    },
+    async createWearable(wearable: CreateWearableViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.post(`/admin/wearable`, {
+        // TODO: data
+      });
+      this.fetchWearables();
+      return result;
+    },
+    async updateActiveWearable(wearable: UpdateWearableViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.patch(`/admin/wearable/${wearable.id}`, {
+        // TODO: data
+      });
+      this.fetchWearables();
+      return result;
+    },
+    async deleteWearable(wearable: number): Promise<AxiosResponse<any, any>> {
+      const result = await http.delete(`/admin/wearable/${wearable}`);
+      this.fetchWearables();
+      return result;
+    },
+  },
+});

src/stores/admin/unit/wearableType/wearableType.ts

@@ -0,0 +1,81 @@
+import { defineStore } from "pinia";
+import type {
+  WearableTypeViewModel,
+  CreateWearableTypeViewModel,
+  UpdateWearableTypeViewModel,
+} from "@/viewmodels/admin/unit/wearableType/wearableType.models";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+import { wearableTypeDemoData } from "../../../../demodata/wearableType";
+
+export const useWearableTypeStore = defineStore("wearableType", {
+  state: () => {
+    return {
+      wearableTypes: [] as Array<WearableTypeViewModel & { tab_pos: number }>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchWearableTypes(offset = 0, count = 25, search = "", clear = false) {
+      this.wearableTypes = wearableTypeDemoData.map((e, i) => ({ ...e, tab_pos: i }));
+      this.totalCount = this.wearableTypes.length;
+      this.loading = "fetched";
+      return;
+      if (clear) this.wearableTypes = [];
+      this.loading = "loading";
+      http
+        .get(`/admin/wearableType?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
+        .then((result) => {
+          this.totalCount = result.data.total;
+          result.data.wearables
+            .filter((elem: WearableTypeViewModel) => this.wearableTypes.findIndex((m) => m.id == elem.id) == -1)
+            .map((elem: WearableTypeViewModel, index: number): WearableTypeViewModel & { tab_pos: number } => {
+              return {
+                ...elem,
+                tab_pos: index + offset,
+              };
+            })
+            .forEach((elem: WearableTypeViewModel & { tab_pos: number }) => {
+              this.wearableTypes.push(elem);
+            });
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    async getAllWearableTypes(): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/wearableType?noLimit=true`).then((res) => {
+        return { ...res, data: res.data.wearables };
+      });
+    },
+    async searchWearableTypes(search: string): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/wearableType?search=${search}&noLimit=true`).then((res) => {
+        return { ...res, data: res.data.wearables };
+      });
+    },
+    fetchWearableTypeById(id: string) {
+      return http.get(`/admin/wearableType/${id}`);
+    },
+    async createWearableType(wearableType: CreateWearableTypeViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.post(`/admin/wearableType`, {
+        // TODO: data
+      });
+      this.fetchWearableTypes();
+      return result;
+    },
+    async updateWearableType(wearableType: UpdateWearableTypeViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.patch(`/admin/wearableType/${wearableType.id}`, {
+        // TODO: data
+      });
+      this.fetchWearableTypes();
+      return result;
+    },
+    async deleteWearableType(wearableType: number): Promise<AxiosResponse<any, any>> {
+      const result = await http.delete(`/admin/wearableType/${wearableType}`);
+      this.fetchWearableTypes();
+      return result;
+    },
+  },
+});

src/types/permissionTypes.ts

@@ -16,6 +16,8 @@ export type PermissionModule =
   | "respiratory_wearer"
   | "respiratory_mission"
   | "damage_report"
+  | "wearable"
+  | "wearable_type"
   // configuration
   | "qualification"
   | "award"
@@ -72,6 +74,8 @@ export const permissionModules: Array<PermissionModule> = [
   "respiratory_wearer",
   "respiratory_mission",
   "damage_report",
+  "wearable",
+  "wearable_type",
   // configuration
   "qualification",
   "award",
@@ -101,6 +105,8 @@ export const sectionsAndModules: SectionsAndModulesObject = {
     "respiratory_wearer",
     "respiratory_mission",
     "damage_report",
+    "wearable",
+    "wearable_type",
   ],
   configuration: [
     "qualification",

src/viewmodels/admin/unit/wearable/wearable.models.ts

@@ -0,0 +1,29 @@
+import type { MemberViewModel } from "../../club/member/member.models";
+import type { WearableTypeViewModel } from "../wearableType/wearableType.models";
+
+export interface WearableViewModel {
+  id: string;
+  code: string;
+  name: string;
+  location?: string;
+  wearerId?: string;
+  wearer: MemberViewModel;
+  wearableTypeId: string;
+  wearableType: WearableTypeViewModel;
+}
+
+export interface CreateWearableViewModel {
+  code: string;
+  name: string;
+  wearerId?: string;
+  location?: string;
+  wearableTypeId: string;
+}
+
+export interface UpdateWearableViewModel {
+  id: string;
+  code: string;
+  name: string;
+  location?: string;
+  wearerId?: string;
+}

src/viewmodels/admin/unit/wearableType/wearableType.models.ts

@@ -0,0 +1,16 @@
+export interface WearableTypeViewModel {
+  id: string;
+  type: string;
+  description: string;
+}
+
+export interface CreateWearableTypeViewModel {
+  type: string;
+  description: string;
+}
+
+export interface UpdateWearableTypeViewModel {
+  id: string;
+  type: string;
+  description: string;
+}

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

@@ -0,0 +1,214 @@
+<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">Kleidung erfassen</h1>
+      </div>
+    </template>
+    <template #diffMain>
+      <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+        <form class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerCreate">
+          <div>
+            <Combobox v-model="selectedType">
+              <ComboboxLabel>Typ</ComboboxLabel>
+              <div class="relative mt-1">
+                <ComboboxInput
+                  class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+                  @input="query = $event.target.value"
+                />
+                <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
+                  <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+                </ComboboxButton>
+                <TransitionRoot
+                  leave="transition ease-in duration-100"
+                  leaveFrom="opacity-100"
+                  leaveTo="opacity-0"
+                  @after-leave="query = ''"
+                >
+                  <ComboboxOptions
+                    class="z-20 absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-none sm:text-sm"
+                  >
+                    <ComboboxOption v-if="loading || deferingSearch" as="template" disabled>
+                      <li class="flex flex-row gap-2 text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                        <Spinner />
+                        <span class="font-normal block truncate">suche</span>
+                      </li>
+                    </ComboboxOption>
+                    <ComboboxOption v-else-if="filtered.length === 0 && query == ''" as="template" disabled>
+                      <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                        <span class="font-normal block truncate">tippe, um zu suchen...</span>
+                      </li>
+                    </ComboboxOption>
+                    <ComboboxOption v-else-if="filtered.length === 0" as="template" disabled>
+                      <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                        <span class="font-normal block truncate">Keine Auswahl gefunden.</span>
+                      </li>
+                    </ComboboxOption>
+
+                    <ComboboxOption
+                      v-if="!(loading || deferingSearch)"
+                      v-for="type in filtered"
+                      as="template"
+                      :key="type.id"
+                      :value="type.id"
+                      v-slot="{ selected, active }"
+                    >
+                      <li
+                        class="relative cursor-default select-none py-2 pl-10 pr-4"
+                        :class="{
+                          'bg-primary text-white': active,
+                          'text-gray-900': !active,
+                        }"
+                      >
+                        <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
+                          {{ type.type }}
+                        </span>
+                        <span
+                          v-if="selected"
+                          class="absolute inset-y-0 left-0 flex items-center pl-3"
+                          :class="{ 'text-white': active, 'text-primary': !active }"
+                        >
+                          <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                        </span>
+                      </li>
+                    </ComboboxOption>
+                  </ComboboxOptions>
+                </TransitionRoot>
+              </div>
+            </Combobox>
+          </div>
+          <div>
+            <label for="name">Bezeichnung</label>
+            <input type="text" id="name" required />
+          </div>
+          <ScanInput name="code" label="Code" :required="false" />
+          <div>
+            <label for="location">Verortung (optional)</label>
+            <input type="text" id="location" />
+          </div>
+          <MemberSearchSelect title="Träger (optional)" />
+          <div class="flex flex-row justify-end gap-2">
+            <RouterLink
+              :to="{ name: 'admin-unit-wearable' }"
+              primary-outline
+              button
+              class="!w-fit"
+              :disabled="status == 'loading' || status?.status == 'success'"
+            >
+              abbrechen
+            </RouterLink>
+            <button primary type="submit" class="!w-fit" :disabled="status == 'loading'">speichern</button>
+            <Spinner v-if="status == 'loading'" class="my-auto" />
+            <SuccessCheckmark v-else-if="status?.status == 'success'" />
+            <FailureXMark v-else-if="status?.status == 'failed'" />
+          </div>
+        </form>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { useWearableStore } from "@/stores/admin/unit/wearable/wearable";
+import type { CreateWearableViewModel } from "@/viewmodels/admin/unit/wearable/wearable.models";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import {
+  Combobox,
+  ComboboxLabel,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import type { WearableTypeViewModel } from "@/viewmodels/admin/unit/wearableType/wearableType.models";
+import { useWearableTypeStore } from "@/stores/admin/unit/wearableType/wearableType";
+import ScanInput from "@/components/ScanInput.vue";
+import MemberSearchSelect from "../../../../components/admin/MemberSearchSelect.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  watch: {
+    query() {
+      this.deferingSearch = true;
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.deferingSearch = false;
+        this.search();
+      }, 600);
+    },
+  },
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: null as any,
+      selectedType: null as null | string,
+      loading: false as boolean,
+      deferingSearch: false as boolean,
+      timer: undefined as any,
+      query: "" as string,
+      filtered: [] as Array<WearableTypeViewModel>,
+    };
+  },
+  computed: {
+    ...mapState(useWearableTypeStore, ["wearableTypes"]),
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useWearableStore, ["createWearable"]),
+    ...mapActions(useWearableTypeStore, ["searchWearableTypes"]),
+    search() {
+      this.filtered = [];
+      if (this.query == "") return;
+      this.loading = true;
+      this.searchWearableTypes(this.query)
+        .then((res) => {
+          this.filtered = res.data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    triggerCreate(e: any) {
+      if (this.selectedType == null) return;
+      let formData = e.target.elements;
+      let createWearable: CreateWearableViewModel = {
+        code: formData.code.value || null,
+        name: formData.name.value,
+        location: formData.location.value,
+        wearerId: "",
+        wearableTypeId: this.selectedType,
+      };
+      this.status = "loading";
+      this.createWearable(createWearable)
+        .then((res) => {
+          this.status = { status: "success" };
+
+          this.timeout = setTimeout(() => {
+            this.$router.push({
+              name: "admin-unit-wearable-overview",
+              params: {
+                wearableId: res.data,
+              },
+            });
+          }, 1500);
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,51 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <div v-if="activeWearableObj != null" class="flex flex-col gap-2 w-full">
+      <div>
+        <label for="type">Typ</label>
+        <input type="text" id="type" :value="activeWearableObj.wearableType.type" readonly />
+      </div>
+      <div>
+        <label for="name">Bezeichnung</label>
+        <input type="text" id="name" :value="activeWearableObj.name" readonly />
+      </div>
+      <div>
+        <label for="code">Code</label>
+        <input type="text" id="code" :value="activeWearableObj.code" readonly />
+      </div>
+      <div>
+        <label for="location">Verortung</label>
+        <input type="text" id="location" :value="activeWearableObj.location" readonly />
+      </div>
+    </div>
+
+    <Spinner v-if="loadingActive == 'loading'" class="mx-auto" />
+    <p v-else-if="loadingActive == 'failed'" @click="fetchWearableByActiveId" class="cursor-pointer">
+      &#8634; laden fehlgeschlagen
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import Spinner from "@/components/Spinner.vue";
+import { useWearableStore } from "@/stores/admin/unit/wearable/wearable";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    wearableId: String,
+  },
+  computed: {
+    ...mapState(useWearableStore, ["activeWearableObj", "loadingActive"]),
+  },
+  mounted() {
+    this.fetchWearableByActiveId();
+  },
+  methods: {
+    ...mapActions(useWearableStore, ["fetchWearableByActiveId"]),
+  },
+});
+</script>

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

@@ -0,0 +1,121 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <Spinner v-if="loading == 'loading'" class="mx-auto" />
+    <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
+    <form
+      v-else-if="wearable != null"
+      class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
+      @submit.prevent="triggerUpdate"
+    >
+      <p class="mx-auto">Kleidung bearbeiten</p>
+      <div>
+        <label for="name">Bezeichnung</label>
+        <input type="text" id="name" required v-model="wearable.name" />
+      </div>
+      <ScanInput name="code" label="Code" :required="false" v-model="wearable.code" />
+      <div>
+        <label for="location">Verortung (optional)</label>
+        <input type="text" id="location" v-model="wearable.location" />
+      </div>
+      <MemberSearchSelect title="Träger (optional)" />
+      <div class="flex flex-row justify-end gap-2">
+        <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
+          abbrechen
+        </button>
+        <button primary type="submit" class="!w-fit" :disabled="status == 'loading'">speichern</button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useWearableStore } from "@/stores/admin/unit/wearable/wearable";
+import type {
+  CreateWearableViewModel,
+  WearableViewModel,
+  UpdateWearableViewModel,
+} from "@/viewmodels/admin/unit/wearable/wearable.models";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import ScanInput from "@/components/ScanInput.vue";
+import isEqual from "lodash.isequal";
+import cloneDeep from "lodash.clonedeep";
+import MemberSearchSelect from "../../../../components/admin/MemberSearchSelect.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    wearableId: String,
+  },
+  watch: {
+    loadingActive() {
+      if (this.loading == "loading") {
+        this.loading = this.loadingActive;
+      }
+      if (this.loadingActive == "fetched") this.wearable = cloneDeep(this.activeWearableObj);
+    },
+  },
+  data() {
+    return {
+      loading: "loading" as "loading" | "fetched" | "failed",
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      wearable: null as null | WearableViewModel,
+      timeout: null as any,
+    };
+  },
+  computed: {
+    canSaveOrReset(): boolean {
+      return isEqual(this.activeWearableObj, this.wearable);
+    },
+    ...mapState(useWearableStore, ["activeWearableObj", "loadingActive"]),
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useWearableStore, ["updateActiveWearable", "fetchWearableByActiveId"]),
+    resetForm() {
+      this.wearable = cloneDeep(this.activeWearableObj);
+    },
+    fetchItem() {
+      this.fetchWearableByActiveId();
+    },
+    triggerUpdate(e: any) {
+      if (this.wearable == null) return;
+      let formData = e.target.elements;
+      let updateWearable: UpdateWearableViewModel = {
+        id: this.wearable.id,
+        code: formData.code.value || null,
+        name: formData.name.value,
+        location: formData.location.value,
+      };
+      this.status = "loading";
+      this.updateActiveWearable(updateWearable)
+        .then((res) => {
+          this.fetchItem();
+          this.status = { status: "success" };
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        })
+        .finally(() => {
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        });
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,70 @@
+<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">Kleidungen</h1>
+      </div>
+    </template>
+    <template #diffMain>
+      <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
+        <Pagination
+          :items="wearables"
+          :totalCount="totalCount"
+          :indicateLoading="loading == 'loading'"
+          useSearch
+          useScanner
+          @load-data="(offset, count, search) => fetchWearables(offset, count, search)"
+          @search="(search) => fetchWearables(0, maxEntriesPerPage, search, true)"
+        >
+          <template #pageRow="{ row }: { row: WearableViewModel }">
+            <WearableListItem :wearable="row" />
+          </template>
+        </Pagination>
+
+        <div class="flex flex-row gap-4">
+          <RouterLink
+            v-if="can('create', 'unit', 'wearable')"
+            :to="{ name: 'admin-unit-wearable-create' }"
+            primary
+            button
+            class="!w-fit"
+          >
+            Kleidung erfassen
+          </RouterLink>
+        </div>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { useWearableStore } from "@/stores/admin/unit/wearable/wearable";
+import Pagination from "@/components/Pagination.vue";
+import { useAbilityStore } from "@/stores/ability";
+import type { WearableViewModel } from "@/viewmodels/admin/unit/wearable/wearable.models";
+import WearableListItem from "@/components/admin/unit/wearable/WearableListItem.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      currentPage: 0,
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useWearableStore, ["wearables", "totalCount", "loading"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchWearables(0, this.maxEntriesPerPage, "", true);
+  },
+  methods: {
+    ...mapActions(useWearableStore, ["fetchWearables"]),
+  },
+});
+</script>

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

@@ -0,0 +1,79 @@
+<template>
+  <MainTemplate>
+    <template #headerInsert>
+      <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
+    </template>
+    <template #topBar>
+      <div class="flex flex-row gap-2 items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8 min-h-fit grow">
+          {{ activeWearableObj?.name }}
+        </h1>
+
+        <RouterLink v-if="can('update', 'unit', 'wearable')" :to="{ name: 'admin-unit-wearable-edit' }">
+          <PencilIcon class="w-5 h-5" />
+        </RouterLink>
+      </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 { defineComponent } 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 { useAbilityStore } from "@/stores/ability";
+import { useWearableStore } from "@/stores/admin/unit/wearable/wearable";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    wearableId: String,
+  },
+  data() {
+    return {
+      tabs: [
+        { route: "admin-unit-wearable-overview", title: "Übersicht" },
+        { route: "admin-unit-wearable-damage_report", title: "Schadensmeldungen" },
+      ],
+    };
+  },
+  computed: {
+    ...mapState(useWearableStore, ["activeWearableObj"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchWearableByActiveId();
+  },
+  methods: {
+    ...mapActions(useWearableStore, ["fetchWearableByActiveId"]),
+  },
+});
+</script>

src/views/admin/unit/wearableType/UpdateWearableType.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <Spinner v-if="loading == 'loading'" class="mx-auto" />
+    <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
+    <form
+      v-else-if="wearableType != null"
+      class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
+      @submit.prevent="triggerUpdate"
+    >
+      <p class="mx-auto">Kleidung bearbeiten</p>
+      <div>
+        <label for="name">Bezeichnung</label>
+        <input type="text" id="name" required v-model="wearableType.type" />
+      </div>
+      <div>
+        <label for="description">Beschreibung (optional)</label>
+        <input type="text" id="description" v-model="wearableType.description" />
+      </div>
+      <div class="flex flex-row justify-end gap-2">
+        <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
+          abbrechen
+        </button>
+        <button primary type="submit" class="!w-fit" :disabled="status == 'loading'">speichern</button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useWearableTypeStore } from "@/stores/admin/unit/wearableType/wearableType";
+import type {
+  CreateWearableTypeViewModel,
+  WearableTypeViewModel,
+  UpdateWearableTypeViewModel,
+} from "@/viewmodels/admin/unit/wearableType/wearableType.models";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import ScanInput from "@/components/ScanInput.vue";
+import isEqual from "lodash.isequal";
+import cloneDeep from "lodash.clonedeep";
+import MemberSearchSelect from "../../../../components/admin/MemberSearchSelect.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    wearableTypeId: String,
+  },
+  data() {
+    return {
+      loading: "loading" as "loading" | "fetched" | "failed",
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      origin: null as null | WearableTypeViewModel,
+      wearableType: null as null | WearableTypeViewModel,
+      timeout: null as any,
+    };
+  },
+  computed: {
+    canSaveOrReset(): boolean {
+      return isEqual(this.origin, this.wearableType);
+    },
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useWearableTypeStore, ["updateWearableType", "fetchWearableTypeById"]),
+    resetForm() {
+      this.wearableType = cloneDeep(this.origin);
+    },
+    fetchItem() {
+      this.fetchWearableTypeById(this.wearableTypeId ?? "")
+        .then((result) => {
+          this.wearableType = result.data;
+          this.origin = cloneDeep(result.data);
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    triggerUpdate(e: any) {
+      if (this.wearableType == null) return;
+      let formData = e.target.elements;
+      let updateWearableType: UpdateWearableTypeViewModel = {
+        id: this.wearableType.id,
+        type: formData.name.value,
+        description: formData.description.value,
+      };
+      this.status = "loading";
+      this.updateWearableType(updateWearableType)
+        .then((res) => {
+          this.fetchItem();
+          this.status = { status: "success" };
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        })
+        .finally(() => {
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        });
+    },
+  },
+});
+</script>

src/views/admin/unit/wearableType/WearableType.vue

@@ -0,0 +1,70 @@
+<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">Kleidungs-Typen</h1>
+      </div>
+    </template>
+    <template #diffMain>
+      <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
+        <Pagination
+          :items="wearableTypes"
+          :totalCount="totalCount"
+          :indicateLoading="loading == 'loading'"
+          useSearch
+          @load-data="(offset, count, search) => fetchWearableTypes(offset, count, search)"
+          @search="(search) => fetchWearableTypes(0, maxEntriesPerPage, search, true)"
+        >
+          <template #pageRow="{ row }: { row: WearableTypeViewModel }">
+            <WearableTypeListItem :wearableType="row" />
+          </template>
+        </Pagination>
+
+        <div class="flex flex-row gap-4">
+          <button v-if="can('create', 'unit', 'wearable_type')" primary class="!w-fit" @click="openCreateModal">
+            Geräte-Typ erstellen
+          </button>
+        </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 { useWearableTypeStore } from "@/stores/admin/unit/wearableType/wearableType";
+import { useModalStore } from "@/stores/modal";
+import Pagination from "@/components/Pagination.vue";
+import { useAbilityStore } from "@/stores/ability";
+import type { WearableTypeViewModel } from "@/viewmodels/admin/unit/wearableType/wearableType.models";
+import WearableTypeListItem from "@/components/admin/unit/wearableType/WearableTypeListItem.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      currentPage: 0,
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useWearableTypeStore, ["wearableTypes", "totalCount", "loading"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchWearableTypes(0, this.maxEntriesPerPage, "", true);
+  },
+  methods: {
+    ...mapActions(useWearableTypeStore, ["fetchWearableTypes"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    openCreateModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/unit/wearableType/CreateWearableTypeModal.vue")))
+      );
+    },
+  },
+});
+</script>