Merge branch 'develop' into milestone/ff-admin-unit

# Conflicts:
#	src/components/Modal.vue
#	src/components/TextCopy.vue

src/components/ContextMenu.vue

@@ -1,10 +1,9 @@
 <template>
   <div
     ref="contextMenu"
-    class="absolute flex flex-col gap-1 border border-gray-400 bg-white rounded-md select-none text-left shadow-md z-50 p-1"
+    class="absolute flex flex-col gap-1 border border-gray-400 bg-white rounded-md select-none text-left shadow-md z-[100] p-1"
     v-show="show"
     :style="contextMenuStyle"
-    @contextmenu.prevent
     @click="closeContextMenu"
   >
     <component :is="component_ref" :data="data" />

src/components/CopyPasteContextMenu.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="flex flex-row gap-2 cursor-pointer hover:bg-gray-300 p-1 rounded-md" @click="copy">
+    <DocumentDuplicateIcon class="w-5 h-5" />
+    <p>kopieren</p>
+  </div>
+  <div
+    v-if="data != 'nopaste'"
+    class="flex flex-row gap-2 cursor-pointer hover:bg-gray-300 p-1 rounded-md"
+    @click="paste"
+  >
+    <ClipboardDocumentIcon class="w-5 h-5" />
+    <p>einfügen</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { ClipboardDocumentIcon, DocumentDuplicateIcon } from "@heroicons/vue/24/outline";
+import { mapState } from "pinia";
+import { useContextMenuStore } from "@/stores/context-menu";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: ["data"],
+  data() {
+    return {
+      selectedText: "",
+    };
+  },
+  computed: {
+    ...mapState(useContextMenuStore, ["clickedOnEl"]),
+  },
+  mounted() {
+    this.selectedText =
+      document.getSelection()?.toString() || this.clickedOnEl.value || this.clickedOnEl.innerText || "";
+
+    let selection = document.getSelection()?.toString();
+    console.log(selection);
+    if (selection == "") {
+      console.log("jo");
+      const range = document.createRange();
+      range.selectNode(this.clickedOnEl);
+      console.log(range);
+      window.getSelection()?.removeAllRanges();
+      window.getSelection()?.addRange(range);
+    }
+  },
+  methods: {
+    copy() {
+      navigator.clipboard.writeText(this.selectedText);
+    },
+    paste() {
+      const el = this.clickedOnEl;
+      navigator.clipboard.readText().then((e) => {
+        el.value = e;
+      });
+    },
+  },
+});
+</script>

src/components/Modal.vue

@@ -3,14 +3,11 @@
     ref="contextMenu"
     class="absolute inset-0 w-full h-full flex justify-center items-center bg-black/50 select-none z-50 p-2"
     v-show="show"
-    @contextmenu.prevent
   >
-    <!-- @click="closeModal" -->
     <component
       :is="component_ref"
       :data="data"
       :callback="callback"
-      @click.stop
       class="p-4 bg-white rounded-lg max-h-[95%] overflow-y-auto"
     />
   </div>

src/components/TextCopy.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex w-full relative">
-    <input type="text" :value="copyText" />
+    <input type="text" readonly :value="copyText" />
     <ClipboardIcon
       class="w-5 h-5 p-2 box-content absolute right-1 top-1/2 -translate-y-1/2 bg-white cursor-pointer"
       @click="copyToClipboard"

src/components/admin/management/version/VersionItem.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <p>
+      <span class="font-semibold text-lg">{{ version.title }}</span> vom
+      {{
+        new Date(version.isoDate).toLocaleDateString("de", {
+          month: "2-digit",
+          day: "2-digit",
+          year: "numeric",
+        })
+      }}
+    </p>
+    <div class="versionDisplay flex flex-col" v-html="version['content:encoded']"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Release } from "@/viewmodels/version.models";
+import { defineComponent, type PropType } from "vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    version: {
+      type: Object as PropType<Release>,
+      required: true,
+    },
+  },
+});
+</script>
+
+<style lang="css" scoped>
+@reference "@/main.css";
+
+.versionDisplay :deep() ul {
+  list-style: none;
+  padding-left: 10px;
+  padding-bottom: 5px;
+}
+
+.versionDisplay :deep() ul li::before {
+  content: "-";
+  margin-right: 10px;
+  color: black;
+  font-weight: 600;
+}
+
+.versionDisplay :deep() a {
+  @apply text-primary;
+}
+</style>