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

Folders in Wiki

Browse Source
This commit is contained in:
florianfederspiel
2026-01-26 20:43:35 +01:00
parent db22d47900
commit c87212d54a
5 changed files with 230 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
frontend/pages/wiki/[[id]].vue
View File

@@ -6,19 +6,34 @@
: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">
<div class="flex items-center justify-between border-b border-gray-200 px-4 py-3 bg-white h-14 shrink-0 relative z-20">
<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>
<div class="relative">
<button
@click.stop="showRootMenu = !showRootMenu"
class="p-1.5 text-gray-500 hover:text-primary-600 rounded hover:bg-gray-100 transition-colors"
:class="{ 'bg-gray-100 text-primary-600': showRootMenu }"
title="Neu..."
>
<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 v-if="showRootMenu" v-on-click-outside="() => showRootMenu = false" class="absolute right-0 top-full mt-1 w-40 bg-white rounded-md shadow-lg border border-gray-100 py-1 text-xs text-gray-700 animate-in fade-in slide-in-from-top-1 duration-100 origin-top-right">
<button @click="createRootItem(false)" class="w-full text-left px-3 py-2 hover:bg-gray-50 flex items-center gap-2">
<svg class="w-3 h-3 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
Neue Seite
</button>
<button @click="createRootItem(true)" class="w-full text-left px-3 py-2 hover:bg-gray-50 flex items-center gap-2">
<svg class="w-3 h-3 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" /></svg>
Neuer Ordner
</button>
</div>
</div>
<button
@click="isSidebarOpen = false"
@@ -40,7 +55,7 @@
<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!
Keine Seiten.<br>Erstelle den ersten Ordner oben rechts!
</div>
</div>
</div>
@@ -50,22 +65,15 @@
<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>
<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
@@ -90,10 +98,7 @@
</header>
<div class="flex-1 overflow-hidden border-t border-gray-100">
<WikiEditor
v-model="contentBuffer"
@update:modelValue="handleContentChange"
/>
<WikiEditor v-model="contentBuffer" @update:modelValue="handleContentChange" />
</div>
</div>
@@ -114,9 +119,7 @@
</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>
<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>
@@ -127,116 +130,82 @@
</template>
<script setup lang="ts">
import { vOnClickOutside } from '@vueuse/components' // Import für Click-Outside
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()
const { tree, isLoading: isLoadingTree, loadTree, isSidebarOpen, createItem } = useWikiTree()
// ID aus der URL lesen
const pageId = computed(() => route.params.id as string | undefined)
// Editor State
// UI States
const showRootMenu = ref(false)
const isSaving = ref(false)
const lastSaved = ref(false)
const saveTimeout = ref<any>(null)
const contentBuffer = ref(null)
// --- INITIAL LOAD ---
onMounted(() => {
loadTree()
})
onMounted(() => loadTree())
// Wenn sich die ID ändert, Speicher-Timer zurücksetzen!
watch(pageId, () => {
if (saveTimeout.value) clearTimeout(saveTimeout.value)
isSaving.value = false
lastSaved.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
contentBuffer.value = res.content
return res
},
{
watch: [pageId],
immediate: true
}
{ watch: [pageId], immediate: true }
)
// --- ACTIONS ---
async function createNewPage() {
const title = prompt("Name der neuen Seite:", "Neue Notiz")
async function createRootItem(isFolder: boolean) {
showRootMenu.value = false // Menü schließen
const type = isFolder ? "Ordner" : "Seite"
const title = prompt(`Name für neuen Root-${type}:`, `Neuer ${type}`)
if (!title) return
try {
const newPage = await $api('/api/wiki', {
method: 'POST',
body: {
title,
parentId: null,
isFolder: false,
entityType: null
}
})
await loadTree()
const newItem = await createItem(title, null, isFolder)
// Nur bei Seiten navigieren wir, Ordner bleiben in der Struktur
// @ts-ignore
if (newItem && !isFolder) {
// @ts-ignore
if (newPage?.id) {
// @ts-ignore
router.push(`/wiki/${newPage.id}`)
}
} catch (e) {
// Fehlerhandling durch Plugin
router.push(`/wiki/${newItem.id}`)
}
}
// 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
loadTree()
showSavedFeedback()
} finally {
isSaving.value = false
}
} 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
}
} catch (e) { console.error(e) } finally { isSaving.value = false }
}, 1000)
}