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="title">Einsatzbeginn</label>
        <input type="datetime-local" id="title" />
      </div>
      {{ title }}
      <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"
        :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>
  <!-- <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, mapWritableState } from "pinia";
import { useAbilityStore } from "@/stores/ability";
import { Quill, QuillEditor } from "@vueup/vue-quill";
import 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 { useMissionDetailStore } from "@/stores/admin/operation/missionDetail";
</script>

<script lang="ts">
export default defineComponent({
  data() {
    return {
      binding: undefined as undefined | QuillBinding,
      cursors: undefined as undefined | QuillCursors,
    };
  },
  computed: {
    ...mapState(useAbilityStore, ["can"]),
    ...mapState(useForceStore, ["availableForces"]),
    ...mapWritableState(useMissionDetailStore, ["editor", "title"]),
  },
  created() {
    Quill.register("modules/cursors", QuillCursors);
  },
  methods: {
    initEditor(quill: Quill) {
      this.binding = new QuillBinding(this.editor, quill);
      this.cursors = quill.getModule("cursors") as QuillCursors;
    },
  },
});
</script>