equipment form

src/components/ScanInput.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <label :for="name">{{ label }}{{ required ? "" : " (optional)" }}</label>
+    <div class="relative flex flex-row items-center gap-2">
+      <input ref="resultInput" class="!pl-9" :id="name" type="text" v-model="value" :required="required" />
+      <QrCodeIcon class="absolute h-6 stroke-1 left-2 top-1/2 -translate-y-1/2 cursor-pointer z-10" @click="scanCode" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, markRaw, defineAsyncComponent } from "vue";
+import { QrCodeIcon } from "@heroicons/vue/24/outline";
+import { useModalStore } from "../stores/modal";
+import { mapActions } from "pinia";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    label: String,
+    name: String,
+    required: {
+      type: Boolean,
+      default: true,
+    },
+    modelValue: {
+      type: String,
+      default: "",
+      required: false,
+    },
+  },
+  emits: ["update:model-value"],
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: String) {
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+  methods: {
+    ...mapActions(useModalStore, ["openModal"]),
+    scanCode() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/CodeDetector.vue"))),
+        "codeScanInput",
+        (result: string) => {
+          (this.$refs.resultInput as HTMLInputElement).value = result;
+        }
+      );
+    },
+  },
+});
+</script>

src/main.css

@@ -87,7 +87,7 @@ select {
 input[readonly],
 textarea[readonly],
 select[readonly] {
-  @apply select-none;
+  @apply select-none focus:border-gray-300 cursor-default;
   /* pointer-events-none; */
 }
 

src/router/index.ts

@@ -340,7 +340,7 @@ const router = createRouter({
                 {
                   path: "create",
                   name: "admin-unit-equipment-create",
-                  component: () => import("@/views/admin/ViewSelect.vue"),
+                  component: () => import("@/views/admin/unit/equipment/CreateEquipment.vue"),
                   meta: { type: "create", section: "unit", module: "equipment" },
                   beforeEnter: [abilityAndNavUpdate],
                 },
@@ -354,7 +354,7 @@ const router = createRouter({
                     {
                       path: "overview",
                       name: "admin-unit-equipment-overview",
-                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      component: () => import("@/views/admin/unit/equipment/Overview.vue"),
                       props: true,
                     },
                     {
@@ -378,7 +378,7 @@ const router = createRouter({
                     {
                       path: "edit",
                       name: "admin-unit-equipment-edit",
-                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      component: () => import("@/views/admin/unit/equipment/UpdateEquipment.vue"),
                       meta: { type: "update", section: "unit", module: "equipment" },
                       beforeEnter: [abilityAndNavUpdate],
                       props: true,

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

@@ -21,5 +21,4 @@ export interface UpdateEquipmentViewModel {
   code: string;
   name: string;
   location: string;
-  equipmentTypeId: string;
 }

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

@@ -0,0 +1,211 @@
+<template>
+  <MainTemplate>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Ausrüstung erfassen</h1>
+      </div>
+    </template>
+    <template #diffMain>
+      <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+        <form class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerCreate">
+          <div>
+            <Combobox v-model="selectedType">
+              <ComboboxLabel>Typ</ComboboxLabel>
+              <div class="relative mt-1">
+                <ComboboxInput
+                  class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+                  @input="query = $event.target.value"
+                />
+                <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
+                  <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+                </ComboboxButton>
+                <TransitionRoot
+                  leave="transition ease-in duration-100"
+                  leaveFrom="opacity-100"
+                  leaveTo="opacity-0"
+                  @after-leave="query = ''"
+                >
+                  <ComboboxOptions
+                    class="z-20 absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-none sm:text-sm"
+                  >
+                    <ComboboxOption v-if="loading || deferingSearch" as="template" disabled>
+                      <li class="flex flex-row gap-2 text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                        <Spinner />
+                        <span class="font-normal block truncate">suche</span>
+                      </li>
+                    </ComboboxOption>
+                    <ComboboxOption v-else-if="filtered.length === 0 && query == ''" as="template" disabled>
+                      <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                        <span class="font-normal block truncate">tippe, um zu suchen...</span>
+                      </li>
+                    </ComboboxOption>
+                    <ComboboxOption v-else-if="filtered.length === 0" as="template" disabled>
+                      <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                        <span class="font-normal block truncate">Keine Auswahl gefunden.</span>
+                      </li>
+                    </ComboboxOption>
+
+                    <ComboboxOption
+                      v-if="!(loading || deferingSearch)"
+                      v-for="type in filtered"
+                      as="template"
+                      :key="type.id"
+                      :value="type.id"
+                      v-slot="{ selected, active }"
+                    >
+                      <li
+                        class="relative cursor-default select-none py-2 pl-10 pr-4"
+                        :class="{
+                          'bg-primary text-white': active,
+                          'text-gray-900': !active,
+                        }"
+                      >
+                        <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
+                          {{ type.type }}
+                        </span>
+                        <span
+                          v-if="selected"
+                          class="absolute inset-y-0 left-0 flex items-center pl-3"
+                          :class="{ 'text-white': active, 'text-primary': !active }"
+                        >
+                          <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                        </span>
+                      </li>
+                    </ComboboxOption>
+                  </ComboboxOptions>
+                </TransitionRoot>
+              </div>
+            </Combobox>
+          </div>
+          <div>
+            <label for="name">Bezeichnung</label>
+            <input type="text" id="name" required />
+          </div>
+          <ScanInput name="code" label="Code" :required="false" />
+          <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-equipment' }"
+              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 { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
+import type { CreateEquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import {
+  Combobox,
+  ComboboxLabel,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import type { EquipmentTypeViewModel } from "@/viewmodels/admin/unit/equipmentType/equipmentType.models";
+import { useEquipmentTypeStore } from "@/stores/admin/unit/equipmentType/equipmentType";
+import ScanInput from "@/components/ScanInput.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  watch: {
+    query() {
+      this.deferingSearch = true;
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.deferingSearch = false;
+        this.search();
+      }, 600);
+    },
+  },
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: null as any,
+      selectedType: null as null | string,
+      loading: false as boolean,
+      deferingSearch: false as boolean,
+      timer: undefined as any,
+      query: "" as string,
+      filtered: [] as Array<EquipmentTypeViewModel>,
+    };
+  },
+  computed: {
+    ...mapState(useEquipmentTypeStore, ["equipmentTypes"]),
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  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;
+      let createEquipment: CreateEquipmentViewModel = {
+        code: formData.code.value || null,
+        name: formData.name.value,
+        location: formData.location.value,
+        equipmentTypeId: this.selectedType,
+      };
+      this.status = "loading";
+      this.createEquipment(createEquipment)
+        .then((res) => {
+          this.status = { status: "success" };
+
+          this.timeout = setTimeout(() => {
+            this.$router.push({
+              name: "admin-unit-equipment-overview",
+              params: {
+                equipmentId: res.data,
+              },
+            });
+          }, 1500);
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>

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

@@ -26,6 +26,7 @@
             v-if="can('create', 'unit', 'equipment')"
             :to="{ name: 'admin-unit-equipment-create' }"
             primary
+            button
             class="!w-fit"
           >
             Gerätschaft erfassen

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

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

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

@@ -0,0 +1,119 @@
+<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="equipment != null"
+      class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
+      @submit.prevent="triggerUpdate"
+    >
+      <p class="mx-auto">Ausrüstung bearbeiten</p>
+      <div>
+        <label for="name">Bezeichnung</label>
+        <input type="text" id="name" required v-model="equipment.name" />
+      </div>
+      <ScanInput name="code" label="Code" :required="false" v-model="equipment.code" />
+      <div>
+        <label for="location">Verortung (optional)</label>
+        <input type="text" id="location" v-model="equipment.location" />
+      </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 { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
+import type {
+  CreateEquipmentViewModel,
+  EquipmentViewModel,
+  UpdateEquipmentViewModel,
+} from "@/viewmodels/admin/unit/equipment/equipment.models";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import ScanInput from "@/components/ScanInput.vue";
+import isEqual from "lodash.isequal";
+import cloneDeep from "lodash.clonedeep";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    equipmentId: String,
+  },
+  watch: {
+    loadingActive() {
+      if (this.loading == "loading") {
+        this.loading = this.loadingActive;
+      }
+      if (this.loadingActive == "fetched") this.equipment = cloneDeep(this.activeEquipmentObj);
+    },
+  },
+  data() {
+    return {
+      loading: "loading" as "loading" | "fetched" | "failed",
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      equipment: null as null | EquipmentViewModel,
+      timeout: null as any,
+    };
+  },
+  computed: {
+    canSaveOrReset(): boolean {
+      return isEqual(this.activeEquipmentObj, this.equipment);
+    },
+    ...mapState(useEquipmentStore, ["activeEquipmentObj", "loadingActive"]),
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useEquipmentStore, ["updateActiveEquipment", "fetchEquipmentByActiveId"]),
+    resetForm() {
+      this.equipment = cloneDeep(this.activeEquipmentObj);
+    },
+    fetchItem() {
+      this.fetchEquipmentByActiveId();
+    },
+    triggerUpdate(e: any) {
+      if (this.equipment == null) return;
+      let formData = e.target.elements;
+      let updateEquipment: UpdateEquipmentViewModel = {
+        id: this.equipment.id,
+        code: formData.code.value || null,
+        name: formData.name.value,
+        location: formData.location.value,
+      };
+      this.status = "loading";
+      this.updateActiveEquipment(updateEquipment)
+        .then((res) => {
+          this.fetchItem();
+          this.status = { status: "success" };
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        })
+        .finally(() => {
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        });
+    },
+  },
+});
+</script>