Update dependencies to include TinyMCE and Quill, enhance Navigation component with a new Newsletter submenu, and implement role-based access control for CMS features. Refactor user role handling to support multiple roles and improve user management functionality across various API endpoints.

2025-12-19 09:51:28 +01:00
parent baf6c59c0d
commit 435e28fd55
69 changed files with 5034 additions and 276 deletions
--- a/components/RichTextEditor.vue
+++ b/components/RichTextEditor.vue
@@ -0,0 +1,147 @@
+<template>
+  <div>
+    <label v-if="label" class="block text-sm font-medium text-gray-700 mb-2">
+      {{ label }}
+      <span v-if="required" class="text-red-500">*</span>
+    </label>
+    <div ref="editorContainer" class="border border-gray-300 rounded-lg bg-white"></div>
+    <input type="hidden" :value="modelValue" />
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  label: {
+    type: String,
+    default: ''
+  },
+  required: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const editorContainer = ref(null)
+let quill = null
+
+onMounted(async () => {
+  if (process.client && editorContainer.value) {
+    // Dynamisch Quill nur im Client laden
+    const Quill = (await import('quill')).default
+    await import('quill/dist/quill.snow.css')
+    
+    quill = new Quill(editorContainer.value, {
+      theme: 'snow',
+      modules: {
+        toolbar: [
+          [{ 'header': [1, 2, 3, false] }],
+          ['bold', 'italic', 'underline', 'strike'],
+          [{ 'color': [] }, { 'background': [] }],
+          [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+          [{ 'align': [] }],
+          ['link', 'image'],
+          ['blockquote', 'code-block'],
+          ['clean']
+        ]
+      },
+      placeholder: 'Newsletter-Inhalt eingeben...'
+    })
+
+    // Setze initialen Inhalt
+    if (props.modelValue) {
+      quill.root.innerHTML = props.modelValue
+    }
+
+    // Emitiere Änderungen
+    quill.on('text-change', () => {
+      const html = quill.root.innerHTML
+      // Prüfe ob Inhalt wirklich geändert wurde (nicht nur leere Tags)
+      const textContent = quill.getText().trim()
+      if (textContent || html !== '<p><br></p>') {
+        emit('update:modelValue', html)
+      } else {
+        emit('update:modelValue', '')
+      }
+    })
+  }
+})
+
+watch(() => props.modelValue, (newValue) => {
+  if (quill && quill.root.innerHTML !== newValue) {
+    // Temporär Event-Listener entfernen um Endlosschleife zu vermeiden
+    const currentContent = quill.root.innerHTML
+    if (currentContent !== newValue) {
+      quill.root.innerHTML = newValue || ''
+    }
+  }
+})
+
+onBeforeUnmount(() => {
+  if (quill) {
+    quill = null
+  }
+})
+</script>
+
+<style>
+/* Quill Editor Styles */
+.ql-container {
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+  min-height: 300px;
+}
+
+.ql-editor {
+  min-height: 300px;
+}
+
+.ql-editor.ql-blank::before {
+  color: #9ca3af;
+  font-style: normal;
+}
+
+.ql-toolbar {
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.ql-container {
+  border-bottom-left-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+}
+
+.ql-snow .ql-stroke {
+  stroke: #374151;
+}
+
+.ql-snow .ql-fill {
+  fill: #374151;
+}
+
+.ql-snow .ql-picker-label {
+  color: #374151;
+}
+
+.ql-snow .ql-tooltip {
+  background-color: #ffffff;
+  border: 1px solid #e5e7eb;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.ql-snow .ql-tooltip input[type=text] {
+  border: 1px solid #d1d5db;
+}
+
+.ql-snow .ql-tooltip a.ql-action::after {
+  border-right: 1px solid #d1d5db;
+}
+</style>