unit data collections

src/components/admin/unit/equipmentType/CreateEquipmentTypeModal.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Mitglied erstellen</p>
+    </div>
+    <br />
+    <form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
+      <div>
+        <Listbox v-model="selectedSalutation" name="salutation" by="id">
+          <ListboxLabel>Anrede</ListboxLabel>
+          <div class="relative mt-1">
+            <ListboxButton
+              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"
+            >
+              <span class="block truncate w-full text-start"> {{ selectedSalutation?.salutation }}</span>
+              <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+              </span>
+            </ListboxButton>
+
+            <transition
+              leave-active-class="transition duration-100 ease-in"
+              leave-from-class="opacity-100"
+              leave-to-class="opacity-0"
+            >
+              <ListboxOptions
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+              >
+                <ListboxOption
+                  v-slot="{ active, selected }"
+                  v-for="salutation in salutations"
+                  :key="salutation.id"
+                  :value="salutation"
+                  as="template"
+                >
+                  <li
+                    :class="[
+                      active ? 'bg-red-200 text-amber-900' : 'text-gray-900',
+                      'relative cursor-default select-none py-2 pl-10 pr-4',
+                    ]"
+                  >
+                    <span :class="[selected ? 'font-medium' : 'font-normal', 'block truncate']">{{
+                      salutation.salutation
+                    }}</span>
+                    <span v-if="selected" class="absolute inset-y-0 left-0 flex items-center pl-3 text-primary">
+                      <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                    </span>
+                  </li>
+                </ListboxOption>
+              </ListboxOptions>
+            </transition>
+          </div>
+        </Listbox>
+      </div>
+      <div>
+        <label for="firstname">Vorname</label>
+        <input type="text" id="firstname" required />
+      </div>
+      <div>
+        <label for="lastname">Nachname</label>
+        <input type="text" id="lastname" required />
+      </div>
+      <div>
+        <label for="nameaffix">Nameaffix (optional)</label>
+        <input type="text" id="nameaffix" />
+      </div>
+      <div>
+        <label for="birthdate">Geburtsdatum</label>
+        <input type="date" id="birthdate" required />
+      </div>
+      <div>
+        <label for="internalId">Interne ID (optional)</label>
+        <input type="text" id="internalId" />
+      </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 { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
+import type { CreateEquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
+import { useSalutationStore } from "../../../../stores/admin/configuration/salutation";
+import type { SalutationViewModel } from "../../../../viewmodels/admin/configuration/salutation.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+      selectedSalutation: null as null | SalutationViewModel,
+    };
+  },
+  computed: {
+    ...mapState(useSalutationStore, ["salutations"]),
+  },
+  mounted() {
+    this.fetchSalutations();
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useEquipmentStore, ["createEquipment"]),
+    ...mapActions(useSalutationStore, ["fetchSalutations"]),
+    triggerCreate(e: any) {
+      if (!this.selectedSalutation) return;
+      let formData = e.target.elements;
+      let createEquipment: CreateEquipmentViewModel = {
+        salutationId: this.selectedSalutation.id,
+        firstname: formData.firstname.value,
+        lastname: formData.lastname.value,
+        nameaffix: formData.nameaffix.value,
+        birthdate: formData.birthdate.value,
+        internalId: formData.internalId.value,
+      };
+      this.status = "loading";
+      this.createEquipment(createEquipment)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>

src/components/admin/unit/equipmentType/EquipmentTypeListItem.vue

@@ -0,0 +1,33 @@
+<template>
+  <RouterLink
+    :to="{ name: 'admin-unit-equipment-overview', params: { equipmentId: equipment.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>
+        {{ equipment.lastname }}, {{ equipment.firstname }} {{ equipment.nameaffix ? `- ${equipment.nameaffix}` : "" }}
+      </p>
+    </div>
+    <div class="p-2">
+      <p v-if="equipment.internalId">ID: {{ equipment.internalId }}</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 { EquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    equipment: { type: Object as PropType<EquipmentViewModel>, default: {} },
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+});
+</script>

src/router/index.ts

@@ -346,6 +346,76 @@ const router = createRouter({
                 },
               ],
             },
+            {
+              path: "respiratory-gear",
+              name: "admin-unit-respiratory_gear-route",
+              component: () => import("@/views/RouterView.vue"),
+              meta: { type: "read", section: "unit", module: "respiratory_gear" },
+              beforeEnter: [abilityAndNavUpdate],
+              children: [
+                {
+                  path: "",
+                  name: "admin-unit-respiratory_gear",
+                  component: () => import("@/views/admin/unit/respiratoryGear/RespiratoryGear.vue"),
+                },
+              ],
+            },
+            {
+              path: "respiratory-wearer",
+              name: "admin-unit-respiratory_wearer-route",
+              component: () => import("@/views/RouterView.vue"),
+              meta: { type: "read", section: "unit", module: "respiratory_wearer" },
+              beforeEnter: [abilityAndNavUpdate],
+              children: [
+                {
+                  path: "",
+                  name: "admin-unit-respiratory_wearer",
+                  component: () => import("@/views/admin/unit/respiratoryWearer/RespiratoryWearer.vue"),
+                },
+              ],
+            },
+            {
+              path: "respiratory-mission",
+              name: "admin-unit-respiratory_mission-route",
+              component: () => import("@/views/RouterView.vue"),
+              meta: { type: "read", section: "unit", module: "respiratory_gear" },
+              beforeEnter: [abilityAndNavUpdate],
+              children: [
+                {
+                  path: "",
+                  name: "admin-unit-respiratory_mission",
+                  component: () => import("@/views/admin/unit/respiratoryMission/RespiratoryMission.vue"),
+                },
+              ],
+            },
+            {
+              path: "damage-report",
+              name: "admin-unit-damage_report-route",
+              component: () => import("@/views/RouterView.vue"),
+              meta: { type: "read", section: "unit", module: "damage_report" },
+              beforeEnter: [abilityAndNavUpdate],
+              children: [
+                {
+                  path: "",
+                  name: "admin-unit-damage_report",
+                  component: () => import("@/views/admin/unit/damageReport/DamageReport.vue"),
+                },
+              ],
+            },
+            {
+              path: "equipment-type",
+              name: "admin-unit-equipment_type-route",
+              component: () => import("@/views/RouterView.vue"),
+              meta: { type: "read", section: "unit", module: "equipment_type" },
+              beforeEnter: [abilityAndNavUpdate],
+              children: [
+                {
+                  path: "",
+                  name: "admin-unit-equipment_type",
+                  component: () => import("@/views/admin/unit/equipmentType/EquipmentType.vue"),
+                },
+              ],
+            },
           ],
         },
         {

src/stores/admin/navigation.ts

@@ -109,10 +109,26 @@ 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", "respiratory_gear")
+              ? [{ key: "respiratory_gear", title: "Atemschutz-Geräte" }]
+              : []),
+            ...(abilityStore.can("read", "unit", "respiratory_wearer")
+              ? [{ key: "respiratory_wearer", title: "Atemschutz-Träger" }]
+              : []),
+            ...(abilityStore.can("read", "unit", "respiratory_mission")
+              ? [{ key: "respiratory_mission", title: "Atemschutz-Einsätze" }]
+              : []),
+            ...(abilityStore.can("read", "unit", "damage_report")
+              ? [{ key: "damage_report", title: "Schadensmeldungen" }]
+              : []),
+            { key: "divider1", title: "Basisdaten" },
+            ...(abilityStore.can("read", "unit", "equipment_type")
+              ? [{ key: "equipment_type", title: "Geräte-Typen" }]
+              : []),
           ],
         },
         configuration: {
-          mainTitle: "Einstellungen",
+          mainTitle: "Konfiguration",
           main: [
             { key: "divider1", title: "Mitgliederdaten" },
             ...(abilityStore.can("read", "configuration", "salutation")

src/stores/admin/unit/equipmentType.ts

@@ -0,0 +1,98 @@
+import { defineStore } from "pinia";
+import type {
+  EquipmentTypeViewModel,
+  CreateEquipmentTypeViewModel,
+  UpdateEquipmentTypeViewModel,
+} from "@/viewmodels/admin/unit/equipmentType.models";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+
+export const useEquipmentTypeStore = defineStore("equipmentType", {
+  state: () => {
+    return {
+      equipmentTypes: [] as Array<EquipmentTypeViewModel & { tab_pos: number }>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchEquipmentTypes(offset = 0, count = 25, search = "", clear = false) {
+      if (clear) this.equipmentTypes = [];
+      this.loading = "loading";
+      http
+        .get(`/admin/equipmentType?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
+        .then((result) => {
+          this.totalCount = result.data.total;
+          result.data.equipments
+            .filter((elem: EquipmentTypeViewModel) => this.equipmentTypes.findIndex((m) => m.id == elem.id) == -1)
+            .map((elem: EquipmentTypeViewModel, index: number): EquipmentTypeViewModel & { tab_pos: number } => {
+              return {
+                ...elem,
+                tab_pos: index + offset,
+              };
+            })
+            .forEach((elem: EquipmentTypeViewModel & { tab_pos: number }) => {
+              this.equipmentTypes.push(elem);
+            });
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    async getAllEquipmentTypes(): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/equipment?noLimit=true`).then((res) => {
+        return { ...res, data: res.data.equipments };
+      });
+    },
+    async getEquipmentTypesByIds(ids: Array<string>): Promise<AxiosResponse<any, any>> {
+      return await http
+        .post(`/admin/equipment/ids`, {
+          ids,
+        })
+        .then((res) => {
+          return { ...res, data: res.data.equipments };
+        });
+    },
+    async searchEquipmentTypes(search: string): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/equipment?search=${search}&noLimit=true`).then((res) => {
+        return { ...res, data: res.data.equipments };
+      });
+    },
+    fetchEquipmentTypeById(id: string) {
+      return http.get(`/admin/equipment/${id}`);
+    },
+    fetchEquipmentTypeStatisticsById(id: string) {
+      return http.get(`/admin/equipment/${id}/statistics`);
+    },
+    async createEquipmentType(equipment: CreateEquipmentTypeViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.post(`/admin/equipment`, {
+        salutationId: equipment.salutationId,
+        firstname: equipment.firstname,
+        lastname: equipment.lastname,
+        nameaffix: equipment.nameaffix,
+        birthdate: equipment.birthdate,
+        internalId: equipment.internalId,
+      });
+      this.fetchEquipmentTypes();
+      return result;
+    },
+    async updateEquipmentType(equipment: UpdateEquipmentTypeViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.patch(`/admin/equipment/${equipment.id}`, {
+        salutationId: equipment.salutationId,
+        firstname: equipment.firstname,
+        lastname: equipment.lastname,
+        nameaffix: equipment.nameaffix,
+        birthdate: equipment.birthdate,
+        internalId: equipment.internalId,
+      });
+      this.fetchEquipmentTypes();
+      return result;
+    },
+    async deleteEquipmentType(equipment: number): Promise<AxiosResponse<any, any>> {
+      const result = await http.delete(`/admin/equipment/${equipment}`);
+      this.fetchEquipmentTypes();
+      return result;
+    },
+  },
+});

src/types/permissionTypes.ts

@@ -10,7 +10,12 @@ export type PermissionModule =
   | "listprint"
   // unit
   | "equipment"
+  | "equipment_type"
   | "vehicle"
+  | "respiratory_gear"
+  | "respiratory_wearer"
+  | "respiratory_mission"
+  | "damage_report"
   // configuration
   | "qualification"
   | "award"
@@ -52,34 +57,51 @@ export type SectionsAndModulesObject = {
 
 export const permissionSections: Array<PermissionSection> = ["club", "unit", "configuration", "management"];
 export const permissionModules: Array<PermissionModule> = [
+  // club
   "member",
   "calendar",
   "newsletter",
-  "newsletter_config",
   "protocol",
+  "query",
   "listprint",
+  // unit
   "equipment",
+  "equipment_type",
   "vehicle",
+  "respiratory_gear",
+  "respiratory_wearer",
+  "respiratory_mission",
+  "damage_report",
+  // configuration
   "qualification",
   "award",
   "executive_position",
   "communication_type",
   "membership_status",
+  "newsletter_config",
   "salutation",
   "calendar_type",
-  "user",
-  "role",
-  "webapi",
-  "query",
   "query_store",
   "template",
   "template_usage",
   "backup",
+  // management
+  "user",
+  "role",
+  "webapi",
 ];
 export const permissionTypes: Array<PermissionType> = ["read", "create", "update", "delete"];
 export const sectionsAndModules: SectionsAndModulesObject = {
   club: ["member", "calendar", "newsletter", "protocol", "query", "listprint"],
-  unit: ["equipment", "vehicle"],
+  unit: [
+    "equipment",
+    "equipment_type",
+    "vehicle",
+    "respiratory_gear",
+    "respiratory_wearer",
+    "respiratory_mission",
+    "damage_report",
+  ],
   configuration: [
     "qualification",
     "award",

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

@@ -0,0 +1,39 @@
+export interface EquipmentTypeViewModel {
+  id: string;
+  firstname: string;
+  lastname: string;
+  nameaffix: string;
+  birthdate: Date;
+  internalId?: string;
+}
+
+export interface EquipmentTypeStatisticsViewModel {
+  id: string;
+  salutation: string;
+  firstname: string;
+  lastname: string;
+  nameaffix: string;
+  birthdate: Date;
+  todayAge: number;
+  ageThisYear: number;
+  exactAge: string;
+}
+
+export interface CreateEquipmentTypeViewModel {
+  salutationId: number;
+  firstname: string;
+  lastname: string;
+  nameaffix: string;
+  birthdate: Date;
+  internalId?: string;
+}
+
+export interface UpdateEquipmentTypeViewModel {
+  id: string;
+  salutationId: number;
+  firstname: string;
+  lastname: string;
+  nameaffix: string;
+  birthdate: Date;
+  internalId?: string;
+}

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

@@ -0,0 +1,26 @@
+<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>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {};
+  },
+});
+</script>

src/views/admin/unit/equipmentType/EquipmentType.vue

@@ -0,0 +1,73 @@
+<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">Geräte-Typen</h1>
+      </div>
+    </template>
+    <template #diffMain>
+      <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
+        <Pagination
+          :items="equipmentTypes"
+          :totalCount="totalCount"
+          :indicateLoading="loading == 'loading'"
+          useSearch
+          useScanner
+          @load-data="(offset, count, search) => fetchEquipmentTypes(offset, count, search)"
+          @search="(search) => fetchEquipmentTypes(0, maxEntriesPerPage, search, true)"
+        >
+          <template #pageRow="{ row }: { row: EquipmentTypeViewModel }">
+            <EquipmentTypeListItem :equipmentType="row" />
+          </template>
+        </Pagination>
+
+        <div class="flex flex-row gap-4">
+          <button v-if="can('create', 'club', 'equipment_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 { useEquipmentTypeStore } from "@/stores/admin/unit/equipmentType";
+import { useModalStore } from "@/stores/modal";
+import Pagination from "@/components/Pagination.vue";
+import { useAbilityStore } from "@/stores/ability";
+import type { EquipmentTypeViewModel } from "@/viewmodels/admin/unit/equipmentType.models";
+import EquipmentTypeListItem from "@/components/admin/unit/equipmentType/EquipmentTypeListItem.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      currentPage: 0,
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useEquipmentTypeStore, ["equipmentTypes", "totalCount", "loading"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchEquipmentTypes(0, this.maxEntriesPerPage, "", true);
+  },
+  methods: {
+    ...mapActions(useEquipmentTypeStore, ["fetchEquipmentTypes"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    openCreateModal() {
+      this.openModal(
+        markRaw(
+          defineAsyncComponent(() => import("@/components/admin/unit/equipmentType/CreateEquipmentTypeModal.vue"))
+        )
+      );
+    },
+  },
+});
+</script>

src/views/admin/unit/respiratoryGear/RespiratoryGear.vue

@@ -0,0 +1,71 @@
+<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">Atemschutz-Geräte</h1>
+      </div>
+    </template>
+    <template #diffMain>
+      <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
+        <Pagination
+          :items="equipments"
+          :totalCount="totalCount"
+          :indicateLoading="loading == 'loading'"
+          useSearch
+          useScanner
+          @load-data="(offset, count, search) => fetchEquipments(offset, count, search)"
+          @search="(search) => fetchEquipments(0, maxEntriesPerPage, search, true)"
+        >
+          <template #pageRow="{ row }: { row: EquipmentViewModel }">
+            <EquipmentListItem :equipment="row" />
+          </template>
+        </Pagination>
+
+        <div class="flex flex-row gap-4">
+          <button v-if="can('create', 'club', 'respiratory_gear')" primary class="!w-fit" @click="openCreateModal">
+            Gerät erfassen
+          </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 { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
+import { useModalStore } from "@/stores/modal";
+import Pagination from "@/components/Pagination.vue";
+import { useAbilityStore } from "@/stores/ability";
+import type { EquipmentViewModel } from "../../../../viewmodels/admin/unit/equipment/equipment.models";
+import EquipmentListItem from "../../../../components/admin/unit/equipment/EquipmentListItem.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      currentPage: 0,
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useEquipmentStore, ["equipments", "totalCount", "loading"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchEquipments(0, this.maxEntriesPerPage, "", true);
+  },
+  methods: {
+    ...mapActions(useEquipmentStore, ["fetchEquipments"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    openCreateModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/unit/equipment/CreateEquipmentModal.vue")))
+      );
+    },
+  },
+});
+</script>

src/views/admin/unit/respiratoryMission/RespiratoryMission.vue

@@ -0,0 +1,71 @@
+<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">Atemschutz-Einsätze</h1>
+      </div>
+    </template>
+    <template #diffMain>
+      <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
+        <Pagination
+          :items="equipments"
+          :totalCount="totalCount"
+          :indicateLoading="loading == 'loading'"
+          useSearch
+          useScanner
+          @load-data="(offset, count, search) => fetchEquipments(offset, count, search)"
+          @search="(search) => fetchEquipments(0, maxEntriesPerPage, search, true)"
+        >
+          <template #pageRow="{ row }: { row: EquipmentViewModel }">
+            <EquipmentListItem :equipment="row" />
+          </template>
+        </Pagination>
+
+        <div class="flex flex-row gap-4">
+          <button v-if="can('create', 'club', 'respiratory_mission')" primary class="!w-fit" @click="openCreateModal">
+            Einsatz erfassen
+          </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 { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
+import { useModalStore } from "@/stores/modal";
+import Pagination from "@/components/Pagination.vue";
+import { useAbilityStore } from "@/stores/ability";
+import type { EquipmentViewModel } from "../../../../viewmodels/admin/unit/equipment/equipment.models";
+import EquipmentListItem from "../../../../components/admin/unit/equipment/EquipmentListItem.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      currentPage: 0,
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useEquipmentStore, ["equipments", "totalCount", "loading"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchEquipments(0, this.maxEntriesPerPage, "", true);
+  },
+  methods: {
+    ...mapActions(useEquipmentStore, ["fetchEquipments"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    openCreateModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/unit/equipment/CreateEquipmentModal.vue")))
+      );
+    },
+  },
+});
+</script>

src/views/admin/unit/respiratoryWearer/RespiratoryWearer.vue

@@ -0,0 +1,71 @@
+<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">Atemschutz-Träger</h1>
+      </div>
+    </template>
+    <template #diffMain>
+      <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
+        <Pagination
+          :items="equipments"
+          :totalCount="totalCount"
+          :indicateLoading="loading == 'loading'"
+          useSearch
+          useScanner
+          @load-data="(offset, count, search) => fetchEquipments(offset, count, search)"
+          @search="(search) => fetchEquipments(0, maxEntriesPerPage, search, true)"
+        >
+          <template #pageRow="{ row }: { row: EquipmentViewModel }">
+            <EquipmentListItem :equipment="row" />
+          </template>
+        </Pagination>
+
+        <div class="flex flex-row gap-4">
+          <button v-if="can('create', 'club', 'respiratory_wearer')" primary class="!w-fit" @click="openCreateModal">
+            Träger erfassen
+          </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 { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
+import { useModalStore } from "@/stores/modal";
+import Pagination from "@/components/Pagination.vue";
+import { useAbilityStore } from "@/stores/ability";
+import type { EquipmentViewModel } from "../../../../viewmodels/admin/unit/equipment/equipment.models";
+import EquipmentListItem from "../../../../components/admin/unit/equipment/EquipmentListItem.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      currentPage: 0,
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useEquipmentStore, ["equipments", "totalCount", "loading"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchEquipments(0, this.maxEntriesPerPage, "", true);
+  },
+  methods: {
+    ...mapActions(useEquipmentStore, ["fetchEquipments"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    openCreateModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/unit/equipment/CreateEquipmentModal.vue")))
+      );
+    },
+  },
+});
+</script>