Changes More Functions to wiki

frontend/composables/useWikiTree.ts

@@ -6,18 +6,20 @@ export interface WikiPageItem {
     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)
+    // STATE
     const items = useState<WikiPageItem[]>('wiki-items', () => [])
     const isLoading = useState<boolean>('wiki-loading', () => false)
 
-    // --- Computed: Flat List zu Baum ---
+    // NEU: Globaler Sidebar State (Standardmäßig offen)
+    const isSidebarOpen = useState<boolean>('wiki-sidebar-open', () => true)
+
+    // COMPUTED: Tree Transformation
     const tree = computed(() => {
         const rawItems = items.value
         if (!rawItems || rawItems.length === 0) return []
@@ -25,12 +27,12 @@ export const useWikiTree = () => {
         const roots: WikiPageItem[] = []
         const lookup: Record<string, WikiPageItem> = {}
 
-        // 1. Kopieren & Lookup füllen
+        // Init Lookup
         rawItems.forEach(item => {
             lookup[item.id] = { ...item, children: [] }
         })
 
-        // 2. Verknüpfen
+        // Build Tree
         rawItems.forEach(item => {
             const node = lookup[item.id]
             if (item.parentId && lookup[item.parentId]) {
@@ -40,7 +42,7 @@ export const useWikiTree = () => {
             }
         })
 
-        // 3. Sortieren (Ordner zuerst, dann SortOrder, dann Alphabet)
+        // Sort
         const sortNodes = (nodes: WikiPageItem[]) => {
             nodes.sort((a, b) => {
                 if (a.isFolder !== b.isFolder) return a.isFolder ? -1 : 1
@@ -56,28 +58,27 @@ export const useWikiTree = () => {
         return roots
     })
 
-    // --- Actions ---
+    // 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 }
+    return {
+        tree,
+        items,
+        isLoading,
+        isSidebarOpen, // Exportiert für Zugriff in Pages
+        loadTree
+    }
 }

frontend/pages/wiki/[[id]].vue

@@ -0,0 +1,256 @@
+<template>
+  <div class="flex h-full w-full bg-white overflow-hidden relative">
+
+    <aside
+        class="flex flex-col border-r border-gray-200 bg-gray-50/50 transition-all duration-300 ease-in-out overflow-hidden whitespace-nowrap h-full"
+        :class="[isSidebarOpen ? 'w-80 min-w-[20rem] translate-x-0' : 'w-0 min-w-0 -translate-x-full opacity-0 border-none']"
+    >
+
+      <div class="flex items-center justify-between border-b border-gray-200 px-4 py-3 bg-white h-14 shrink-0">
+        <h2 class="font-semibold text-gray-800 flex items-center gap-2">
+          <span class="text-primary-600">📚</span> Wiki
+        </h2>
+
+        <div class="flex items-center gap-1">
+          <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>
+
+          <button
+              @click="isSidebarOpen = false"
+              class="p-1.5 text-gray-400 hover:text-gray-700 rounded hover:bg-gray-100 transition-colors ml-1"
+              title="Sidebar einklappen"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"><path fill-rule="evenodd" d="M15.79 14.77a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.04 1.08L11.832 10l3.938 3.71a.75.75 0 01.02 1.06zm-6 0a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.04 1.08L5.832 10l3.938 3.71a.75.75 0 01.02 1.06z" clip-rule="evenodd" /></svg>
+          </button>
+        </div>
+      </div>
+
+      <div class="flex-1 overflow-y-auto px-2 py-3 custom-scrollbar">
+        <div v-if="isLoadingTree && !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>
+
+        <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 Seiten.<br>Erstelle die erste Notiz!
+          </div>
+        </div>
+      </div>
+    </aside>
+
+
+    <main class="flex-1 overflow-hidden relative bg-white h-full flex flex-col min-w-0">
+
+      <div v-if="pageId && page" class="flex flex-col h-full">
+
+        <header class="px-8 pt-8 pb-4 flex flex-col gap-2 shrink-0">
+
+          <div class="flex items-center gap-3 w-full">
+
+            <button
+                v-show="!isSidebarOpen"
+                @click="isSidebarOpen = true"
+                class="p-2 -ml-2 text-gray-400 hover:text-primary-600 hover:bg-gray-100 rounded transition-colors shrink-0"
+                title="Sidebar öffnen"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-6 h-6">
+                <path fill-rule="evenodd" d="M4 10a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5A.75.75 0 014 10z" clip-rule="evenodd" />
+                <path fill-rule="evenodd" d="M4 6a.75.75 0 01.75-.75h11.5a.75.75 0 010 1.5H4.75A.75.75 0 014 6z" clip-rule="evenodd" />
+                <path fill-rule="evenodd" d="M4 14a.75.75 0 01.75-.75h11.5a.75.75 0 010 1.5H4.75A.75.75 0 014 14z" clip-rule="evenodd" />
+              </svg>
+            </button>
+
+            <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 min-w-0"
+                placeholder="Unbenannte Seite"
+            />
+          </div>
+
+          <div class="flex items-center gap-4 text-xs text-gray-400 h-6 ml-0.5">
+            <span>{{ 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 border-t border-gray-100">
+          <WikiEditor
+              v-model="contentBuffer"
+              @update:modelValue="handleContentChange"
+          />
+        </div>
+      </div>
+
+      <div v-else-if="pageId && pendingPage" 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-8 w-8 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 Seite...</span>
+        </div>
+      </div>
+
+      <div v-else class="flex h-full flex-col items-center justify-center text-gray-400 bg-gray-50/30">
+        <button
+            v-if="!isSidebarOpen"
+            @click="isSidebarOpen = true"
+            class="absolute left-4 top-4 p-2 bg-white border shadow-sm rounded-md hover:bg-gray-50"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"><path fill-rule="evenodd" d="M4 10a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5A.75.75 0 014 10z" clip-rule="evenodd" /><path fill-rule="evenodd" d="M4 6a.75.75 0 01.75-.75h11.5a.75.75 0 010 1.5H4.75A.75.75 0 014 6z" clip-rule="evenodd" /><path fill-rule="evenodd" d="M4 14a.75.75 0 01.75-.75h11.5a.75.75 0 010 1.5H4.75A.75.75 0 014 14z" clip-rule="evenodd" /></svg>
+        </button>
+
+        <div class="bg-gray-100 p-6 rounded-full mb-4">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12 text-gray-400">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
+          </svg>
+        </div>
+        <p class="text-lg font-medium text-gray-600">Keine Seite ausgewählt</p>
+        <p class="text-sm mt-1">Wähle eine Notiz aus der Navigation.</p>
+      </div>
+
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import WikiTreeItem from '~/components/wiki/TreeItem.vue'
+import WikiEditor from '~/components/wiki/WikiEditor.vue'
+
+// --- SETUP & STATE ---
+const route = useRoute()
+const router = useRouter()
+const { $api } = useNuxtApp()
+const { tree, isLoading: isLoadingTree, loadTree, isSidebarOpen } = useWikiTree()
+
+// ID aus der URL lesen
+const pageId = computed(() => route.params.id as string | undefined)
+
+// Editor State
+const isSaving = ref(false)
+const lastSaved = ref(false)
+const saveTimeout = ref<any>(null)
+const contentBuffer = ref(null)
+
+// --- INITIAL LOAD ---
+onMounted(() => {
+  loadTree()
+})
+
+// Wenn sich die ID ändert, Speicher-Timer zurücksetzen!
+watch(pageId, () => {
+  if (saveTimeout.value) clearTimeout(saveTimeout.value)
+  isSaving.value = false
+})
+
+// --- PAGE CONTENT LOAD ---
+const { data: page, pending: pendingPage } = await useAsyncData(
+    () => `wiki-page-${pageId.value}`,
+    async () => {
+      if (!pageId.value) return null
+      const res = await $api<any>(`/api/wiki/${pageId.value}`)
+      contentBuffer.value = res.content // Initiale Daten setzen
+      return res
+    },
+    {
+      watch: [pageId],
+      immediate: true
+    }
+)
+
+// --- ACTIONS ---
+
+async function createNewPage() {
+  const title = prompt("Name der neuen Seite:", "Neue Notiz")
+  if (!title) return
+
+  try {
+    const newPage = await $api('/api/wiki', {
+      method: 'POST',
+      body: {
+        title,
+        parentId: null,
+        isFolder: false,
+        entityType: null
+      }
+    })
+
+    await loadTree()
+
+    // @ts-ignore
+    if (newPage?.id) {
+      // @ts-ignore
+      router.push(`/wiki/${newPage.id}`)
+    }
+  } catch (e) {
+    // Fehlerhandling durch Plugin
+  }
+}
+
+// Titel speichern (sofort bei Blur)
+async function saveTitle() {
+  if (!page.value || !pageId.value) return
+  isSaving.value = true
+  try {
+    await $api(`/api/wiki/${pageId.value}`, { method: 'PATCH', body: { title: page.value.title } })
+    loadTree() // Baum aktualisieren für neuen Titel
+    showSavedFeedback()
+  } finally {
+    isSaving.value = false
+  }
+}
+
+// Inhalt speichern (Debounce)
+function handleContentChange(newContent: any) {
+  // WICHTIG: Hier habe ich die strikte JSON Prüfung entfernt, die das Speichern blockiert hat.
+
+  contentBuffer.value = newContent
+  isSaving.value = true
+  lastSaved.value = false
+
+  // Alten Timer löschen
+  if (saveTimeout.value) clearTimeout(saveTimeout.value)
+
+  // Neuen Timer starten
+  saveTimeout.value = setTimeout(async () => {
+    // Sicherheitscheck: Sind wir noch auf der gleichen Seite?
+    if (!pageId.value) return
+
+    try {
+      await $api(`/api/wiki/${pageId.value}`, { method: 'PATCH', body: { content: contentBuffer.value } })
+      showSavedFeedback()
+    } catch (e) {
+      console.error(e)
+    } finally {
+      isSaving.value = false
+    }
+  }, 1000)
+}
+
+function showSavedFeedback() {
+  lastSaved.value = true
+  setTimeout(() => { lastSaved.value = false }, 2000)
+}
+</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; }
+
+.fade-enter-active, .fade-leave-active { transition: opacity 0.5s; }
+.fade-enter-from, .fade-leave-to { opacity: 0; }
+</style>

frontend/pages/wiki/[id].vue

@@ -1,126 +0,0 @@
-<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

@@ -1,84 +0,0 @@
-<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>