From c5b62d32216f4ef220e8e4d1bea6d1d9306bbfcb Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Thu, 6 Mar 2025 12:03:47 +0100
Subject: [PATCH] detail form equipment data

---
 src/components/admin/EquipmentSelect.vue      | 138 ++++++++++++++++++
 .../equipment/CreateEquipmentModal.vue        |   2 +-
 .../equipment/DeleteEquipmentModal.vue        |   6 +-
 .../equipment/EquipmentListItem.vue           |   2 +-
 .../equipment/UpdateEquipmentModal.vue        |   2 +-
 .../operation/mission/DetailFormEquipment.vue |  82 +++++++++++
 .../mission/DetailFormEquipmentItem.vue       |  73 +++++++++
 .../mission/DetailFormVehicleItem.vue         |  10 +-
 .../admin/operation/mission/MissionDetail.vue |   9 +-
 src/stores/admin/configuration/equipment.ts   |  10 ++
 10 files changed, 317 insertions(+), 17 deletions(-)
 create mode 100644 src/components/admin/EquipmentSelect.vue
 create mode 100644 src/components/admin/operation/mission/DetailFormEquipment.vue
 create mode 100644 src/components/admin/operation/mission/DetailFormEquipmentItem.vue

diff --git a/src/components/admin/EquipmentSelect.vue b/src/components/admin/EquipmentSelect.vue
new file mode 100644
index 0000000..b77b33c
--- /dev/null
+++ b/src/components/admin/EquipmentSelect.vue
@@ -0,0 +1,138 @@
+<template>
+  <div class="w-full">
+    <Combobox v-model="selected" :disabled="!enabled">
+      <ComboboxLabel v-if="!usePlaceholder">{{ title }}</ComboboxLabel>
+      <div class="relative">
+        <div
+          class="rounded-md shadow-sm relative block w-full border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+        >
+          <ComboboxInput
+            class="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
+            :displayValue="(equipment) => selectedEquipment?.name ?? ''"
+            @input="query = $event.target.value"
+            :placeholder="usePlaceholder ? title : ''"
+          />
+          <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>
+        </div>
+        <TransitionRoot
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+          @after-leave="query = ''"
+        >
+          <ComboboxOptions
+            class="absolute z-20 mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-none sm:text-sm"
+          >
+            <div
+              v-if="availableEquipment.length === 0"
+              class="relative cursor-default select-none px-4 py-2 text-gray-700"
+            >
+              Keine Auswahl verfügbar
+            </div>
+
+            <div
+              v-if="filtered.length === 0 && query !== ''"
+              class="relative cursor-default select-none px-4 py-2 text-gray-700"
+            >
+              Keine Treffer
+            </div>
+
+            <ComboboxOption
+              v-for="person in filtered"
+              as="template"
+              :key="person.id"
+              :value="person.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 }">
+                  {{ person.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 { defineComponent, type PropType } from "vue";
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+  TransitionRoot,
+  ComboboxLabel,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import type { EquipmentViewModel } from "@/viewmodels/admin/configuration/equipment.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    title: String,
+    usePlaceholder: {
+      type: Boolean,
+      default: false,
+    },
+    enabled: {
+      type: Boolean,
+      default: true,
+    },
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    availableEquipment: {
+      type: Array as PropType<Array<EquipmentViewModel>>,
+      default: [],
+    },
+  },
+  data() {
+    return {
+      query: "" as string,
+    };
+  },
+  computed: {
+    selected: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: Array<string>) {
+        this.$emit("update:model-value", val);
+      },
+    },
+    selectedEquipment() {
+      return this.availableEquipment.find((ae) => ae.id == this.selected);
+    },
+    filtered() {
+      return this.query == ""
+        ? this.availableEquipment
+        : this.availableEquipment.filter((e) => {
+            const arr = this.query.toLocaleLowerCase().split(" ");
+            return arr.some((q) => e.name.toLocaleLowerCase().includes(q) || e.code?.toLocaleLowerCase().includes(q));
+          });
+    },
+  },
+});
+</script>
diff --git a/src/components/admin/configuration/equipment/CreateEquipmentModal.vue b/src/components/admin/configuration/equipment/CreateEquipmentModal.vue
index a094d93..985d197 100644
--- a/src/components/admin/configuration/equipment/CreateEquipmentModal.vue
+++ b/src/components/admin/configuration/equipment/CreateEquipmentModal.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="w-full md:max-w-md">
     <div class="flex flex-col items-center">
-      <p class="text-xl font-medium">Fahrzeug erstellen</p>
+      <p class="text-xl font-medium">Gerät erstellen</p>
     </div>
     <br />
     <form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
diff --git a/src/components/admin/configuration/equipment/DeleteEquipmentModal.vue b/src/components/admin/configuration/equipment/DeleteEquipmentModal.vue
index f3c35cd..ad4555a 100644
--- a/src/components/admin/configuration/equipment/DeleteEquipmentModal.vue
+++ b/src/components/admin/configuration/equipment/DeleteEquipmentModal.vue
@@ -1,12 +1,10 @@
 <template>
   <div class="w-full md:max-w-md">
     <div class="flex flex-col items-center">
-      <p class="text-xl font-medium">Fahrzeug löschen</p>
+      <p class="text-xl font-medium">Gerät löschen</p>
     </div>
     <br />
-    <p class="text-center">
-      Fahrzeug {{ equipment?.name }} {{ equipment?.code ? `(${equipment.code})` : "" }} löschen?
-    </p>
+    <p class="text-center">Gerät {{ equipment?.name }} {{ equipment?.code ? `(${equipment.code})` : "" }} löschen?</p>
     <br />
 
     <div class="flex flex-row gap-2">
diff --git a/src/components/admin/configuration/equipment/EquipmentListItem.vue b/src/components/admin/configuration/equipment/EquipmentListItem.vue
index 5596099..de65ed1 100644
--- a/src/components/admin/configuration/equipment/EquipmentListItem.vue
+++ b/src/components/admin/configuration/equipment/EquipmentListItem.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col h-fit w-full border border-primary rounded-md">
     <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
-      <p>{{ equipment.name }} {{ equipment.type }} {{ equipment.code }}</p>
+      <p>{{ equipment.name }} {{ equipment.type ? `(${equipment.type})` : "" }} {{ equipment.code }}</p>
       <div class="flex flex-row">
         <div
           v-if="can('update', 'configuration', 'equipment') && !equipment?.decommissioned"
diff --git a/src/components/admin/configuration/equipment/UpdateEquipmentModal.vue b/src/components/admin/configuration/equipment/UpdateEquipmentModal.vue
index fe017d1..52c414a 100644
--- a/src/components/admin/configuration/equipment/UpdateEquipmentModal.vue
+++ b/src/components/admin/configuration/equipment/UpdateEquipmentModal.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="w-full md:max-w-md">
     <div class="flex flex-col items-center">
-      <p class="text-xl font-medium">Fahrzeug aktualisieren</p>
+      <p class="text-xl font-medium">Gerät aktualisieren</p>
     </div>
     <br />
     <Spinner v-if="loading == 'loading' && equipment == null" class="mx-auto" />
diff --git a/src/components/admin/operation/mission/DetailFormEquipment.vue b/src/components/admin/operation/mission/DetailFormEquipment.vue
new file mode 100644
index 0000000..98c8c93
--- /dev/null
+++ b/src/components/admin/operation/mission/DetailFormEquipment.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <div class="flex flex-row gap-2 items-center">
+      <p>Eingesetztes Material</p>
+      <PlusCircleIcon v-if="enabled" class="w-5 h-5 cursor-pointer" @click="showAddForm = !showAddForm" />
+    </div>
+    <div v-if="showAddForm" class="flex flex-row gap-2 items-center">
+      <EquipmentSelect
+        title="Ausrüstung wählen"
+        usePlaceholder
+        :availableEquipment="filteredAvailableEquipments"
+        @update:model-value="(v) => addEquipment(v)"
+      />
+      <XMarkIcon class="w-5 h-5 cursor-pointer" @click="showAddForm = false" />
+    </div>
+
+    <DetailFormEquipmentItem
+      v-for="[key, equipment] in equipments"
+      :key="key"
+      :equipmentId="key"
+      :equipment="equipment"
+      :awareness="awareness"
+      :enabled="enabled"
+      @remove="removeEquipment(key)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import * as Y from "yjs";
+import { Awareness } from "@/helpers/awareness";
+import DetailFormEquipmentItem from "./DetailFormEquipmentItem.vue";
+import { PlusCircleIcon, XMarkIcon } from "@heroicons/vue/24/outline";
+import { mapState } from "pinia";
+import { useEquipmentStore } from "@/stores/admin/configuration/equipment";
+import EquipmentSelect from "../../EquipmentSelect.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    map: {
+      type: Object as PropType<Y.Map<Y.Map<number | string>>>,
+      required: true,
+    },
+    awareness: {
+      type: Object as PropType<Awareness>,
+      required: true,
+    },
+    enabled: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      showAddForm: false as boolean,
+    };
+  },
+  computed: {
+    ...mapState(useEquipmentStore, ["availableEquipments"]),
+    equipments() {
+      return Array.from(this.map.entries());
+    },
+    filteredAvailableEquipments() {
+      let added = Array.from(this.map.keys());
+      return this.availableEquipments.filter((av) => !added.includes(av.id));
+    },
+  },
+  methods: {
+    addEquipment(equipmentId: string) {
+      if (this.map.has(equipmentId)) return;
+      this.map.set(equipmentId, new Y.Map<string | number>());
+      this.showAddForm = false;
+    },
+    removeEquipment(equipmentId: string) {
+      this.map.delete(equipmentId);
+    },
+  },
+});
+</script>
diff --git a/src/components/admin/operation/mission/DetailFormEquipmentItem.vue b/src/components/admin/operation/mission/DetailFormEquipmentItem.vue
new file mode 100644
index 0000000..b92ee51
--- /dev/null
+++ b/src/components/admin/operation/mission/DetailFormEquipmentItem.vue
@@ -0,0 +1,73 @@
+<template>
+  <div
+    class="flex flex-col md:flex-row gap-2 rounded-md shadow-sm relative w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+  >
+    <div class="flex flex-row gap-2 items-center">
+      <TrashIcon class="w-5 h-5 min-w-5 min-h-5 cursor-pointer" @click="$emit('remove')" />
+      <p
+        class="flex w-full md:w-32 md:min-w-32 h-full justify-center items-center rounded-md shadow-sm relative px-3 py-2 border border-gray-300 text-gray-900 sm:text-sm"
+      >
+        {{ selectedEquipment?.name }}
+      </p>
+    </div>
+
+    <DetailFormInput
+      :ident="equipmentId + 'note'"
+      title="Notiz"
+      v-model="note"
+      type="text"
+      :awareness="awareness"
+      :enabled="enabled"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import * as Y from "yjs";
+import { Awareness } from "@/helpers/awareness";
+import { useEquipmentStore } from "@/stores/admin/configuration/equipment";
+import { useForceStore } from "@/stores/admin/configuration/force";
+import DetailFormInput from "./DetailFormInput.vue";
+import { TrashIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    equipmentId: {
+      type: String,
+      required: true,
+    },
+    equipment: {
+      type: Object as PropType<Y.Map<string | number>>,
+      required: true,
+    },
+    awareness: {
+      type: Object as PropType<Awareness>,
+      required: true,
+    },
+    enabled: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  emits: ["remove"],
+  computed: {
+    ...mapState(useForceStore, ["availableForces"]),
+    ...mapState(useEquipmentStore, ["availableEquipments"]),
+    selectedEquipment() {
+      return this.availableEquipments.find((av) => av.id == this.equipmentId);
+    },
+    note: {
+      get() {
+        return this.equipment.get("note") as string;
+      },
+      set(val: string) {
+        this.equipment.set("note", val);
+      },
+    },
+  },
+});
+</script>
diff --git a/src/components/admin/operation/mission/DetailFormVehicleItem.vue b/src/components/admin/operation/mission/DetailFormVehicleItem.vue
index 4eef0e0..ffa85de 100644
--- a/src/components/admin/operation/mission/DetailFormVehicleItem.vue
+++ b/src/components/admin/operation/mission/DetailFormVehicleItem.vue
@@ -60,7 +60,7 @@ import { TrashIcon } from "@heroicons/vue/24/outline";
 export default defineComponent({
   props: {
     vehicleId: {
-      type: Object as PropType<string>,
+      type: String,
       required: true,
     },
     vehicle: {
@@ -103,16 +103,16 @@ export default defineComponent({
       get() {
         return this.vehicle.get("mileage_start") as string;
       },
-      set(val: string) {
-        this.vehicle.set("mileage_start", val);
+      set(val: number) {
+        this.vehicle.set("mileage_start", val.toString());
       },
     },
     mileage_end: {
       get() {
         return this.vehicle.get("mileage_end") as string;
       },
-      set(val: string) {
-        this.vehicle.set("mileage_end", val);
+      set(val: number) {
+        this.vehicle.set("mileage_end", val.toString());
       },
     },
   },
diff --git a/src/components/admin/operation/mission/MissionDetail.vue b/src/components/admin/operation/mission/MissionDetail.vue
index 0bb3906..aed1b60 100644
--- a/src/components/admin/operation/mission/MissionDetail.vue
+++ b/src/components/admin/operation/mission/MissionDetail.vue
@@ -65,9 +65,7 @@
     </div>
     <DetailFormEditor title="Einsatzbeschreibung" :text="editor" :awareness="awareness" :enabled="enabled" />
     <DetailFormVehicle :map="vehicle" :awareness="awareness" :enabled="enabled" />
-    <div class="flex flex-col">
-      <p>Eingesetztes Material</p>
-    </div>
+    <DetailFormEquipment :map="equipment" :awareness="awareness" :enabled="enabled" />
     <div class="flex flex-col">
       <p>Kontaktdaten</p>
     </div>
@@ -84,6 +82,7 @@ import DetailFormInput from "./DetailFormInput.vue";
 import DetailFormEditor from "./DetailFormEditor.vue";
 import DetailFormVehicle from "./DetailFormVehicle.vue";
 import ForceSelect from "@/components/admin/ForceSelect.vue";
+import DetailFormEquipment from "./DetailFormEquipment.vue";
 </script>
 
 <script lang="ts">
@@ -202,10 +201,10 @@ export default defineComponent({
       return this.document.getMap<Y.Map<number | string>>("vehicle");
     },
     equipment() {
-      return this.document.getMap("equipment");
+      return this.document.getMap<Y.Map<number | string>>("equipment");
     },
     contact() {
-      return this.document.getMap("contact");
+      return this.document.getMap<Y.Map<number | string>>("contact");
     },
   },
 });
diff --git a/src/stores/admin/configuration/equipment.ts b/src/stores/admin/configuration/equipment.ts
index 05236c7..d7cb786 100644
--- a/src/stores/admin/configuration/equipment.ts
+++ b/src/stores/admin/configuration/equipment.ts
@@ -11,6 +11,7 @@ export const useEquipmentStore = defineStore("equipment", {
   state: () => {
     return {
       equipments: [] as Array<EquipmentViewModel & { tab_pos: number }>,
+      availableEquipments: [] as Array<EquipmentViewModel>,
       totalCount: 0 as number,
       loading: "loading" as "loading" | "fetched" | "failed",
     };
@@ -40,6 +41,15 @@ export const useEquipmentStore = defineStore("equipment", {
           this.loading = "failed";
         });
     },
+    getAvailableEquipments() {
+      this.availableEquipments = [];
+      http
+        .get(`/admin/equipment?available=true`)
+        .then((res) => {
+          this.availableEquipments = res.data.equipments;
+        })
+        .catch((err) => {});
+    },
     async getAllEquipments(): Promise<AxiosResponse<any, any>> {
       return await http.get(`/admin/equipment?noLimit=true`).then((res) => {
         return { ...res, data: res.data.equipments };