data creation forms and centralization

src/components/admin/unit/inspectionPlan/InspectionPlanListItem.vue

@@ -4,12 +4,10 @@
     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>
+      <p>{{ inspectionPlan.title }} - {{ inspectionPlan.equipmentType.type }}</p>
-        {{ inspectionPlan.title }}
-      </p>
     </div>
     <div class="p-2">
-      <p v-if="inspectionPlan">Code: {{ inspectionPlan }}</p>
+      <p>Interval: {{ inspectionPlan.inspectionInterval }}</p>
     </div>
   </RouterLink>
 </template>

src/components/search/EquipmentTypeSearchSelect.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="w-full">
+    <Combobox v-model="selected" :disabled="disabled">
+      <ComboboxLabel>{{ title }}</ComboboxLabel>
+      <div class="relative mt-1">
+        <ComboboxInput
+          class="rounded-md shadow-xs 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-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
+          :displayValue="() => chosen?.type ?? ''"
+          @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="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-hidden sm:text-sm z-10"
+          >
+            <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="equipmentType in filtered"
+              as="template"
+              :key="equipmentType.id"
+              :value="equipmentType.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 }">
+                  {{ equipmentType.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>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import {
+  Combobox,
+  ComboboxLabel,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import Spinner from "../Spinner.vue";
+import { useEquipmentTypeStore } from "@/stores/admin/unit/equipmentType/equipmentType";
+import type { EquipmentTypeViewModel } from "@/viewmodels/admin/unit/equipmentType/equipmentType.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    title: String,
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:model-value"],
+  watch: {
+    modelValue() {
+      if (this.initialLoaded) return;
+      this.initialLoaded = true;
+      this.loadEquipmentTypeInitial();
+    },
+    query() {
+      this.deferingSearch = true;
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.deferingSearch = false;
+        this.search();
+      }, 600);
+    },
+  },
+  data() {
+    return {
+      initialLoaded: false as boolean,
+      loading: false as boolean,
+      deferingSearch: false as boolean,
+      timer: undefined as any,
+      query: "" as string,
+      filtered: [] as Array<EquipmentTypeViewModel>,
+      chosen: undefined as undefined | EquipmentTypeViewModel,
+    };
+  },
+  computed: {
+    selected: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: string) {
+        this.chosen = this.getEquipmentTypeFromSearch(val);
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+  mounted() {
+    this.loadEquipmentTypeInitial();
+  },
+  methods: {
+    ...mapActions(useEquipmentTypeStore, ["searchEquipmentTypes", "fetchEquipmentTypeById"]),
+    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;
+        });
+    },
+    getEquipmentTypeFromSearch(id: string) {
+      return this.filtered.find((f) => f.id == id);
+    },
+    loadEquipmentTypeInitial() {
+      if (this.modelValue == "") return;
+      this.fetchEquipmentTypeById(this.modelValue)
+        .then((res) => {
+          this.chosen = res.data;
+        })
+        .catch(() => {});
+    },
+  },
+});
+</script>

src/components/search/MemberSearchSelectMultiple.vue

@@ -17,7 +17,7 @@
           @after-leave="query = ''"
         >
           <ComboboxOptions
-            class="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-hidden sm:text-sm"
+            class="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-hidden sm:text-sm z-10"
           >
             <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">

src/components/search/MemberSearchSelectSingle.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="w-full">
+    <Combobox v-model="selected" :disabled="disabled">
+      <ComboboxLabel>{{ title }}</ComboboxLabel>
+      <div class="relative mt-1">
+        <ComboboxInput
+          class="rounded-md shadow-xs 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-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
+          :display-value="() => (chosen?.firstname ?? '') + ' ' + (chosen?.lastname ?? '')"
+          @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="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-hidden sm:text-sm z-10"
+          >
+            <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="member in filtered"
+              as="template"
+              :key="member.id"
+              :value="member.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 }">
+                  {{ member.firstname }} {{ member.lastname }} {{ member.nameaffix }}
+                </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>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import {
+  Combobox,
+  ComboboxLabel,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import { useMemberStore } from "@/stores/admin/club/member/member";
+import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
+import Spinner from "../Spinner.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    title: String,
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:model-value"],
+  watch: {
+    modelValue() {
+      if (this.initialLoaded) return;
+      this.initialLoaded = true;
+      this.loadMemberInitial();
+    },
+    query() {
+      this.deferingSearch = true;
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.deferingSearch = false;
+        this.search();
+      }, 600);
+    },
+  },
+  data() {
+    return {
+      initialLoaded: false as boolean,
+      loading: false as boolean,
+      deferingSearch: false as boolean,
+      timer: undefined as any,
+      query: "" as string,
+      filtered: [] as Array<MemberViewModel>,
+      chosen: undefined as undefined | MemberViewModel,
+    };
+  },
+  computed: {
+    selected: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: string) {
+        this.chosen = this.getMemberFromSearch(val);
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+  mounted() {
+    this.loadMemberInitial();
+  },
+  methods: {
+    ...mapActions(useMemberStore, ["searchMembers", "fetchMemberById"]),
+    search() {
+      this.filtered = [];
+      if (this.query == "") return;
+      this.loading = true;
+      this.searchMembers(this.query)
+        .then((res) => {
+          this.filtered = res.data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    getMemberFromSearch(id: string) {
+      return this.filtered.find((f) => f.id == id);
+    },
+    loadMemberInitial() {
+      if (this.modelValue == "") return;
+      this.fetchMemberById(this.modelValue)
+        .then((res) => {
+          this.chosen = res.data;
+        })
+        .catch(() => {});
+    },
+  },
+});
+</script>

src/components/search/VehicleTypeSearchSelect.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="w-full">
+    <Combobox v-model="selected" :disabled="disabled">
+      <ComboboxLabel>{{ title }}</ComboboxLabel>
+      <div class="relative mt-1">
+        <ComboboxInput
+          class="rounded-md shadow-xs 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-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
+          :displayValue="() => chosen?.type ?? ''"
+          @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="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-hidden sm:text-sm z-10"
+          >
+            <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="vehicleType in filtered"
+              as="template"
+              :key="vehicleType.id"
+              :value="vehicleType.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 }">
+                  {{ vehicleType.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>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import {
+  Combobox,
+  ComboboxLabel,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import Spinner from "../Spinner.vue";
+import { useVehicleTypeStore } from "@/stores/admin/unit/vehicleType/vehicleType";
+import type { VehicleTypeViewModel } from "@/viewmodels/admin/unit/vehicleType/vehicleType.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    title: String,
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:model-value"],
+  watch: {
+    modelValue() {
+      if (this.initialLoaded) return;
+      this.initialLoaded = true;
+      this.loadVehicleTypeInitial();
+    },
+    query() {
+      this.deferingSearch = true;
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.deferingSearch = false;
+        this.search();
+      }, 600);
+    },
+  },
+  data() {
+    return {
+      initialLoaded: false as boolean,
+      loading: false as boolean,
+      deferingSearch: false as boolean,
+      timer: undefined as any,
+      query: "" as string,
+      filtered: [] as Array<VehicleTypeViewModel>,
+      chosen: undefined as undefined | VehicleTypeViewModel,
+    };
+  },
+  computed: {
+    selected: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: string) {
+        this.chosen = this.getVehicleTypeFromSearch(val);
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+  mounted() {
+    this.loadVehicleTypeInitial();
+  },
+  methods: {
+    ...mapActions(useVehicleTypeStore, ["searchVehicleTypes", "fetchVehicleTypeById"]),
+    search() {
+      this.filtered = [];
+      if (this.query == "") return;
+      this.loading = true;
+      this.searchVehicleTypes(this.query)
+        .then((res) => {
+          this.filtered = res.data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    getVehicleTypeFromSearch(id: string) {
+      return this.filtered.find((f) => f.id == id);
+    },
+    loadVehicleTypeInitial() {
+      if (this.modelValue == "") return;
+      this.fetchVehicleTypeById(this.modelValue)
+        .then((res) => {
+          this.chosen = res.data;
+        })
+        .catch(() => {});
+    },
+  },
+});
+</script>

src/components/search/WearableTypeSearchSelect.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="w-full">
+    <Combobox v-model="selected" :disabled="disabled">
+      <ComboboxLabel>{{ title }}</ComboboxLabel>
+      <div class="relative mt-1">
+        <ComboboxInput
+          class="rounded-md shadow-xs 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-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
+          :displayValue="() => chosen?.type ?? ''"
+          @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="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-hidden sm:text-sm z-10"
+          >
+            <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="wearableType in filtered"
+              as="template"
+              :key="wearableType.id"
+              :value="wearableType.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 }">
+                  {{ wearableType.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>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import {
+  Combobox,
+  ComboboxLabel,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import Spinner from "../Spinner.vue";
+import { useWearableTypeStore } from "@/stores/admin/unit/wearableType/wearableType";
+import type { WearableTypeViewModel } from "@/viewmodels/admin/unit/wearableType/wearableType.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    title: String,
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:model-value"],
+  watch: {
+    modelValue() {
+      if (this.initialLoaded) return;
+      this.initialLoaded = true;
+      this.loadWearableTypeInitial();
+    },
+    query() {
+      this.deferingSearch = true;
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.deferingSearch = false;
+        this.search();
+      }, 600);
+    },
+  },
+  data() {
+    return {
+      initialLoaded: false as boolean,
+      loading: false as boolean,
+      deferingSearch: false as boolean,
+      timer: undefined as any,
+      query: "" as string,
+      filtered: [] as Array<WearableTypeViewModel>,
+      chosen: undefined as undefined | WearableTypeViewModel,
+    };
+  },
+  computed: {
+    selected: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: string) {
+        this.chosen = this.getWearableTypeFromSearch(val);
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+  mounted() {
+    this.loadWearableTypeInitial();
+  },
+  methods: {
+    ...mapActions(useWearableTypeStore, ["searchWearableTypes", "fetchWearableTypeById"]),
+    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;
+        });
+    },
+    getWearableTypeFromSearch(id: string) {
+      return this.filtered.find((f) => f.id == id);
+    },
+    loadWearableTypeInitial() {
+      if (this.modelValue == "") return;
+      this.fetchWearableTypeById(this.modelValue)
+        .then((res) => {
+          this.chosen = res.data;
+        })
+        .catch(() => {});
+    },
+  },
+});
+</script>

src/demodata/inspectionPlan.ts

@@ -5,7 +5,46 @@ export const inspectionPlanDemoData: Array<InspectionPlanViewModel> = [
   {
     id: "abc",
     title: "Sichtprüfung",
+    version: 1,
     inspectionInterval: "1-m",
+    remindTime: "1-m",
+    inspectionPoints: [
+      {
+        id: "edf",
+        title: "vorhandene Spritzstellen ausgebessert",
+        description: "",
+        type: "number",
+      },
+      {
+        id: "ghi",
+        title: "Einband der Kupplung sitzt fest",
+        description: "",
+        type: "iO-niO",
+      },
+      {
+        id: "lmn",
+        title: "Das überstehende Drahtende des Knaggenteiles sitzt versenkt",
+        description: "",
+        type: "iO-niO",
+      },
+    ],
+    equipmentTypeId: equipmentTypeDemoData[0].id,
+    equipmentType: equipmentTypeDemoData[0],
+  },
+  {
+    id: "cba",
+    title: "Druckprüfung",
+    version: 1,
+    inspectionInterval: "1-m",
+    remindTime: "22/10",
+    inspectionPoints: [
+      {
+        id: "edf",
+        title: "Gebrauchsprüfdruck 12bar",
+        description: "",
+        type: "iO-niO",
+      },
+    ],
     equipmentTypeId: equipmentTypeDemoData[0].id,
     equipmentType: equipmentTypeDemoData[0],
   },

src/demodata/wearable.ts

@@ -5,7 +5,8 @@ export const wearableDemoData: Array<WearableViewModel> = [
   {
     id: "abc",
     code: "0456984224498",
-    name: "B-Schlauch",
+    name: "Jacke",
+    location: "Spint",
     wearerId: "9469991d-fa22-4899-82ce-b1ba5de990dc",
     wearer: {
       id: "9469991d-fa22-4899-82ce-b1ba5de990dc",

src/router/index.ts

@@ -19,6 +19,7 @@ import { resetRespiratoryWearerStores, setRespiratoryWearerId } from "./unit/res
 import { resetRespiratoryMissionStores, setRespiratoryMissionId } from "./unit/respiratoryMission";
 import { resetWearableStores, setWearableId } from "./unit/wearable";
 import { resetInspectionPlanStores, setInspectionPlanId } from "./unit/inspectionPlan";
+import { setVehicleTypeId } from "./unit/vehicleType";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -405,7 +406,7 @@ const router = createRouter({
                 {
                   path: "create",
                   name: "admin-unit-vehicle-create",
-                  component: () => import("@/views/admin/ViewSelect.vue"),
+                  component: () => import("@/views/admin/unit/vehicle/CreateVehicle.vue"),
                   meta: { type: "create", section: "unit", module: "vehicle" },
                   beforeEnter: [abilityAndNavUpdate],
                 },
@@ -731,7 +732,7 @@ const router = createRouter({
                     {
                       path: "edit",
                       name: "admin-unit-equipment_type-edit",
-                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      component: () => import("@/views/admin/unit/equipmentType/UpdateEquipmentType.vue"),
                       meta: { type: "update", section: "unit", module: "equipment_type" },
                       beforeEnter: [abilityAndNavUpdate],
                       props: true,
@@ -756,7 +757,7 @@ const router = createRouter({
                   path: ":vehicleTypeId",
                   name: "admin-unit-vehicle_type-routing",
                   component: () => import("@/views/admin/unit/vehicleType/VehicleTypeRouting.vue"),
-                  beforeEnter: [setEquipmentTypeId],
+                  beforeEnter: [setVehicleTypeId],
                   props: true,
                   children: [
                     {

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

@@ -3,19 +3,31 @@ import type { EquipmentTypeViewModel } from "../equipmentType/equipmentType.mode
 export interface InspectionPlanViewModel {
   id: string;
   title: string;
-  inspectionInterval?: `${number}-${"d" | "m" | "y"}` | `${number}/${number}`;
+  inspectionInterval: `${number}-${"d" | "m" | "y"}` | `${number}/${number}` | `${number}/*`;
+  remindTime: `${number}-${"d" | "m" | "y"}` | `${number}/${number}` | `${number}/*`;
+  version: number;
+  inspectionPoints: InspectionPointViewModel[];
   equipmentTypeId: string;
   equipmentType: EquipmentTypeViewModel;
 }
 
 export interface CreateInspectionPlanViewModel {
   title: string;
-  inspectionInterval?: `${number}-${"d" | "m" | "y"}` | `${number}/${number}`;
+  inspectionInterval: `${number}-${"d" | "m" | "y"}` | `${number}/${number}` | `${number}/*`;
+  remindTime: `${number}-${"d" | "m" | "y"}` | `${number}/${number}` | `${number}/*`;
   equipmentTypeId: string;
 }
 
 export interface UpdateInspectionPlanViewModel {
   id: string;
   title: string;
-  inspectionInterval?: `${number}-${"d" | "m" | "y"}` | `${number}/${number}`;
+  inspectionInterval: `${number}-${"d" | "m" | "y"}` | `${number}/${number}` | `${number}/*`;
+  remindTime: `${number}-${"d" | "m" | "y"}` | `${number}/${number}` | `${number}/*`;
+}
+
+export interface InspectionPointViewModel {
+  id: string;
+  title: string;
+  description: string;
+  type: "iO-niO" | "text" | "number";
 }

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

@@ -1,16 +1,19 @@
 export interface VehicleViewModel {
   id: string;
   name: string;
-  type: string;
+  location: string;
+  vehicleTypeId: string;
 }
 
 export interface CreateVehicleViewModel {
   name: string;
-  type: string;
+  location: string;
+  vehicleTypeId: string;
 }
 
 export interface UpdateVehicleViewModel {
   id: string;
   name: string;
-  type: string;
+  location: string;
+  vehicleTypeId: string;
 }

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

@@ -7,7 +7,7 @@ export interface WearableViewModel {
   name: string;
   location?: string;
   wearerId?: string;
-  wearer: MemberViewModel;
+  wearer?: MemberViewModel;
   wearableTypeId: string;
   wearableType: WearableTypeViewModel;
 }

src/views/admin/club/newsletter/NewsletterRecipients.vue

@@ -24,7 +24,7 @@
       </div>
     </div>
     <div class="flex flex-col gap-2 h-1/2">
-      <MemberSearchSelect
+      <MemberSearchSelectMultiple
         title="weitere Empfänger suchen"
         v-model="recipients"
         :disabled="!can('create', 'club', 'newsletter')"
@@ -76,7 +76,7 @@ import { useAbilityStore } from "@/stores/ability";
 import { useQueryStoreStore } from "@/stores/admin/configuration/queryStore";
 import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
 import cloneDeep from "lodash.clonedeep";
-import MemberSearchSelect from "@/components/admin/MemberSearchSelect.vue";
+import MemberSearchSelectMultiple from "@/components/search/MemberSearchSelectMultiple.vue";
 </script>
 
 <script lang="ts">

src/views/admin/club/protocol/ProtocolPresence.vue

@@ -5,7 +5,7 @@
       ↺ laden fehlgeschlagen
     </p>
 
-    <MemberSearchSelect
+    <MemberSearchSelectMultiple
       title="Anwesende suchen"
       :model-value="presence.map((p) => p.memberId)"
       :disabled="!can('create', 'club', 'protocol')"
@@ -59,7 +59,7 @@ import Spinner from "@/components/Spinner.vue";
 import { TrashIcon } from "@heroicons/vue/24/outline";
 import { useProtocolPresenceStore } from "@/stores/admin/club/protocol/protocolPresence";
 import { useAbilityStore } from "@/stores/ability";
-import MemberSearchSelect from "@/components/admin/MemberSearchSelect.vue";
+import MemberSearchSelectMultiple from "@/components/search/MemberSearchSelectMultiple.vue";
 import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
 </script>
 

src/views/admin/unit/equipment/CreateEquipment.vue

@@ -8,75 +8,7 @@
     <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>
+          <EquipmentTypeSearchSelect title="Typ" v-model="selectedType" />
-            <Combobox v-model="selectedType">
-              <ComboboxLabel>Typ</ComboboxLabel>
-              <div class="relative mt-1">
-                <ComboboxInput
-                  class="rounded-md shadow-xs 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-hidden 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-hidden 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 />
@@ -116,43 +48,18 @@ import type { CreateEquipmentViewModel } from "@/viewmodels/admin/unit/equipment
 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 { EquipmentTypeViewModel } from "@/viewmodels/admin/unit/equipmentType/equipmentType.models";
 import { useEquipmentTypeStore } from "@/stores/admin/unit/equipmentType/equipmentType";
 import ScanInput from "@/components/ScanInput.vue";
+import EquipmentTypeSearchSelect from "@/components/search/EquipmentTypeSearchSelect.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,
+      selectedType: "" as string,
-      loading: false as boolean,
-      deferingSearch: false as boolean,
-      timer: undefined as any,
-      query: "" as string,
-      filtered: [] as Array<EquipmentTypeViewModel>,
     };
   },
   computed: {
@@ -166,19 +73,6 @@ export default defineComponent({
   methods: {
     ...mapActions(useEquipmentStore, ["createEquipment"]),
     ...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;

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

@@ -0,0 +1,116 @@
+<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="equipmentType != null"
+      class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
+      @submit.prevent="triggerUpdate"
+    >
+      <p class="mx-auto">Geräte-Typ bearbeiten</p>
+      <div>
+        <label for="name">Typ</label>
+        <input type="text" id="name" required v-model="equipmentType.type" />
+      </div>
+      <div>
+        <label for="location">Beschreibung</label>
+        <input type="text" id="location" v-model="equipmentType.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 { useEquipmentTypeStore } from "@/stores/admin/unit/equipmentType/equipmentType";
+import type {
+  CreateEquipmentTypeViewModel,
+  EquipmentTypeViewModel,
+  UpdateEquipmentTypeViewModel,
+} from "@/viewmodels/admin/unit/equipmentType/equipmentType.models";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import isEqual from "lodash.isequal";
+import cloneDeep from "lodash.clonedeep";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    equipmentTypeId: String,
+  },
+  watch: {
+    loadingActive() {
+      if (this.loading == "loading") {
+        this.loading = this.loadingActive;
+      }
+      if (this.loadingActive == "fetched") this.equipmentType = cloneDeep(this.activeEquipmentTypeObj);
+    },
+  },
+  data() {
+    return {
+      loading: "loading" as "loading" | "fetched" | "failed",
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      equipmentType: null as null | EquipmentTypeViewModel,
+      timeout: null as any,
+    };
+  },
+  computed: {
+    canSaveOrReset(): boolean {
+      return isEqual(this.activeEquipmentTypeObj, this.equipmentType);
+    },
+    ...mapState(useEquipmentTypeStore, ["activeEquipmentTypeObj", "loadingActive"]),
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useEquipmentTypeStore, ["updateActiveEquipmentType", "fetchEquipmentTypeByActiveId"]),
+    resetForm() {
+      this.equipmentType = cloneDeep(this.activeEquipmentTypeObj);
+    },
+    fetchItem() {
+      this.fetchEquipmentTypeByActiveId();
+    },
+    triggerUpdate(e: any) {
+      if (this.equipmentType == null) return;
+      let formData = e.target.elements;
+      let updateEquipmentType: UpdateEquipmentTypeViewModel = {
+        id: this.equipmentType.id,
+        type: formData.type.value,
+        description: formData.description.value,
+      };
+      this.status = "loading";
+      this.updateActiveEquipmentType(updateEquipmentType)
+        .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/inspectionPlan/CreateInspectionPlan.vue

@@ -8,86 +8,61 @@
     <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>
+          <div class="flex flex-row">
-            <Combobox v-model="selectedType">
+            <div
-              <ComboboxLabel>Typ</ComboboxLabel>
+              v-for="tab in tabs"
-              <div class="relative mt-1">
+              :key="tab.key"
-                <ComboboxInput
+              class="w-1/2 p-0.5 first:pl-0 last:pr-0"
-                  class="rounded-md shadow-xs 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-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
+              @click="
-                  @input="query = $event.target.value"
+                active = tab.key;
-                />
+                selectedType = '';
-                <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
+              <p
-                    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-hidden sm:text-sm"
+                :class="[
+                  'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-hidden',
+                  tab.key == active
+                    ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none'
+                    : ' hover:bg-red-200',
+                ]"
               >
-                    <ComboboxOption v-if="loading || deferingSearch" as="template" disabled>
+                {{ tab.title }}
-                      <li class="flex flex-row gap-2 text-text relative cursor-default select-none py-2 pl-3 pr-4">
+              </p>
-                        <Spinner />
+            </div>
-                        <span class="font-normal block truncate">suche</span>
+          </div>
-                      </li>
+
-                    </ComboboxOption>
+          <EquipmentTypeSearchSelect v-if="active == 'gear'" title="Typ" v-model="selectedType" />
-                    <ComboboxOption v-else-if="filtered.length === 0 && query == ''" as="template" disabled>
+          <VehicleTypeSearchSelect v-else title="Typ" v-model="selectedType" />
-                      <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>
+            <label for="interval">Intervall</label>
-            <input type="text" id="interval" placeholder="<number>-(d|m|y) oder DD/MM" />
+            <input
+              type="text"
+              id="interval"
+              placeholder="<zahl>-(d|m|y) oder DD/MM oder DD/*"
+              required
+              pattern="^\d+-(d|m|y)$|^\d{2}/\d{2}$|^\d{2}/\*$"
+              title="Eingabe muss im Format <zahl>-(d|m|y), DD/MM oder DD/* sein"
+            />
+          </div>
+          <div>
+            <label for="remind">Erinnerung vor Fälligkeit</label>
+            <input
+              type="text"
+              id="remind"
+              placeholder="<zahl>-(d|m|y) oder DD/MM oder DD/*"
+              required
+              pattern="^\d+-(d|m|y)$|^\d{2}/\d{2}$|^\d{2}/\*$"
+              title="Eingabe muss im Format <zahl>-(d|m|y), DD/MM oder DD/* sein"
+            />
           </div>
           <div class="flex flex-row justify-end gap-2">
             <RouterLink
-              :to="{ name: 'admin-unit-inspectionPlan' }"
+              :to="{ name: 'admin-unit-inspection_plan' }"
               primary-outline
               button
               class="w-fit!"
@@ -128,30 +103,28 @@ import type { CreateInspectionPlanViewModel } from "@/viewmodels/admin/unit/insp
 import ScanInput from "@/components/ScanInput.vue";
 import type { EquipmentTypeViewModel } from "../../../../viewmodels/admin/unit/equipmentType/equipmentType.models";
 import { useEquipmentTypeStore } from "../../../../stores/admin/unit/equipmentType/equipmentType";
+import EquipmentTypeSearchSelect from "@/components/search/EquipmentTypeSearchSelect.vue";
+import VehicleTypeSearchSelect from "@/components/search/VehicleTypeSearchSelect.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,
+      selectedType: "" as string,
-      loading: false as boolean,
+      active: "gear" as string,
-      deferingSearch: false as boolean,
+      tabs: [
-      timer: undefined as any,
+        {
-      query: "" as string,
+          key: "gear",
-      filtered: [] as Array<EquipmentTypeViewModel>,
+          title: "Gerät",
+        },
+        {
+          key: "vehicle",
+          title: "Fahrzeug",
+        },
+      ],
     };
   },
   computed: {
@@ -165,26 +138,14 @@ export default defineComponent({
   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,
+        inspectionInterval: formData.name.value,
+        remindTime: formData.name.value,
       };
       this.status = "loading";
       this.createInspectionPlan(createInspectionPlan)

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

@@ -12,7 +12,7 @@
           :totalCount="totalCount"
           :indicateLoading="loading == 'loading'"
           useSearch
-          useScanner
+          :useScanner="false"
           @load-data="(offset, count, search) => fetchInspectionPlans(offset, count, search)"
           @search="(search) => fetchInspectionPlans(0, maxEntriesPerPage, search, true)"
         >

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

@@ -1,7 +1,7 @@
 <template>
   <MainTemplate>
     <template #headerInsert>
-      <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
+      <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">

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

@@ -10,6 +10,11 @@
         <input type="text" id="interval" :value="activeInspectionPlanObj.inspectionInterval" reaonly />
       </div>
     </div>
+    <div v-if="activeInspectionPlanObj?.inspectionPoints">
+      <div v-for="point in activeInspectionPlanObj?.inspectionPoints">
+        {{ point }}
+      </div>
+    </div>
 
     <Spinner v-if="loadingActive == 'loading'" class="mx-auto" />
     <p v-else-if="loadingActive == 'failed'" @click="fetchInspectionPlanByActiveId" class="cursor-pointer">

src/views/admin/unit/vehicle/CreateVehicle.vue

@@ -0,0 +1,101 @@
+<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">Fahrzeug 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">
+          <VehicleTypeSearchSelect title="Typ" v-model="selectedType" />
+          <div>
+            <label for="name">Bezeichnung</label>
+            <input type="text" id="name" required />
+          </div>
+          <div>
+            <label for="location">Verortung (optional)</label>
+            <input type="text" id="location" />
+          </div>
+          <div class="flex flex-row justify-end gap-2">
+            <RouterLink
+              :to="{ name: 'admin-unit-vehicle' }"
+              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 { useVehicleStore } from "@/stores/admin/unit/vehicle/vehicle";
+import type { CreateVehicleViewModel } from "@/viewmodels/admin/unit/vehicle/vehicle.models";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useVehicleTypeStore } from "@/stores/admin/unit/vehicleType/vehicleType";
+import VehicleTypeSearchSelect from "@/components/search/VehicleTypeSearchSelect.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: null as any,
+      selectedType: "" as string,
+    };
+  },
+  computed: {
+    ...mapState(useVehicleTypeStore, ["vehicleTypes"]),
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useVehicleStore, ["createVehicle"]),
+    triggerCreate(e: any) {
+      if (this.selectedType == null) return;
+      let formData = e.target.elements;
+      let createVehicle: CreateVehicleViewModel = {
+        name: formData.name.value,
+        location: formData.location.value,
+        vehicleTypeId: this.selectedType,
+      };
+      this.status = "loading";
+      this.createVehicle(createVehicle)
+        .then((res) => {
+          this.status = { status: "success" };
+
+          this.timeout = setTimeout(() => {
+            this.$router.push({
+              name: "admin-unit-vehicle-overview",
+              params: {
+                vehicleId: res.data,
+              },
+            });
+          }, 1500);
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>

src/views/admin/unit/vehicle/Vehicle.vue

@@ -25,9 +25,10 @@
             v-if="can('create', 'unit', 'equipment')"
             :to="{ name: 'admin-unit-vehicle-create' }"
             primary
+            button
             class="w-fit!"
           >
-            Fahrzeug erstellen
+            Fahrzeug erfassen
           </RouterLink>
         </div>
       </div>

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

@@ -8,75 +8,7 @@
     <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>
+          <WearableTypeSearchSelect title="Typ" v-model="selectedType" />
-            <Combobox v-model="selectedType">
-              <ComboboxLabel>Typ</ComboboxLabel>
-              <div class="relative mt-1">
-                <ComboboxInput
-                  class="rounded-md shadow-xs 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-hidden 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-hidden 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 />
@@ -86,7 +18,7 @@
             <label for="location">Verortung (optional)</label>
             <input type="text" id="location" />
           </div>
-          <MemberSearchSelect title="Träger (optional)" />
+          <MemberSearchSelectSingle title="Träger (optional)" />
           <div class="flex flex-row justify-end gap-2">
             <RouterLink
               :to="{ name: 'admin-unit-wearable' }"
@@ -117,44 +49,19 @@ import type { CreateWearableViewModel } from "@/viewmodels/admin/unit/wearable/w
 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";
+import MemberSearchSelectSingle from "@/components/search/MemberSearchSelectSingle.vue";
+import WearableTypeSearchSelect from "@/components/search/WearableTypeSearchSelect.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,
+      selectedType: "" as string,
-      loading: false as boolean,
-      deferingSearch: false as boolean,
-      timer: undefined as any,
-      query: "" as string,
-      filtered: [] as Array<WearableTypeViewModel>,
     };
   },
   computed: {
@@ -168,19 +75,6 @@ export default defineComponent({
   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;

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

@@ -17,6 +17,15 @@
         <label for="location">Verortung</label>
         <input type="text" id="location" :value="activeWearableObj.location" readonly />
       </div>
+      <div>
+        <label for="wearer">Träger</label>
+        <input
+          type="text"
+          id="wearer"
+          :value="(activeWearableObj.wearer?.firstname ?? '') + ' ' + (activeWearableObj.wearer?.lastname ?? '')"
+          readonly
+        />
+      </div>
     </div>
 
     <Spinner v-if="loadingActive == 'loading'" class="mx-auto" />

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

@@ -17,7 +17,7 @@
         <label for="location">Verortung (optional)</label>
         <input type="text" id="location" v-model="wearable.location" />
       </div>
-      <MemberSearchSelect title="Träger (optional)" />
+      <MemberSearchSelectMultiple 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
@@ -46,7 +46,7 @@ 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";
+import MemberSearchSelectMultiple from "@/components/search/MemberSearchSelectMultiple.vue";
 </script>
 
 <script lang="ts">

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

@@ -41,10 +41,8 @@ import type {
 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">