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

<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" v-model="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="start">Einsatzbeginn</label>
        <input type="datetime-local" id="start" />
      </div>
      <div class="grow">
        <label for="end">Einsatzende</label>
        <input type="datetime-local" id="end" />
      </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="mission_short">Stichwort</label>
      <input type="text" id="mission_short" />
    </div>
    <div>
      <label for="location">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="rescued">Anzahl getretteter Personen</label>
        <input type="number" id="rescued" value="0" />
      </div>
      <div class="w-full">
        <label for="recovered">Anzahl geborgener Personen</label>
        <input type="number" id="recovered" 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"
        :options="{ modules: moduleOptions }"
        :enable="can('create', 'operation', 'mission')"
        :style="!can('create', 'operation', 'mission') ? 'opacity: 75%; background: rgb(243 244 246)' : ''"
        @ready="initEditor"
      />
      <!--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>
</template>

<script setup lang="ts">
import { defineComponent, type PropType } from "vue";
import { mapActions, mapState, mapWritableState } 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";
</script>

<script lang="ts">
export default defineComponent({
  props: {
    document: {
      type: Object as PropType<Y.Doc>,
      required: true,
    },
  },
  data() {
    return {
      binding: undefined as undefined | QuillBinding,
      cursors: undefined as undefined | QuillCursors,
    };
  },
  computed: {
    ...mapState(useAbilityStore, ["can"]),
    ...mapState(useForceStore, ["availableForces"]),
    title: {
      get() {
        return this.document.getMap("form").get("title");
      },
      set(val: string) {
        this.document.getMap("form").set("title", val);
      },
    },
    editor() {
      return this.document.getText("editor");
    },
  },
  beforeUnmount() {
    if (this.binding) {
      this.binding.destroy();
      this.binding = undefined;
    }
  },
  methods: {
    initEditor(quill: Quill) {
      quill.history.clear();
      this.binding = new QuillBinding(this.editor, quill);
      this.cursors = quill.getModule("cursors") as QuillCursors;
    },
  },
});
</script>