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

<template>
  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
    <DetailFormInput title="Einsatztitel" v-model="title" />
    <div class="flex flex-col sm:flex-row gap-2">
      <ForceSelect title="Einsatzleiter" :available-forces="availableForces" v-model="command" />
      <ForceSelect title="Bericht Ersteller" :available-forces="availableForces" v-model="secretary" />
    </div>
    <div class="flex flex-col sm:flex-row gap-2">
      <DetailFormInput title="Einsatzbeginn" v-model="start" type="datetime-local" growing />
      <DetailFormInput title="Einsatzende" v-model="end" type="datetime-local" :min="start" growing />
      <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"
        >
          <span v-if="duration.days != '00'">{{ duration.days }}d</span> {{ duration.hours }}h {{ duration.minutes }}m
        </p>
      </div>
    </div>
    <DetailFormInput title="Stichwort" v-model="mission_short" />
    <DetailFormInput title="Einsatzort" v-model="location" />
    <DetailFormInput title="Weitere Anwesende (andere Wehren, Polizei, Rettungsdienst)" v-model="others" />
    <div class="flex flex-col sm:flex-row gap-2">
      <DetailFormInput title="Anzahl getretteter Personen" type="number" v-model="rescued" min="0" />
      <DetailFormInput title="Anzahl geborgener Personen" type="number" v-model="recovered" min="0" />
    </div>
    <DetailFormEditor title="Einsatzbeschreibung" :text="editor" />
    <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>
</template>

<script setup lang="ts">
import { defineComponent, type PropType } from "vue";
import { mapState } from "pinia";
import { useAbilityStore } from "@/stores/ability";
import { Quill, QuillEditor } from "@vueup/vue-quill";
import type QuillCursors from "quill-cursors";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import { QuillBinding } from "y-quill";
import { moduleOptions } from "@/helpers/quillConfig";
import ForceSelect from "@/components/admin/ForceSelect.vue";
import { useForceStore } from "@/stores/admin/configuration/force";
import * as Y from "yjs";
import "@lottiefiles/lottie-player";
import DetailFormInput from "@/components/admin/operation/mission/DetailFormInput.vue";
import DetailFormEditor from "@/components/admin/operation/mission/DetailFormEditor.vue";
</script>

<script lang="ts">
export default defineComponent({
  props: {
    document: {
      type: Object as PropType<Y.Doc>,
      required: true,
    },
    awareness: {
      type: Object as PropType<undefined>,
      default: undefined,
    },
  },
  computed: {
    ...mapState(useAbilityStore, ["can"]),
    ...mapState(useForceStore, ["availableForces"]),
    title: {
      get() {
        return this.document.getMap("form").get("title") as string;
      },
      set(val: string) {
        this.document.getMap("form").set("title", val);
      },
    },
    command: {
      get() {
        return this.document.getMap("form").get("command") as string;
      },
      set(val: string) {
        this.document.getMap("form").set("command", val);
      },
    },
    secretary: {
      get() {
        return this.document.getMap("form").get("secretary") as string;
      },
      set(val: string) {
        this.document.getMap("form").set("secretary", val);
      },
    },
    start: {
      get() {
        return this.document.getMap("form").get("start") as string;
      },
      set(val: string) {
        this.document.getMap("form").set("start", val);
      },
    },
    end: {
      get() {
        return this.document.getMap("form").get("end") as string;
      },
      set(val: string) {
        this.document.getMap("form").set("end", val);
      },
    },
    duration() {
      const diffInMs = new Date(this.end).getTime() - new Date(this.start).getTime();

      const durationDate = new Date(diffInMs || 0);

      return {
        days: (durationDate.getUTCDate() - 1).toString().padStart(2, "0"),
        hours: durationDate.getUTCHours().toString().padStart(2, "0"),
        minutes: durationDate.getUTCMinutes().toString().padStart(2, "0"),
      };
    },
    mission_short: {
      get() {
        return this.document.getMap("form").get("mission_short") as string;
      },
      set(val: string) {
        this.document.getMap("form").set("mission_short", val);
      },
    },
    location: {
      get() {
        return this.document.getMap("form").get("location") as string;
      },
      set(val: string) {
        this.document.getMap("form").set("location", val);
      },
    },
    others: {
      get() {
        return this.document.getMap("form").get("others") as string;
      },
      set(val: string) {
        this.document.getMap("form").set("others", val);
      },
    },
    rescued: {
      get() {
        return (this.document.getMap("form").get("rescued") || "0") as string;
      },
      set(val: number) {
        this.document.getMap("form").set("rescued", val);
      },
    },
    recovered: {
      get() {
        return (this.document.getMap("form").get("recovered") || "0") as string;
      },
      set(val: number) {
        this.document.getMap("form").set("recovered", val);
      },
    },
    editor() {
      return this.document.getText("editor");
    },
  },
});
</script>