flfeders/FEDEO
2
1
Fork 0
Code Issues 62 Pull Requests Actions Packages Projects 21 Releases Wiki Activity

Added Entity Wiki

Browse Source
This commit is contained in:
florianfederspiel
2026-01-27 15:01:56 +01:00
parent 90560ecd2c
commit e58929d9a0
5 changed files with 460 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/components/wiki/TreeItem.vue
View File

@@ -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)
}