mission detail form

src/components/admin/ForceSelect.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="w-full">
+    <Combobox v-model="selected" by="id">
+      <ComboboxLabel>{{ title }}</ComboboxLabel>
+      <div class="relative mt-1">
+        <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="
+              (force) =>
+                ((force as ForceViewModel)?.firstname ?? '') + ' ' + ((force as ForceViewModel)?.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>
+        </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 bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-none sm:text-sm"
+          >
+            <div
+              v-if="availableForces.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"
+              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.firstname }} {{ person.lastname }}
+                </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 { ForceViewModel } from "@/viewmodels/admin/configuration/force.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    title: String,
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    availableForces: {
+      type: Array as PropType<Array<ForceViewModel>>,
+      default: [],
+    },
+  },
+  data() {
+    return {
+      query: "" as string,
+    };
+  },
+  computed: {
+    selected: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: Array<string>) {
+        this.$emit("update:model-value", val);
+      },
+    },
+    filtered() {
+      return this.query == ""
+        ? this.availableForces
+        : this.availableForces.filter((f) => {
+            return this.query
+              .toLocaleLowerCase()
+              .split(" ")
+              .some((q) => f.firstname.toLocaleLowerCase().includes(q) || f.lastname.toLocaleLowerCase().includes(q));
+          });
+    },
+  },
+});
+</script>

src/main.css

@@ -81,7 +81,7 @@ a[button].disabled {
 input:not([type="checkbox"]),
 textarea,
 select {
-  @apply 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;
+  @apply 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 focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none;
 }
 
 input[readonly],

src/stores/admin/configuration/force.ts

@@ -11,6 +11,7 @@ export const useForceStore = defineStore("force", {
   state: () => {
     return {
       forces: [] as Array<ForceViewModel & { tab_pos: number }>,
+      availableForces: [] as Array<ForceViewModel>,
       totalCount: 0 as number,
       loading: "loading" as "loading" | "fetched" | "failed",
     };
@@ -40,6 +41,15 @@ export const useForceStore = defineStore("force", {
           this.loading = "failed";
         });
     },
+    getAvailableForces() {
+      this.availableForces = [];
+      http
+        .get(`/admin/force?available=true`)
+        .then((res) => {
+          this.availableForces = res.data.forces;
+        })
+        .catch((err) => {});
+    },
     async getAllForces(): Promise<AxiosResponse<any, any>> {
       return await http.get(`/admin/force?noLimit=true`).then((res) => {
         return { ...res, data: res.data.forces };

src/views/admin/operation/mission/MissionDetail.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <div>
+      <label for="title">Einsatztitel</label>
+      <input type="text" id="title" />
+    </div>
+    <div class="flex flex-col sm:flex-row gap-2">
+      <ForceSelect title="Einsatzleiter" :available-forces="availableForces" />
+      <ForceSelect title="Bericht Ersteller" :available-forces="availableForces" />
+    </div>
+    <div class="flex flex-col sm:flex-row gap-2">
+      <div class="grow">
+        <label for="title">Einsatzbeginn</label>
+        <input type="datetime-local" id="title" />
+      </div>
+      <div class="grow">
+        <label for="title">Einsatzende</label>
+        <input type="datetime-local" id="title" />
+      </div>
+      <div class="w-full sm:w-fit min-w-fit">
+        <p>Dauer</p>
+        <p
+          class="rounded-md shadow-sm relative block w-full sm:w-fit px-3 py-2 border border-gray-300 text-gray-900 sm:text-sm"
+        >
+          00h 00m
+        </p>
+      </div>
+    </div>
+    <div>
+      <label for="title">Stichwort</label>
+      <input type="text" id="title" />
+    </div>
+    <div>
+      <label for="title">Einsatzort</label>
+      <input type="text" id="title" />
+    </div>
+    <div>
+      <label for="title">Weitere Anwesende (andere Wehren, Polizei, Rettungsdienst)</label>
+      <input type="text" id="title" />
+    </div>
+    <div class="flex flex-col sm:flex-row gap-2">
+      <div class="w-full">
+        <label for="title">Anzahl getretteter Personen</label>
+        <input type="number" id="title" value="0" />
+      </div>
+      <div class="w-full">
+        <label for="title">Anzahl geborgener Personen</label>
+        <input type="number" id="title" value="0" />
+      </div>
+    </div>
+    <div class="flex flex-col">
+      <label for="summary">Einsatzbeschreibung</label>
+      <QuillEditor
+        id="summary"
+        theme="snow"
+        style="height: 250px; max-height: 250px; min-height: 250px"
+        contentType="html"
+        :toolbar="toolbarOptions"
+        :enable="can('create', 'operation', 'mission')"
+        :style="!can('create', 'operation', 'mission') ? 'opacity: 75%; background: rgb(243 244 246)' : ''"
+      />
+      <!--v-model:content=""-->
+    </div>
+    <div class="flex flex-col">
+      <p>Eingesetzte Fahrzeuge</p>
+    </div>
+    <div class="flex flex-col">
+      <p>Eingesetztes Material</p>
+    </div>
+    <div class="flex flex-col">
+      <p>Kontaktdaten</p>
+    </div>
+  </div>
+  <!-- <div class="flex flex-row gap-4">
+    <button primary class="!w-fit">Knopf</button>
+  </div> -->
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useAbilityStore } from "@/stores/ability";
+import { QuillEditor } from "@vueup/vue-quill";
+import "@vueup/vue-quill/dist/vue-quill.snow.css";
+import { toolbarOptions } from "@/helpers/quillConfig";
+import ForceSelect from "@/components/admin/ForceSelect.vue";
+import { useForceStore } from "@/stores/admin/configuration/force";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+    ...mapState(useForceStore, ["availableForces"]),
+  },
+  mounted() {},
+  methods: {},
+});
+</script>

src/views/admin/operation/mission/MissionOverview.vue

@@ -4,15 +4,15 @@
       <RouterLink :to="{ name: 'admin-operation-mission-default' }" class="text-primary">zurück zur Liste</RouterLink>
     </template>
     <template #diffMain>
-      <div class="flex flex-col gap-2 grow px-7 overflow-hidden">
+      <div class="flex flex-col gap-2 grow px-2 overflow-hidden">
         <div class="flex flex-col grow gap-2 overflow-hidden">
-          <div class="w-full flex flex-row max-lg:flex-wrap justify-center">
+          <div class="w-full flex flex-row justify-center">
             <RouterLink
               v-for="tab in tabs"
               :key="tab.hash"
               :to="{ hash: tab.hash }"
               replace
-              class="w-1/2 md:w-1/3 lg:w-full p-0.5 first:pl-0 last:pr-0"
+              class="w-full p-0.5 first:pl-0 last:pr-0"
             >
               <p
                 :class="[
@@ -26,7 +26,7 @@
               </p>
             </RouterLink>
           </div>
-          <div v-if="routeHash == '#edit'">hi</div>
+          <MissionDetail v-if="routeHash == '#edit'" />
         </div>
       </div>
     </template>
@@ -37,8 +37,10 @@
 import { defineComponent } from "vue";
 import { mapActions, mapState } from "pinia";
 import MainTemplate from "@/templates/Main.vue";
-import { useAbilityStore } from "@/stores/ability";
 import { useConnectionStore } from "@/stores/admin/operation/connection";
+import MissionDetail from "./MissionDetail.vue";
+import { useForceStore } from "@/stores/admin/configuration/force";
+import type { ForceViewModel } from "@/viewmodels/admin/configuration/force.models";
 </script>
 
 <script lang="ts">
@@ -50,6 +52,7 @@ export default defineComponent({
         { hash: "#presence", title: "Anwesenheit" },
         { hash: "#protocol", title: "Protokoll" },
       ],
+      forces: [] as Array<ForceViewModel>,
     };
   },
   watch: {
@@ -58,7 +61,6 @@ export default defineComponent({
     },
   },
   computed: {
-    ...mapState(useAbilityStore, ["can"]),
     routeHash() {
       return this.$route.hash;
     },
@@ -66,9 +68,11 @@ export default defineComponent({
   mounted() {
     this.manageHash();
     this.connectClient();
+    this.getAvailableForces();
   },
   methods: {
     ...mapActions(useConnectionStore, ["connectClient"]),
+    ...mapActions(useForceStore, ["getAvailableForces"]),
     manageHash() {
       if (!this.$route.hash || !this.tabs.map((t) => t.hash).includes(this.$route.hash)) {
         this.$router.replace({ hash: this.tabs[0].hash });