Added Entity Wiki

frontend/components/wiki/TreeItem.vue

@@ -3,7 +3,10 @@
 
     <div
         class="group flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer transition-colors mb-0.5 relative pr-8"
-        :class="[isActive ? 'bg-primary-50 dark:bg-primary-900/10 text-primary-600 dark:text-primary-400 font-medium' : 'hover:bg-gray-100 dark:hover:bg-gray-800']"
+        :class="[
+            isActive ? 'bg-primary-50 dark:bg-primary-900/10 text-primary-600 dark:text-primary-400 font-medium' : 'hover:bg-gray-100 dark:hover:bg-gray-800',
+            item.isVirtual ? 'opacity-90' : ''
+        ]"
         :style="{ paddingLeft: `${indent}rem` }"
         @click.stop="handleClick"
     >
@@ -17,20 +20,42 @@
       </button>
       <span v-else class="w-4"></span>
 
-      <span class="text-gray-400 shrink-0 flex items-center">
-        <UIcon v-if="item.isFolder" name="i-heroicons-folder-solid" class="w-4 h-4 text-yellow-400" />
-        <UIcon v-else name="i-heroicons-document-text" class="w-4 h-4" />
+      <span class="shrink-0 flex items-center">
+        <UIcon
+            v-if="item.isFolder && item.isVirtual"
+            name="i-heroicons-folder"
+            class="w-4 h-4 text-primary-500 dark:text-primary-400"
+        />
+        <UIcon
+            v-else-if="item.isFolder"
+            name="i-heroicons-folder-solid"
+            class="w-4 h-4 text-yellow-400"
+        />
+        <UIcon
+            v-else
+            name="i-heroicons-document-text"
+            class="w-4 h-4 text-gray-400"
+        />
       </span>
 
-      <span class="truncate flex-1">{{ item.title }}</span>
+      <span class="truncate flex-1" :class="{'italic text-gray-500': item.isVirtual && !item.parentId}">
+        {{ item.title }}
+      </span>
 
-      <div class="absolute right-1 top-1 opacity-0 group-hover:opacity-100 transition-opacity" :class="{ '!opacity-100': showMenu }">
+      <div v-if="!item.isVirtual" class="absolute right-1 top-1 opacity-0 group-hover:opacity-100 transition-opacity" :class="{ '!opacity-100': showMenu }">
         <button @click.stop="showMenu = !showMenu" class="p-0.5 rounded hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-500">
           <UIcon name="i-heroicons-ellipsis-horizontal" class="w-4 h-4" />
         </button>
       </div>
 
+      <div v-else class="absolute right-1 top-1 opacity-0 group-hover:opacity-50 transition-opacity flex items-center justify-center pt-0.5 pr-0.5">
+        <UTooltip text="Automatisch generiert">
+          <UIcon name="i-heroicons-lock-closed" class="w-3 h-3 text-gray-300" />
+        </UTooltip>
+      </div>
+
       <div v-if="showMenu" v-on-click-outside="() => showMenu = false" class="absolute right-0 top-8 z-50 w-40 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-100 dark:border-gray-700 py-1 text-xs text-gray-700 dark:text-gray-200 animate-in fade-in slide-in-from-top-1 duration-100">
+
         <template v-if="item.isFolder">
           <button @click.stop="triggerCreate(false)" class="w-full text-left px-3 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center gap-2">
             <UIcon name="i-heroicons-plus" class="w-3 h-3" /> Neue Seite
@@ -40,6 +65,7 @@
           </button>
           <div class="h-px bg-gray-100 dark:bg-gray-700 my-1"></div>
         </template>
+
         <button @click.stop="triggerDelete" class="w-full text-left px-3 py-1.5 hover:bg-red-50 dark:hover:bg-red-900/30 text-red-600 flex items-center gap-2">
           <UIcon name="i-heroicons-trash" class="w-3 h-3" /> Löschen
         </button>
@@ -60,7 +86,6 @@ import type { WikiPageItem } from '~/composables/useWikiTree'
 const props = defineProps<{ item: WikiPageItem; depth?: number }>()
 const router = useRouter()
 const route = useRoute()
-// NEU: searchQuery importieren für Auto-Expand
 const { searchQuery } = useWikiTree()
 
 const openWikiAction = inject('openWikiAction') as (action: 'create' | 'delete', contextItem: WikiPageItem | null, isFolder?: boolean) => void
@@ -71,12 +96,12 @@ const isOpen = ref(false)
 const showMenu = ref(false)
 const isActive = computed(() => route.params.id === props.item.id)
 
-// Auto-Open Logic 1: Aktive Seite
+// Auto-Open: Active Page
 watch(() => route.params.id, (newId) => {
   if (props.item.isFolder && hasActiveChild(props.item, newId as string)) isOpen.value = true
 }, { immediate: true })
 
-// NEU: Auto-Open Logic 2: Suche aktiv -> Alles aufklappen
+// Auto-Open: Search
 watch(searchQuery, (newVal) => {
   if (newVal.trim().length > 0 && props.item.isFolder) {
     isOpen.value = true
@@ -89,15 +114,30 @@ function hasActiveChild(node: WikiPageItem, targetId: string): boolean {
 }
 
 function handleClick() {
-  props.item.isFolder ? (isOpen.value = !isOpen.value) : router.push(`/wiki/${props.item.id}`)
+  if (props.item.isFolder) {
+    isOpen.value = !isOpen.value
+  } else {
+    // Falls es eine virtuelle Seite ist (Read only Entity View?), leiten wir trotzdem weiter
+    // oder verhindern es, je nach Wunsch. Aktuell erlauben wir Navigation:
+    router.push(`/wiki/${props.item.id}`)
+  }
 }
+
 function toggleFolder() { isOpen.value = !isOpen.value }
+
 function triggerCreate(isFolder: boolean) {
+  // Sicherheitscheck: Virtuelle Ordner dürfen nichts erstellen
+  if (props.item.isVirtual) return
+
   showMenu.value = false
   isOpen.value = true
   openWikiAction('create', props.item, isFolder)
 }
+
 function triggerDelete() {
+  // Sicherheitscheck
+  if (props.item.isVirtual) return
+
   showMenu.value = false
   openWikiAction('delete', props.item)
 }

frontend/components/wiki/WikiEntityWidget.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="flex h-full w-full min-h-[500px] border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 shadow-sm relative isolate overflow-hidden">
+
+    <div
+        class="flex flex-col border-r border-gray-200 dark:border-gray-800 bg-gray-50/80 dark:bg-gray-900/50 transition-all duration-300"
+        :class="selectedPage ? 'w-64 hidden md:flex shrink-0' : 'w-full'"
+    >
+      <div class="flex items-center justify-between px-3 py-3 border-b border-gray-200 dark:border-gray-800 shrink-0">
+        <span class="text-xs font-bold text-gray-500 uppercase tracking-wider flex items-center gap-1">
+          <UIcon name="i-heroicons-list-bullet" class="w-3 h-3" />
+          Inhalte
+        </span>
+        <UTooltip text="Neue Notiz erstellen">
+          <UButton size="2xs" color="primary" variant="ghost" icon="i-heroicons-plus" @click="isCreateModalOpen = true" />
+        </UTooltip>
+      </div>
+
+      <div class="flex-1 overflow-y-auto p-2 space-y-1 custom-scrollbar">
+        <div v-if="loadingList" class="space-y-2 pt-2">
+          <USkeleton class="h-8 w-full" />
+          <USkeleton class="h-8 w-full" />
+        </div>
+
+        <template v-else-if="pages.length">
+          <div
+              v-for="page in pages"
+              :key="page.id"
+              class="flex items-center gap-2 px-2.5 py-2 rounded-md cursor-pointer text-sm transition-all border border-transparent"
+              :class="selectedPage?.id === page.id ? 'bg-white dark:bg-gray-800 text-primary-600 shadow-sm border-gray-200 dark:border-gray-700 font-medium' : 'text-gray-600 hover:bg-white dark:hover:bg-gray-800 hover:shadow-sm'"
+              @click="selectPage(page.id)"
+          >
+            <UIcon :name="page.isFolder ? 'i-heroicons-folder' : 'i-heroicons-document-text'" class="w-4 h-4 shrink-0" />
+            <span class="truncate flex-1">{{ page.title }}</span>
+          </div>
+        </template>
+
+        <div v-else class="flex flex-col items-center justify-center py-12 px-4 text-center">
+          <p class="text-xs text-gray-500">Keine Notizen vorhanden.</p>
+          <UButton variant="link" size="xs" color="primary" @click="isCreateModalOpen = true" class="mt-1">Erstellen</UButton>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex-1 flex flex-col bg-white dark:bg-gray-900 h-full relative min-w-0 w-full overflow-hidden">
+
+      <div v-if="selectedPage" class="flex flex-col h-full w-full">
+        <div class="flex items-center justify-between px-4 py-2 border-b border-gray-100 dark:border-gray-800 z-10 shrink-0 bg-white dark:bg-gray-900">
+          <div class="flex items-center gap-2 flex-1 min-w-0">
+            <UButton icon="i-heroicons-arrow-left" variant="ghost" color="gray" class="md:hidden shrink-0" @click="selectedPage = null" />
+            <input
+                v-model="selectedPage.title"
+                @input="onInputTitle"
+                class="bg-transparent font-semibold text-gray-900 dark:text-white focus:outline-none w-full truncate"
+                placeholder="Titel..."
+            />
+          </div>
+          <div class="flex items-center gap-2 text-xs text-gray-400 shrink-0 ml-2">
+            <span class="hidden sm:inline">{{ isSaving ? 'Speichert...' : 'Gespeichert' }}</span>
+            <UButton icon="i-heroicons-trash" color="gray" variant="ghost" size="xs" @click="deleteCurrentPage"/>
+          </div>
+        </div>
+
+        <div class="flex-1 overflow-hidden relative w-full">
+          <div v-if="loadingContent" class="absolute inset-0 flex items-center justify-center bg-white/80 dark:bg-gray-900/80 z-20">
+            <UIcon name="i-heroicons-arrow-path" class="w-8 h-8 animate-spin text-primary-500" />
+          </div>
+
+          <WikiEditor
+              v-model="selectedPage.content"
+              class="h-full w-full"
+              :page-id="selectedPage.id"
+          />
+        </div>
+      </div>
+
+      <div v-else class="hidden md:flex flex-1 flex-col items-center justify-center w-full h-full bg-gray-50/30 dark:bg-gray-900 p-6 text-center">
+
+        <div class="bg-white dark:bg-gray-800 p-4 rounded-full shadow-sm ring-1 ring-gray-100 dark:ring-gray-700 mb-4">
+          <UIcon name="i-heroicons-book-open" class="w-10 h-10 text-primary-200 dark:text-primary-800" />
+        </div>
+
+        <h3 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
+          Wiki & Dokumentation
+        </h3>
+
+        <p class="text-sm text-gray-500 dark:text-gray-400 max-w-xs mx-auto mb-6">
+          Wähle links eine Notiz aus oder erstelle einen neuen Eintrag für diesen Datensatz.
+        </p>
+
+        <UButton
+            icon="i-heroicons-plus"
+            color="primary"
+            @click="isCreateModalOpen = true"
+        >
+          Neue Seite erstellen
+        </UButton>
+
+      </div>
+    </div>
+
+    <UModal v-model="isCreateModalOpen">
+      <div class="p-5">
+        <h3 class="font-bold mb-4">Neue Seite</h3>
+        <form @submit.prevent="createPage">
+          <UInput v-model="newTitle" placeholder="Titel..." autofocus />
+          <div class="mt-4 flex justify-end gap-2">
+            <UButton color="gray" variant="ghost" @click="isCreateModalOpen = false">Abbrechen</UButton>
+            <UButton type="submit" color="primary" :loading="isCreating">Erstellen</UButton>
+          </div>
+        </form>
+      </div>
+    </UModal>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue'
+import WikiEditor from '~/components/wiki/WikiEditor.vue'
+
+const props = defineProps<{
+  entityType: string
+  entityId?: number | null
+  entityUuid?: string | null
+}>()
+
+const { $api } = useNuxtApp()
+const toast = useToast()
+
+const loadingList = ref(false)
+const loadingContent = ref(false)
+const isCreateModalOpen = ref(false)
+const isCreating = ref(false)
+const isSaving = ref(false)
+const pages = ref<any[]>([])
+const selectedPage = ref<any>(null)
+const newTitle = ref('')
+let saveTimeout: any = null
+
+const getParams = () => {
+  const p: any = { entityType: props.entityType }
+  if (props.entityId) p.entityId = props.entityId
+  else if (props.entityUuid) p.entityUuid = props.entityUuid
+  return p
+}
+
+async function fetchList() {
+  loadingList.value = true
+  try {
+    const data = await $api('/api/wiki/tree', { method: 'GET', params: getParams() })
+    pages.value = data
+  } catch (e) {
+    console.error("Fetch Error:", e)
+  } finally {
+    loadingList.value = false
+  }
+}
+
+async function selectPage(id: string) {
+  if (selectedPage.value?.id === id) return
+  loadingContent.value = true
+  try {
+    const data = await $api(`/api/wiki/${id}`, { method: 'GET' })
+    selectedPage.value = data
+  } catch (e) {
+    toast.add({ title: 'Fehler beim Laden', color: 'red' })
+  } finally {
+    loadingContent.value = false
+  }
+}
+
+function triggerSave() {
+  if (saveTimeout) clearTimeout(saveTimeout)
+  isSaving.value = true
+  saveTimeout = setTimeout(async () => {
+    if (!selectedPage.value) return
+    try {
+      await $api(`/api/wiki/${selectedPage.value.id}`, {
+        method: 'PATCH',
+        body: {
+          title: selectedPage.value.title,
+          content: selectedPage.value.content
+        }
+      })
+      const item = pages.value.find(p => p.id === selectedPage.value.id)
+      if (item) item.title = selectedPage.value.title
+    } catch (e) {
+      console.error(e)
+    } finally {
+      isSaving.value = false
+    }
+  }, 1000)
+}
+
+function onInputTitle() {
+  triggerSave()
+}
+
+watch(() => selectedPage.value?.content, (newVal, oldVal) => {
+  if (newVal && oldVal && !loadingContent.value) triggerSave()
+}, { deep: true })
+
+async function createPage() {
+  if (!newTitle.value) return
+  isCreating.value = true
+  try {
+    const res = await $api('/api/wiki', {
+      method: 'POST',
+      body: { title: newTitle.value, parentId: null, isFolder: false, ...getParams() }
+    })
+    await fetchList()
+    newTitle.value = ''
+    isCreateModalOpen.value = false
+    await selectPage(res.id)
+  } catch (e) {
+    console.error(e)
+  } finally {
+    isCreating.value = false
+  }
+}
+
+async function deleteCurrentPage() {
+  if(!confirm('Löschen?')) return
+  await $api(`/api/wiki/${selectedPage.value.id}`, { method: 'DELETE' })
+  selectedPage.value = null
+  fetchList()
+}
+
+onMounted(fetchList)
+watch(() => [props.entityId, props.entityUuid], fetchList)
+</script>
+
+<style scoped>
+.custom-scrollbar::-webkit-scrollbar { width: 4px; }
+.custom-scrollbar::-webkit-scrollbar-thumb { background-color: #ddd; border-radius: 4px; }
+</style>