Added Wiki

frontend/components/wiki/TreeItem.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="select-none text-sm text-gray-700">
+    <div
+        class="group flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer transition-colors mb-0.5"
+        :class="[isActive ? 'bg-primary-50 text-primary-700 font-medium' : 'hover:bg-gray-100']"
+        :style="{ paddingLeft: `${indent}rem` }"
+        @click.stop="handleClick"
+    >
+      <button
+          v-if="item.isFolder"
+          class="h-4 w-4 flex items-center justify-center text-gray-400 hover:text-gray-600 transition-transform duration-200"
+          :class="{ 'rotate-90': isOpen }"
+          @click.stop="toggleFolder"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-3 h-3"><path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" /></svg>
+      </button>
+      <span v-else class="w-4"></span>
+
+      <span class="text-gray-400">
+        <svg v-if="item.isFolder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 text-yellow-400"><path d="M3.75 3A1.75 1.75 0 002 4.75v3.26a3.235 3.235 0 011.75-.51h12.5c.644 0 1.245.188 1.75.51V6.75A1.75 1.75 0 0016.25 5h-4.836a.25.25 0 01-.177-.073L9.823 3.513A1.75 1.75 0 008.586 3H3.75zM3.75 9A1.75 1.75 0 002 10.75v4.5c0 .966.784 1.75 1.75 1.75h12.5A1.75 1.75 0 0018 15.25v-4.5A1.75 1.75 0 0016.25 9H3.75z" /></svg>
+        <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4"><path fill-rule="evenodd" d="M4.5 2A1.5 1.5 0 003 3.5v13A1.5 1.5 0 004.5 18h11a1.5 1.5 0 001.5-1.5V7.621a1.5 1.5 0 00-.44-1.06l-4.12-4.122A1.5 1.5 0 0011.378 2H4.5zm2.25 8.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5zm0 3a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z" clip-rule="evenodd" /></svg>
+      </span>
+
+      <span class="truncate flex-1">{{ item.title }}</span>
+    </div>
+
+    <div v-if="item.isFolder && isOpen">
+      <TreeItem v-for="child in item.children" :key="child.id" :item="child" :depth="depth + 1" />
+      <div v-if="!item.children?.length" class="text-xs text-gray-400 py-1 italic" :style="{ paddingLeft: `${indent + 1.8}rem` }">Leer</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { WikiPageItem } from '~/composables/useWikiTree'
+// Expliziter Self-Import für Rekursion (wichtig in manchen Nuxt Setups)
+import TreeItem from './TreeItem.vue'
+
+const props = defineProps<{ item: WikiPageItem; depth?: number }>()
+const router = useRouter()
+const route = useRoute()
+
+const depth = props.depth ?? 0
+const indent = computed(() => 0.5 + (depth * 0.7))
+const isOpen = ref(false)
+const isActive = computed(() => route.params.id === props.item.id)
+
+// Auto-Open: Wenn wir ein Parent sind und das aktive Kind enthalten
+watch(() => route.params.id, (newId) => {
+  if (props.item.isFolder && hasActiveChild(props.item, newId as string)) isOpen.value = true
+}, { immediate: true })
+
+function hasActiveChild(node: WikiPageItem, targetId: string): boolean {
+  if (node.id === targetId) return true
+  return node.children?.some(c => hasActiveChild(c, targetId)) ?? false
+}
+
+function handleClick() {
+  props.item.isFolder ? (isOpen.value = !isOpen.value) : router.push(`/wiki/${props.item.id}`)
+}
+
+function toggleFolder() { isOpen.value = !isOpen.value }
+</script>

frontend/components/wiki/WikiEditor.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="flex flex-col h-full bg-white relative">
+    <div v-if="editor" class="border-b border-gray-100 px-8 py-2 flex gap-1 items-center sticky top-0 bg-white z-10 shadow-sm">
+      <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'bg-gray-100 text-black': editor.isActive('bold') }" class="p-1.5 rounded hover:bg-gray-50 text-gray-600 font-bold transition-colors">B</button>
+      <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'bg-gray-100 text-black': editor.isActive('italic') }" class="p-1.5 rounded hover:bg-gray-50 text-gray-600 italic transition-colors">I</button>
+
+      <div class="w-px h-4 bg-gray-200 mx-2"></div>
+
+      <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'bg-gray-100 text-black': editor.isActive('heading', { level: 1 }) }" class="p-1.5 rounded hover:bg-gray-50 text-gray-600 font-bold text-sm">H1</button>
+      <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'bg-gray-100 text-black': editor.isActive('heading', { level: 2 }) }" class="p-1.5 rounded hover:bg-gray-50 text-gray-600 font-bold text-xs">H2</button>
+
+      <div class="w-px h-4 bg-gray-200 mx-2"></div>
+
+      <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'bg-gray-100 text-black': editor.isActive('bulletList') }" class="p-1.5 rounded hover:bg-gray-50 text-gray-600 text-sm">Liste</button>
+    </div>
+
+    <editor-content :editor="editor" class="flex-1 overflow-y-auto px-8 py-6 prose prose-slate max-w-none focus:outline-none custom-editor-area" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useEditor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import Placeholder from '@tiptap/extension-placeholder'
+
+const props = defineProps<{ modelValue: any }>()
+const emit = defineEmits(['update:modelValue'])
+
+const editor = useEditor({
+  content: props.modelValue,
+  extensions: [
+    StarterKit,
+    Placeholder.configure({ placeholder: 'Schreibe etwas...' }),
+  ],
+  editorProps: {
+    // Tailwind Klassen für den inneren Bereich (damit man überall hinklicken kann)
+    attributes: { class: 'focus:outline-none min-h-[500px] pb-20' },
+  },
+  onUpdate: ({ editor }) => {
+    emit('update:modelValue', editor.getJSON())
+  },
+})
+
+// Reactivity: Wenn Parent Daten ändert (z.B. Seitenwechsel), Editor updaten
+watch(() => props.modelValue, (val) => {
+  if (editor.value && JSON.stringify(val) !== JSON.stringify(editor.value.getJSON())) {
+    editor.value.commands.setContent(val, false)
+  }
+})
+</script>
+
+<style>
+/* Placeholder Grau */
+.ProseMirror p.is-editor-empty:first-child::before {
+  color: #9ca3af;
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+</style>

frontend/composables/useWikiTree.ts

@@ -0,0 +1,83 @@
+// composables/useWikiTree.ts
+export interface WikiPageItem {
+    id: string
+    parentId: string | null
+    title: string
+    isFolder: boolean
+    sortOrder: number
+    entityType?: string | null
+    // children wird im Frontend berechnet
+    children?: WikiPageItem[]
+}
+
+export const useWikiTree = () => {
+    const { $api } = useNuxtApp()
+
+    // Globaler State (bleibt beim Navigieren erhalten)
+    const items = useState<WikiPageItem[]>('wiki-items', () => [])
+    const isLoading = useState<boolean>('wiki-loading', () => false)
+
+    // --- Computed: Flat List zu Baum ---
+    const tree = computed(() => {
+        const rawItems = items.value
+        if (!rawItems || rawItems.length === 0) return []
+
+        const roots: WikiPageItem[] = []
+        const lookup: Record<string, WikiPageItem> = {}
+
+        // 1. Kopieren & Lookup füllen
+        rawItems.forEach(item => {
+            lookup[item.id] = { ...item, children: [] }
+        })
+
+        // 2. Verknüpfen
+        rawItems.forEach(item => {
+            const node = lookup[item.id]
+            if (item.parentId && lookup[item.parentId]) {
+                lookup[item.parentId].children?.push(node)
+            } else {
+                roots.push(node)
+            }
+        })
+
+        // 3. Sortieren (Ordner zuerst, dann SortOrder, dann Alphabet)
+        const sortNodes = (nodes: WikiPageItem[]) => {
+            nodes.sort((a, b) => {
+                if (a.isFolder !== b.isFolder) return a.isFolder ? -1 : 1
+                if (a.sortOrder !== b.sortOrder) return a.sortOrder - b.sortOrder
+                return a.title.localeCompare(b.title)
+            })
+            nodes.forEach(node => {
+                if (node.children?.length) sortNodes(node.children)
+            })
+        }
+
+        sortNodes(roots)
+        return roots
+    })
+
+    // --- Actions ---
+
+    /**
+     * Lädt den Baum.
+     * params kann { entityType: 'customer', entityId: 100 } enthalten.
+     */
+    const loadTree = async (params: { entityType?: string, entityId?: number, entityUuid?: string } = {}) => {
+        isLoading.value = true
+        try {
+            // Wichtig: Bei GET nutzen wir 'query' für Parameter
+            const data = await $api<WikiPageItem[]>('/api/wiki/tree', {
+                method: 'GET',
+                query: params
+            })
+            items.value = data
+        } catch (e) {
+            // Fehler werden vom Plugin (Toast) behandelt, hier nur Log
+            console.error('Wiki Tree Load Error', e)
+        } finally {
+            isLoading.value = false
+        }
+    }
+
+    return { tree, items, isLoading, loadTree }
+}

frontend/package.json

@@ -46,10 +46,10 @@
     "@popperjs/core": "^2.11.8",
     "@sentry/browser": "^9.11.0",
     "@sentry/integrations": "^7.114.0",
-    "@tiptap/extension-underline": "^2.1.15",
-    "@tiptap/pm": "^2.1.15",
-    "@tiptap/starter-kit": "^2.1.15",
-    "@tiptap/vue-3": "^2.1.15",
+    "@tiptap/extension-placeholder": "^3.17.1",
+    "@tiptap/pm": "^3.17.1",
+    "@tiptap/starter-kit": "^3.17.1",
+    "@tiptap/vue-3": "^3.17.1",
     "@vicons/ionicons5": "^0.12.0",
     "@vue-leaflet/vue-leaflet": "^0.10.1",
     "@vue-pdf-viewer/viewer": "^3.0.1",

frontend/pages/wiki/[id].vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="h-full flex flex-col relative">
+
+    <div v-if="pending" class="flex h-full items-center justify-center text-gray-400">
+      <div class="flex flex-col items-center gap-2">
+        <svg class="animate-spin h-6 w-6 text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+        <span>Lade Inhalt...</span>
+      </div>
+    </div>
+
+    <div v-else-if="page" class="flex flex-col h-full bg-white">
+      <header class="px-8 pt-8 pb-2">
+        <input
+            v-model="page.title"
+            @blur="saveTitle"
+            @keydown.enter="($event.target as HTMLInputElement).blur()"
+            class="text-4xl font-bold text-gray-900 w-full outline-none placeholder-gray-300 bg-transparent"
+            placeholder="Unbenannte Seite"
+        />
+
+        <div class="flex items-center gap-4 mt-2 text-xs text-gray-400 h-6">
+          <span>Erstellt am {{ new Date(page.createdAt).toLocaleDateString() }}</span>
+
+          <transition name="fade">
+            <span v-if="isSaving" class="text-primary-600 flex items-center gap-1">
+              <svg class="animate-spin h-3 w-3" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+              Speichert...
+            </span>
+            <span v-else-if="lastSaved" class="text-green-600">Gespeichert</span>
+          </transition>
+        </div>
+      </header>
+
+      <div class="flex-1 overflow-hidden">
+        <WikiEditor
+            v-model="contentBuffer"
+            @update:modelValue="handleContentChange"
+        />
+      </div>
+    </div>
+
+    <div v-else class="flex h-full items-center justify-center text-gray-500">
+      Seite nicht gefunden oder keine Berechtigung.
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import WikiEditor from '~/components/wiki/WikiEditor.vue'
+
+const route = useRoute()
+const { $api } = useNuxtApp()
+const { loadTree } = useWikiTree()
+
+const pageId = route.params.id as string
+
+const isSaving = ref(false)
+const lastSaved = ref(false)
+const saveTimeout = ref<any>(null)
+const contentBuffer = ref(null) // Zwischenspeicher für Editor
+
+// Daten asynchron laden
+// Wir nutzen eine unique Key-Strategy basierend auf der ID
+const { data: page, pending } = await useAsyncData(`wiki-page-${pageId}`, async () => {
+  const res = await $api<any>(`/api/wiki/${pageId}`)
+  contentBuffer.value = res.content // Initiale Daten in Buffer
+  return res
+}, {
+  // Wichtig: Neu laden wenn sich die Route ID ändert
+  watch: [() => route.params.id]
+})
+
+// Titel Speichern (Sofort bei Blur)
+async function saveTitle() {
+  if (!page.value) return
+  isSaving.value = true
+
+  try {
+    await $api(`/api/wiki/${pageId}`, {
+      method: 'PATCH',
+      body: { title: page.value.title }
+    })
+
+    // Sidebar neu laden, damit Titel dort aktuell ist
+    loadTree()
+
+    showSavedFeedback()
+  } finally {
+    isSaving.value = false
+  }
+}
+
+// Inhalt Speichern (Mit Debounce Verzögerung)
+function handleContentChange(newContent: any) {
+  contentBuffer.value = newContent
+  isSaving.value = true
+  lastSaved.value = false
+
+  if (saveTimeout.value) clearTimeout(saveTimeout.value)
+
+  // Warte 1000ms nach dem letzten Tippen
+  saveTimeout.value = setTimeout(async () => {
+    try {
+      await $api(`/api/wiki/${pageId}`, {
+        method: 'PATCH',
+        body: { content: contentBuffer.value }
+      })
+      showSavedFeedback()
+    } catch (e) {
+      // Fehler behandelt Plugin
+    } finally {
+      isSaving.value = false
+    }
+  }, 1000)
+}
+
+function showSavedFeedback() {
+  lastSaved.value = true
+  setTimeout(() => { lastSaved.value = false }, 2000)
+}
+</script>
+
+<style scoped>
+.fade-enter-active, .fade-leave-active { transition: opacity 0.5s; }
+.fade-enter-from, .fade-leave-to { opacity: 0; }
+</style>

frontend/pages/wiki/index.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="flex h-full w-full bg-white overflow-hidden">
+
+    <aside class="flex w-72 flex-col border-r border-gray-200 bg-gray-50/50">
+
+      <div class="flex items-center justify-between border-b border-gray-200 px-4 py-3 bg-white h-14">
+        <h2 class="font-semibold text-gray-800">Wiki</h2>
+        <button
+            @click="createNewPage"
+            class="p-1.5 text-gray-500 hover:text-primary-600 rounded hover:bg-gray-100 transition-colors"
+            title="Neue Seite erstellen"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"><path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" /></svg>
+        </button>
+      </div>
+
+      <div class="flex-1 overflow-y-auto px-2 py-3 custom-scrollbar">
+        <div v-if="isLoading && !tree.length" class="space-y-2 px-2 mt-2">
+          <div class="h-4 w-3/4 bg-gray-200 animate-pulse rounded"></div>
+          <div class="h-4 w-1/2 bg-gray-200 animate-pulse rounded"></div>
+          <div class="h-4 w-5/6 bg-gray-200 animate-pulse rounded"></div>
+        </div>
+
+        <div v-else>
+          <WikiTreeItem v-for="node in tree" :key="node.id" :item="node" />
+
+          <div v-if="!tree.length" class="text-center text-sm text-gray-400 mt-10 px-4">
+            Keine Einträge vorhanden.<br>Erstelle die erste Seite!
+          </div>
+        </div>
+      </div>
+    </aside>
+
+    <main class="flex-1 overflow-hidden relative bg-white h-full">
+      <NuxtPage />
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import WikiTreeItem from '~/components/wiki/TreeItem.vue'
+
+const { tree, isLoading, loadTree } = useWikiTree()
+const { $api } = useNuxtApp()
+const router = useRouter()
+
+// Initiales Laden des "Allgemeinen" Wikis
+onMounted(() => loadTree())
+
+async function createNewPage() {
+  const title = prompt("Titel der neuen Seite:", "Neue Notiz")
+  if (!title) return
+
+  try {
+    // API Call: POST mit body
+    const newPage = await $api('/api/wiki', {
+      method: 'POST',
+      body: {
+        title,
+        parentId: null,
+        isFolder: false,
+        // EntityType ist hier null, da es im Haupt-Wiki erstellt wird
+        entityType: null
+      }
+    })
+
+    await loadTree() // Baum refreshen
+
+    // @ts-ignore (Falls Typen nicht perfekt gematcht)
+    if (newPage?.id) {
+      // @ts-ignore
+      router.push(`/wiki/${newPage.id}`)
+    }
+  } catch (e) {
+    // Fehler werden durch Plugin angezeigt
+  }
+}
+</script>
+
+<style scoped>
+.custom-scrollbar::-webkit-scrollbar { width: 4px; }
+.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
+.custom-scrollbar::-webkit-scrollbar-thumb { background-color: #e5e7eb; border-radius: 10px; }
+</style>

frontend/stores/wiki.ts

@@ -0,0 +1,53 @@
+// stores/wiki.ts
+import { defineStore } from 'pinia'
+
+export const useWikiStore = defineStore('wiki', () => {
+    const flatItems = ref<any[]>([])
+    const isLoading = ref(false)
+
+    // Computed: Wandelt flatItems automatisch in Baum um, wenn sich Daten ändern
+    const tree = computed(() => buildTree(flatItems.value))
+
+    // Action: Baum laden
+    async function fetchTree(params: { entityType?: string, entityId?: number, entityUuid?: string } = {}) {
+        isLoading.value = true
+        try {
+            const { data } = await useFetch('/api/wiki/tree', {
+                query: params
+            })
+            if (data.value) {
+                flatItems.value = data.value
+            }
+        } catch (e) {
+            console.error('Wiki tree fetch error', e)
+        } finally {
+            isLoading.value = false
+        }
+    }
+
+    // Action: Eintrag verschieben (Drag & Drop im UI)
+    async function moveItem(itemId: string, newParentId: string | null, newSortOrder: number) {
+        // 1. Optimistic Update im State (damit es sich sofort schnell anfühlt)
+        const itemIndex = flatItems.value.findIndex(i => i.id === itemId)
+        if (itemIndex > -1) {
+            flatItems.value[itemIndex].parentId = newParentId
+            flatItems.value[itemIndex].sortOrder = newSortOrder
+        }
+
+        // 2. API Call im Hintergrund
+        await $fetch(`/api/wiki/${itemId}`, {
+            method: 'PATCH',
+            body: { parentId: newParentId, sortOrder: newSortOrder }
+        })
+
+        // Fallback: Wenn Error, müsste man hier den alten State wiederherstellen
+    }
+
+    return {
+        flatItems,
+        tree,
+        isLoading,
+        fetchTree,
+        moveItem
+    }
+})