editor enable disable

src/components/admin/ForceSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full">
-    <Combobox v-model="selected">
+    <Combobox v-model="selected" :disabled="!enabled">
       <ComboboxLabel>{{ title }}</ComboboxLabel>
       <div class="relative mt-1">
         <div
@@ -90,9 +90,9 @@ import type { ForceViewModel } from "@/viewmodels/admin/configuration/force.mode
 export default defineComponent({
   props: {
     title: String,
-    disabled: {
+    enabled: {
       type: Boolean,
-      default: false,
+      default: true,
     },
     modelValue: {
       type: String,

src/components/admin/operation/mission/DetailFormEditor.vue

@@ -20,11 +20,9 @@
       @ready="initEditor"
       @selectionChange="selectionChange"
       @blur="blured"
+      :enable="enabled"
+      :style="!enabled ? 'opacity: 75%; background: rgb(243 244 246)' : ''"
     />
-    <!--
-        :enable="can('create', 'operation', 'mission')"
-        :style="!can('create', 'operation', 'mission') ? 'opacity: 75%; background: rgb(243 244 246)' : ''"
-      -->
   </div>
 </template>
 
@@ -55,6 +53,10 @@ export default defineComponent({
       type: String,
       default: "",
     },
+    enabled: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {

src/components/admin/operation/mission/DetailFormInput.vue

@@ -11,7 +11,7 @@
         v-tippy="currentEditors.map((c) => c.username).join(', ')"
       />
     </div>
-    <input :type="type" :id="title" v-model="value" :min="min" @focus="focused" @blur="blured" />
+    <input :type="type" :id="title" v-model="value" :min="min" @focus="focused" @blur="blured" :disabled="!enabled" />
   </div>
 </template>
 
@@ -48,6 +48,10 @@ export default defineComponent({
       type: Object as PropType<Awareness>,
       required: true,
     },
+    enabled: {
+      type: Boolean,
+      default: true,
+    },
   },
   emits: ["update:model-value"],
   data() {

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

@@ -1,12 +1,24 @@
 <template>
   <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
-    <DetailFormInput title="Einsatztitel" v-model="title" :awareness="awareness" />
+    <DetailFormInput title="Einsatztitel" v-model="title" :awareness="awareness" :enabled="enabled" />
     <div class="flex flex-col sm:flex-row gap-2">
-      <ForceSelect title="Einsatzleiter" :available-forces="availableForces" v-model="command" />
+      <ForceSelect title="Einsatzleiter" :available-forces="availableForces" v-model="command" :enabled="enabled" />
-      <ForceSelect title="Bericht Ersteller" :available-forces="availableForces" v-model="secretary" />
+      <ForceSelect
+        title="Bericht Ersteller"
+        :available-forces="availableForces"
+        v-model="secretary"
+        :enabled="enabled"
+      />
     </div>
     <div class="flex flex-col sm:flex-row gap-2">
-      <DetailFormInput title="Einsatzbeginn" v-model="start" type="datetime-local" growing :awareness="awareness" />
+      <DetailFormInput
+        title="Einsatzbeginn"
+        v-model="start"
+        type="datetime-local"
+        growing
+        :awareness="awareness"
+        :enabled="enabled"
+      />
       <DetailFormInput
         title="Einsatzende"
         v-model="end"
@@ -14,6 +26,7 @@
         :min="start"
         growing
         :awareness="awareness"
+        :enabled="enabled"
       />
       <div class="w-full sm:w-fit min-w-fit">
         <p>Dauer</p>
@@ -24,12 +37,13 @@
         </p>
       </div>
     </div>
-    <DetailFormInput title="Stichwort" v-model="mission_short" :awareness="awareness" />
+    <DetailFormInput title="Stichwort" v-model="mission_short" :awareness="awareness" :enabled="enabled" />
-    <DetailFormInput title="Einsatzort" v-model="location" :awareness="awareness" />
+    <DetailFormInput title="Einsatzort" v-model="location" :awareness="awareness" :enabled="enabled" />
     <DetailFormInput
       title="Weitere Anwesende (andere Wehren, Polizei, Rettungsdienst)"
       v-model="others"
       :awareness="awareness"
+      :enabled="enabled"
     />
     <div class="flex flex-col sm:flex-row gap-2">
       <DetailFormInput
@@ -38,6 +52,7 @@
         v-model="rescued"
         min="0"
         :awareness="awareness"
+        :enabled="enabled"
       />
       <DetailFormInput
         title="Anzahl geborgener Personen"
@@ -45,9 +60,10 @@
         v-model="recovered"
         min="0"
         :awareness="awareness"
+        :enabled="enabled"
       />
     </div>
-    <DetailFormEditor title="Einsatzbeschreibung" :text="editor" :awareness="awareness" />
+    <DetailFormEditor title="Einsatzbeschreibung" :text="editor" :awareness="awareness" :enabled="enabled" />
     <div class="flex flex-col">
       <p>Eingesetzte Fahrzeuge</p>
     </div>
@@ -63,14 +79,13 @@
 <script setup lang="ts">
 import { defineComponent, type PropType } from "vue";
 import { mapState } from "pinia";
-import { useAbilityStore } from "@/stores/ability";
 import "@vueup/vue-quill/dist/vue-quill.snow.css";
 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 DetailFormInput from "./DetailFormInput.vue";
-import DetailFormEditor from "@/components/admin/operation/mission/DetailFormEditor.vue";
+import DetailFormEditor from "./DetailFormEditor.vue";
 import { Awareness } from "@/helpers/awareness";
 </script>
 
@@ -85,9 +100,12 @@ export default defineComponent({
       type: Object as PropType<Awareness>,
       required: true,
     },
+    enabled: {
+      type: Boolean,
+      default: true,
+    },
   },
   computed: {
-    ...mapState(useAbilityStore, ["can"]),
     ...mapState(useForceStore, ["availableForces"]),
     title: {
       get() {

src/components/admin/operation/mission/MissionPresence.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col gap-2 h-full w-full overflow-hidden">
-    <Combobox v-model="presence" multiple>
+    <Combobox v-model="presence" multiple :disabled="!enabled">
       <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"
       >
@@ -14,9 +14,10 @@
         </ComboboxButton>
       </div>
       <ComboboxOptions
-        class="w-full h-full overflow-y-auto flex flex-col gap-1 rounded-md border border-gray-300 bg-white text-base shadow-md ring-1 ring-black/5 focus:outline-none sm:text-sm"
+        class="w-full h-full overflow-y-auto flex flex-col gap-1 rounded-md border border-gray-300 text-base shadow-md ring-1 ring-black/5 focus:outline-none sm:text-sm"
         :static="true"
         :open="true"
+        :class="enabled ? ' bg-white' : 'opacity-75 pointer-events-none bg-gray-50'"
       >
         <div v-if="availableForces.length === 0" class="relative cursor-default select-none px-4 py-2 text-gray-700">
           Keine Auswahl verfügbar
@@ -82,6 +83,10 @@ export default defineComponent({
       type: Object as PropType<Partial<Awareness>>,
       required: true,
     },
+    enabled: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {

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

@@ -46,8 +46,18 @@
             </RouterLink>
           </div>
 
-          <MissionDetail v-show="routeHash == '#edit'" :document="yDoc" :awareness="awareness" />
+          <MissionDetail
-          <MissionPresence v-show="routeHash == '#presence'" :document="yDoc" :awareness="awareness" />
+            v-show="routeHash == '#edit'"
+            :document="yDoc"
+            :awareness="awareness"
+            :enabled="can('create', 'operation', 'mission')"
+          />
+          <MissionPresence
+            v-show="routeHash == '#presence'"
+            :document="yDoc"
+            :awareness="awareness"
+            :enabled="can('create', 'operation', 'mission')"
+          />
         </div>
       </div>
     </template>
@@ -59,12 +69,13 @@ import { defineComponent } from "vue";
 import { mapActions, mapState, mapWritableState } from "pinia";
 import MainTemplate from "@/templates/Main.vue";
 import { useConnectionStore } from "@/stores/admin/operation/connection";
-import MissionDetail from "./MissionDetail.vue";
+import MissionDetail from "@/components/admin/operation/mission/MissionDetail.vue";
-import MissionPresence from "./MissionPresence.vue";
+import MissionPresence from "@/components/admin/operation/mission/MissionPresence.vue";
 import { useForceStore } from "@/stores/admin/configuration/force";
 import type { ForceViewModel } from "@/viewmodels/admin/configuration/force.models";
-import { useMissionDetailStore } from "../../../../stores/admin/operation/missionDetail";
+import { useMissionDetailStore } from "@/stores/admin/operation/missionDetail";
 import { UsersIcon } from "@heroicons/vue/24/outline";
+import { useAbilityStore } from "@/stores/ability";
 </script>
 
 <script lang="ts">
@@ -96,6 +107,7 @@ export default defineComponent({
     },
   },
   computed: {
+    ...mapState(useAbilityStore, ["can"]),
     ...mapState(useConnectionStore, ["connectionStatus"]),
     ...mapWritableState(useMissionDetailStore, ["yDoc", "awareness"]),
     routeHash() {