inspection create

src/components/search/EquipmentSearchSelect.vue

@@ -0,0 +1,196 @@
+<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"
+          :class="useScanner ? 'pl-9!' : ''"
+          :displayValue="() => chosen?.name ?? ''"
+          @input="query = $event.target.value"
+        />
+        <QrCodeIcon
+          v-if="useScanner"
+          class="absolute h-6 stroke-1 left-2 top-1/2 -translate-y-1/2 cursor-pointer z-10"
+          @click="scanCode"
+        />
+        <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="equipment in filtered"
+              as="template"
+              :key="equipment.id"
+              :value="equipment.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 }">
+                  {{ equipment.name }}
+                </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 { defineAsyncComponent, defineComponent, markRaw, type Prop } 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 { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
+import type { EquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
+import { QrCodeIcon } from "@heroicons/vue/24/outline";
+import { useModalStore } from "@/stores/modal";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    title: String,
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    useScanner: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:model-value"],
+  watch: {
+    modelValue() {
+      if (this.initialLoaded) return;
+      this.initialLoaded = true;
+      this.loadEquipmentInitial();
+    },
+    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<EquipmentViewModel>,
+      chosen: undefined as undefined | EquipmentViewModel,
+    };
+  },
+  computed: {
+    selected: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: string) {
+        this.chosen = this.getEquipmentFromSearch(val);
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+  mounted() {
+    this.loadEquipmentInitial();
+  },
+  methods: {
+    ...mapActions(useEquipmentStore, ["searchEquipments", "fetchEquipmentById"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    search() {
+      this.filtered = [];
+      if (this.query == "") return;
+      this.loading = true;
+      this.searchEquipments(this.query)
+        .then((res) => {
+          this.filtered = res.data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    getEquipmentFromSearch(id: string) {
+      return this.filtered.find((f) => f.id == id);
+    },
+    loadEquipmentInitial() {
+      if (this.modelValue == "") return;
+      this.fetchEquipmentById(this.modelValue)
+        .then((res) => {
+          this.chosen = res.data;
+        })
+        .catch(() => {});
+    },
+    scanCode() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/CodeDetector.vue"))),
+        "codeScanInput",
+        (result: string) => {
+          this.getEquipmentFromSearch(result);
+        }
+      );
+    },
+  },
+});
+</script>

src/components/search/InspectionPlanSearchSelect.vue

@@ -0,0 +1,178 @@
+<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?.title ?? ''"
+          @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="inspectionPlan in filtered"
+              as="template"
+              :key="inspectionPlan.id"
+              :value="inspectionPlan.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 }">
+                  {{ inspectionPlan.title }}
+                </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 { useInspectionPlanStore } from "@/stores/admin/unit/inspectionPlan/inspectionPlan";
+import type { InspectionPlanViewModel } from "@/viewmodels/admin/unit/inspectionPlan/inspectionPlan.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    title: String,
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    type: {
+      type: String as PropType<"vehicle" | "equipment">,
+      default: "equipment",
+    },
+  },
+  emits: ["update:model-value"],
+  watch: {
+    modelValue() {
+      if (this.initialLoaded) return;
+      this.initialLoaded = true;
+      this.loadInspectionPlanInitial();
+    },
+    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<InspectionPlanViewModel>,
+      chosen: undefined as undefined | InspectionPlanViewModel,
+    };
+  },
+  computed: {
+    selected: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: string) {
+        this.chosen = this.getInspectionPlanFromSearch(val);
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+  mounted() {
+    this.loadInspectionPlanInitial();
+  },
+  methods: {
+    ...mapActions(useInspectionPlanStore, ["searchInspectionPlans", "fetchInspectionPlanById"]),
+    search() {
+      this.filtered = [];
+      if (this.query == "") return;
+      this.loading = true;
+      this.searchInspectionPlans(this.query)
+        .then((res) => {
+          this.filtered = res.data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    getInspectionPlanFromSearch(id: string) {
+      return this.filtered.find((f) => f.id == id);
+    },
+    loadInspectionPlanInitial() {
+      if (this.modelValue == "") return;
+      this.fetchInspectionPlanById(this.modelValue)
+        .then((res) => {
+          this.chosen = res.data;
+        })
+        .catch(() => {});
+    },
+  },
+});
+</script>

src/components/search/VehicleSearchSelect.vue

@@ -0,0 +1,196 @@
+<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"
+          :class="useScanner ? 'pl-9!' : ''"
+          :displayValue="() => chosen?.name ?? ''"
+          @input="query = $event.target.value"
+        />
+        <QrCodeIcon
+          v-if="useScanner"
+          class="absolute h-6 stroke-1 left-2 top-1/2 -translate-y-1/2 cursor-pointer z-10"
+          @click="scanCode"
+        />
+        <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="vehicle in filtered"
+              as="template"
+              :key="vehicle.id"
+              :value="vehicle.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 }">
+                  {{ vehicle.name }}
+                </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 { defineAsyncComponent, defineComponent, markRaw, type Prop } 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 { useVehicleStore } from "@/stores/admin/unit/vehicle/vehicle";
+import type { VehicleViewModel } from "@/viewmodels/admin/unit/vehicle/vehicle.models";
+import { QrCodeIcon } from "@heroicons/vue/24/outline";
+import { useModalStore } from "@/stores/modal";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    title: String,
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    useScanner: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:model-value"],
+  watch: {
+    modelValue() {
+      if (this.initialLoaded) return;
+      this.initialLoaded = true;
+      this.loadVehicleInitial();
+    },
+    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<VehicleViewModel>,
+      chosen: undefined as undefined | VehicleViewModel,
+    };
+  },
+  computed: {
+    selected: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: string) {
+        this.chosen = this.getVehicleFromSearch(val);
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+  mounted() {
+    this.loadVehicleInitial();
+  },
+  methods: {
+    ...mapActions(useVehicleStore, ["searchVehicles", "fetchVehicleById"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    search() {
+      this.filtered = [];
+      if (this.query == "") return;
+      this.loading = true;
+      this.searchVehicles(this.query)
+        .then((res) => {
+          this.filtered = res.data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    getVehicleFromSearch(id: string) {
+      return this.filtered.find((f) => f.id == id);
+    },
+    loadVehicleInitial() {
+      if (this.modelValue == "") return;
+      this.fetchVehicleById(this.modelValue)
+        .then((res) => {
+          this.chosen = res.data;
+        })
+        .catch(() => {});
+    },
+    scanCode() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/CodeDetector.vue"))),
+        "codeScanInput",
+        (result: string) => {
+          this.getVehicleFromSearch(result);
+        }
+      );
+    },
+  },
+});
+</script>

src/router/index.ts

@@ -855,6 +855,34 @@ const router = createRouter({
                 },
               ],
             },
+            {
+              path: "inspection",
+              name: "admin-unit-inspection-route",
+              component: () => import("@/views/RouterView.vue"),
+              meta: { type: "create", section: "unit", module: "inspection" },
+              beforeEnter: [abilityAndNavUpdate],
+              children: [
+                {
+                  path: "",
+                  name: "admin-unit-inspection",
+                  redirect: { name: "admin-unit-inspection-plan" },
+                },
+                {
+                  path: "plan/:type?/:relatedId?/:inspectionPlanId?",
+                  name: "admin-unit-inspection-plan",
+                  component: () => import("@/views/admin/unit/inspection/InspectionPlan.vue"),
+                  beforeEnter: [],
+                  props: true,
+                },
+                {
+                  path: "execute/:inspection",
+                  name: "admin-unit-inspection-execute",
+                  component: () => import("@/views/admin/unit/inspection/InspectionExecute.vue"),
+                  beforeEnter: [],
+                  props: true,
+                },
+              ],
+            },
           ],
         },
         {

src/stores/admin/navigation.ts

@@ -135,6 +135,7 @@ export const useNavigationStore = defineStore("navigation", {
             ...(abilityStore.can("read", "unit", "inspection_plan")
               ? [{ key: "inspection_plan", title: "Prüfpläne" }]
               : []),
+            ...(abilityStore.can("create", "unit", "inspection") ? [{ key: "inspection", title: "Prüfungen" }] : []),
           ],
         },
         configuration: {

src/types/permissionTypes.ts

@@ -14,6 +14,7 @@ export type PermissionModule =
   | "vehicle"
   | "vehicle_type"
   | "inspection_plan"
+  | "inspection"
   | "respiratory_gear"
   | "respiratory_wearer"
   | "respiratory_mission"
@@ -86,6 +87,7 @@ export const permissionModules: Array<PermissionModule> = [
   "vehicle",
   "vehicle_type",
   "inspection_plan",
+  "inspection",
   "respiratory_gear",
   "respiratory_wearer",
   "respiratory_mission",
@@ -120,6 +122,7 @@ export const sectionsAndModules: SectionsAndModulesObject = {
     "vehicle",
     "vehicle_type",
     "inspection_plan",
+    "inspection",
     "respiratory_gear",
     "respiratory_wearer",
     "respiratory_mission",

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

@@ -8,7 +8,10 @@
       @search="(search) => {}"
     >
       <template #pageRow="{ row }: { row: InspectionViewModel }">
-        <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+        <RouterLink
+          :to="{ name: 'admin-unit-inspection-execute', params: { inspection: row.id } }"
+          class="flex flex-col h-fit w-full border border-primary rounded-md"
+        >
           <div class="bg-primary p-2 text-white flex flex-row gap-2 items-center">
             <PencilSquareIcon v-if="row.isOpen" class="w-5 h-5" />
             <p>{{ row.inspectionPlan.title }} - {{ row.finished }}</p>
@@ -17,11 +20,19 @@
             <p v-if="row.context">Kontext: {{ row.context }}</p>
             <p v-if="row.nextInspection">nächste Inspektion: {{ row.nextInspection }}</p>
           </div>
-        </div>
+        </RouterLink>
       </template>
     </Pagination>
     <div class="flex flex-row gap-4">
-      <button v-if="can('create', 'unit', 'equipment')" primary class="w-fit!" @click="">Prüfung durchführen</button>
+      <RouterLink
+        v-if="can('create', 'unit', 'equipment')"
+        :to="{ name: 'admin-unit-inspection-plan', params: { type: 'equipment', relatedId: equipmentId } }"
+        button
+        primary
+        class="w-fit!"
+        @click=""
+        >Prüfung durchführen</RouterLink
+      >
     </div>
   </div>
 </template>

src/views/admin/unit/inspection/InspectionExecute.vue

@@ -0,0 +1,57 @@
+<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üfung durchführen</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="">
+          <div class="flex flex-row justify-end gap-2">
+            <RouterLink
+              :to="{ name: 'admin-unit-inspection_plan' }"
+              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, type PropType } 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 ScanInput from "@/components/ScanInput.vue";
+import InspectionPlanSearchSelect from "@/components/search/InspectionPlanSearchSelect.vue";
+import EquipmentSearchSelect from "@/components/search/EquipmentSearchSelect.vue";
+import VehicleSearchSelect from "@/components/search/VehicleSearchSelect.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    inspection: String,
+  },
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: null as any,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,111 @@
+<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üfung erstellen</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="">
+          <div class="flex flex-row">
+            <div
+              v-for="tab in tabs"
+              :key="tab.key"
+              class="w-1/2 p-0.5 first:pl-0 last:pr-0 cursor-pointer"
+              @click="
+                active = tab.key;
+                related = '';
+                inspectionPlan = '';
+              "
+            >
+              <p
+                :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',
+                ]"
+              >
+                {{ tab.title }}
+              </p>
+            </div>
+          </div>
+
+          <EquipmentSearchSelect v-if="active == 'equipment'" title="Gerät" useScanner v-model="related" />
+          <VehicleSearchSelect v-else title="Fahrzeug" useScanner v-model="related" />
+
+          <InspectionPlanSearchSelect title="Prüfplan" :type="active" v-model="inspectionPlan" />
+
+          <div class="flex flex-row justify-end gap-2">
+            <RouterLink
+              :to="{ name: 'admin-unit-inspection_plan' }"
+              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, type PropType } 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 ScanInput from "@/components/ScanInput.vue";
+import InspectionPlanSearchSelect from "@/components/search/InspectionPlanSearchSelect.vue";
+import EquipmentSearchSelect from "@/components/search/EquipmentSearchSelect.vue";
+import VehicleSearchSelect from "@/components/search/VehicleSearchSelect.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    type: {
+      type: String as PropType<"vehicle" | "equipment">,
+      default: "equipment",
+    },
+    relatedId: String,
+    inspectionPlanId: String,
+  },
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: null as any,
+      related: "",
+      inspectionPlan: "",
+      active: "equipment" as "equipment" | "vehicle",
+      tabs: [
+        {
+          key: "equipment",
+          title: "Gerät",
+        },
+        {
+          key: "vehicle",
+          title: "Fahrzeug",
+        },
+      ] as Array<{ key: "equipment" | "vehicle"; title: string }>,
+    };
+  },
+  mounted() {
+    if (["vehicle", "equipment"].includes(this.type)) {
+      this.active = this.type;
+      this.inspectionPlan = this.inspectionPlanId ?? "";
+      this.related = this.relatedId ?? "";
+    }
+  },
+});
+</script>

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

@@ -138,7 +138,6 @@ export default defineComponent({
       this.active = queryType as "equipment" | "vehicle";
       this.selectedType = queryId as string;
     }
-    console.log(query);
   },
   beforeUnmount() {
     try {

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

@@ -8,7 +8,10 @@
       @search="(search) => {}"
     >
       <template #pageRow="{ row }: { row: InspectionViewModel }">
-        <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+        <RouterLink
+          :to="{ name: 'admin-unit-inspection-execute', params: { inspection: row.id } }"
+          class="flex flex-col h-fit w-full border border-primary rounded-md"
+        >
           <div class="bg-primary p-2 text-white flex flex-row gap-2 items-center">
             <PencilSquareIcon v-if="row.isOpen" class="w-5 h-5" />
             <p>{{ row.inspectionPlan.title }} - {{ row.finished }}</p>
@@ -17,11 +20,19 @@
             <p v-if="row.context">Kontext: {{ row.context }}</p>
             <p v-if="row.nextInspection">nächste Inspektion: {{ row.nextInspection }}</p>
           </div>
-        </div>
+        </RouterLink>
       </template>
     </Pagination>
     <div class="flex flex-row gap-4">
-      <button v-if="can('create', 'unit', 'vehicle')" primary class="w-fit!" @click="">Prüfung durchführen</button>
+      <RouterLink
+        v-if="can('create', 'unit', 'vehicle')"
+        :to="{ name: 'admin-unit-inspection-plan', params: { type: 'vehicle', relatedId: vehicleId } }"
+        button
+        primary
+        class="w-fit!"
+        @click=""
+        >Prüfung durchführen</RouterLink
+      >
     </div>
   </div>
 </template>

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

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