editor enable disable

2025-03-05 15:29:09 +01:00 · 2025-03-05 15:29:09 +01:00 · eb78b7755f
commit eb78b7755f
parent 8448597284
6 changed files with 67 additions and 26 deletions
--- a/src/components/admin/ForceSelect.vue
+++ b/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,
--- a/src/components/admin/operation/mission/DetailFormEditor.vue
+++ b/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 {
--- a/src/components/admin/operation/mission/DetailFormInput.vue
+++ b/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() {
--- a/src/components/admin/operation/mission/MissionDetail.vue
+++ b/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="Bericht Ersteller" :available-forces="availableForces" v-model="secretary" />
+      <ForceSelect title="Einsatzleiter" :available-forces="availableForces" v-model="command" :enabled="enabled" />
+      <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="Einsatzort" v-model="location" :awareness="awareness" />
+    <DetailFormInput title="Stichwort" v-model="mission_short" :awareness="awareness" :enabled="enabled" />
+    <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 DetailFormEditor from "@/components/admin/operation/mission/DetailFormEditor.vue";
+import DetailFormInput from "./DetailFormInput.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() {
--- a/src/components/admin/operation/mission/MissionPresence.vue
+++ b/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 {
--- a/src/views/admin/operation/mission/MissionOverview.vue
+++ b/src/views/admin/operation/mission/MissionOverview.vue
@ -46,8 +46,18 @@
            </RouterLink>
          </div>

-          <MissionDetail v-show="routeHash == '#edit'" :document="yDoc" :awareness="awareness" />
-          <MissionPresence v-show="routeHash == '#presence'" :document="yDoc" :awareness="awareness" />
+          <MissionDetail
+            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 MissionPresence from "./MissionPresence.vue";
+import MissionDetail from "@/components/admin/operation/mission/MissionDetail.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() {