inspection plans and vehicle types

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

@@ -1,7 +1,7 @@
 <template>
   <MainTemplate>
     <template #headerInsert>
-      <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
+      <RouterLink :to="{ name: 'admin-unit-equipment_type' }" 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">

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

@@ -9,10 +9,6 @@
         <label for="description">Beschreibung</label>
         <textarea id="description" :value="activeEquipmentTypeObj.description" class="h-18" readonly></textarea>
       </div>
-      <div>
-        <label for="interval">Intervall</label>
-        <input type="text" id="interval" :value="activeEquipmentTypeObj.inspectionInterval" reaonly />
-      </div>
     </div>
 
     <Spinner v-if="loadingActive == 'loading'" class="mx-auto" />

src/views/admin/unit/inspectionPlan/CreateInspectionPlan.vue

@@ -0,0 +1,209 @@
+<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">Ausrüstung 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>
+          <div>
+            <label for="interval">Intervall (optional)</label>
+            <input type="text" id="interval" placeholder="<number>-(d|m|y) oder DD/MM" />
+          </div>
+          <div class="flex flex-row justify-end gap-2">
+            <RouterLink
+              :to="{ name: 'admin-unit-inspectionPlan' }"
+              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 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 { useInspectionPlanStore } from "@/stores/admin/unit/inspectionPlan/inspectionPlan";
+import type { CreateInspectionPlanViewModel } from "@/viewmodels/admin/unit/inspectionPlan/inspectionPlan.models";
+import ScanInput from "@/components/ScanInput.vue";
+import type { EquipmentTypeViewModel } from "../../../../viewmodels/admin/unit/equipmentType/equipmentType.models";
+import { useEquipmentTypeStore } from "../../../../stores/admin/unit/equipmentType/equipmentType";
+</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<EquipmentTypeViewModel>,
+    };
+  },
+  computed: {
+    ...mapState(useInspectionPlanStore, ["inspectionPlans"]),
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useInspectionPlanStore, ["createInspectionPlan"]),
+    ...mapActions(useEquipmentTypeStore, ["searchEquipmentTypes"]),
+    search() {
+      this.filtered = [];
+      if (this.query == "") return;
+      this.loading = true;
+      this.searchEquipmentTypes(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 createInspectionPlan: CreateInspectionPlanViewModel = {
+        title: formData.name.value,
+        equipmentTypeId: "",
+        inspectionInterval: formData.name.value || null,
+      };
+      this.status = "loading";
+      this.createInspectionPlan(createInspectionPlan)
+        .then((res) => {
+          this.status = { status: "success" };
+
+          this.timeout = setTimeout(() => {
+            this.$router.push({
+              name: "admin-unit-inspectionPlan-overview",
+              params: {
+                inspectionPlanId: res.data,
+              },
+            });
+          }, 1500);
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>

src/views/admin/unit/inspectionPlan/InspectionPlan.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">Prüfpläne</h1>
+      </div>
+    </template>
+    <template #diffMain>
+      <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
+        <Pagination
+          :items="inspectionPlans"
+          :totalCount="totalCount"
+          :indicateLoading="loading == 'loading'"
+          useSearch
+          useScanner
+          @load-data="(offset, count, search) => fetchInspectionPlans(offset, count, search)"
+          @search="(search) => fetchInspectionPlans(0, maxEntriesPerPage, search, true)"
+        >
+          <template #pageRow="{ row }: { row: InspectionPlanViewModel }">
+            <InspectionPlanListItem :inspectionPlan="row" />
+          </template>
+        </Pagination>
+
+        <div class="flex flex-row gap-4">
+          <RouterLink
+            v-if="can('create', 'unit', 'inspection_plan')"
+            :to="{ name: 'admin-unit-inspection_plan-create' }"
+            primary
+            button
+            class="!w-fit"
+          >
+            Prüfplan erstellen
+          </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 { useInspectionPlanStore } from "@/stores/admin/unit/inspectionPlan/inspectionPlan";
+import Pagination from "@/components/Pagination.vue";
+import { useAbilityStore } from "@/stores/ability";
+import type { InspectionPlanViewModel } from "@/viewmodels/admin/unit/inspectionPlan/inspectionPlan.models";
+import InspectionPlanListItem from "@/components/admin/unit/inspectionPlan/InspectionPlanListItem.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      currentPage: 0,
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useInspectionPlanStore, ["inspectionPlans", "totalCount", "loading"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchInspectionPlans(0, this.maxEntriesPerPage, "", true);
+  },
+  methods: {
+    ...mapActions(useInspectionPlanStore, ["fetchInspectionPlans"]),
+  },
+});
+</script>

src/views/admin/unit/inspectionPlan/InspectionPlanRouting.vue

@@ -0,0 +1,56 @@
+<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">
+          {{ activeInspectionPlanObj?.title }}
+        </h1>
+
+        <RouterLink v-if="can('update', 'unit', 'inspection_plan')" :to="{ name: 'admin-unit-inspection_plan-edit' }">
+          <PencilIcon class="w-5 h-5" />
+        </RouterLink>
+      </div>
+    </template>
+    <template #diffMain>
+      <div class="flex flex-col gap-2 grow px-7 overflow-hidden">
+        <RouterView />
+      </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 { useInspectionPlanStore } from "@/stores/admin/unit/inspectionPlan/inspectionPlan";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    inspectionPlanId: String,
+  },
+  data() {
+    return {
+      tabs: [{ route: "admin-unit-inspection_plan-overview", title: "Übersicht" }],
+    };
+  },
+  computed: {
+    ...mapState(useInspectionPlanStore, ["activeInspectionPlanObj"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchInspectionPlanByActiveId();
+  },
+  methods: {
+    ...mapActions(useInspectionPlanStore, ["fetchInspectionPlanByActiveId"]),
+  },
+});
+</script>

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

@@ -0,0 +1,43 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <div v-if="activeInspectionPlanObj != null" class="flex flex-col gap-2 w-full">
+      <div>
+        <label for="type">Typ</label>
+        <input type="text" id="type" :value="activeInspectionPlanObj.equipmentType.type" readonly />
+      </div>
+      <div>
+        <label for="interval">Intervall</label>
+        <input type="text" id="interval" :value="activeInspectionPlanObj.inspectionInterval" reaonly />
+      </div>
+    </div>
+
+    <Spinner v-if="loadingActive == 'loading'" class="mx-auto" />
+    <p v-else-if="loadingActive == 'failed'" @click="fetchInspectionPlanByActiveId" 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 { useInspectionPlanStore } from "@/stores/admin/unit/inspectionPlan/inspectionPlan";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    inspectionPlanId: String,
+  },
+  computed: {
+    ...mapState(useInspectionPlanStore, ["activeInspectionPlanObj", "loadingActive"]),
+  },
+  mounted() {
+    this.fetchInspectionPlanByActiveId();
+  },
+  methods: {
+    ...mapActions(useInspectionPlanStore, ["fetchInspectionPlanByActiveId"]),
+  },
+});
+</script>

src/views/admin/unit/inspectionPlan/UpdateInspectionPlan.vue

@@ -0,0 +1,117 @@
+<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="inspectionPlan != null"
+      class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
+      @submit.prevent="triggerUpdate"
+    >
+      <p class="mx-auto">Ausrüstung bearbeiten</p>
+      <div>
+        <label for="name">Bezeichnung</label>
+        <input type="text" id="name" required v-model="inspectionPlan.title" />
+      </div>
+      <div>
+        <label for="interval">Intervall (optional)</label>
+        <input type="text" id="interval" placeholder="<number>-(d|m|y) oder DD/MM" />
+      </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 { useInspectionPlanStore } from "@/stores/admin/unit/inspectionPlan/inspectionPlan";
+import type {
+  CreateInspectionPlanViewModel,
+  InspectionPlanViewModel,
+  UpdateInspectionPlanViewModel,
+} from "@/viewmodels/admin/unit/inspectionPlan/inspectionPlan.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";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    inspectionPlanId: String,
+  },
+  watch: {
+    loadingActive() {
+      if (this.loading == "loading") {
+        this.loading = this.loadingActive;
+      }
+      if (this.loadingActive == "fetched") this.inspectionPlan = cloneDeep(this.activeInspectionPlanObj);
+    },
+  },
+  data() {
+    return {
+      loading: "loading" as "loading" | "fetched" | "failed",
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      inspectionPlan: null as null | InspectionPlanViewModel,
+      timeout: null as any,
+    };
+  },
+  computed: {
+    canSaveOrReset(): boolean {
+      return isEqual(this.activeInspectionPlanObj, this.inspectionPlan);
+    },
+    ...mapState(useInspectionPlanStore, ["activeInspectionPlanObj", "loadingActive"]),
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useInspectionPlanStore, ["updateActiveInspectionPlan", "fetchInspectionPlanByActiveId"]),
+    resetForm() {
+      this.inspectionPlan = cloneDeep(this.activeInspectionPlanObj);
+    },
+    fetchItem() {
+      this.fetchInspectionPlanByActiveId();
+    },
+    triggerUpdate(e: any) {
+      if (this.inspectionPlan == null) return;
+      let formData = e.target.elements;
+      let updateInspectionPlan: UpdateInspectionPlanViewModel = {
+        id: this.inspectionPlan.id,
+        title: formData.name.value,
+        inspectionInterval: formData.location.value || null,
+      };
+      this.status = "loading";
+      this.updateActiveInspectionPlan(updateInspectionPlan)
+        .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/vehicleType/InspectionPlans.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <Pagination
+      :items="[]"
+      :totalCount="0"
+      :indicateLoading="false"
+      @load-data="(offset, count, search) => {}"
+      @search="(search) => {}"
+    >
+      <template #pageRow="{ row }: { row: { id: string } }">
+        <p>{{ row }}</p>
+      </template>
+    </Pagination>
+
+    <div class="flex flex-row gap-4">
+      <button v-if="can('create', 'unit', 'equipment_type')" primary class="!w-fit" @click="">
+        Prüfplan erstellen
+      </button>
+    </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";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      currentPage: 0,
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+});
+</script>

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

@@ -0,0 +1,43 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <div v-if="activeVehicleTypeObj != null" class="flex flex-col gap-2 w-full">
+      <div>
+        <label for="type">Typ</label>
+        <input type="text" id="type" :value="activeVehicleTypeObj.type" readonly />
+      </div>
+      <div>
+        <label for="description">Beschreibung</label>
+        <textarea id="description" :value="activeVehicleTypeObj.description" class="h-18" readonly></textarea>
+      </div>
+    </div>
+
+    <Spinner v-if="loadingActive == 'loading'" class="mx-auto" />
+    <p v-else-if="loadingActive == 'failed'" @click="fetchVehicleTypeByActiveId" 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 { useVehicleTypeStore } from "@/stores/admin/unit/vehicleType/vehicleType";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    vehicleTypeId: String,
+  },
+  computed: {
+    ...mapState(useVehicleTypeStore, ["activeVehicleTypeObj", "loadingActive"]),
+  },
+  mounted() {
+    this.fetchVehicleTypeByActiveId();
+  },
+  methods: {
+    ...mapActions(useVehicleTypeStore, ["fetchVehicleTypeByActiveId"]),
+  },
+});
+</script>

src/views/admin/unit/vehicleType/VehicleType.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">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="vehicleTypes"
+          :totalCount="totalCount"
+          :indicateLoading="loading == 'loading'"
+          useSearch
+          @load-data="(offset, count, search) => fetchVehicleTypes(offset, count, search)"
+          @search="(search) => fetchVehicleTypes(0, maxEntriesPerPage, search, true)"
+        >
+          <template #pageRow="{ row }: { row: VehicleTypeViewModel }">
+            <VehicleTypeListItem :vehicleType="row" />
+          </template>
+        </Pagination>
+
+        <div class="flex flex-row gap-4">
+          <button v-if="can('create', 'unit', 'vehicle_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 { useVehicleTypeStore } from "@/stores/admin/unit/vehicleType/vehicleType";
+import { useModalStore } from "@/stores/modal";
+import Pagination from "@/components/Pagination.vue";
+import { useAbilityStore } from "@/stores/ability";
+import type { VehicleTypeViewModel } from "@/viewmodels/admin/unit/vehicleType/vehicleType.models";
+import VehicleTypeListItem from "@/components/admin/unit/vehicleType/VehicleTypeListItem.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      currentPage: 0,
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useVehicleTypeStore, ["vehicleTypes", "totalCount", "loading"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchVehicleTypes(0, this.maxEntriesPerPage, "", true);
+  },
+  methods: {
+    ...mapActions(useVehicleTypeStore, ["fetchVehicleTypes"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    openCreateModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/unit/vehicleType/CreateVehicleTypeModal.vue")))
+      );
+    },
+  },
+});
+</script>

src/views/admin/unit/vehicleType/VehicleTypeRouting.vue

@@ -0,0 +1,92 @@
+<template>
+  <MainTemplate>
+    <template #headerInsert>
+      <RouterLink :to="{ name: 'admin-unit-vehicle_type' }" 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">
+          {{ activeVehicleTypeObj?.type }}
+        </h1>
+
+        <RouterLink v-if="can('update', 'unit', 'vehicle_type')" :to="{ name: 'admin-unit-vehicle_type-edit' }">
+          <PencilIcon class="w-5 h-5" />
+        </RouterLink>
+        <TrashIcon
+          v-if="can('delete', 'unit', 'vehicle_type')"
+          class="w-5 h-5 cursor-pointer"
+          @click="openDeleteModal"
+        />
+      </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 { useVehicleTypeStore } from "@/stores/admin/unit/vehicleType/vehicleType";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    vehicleTypeId: String,
+  },
+  data() {
+    return {
+      tabs: [
+        { route: "admin-unit-vehicle_type-overview", title: "Übersicht" },
+        { route: "admin-unit-vehicle_type-inspection_plan", title: "Prüfpläne" },
+      ],
+    };
+  },
+  computed: {
+    ...mapState(useVehicleTypeStore, ["activeVehicleTypeObj"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchVehicleTypeByActiveId();
+  },
+  methods: {
+    ...mapActions(useVehicleTypeStore, ["fetchVehicleTypeByActiveId"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    openDeleteModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/unit/vehicleType/CreateVehicleTypeModal.vue"))),
+        this.vehicleTypeId ?? ""
+      );
+    },
+  },
+});
+</script>

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

@@ -7,7 +7,7 @@
       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>
+      <p class="mx-auto">Kleidungstyp bearbeiten</p>
       <div>
         <label for="name">Bezeichnung</label>
         <input type="text" id="name" required v-model="wearableType.type" />