This commit is contained in:
@@ -5,7 +5,7 @@
|
||||
class="flex flex-col border-r border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-900/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 dark:border-gray-800 px-4 py-3 bg-white dark:bg-gray-900 h-14 shrink-0 relative z-20">
|
||||
<div class="flex items-center justify-between px-4 py-3 bg-white dark:bg-gray-900 h-14 shrink-0 relative z-20">
|
||||
<h2 class="font-semibold text-gray-800 dark:text-gray-100 flex items-center gap-2">
|
||||
<span class="text-primary-600">📚</span> Wiki
|
||||
</h2>
|
||||
@@ -14,11 +14,30 @@
|
||||
<UDropdown :items="rootMenuItems" :popper="{ placement: 'bottom-end' }">
|
||||
<UButton color="gray" variant="ghost" icon="i-heroicons-plus" size="sm" />
|
||||
</UDropdown>
|
||||
|
||||
<UButton @click="isSidebarOpen = false" color="gray" variant="ghost" icon="i-heroicons-chevron-double-left" size="sm" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-3 pb-2 border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
|
||||
<UInput
|
||||
v-model="searchQuery"
|
||||
icon="i-heroicons-magnifying-glass"
|
||||
placeholder="Suchen..."
|
||||
size="sm"
|
||||
:ui="{ icon: { trailing: { pointer: '' } } }"
|
||||
>
|
||||
<template #trailing v-if="searchQuery">
|
||||
<UButton
|
||||
color="gray"
|
||||
variant="link"
|
||||
icon="i-heroicons-x-mark"
|
||||
:padded="false"
|
||||
@click="searchQuery = ''"
|
||||
/>
|
||||
</template>
|
||||
</UInput>
|
||||
</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">
|
||||
<USkeleton class="h-4 w-3/4" />
|
||||
@@ -29,103 +48,72 @@
|
||||
<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 vorhanden.<br>Erstelle den ersten Eintrag oben rechts.
|
||||
<span v-if="searchQuery">Keine Ergebnisse gefunden.</span>
|
||||
<span v-else>Keine Seiten vorhanden.<br>Erstelle den ersten Eintrag oben rechts.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="flex-1 overflow-hidden relative bg-white dark:bg-gray-900 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">
|
||||
|
||||
<UButton
|
||||
v-show="!isSidebarOpen"
|
||||
@click="isSidebarOpen = true"
|
||||
icon="i-heroicons-bars-3"
|
||||
color="gray"
|
||||
variant="ghost"
|
||||
class="-ml-2 shrink-0"
|
||||
/>
|
||||
|
||||
<input
|
||||
v-model="page.title"
|
||||
@blur="saveTitle"
|
||||
@keydown.enter="($event.target as HTMLInputElement).blur()"
|
||||
class="text-4xl font-bold text-gray-900 dark:text-white w-full outline-none placeholder-gray-300 bg-transparent min-w-0"
|
||||
placeholder="Unbenannte Seite"
|
||||
/>
|
||||
<UButton v-show="!isSidebarOpen" @click="isSidebarOpen = true" icon="i-heroicons-bars-3" color="gray" variant="ghost" class="-ml-2 shrink-0" />
|
||||
<input v-model="page.title" @blur="saveTitle" @keydown.enter="($event.target as HTMLInputElement).blur()" class="text-4xl font-bold text-gray-900 dark:text-white w-full outline-none 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">
|
||||
<UIcon name="i-heroicons-arrow-path" class="w-3 h-3 animate-spin" /> Speichert...
|
||||
</span>
|
||||
<span v-if="isSaving" class="text-primary-600 flex items-center gap-1">
|
||||
<UIcon name="i-heroicons-arrow-path" class="w-3 h-3 animate-spin" /> 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 dark:border-gray-800">
|
||||
<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">
|
||||
<UIcon name="i-heroicons-arrow-path" class="w-8 h-8 animate-spin text-gray-300" />
|
||||
<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 dark:bg-gray-800/30">
|
||||
<UButton v-if="!isSidebarOpen" @click="isSidebarOpen = true" icon="i-heroicons-bars-3" color="white" class="absolute left-4 top-4" />
|
||||
|
||||
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-full mb-4">
|
||||
<UIcon name="i-heroicons-document" class="w-12 h-12 text-gray-400" />
|
||||
</div>
|
||||
<p class="text-lg font-medium text-gray-600 dark:text-gray-300">Keine Seite ausgewählt</p>
|
||||
<p class="text-sm mt-1">Wähle eine Notiz aus der Navigation.</p>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<UModal v-model="isModalOpen">
|
||||
<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
|
||||
{{ modalTitle }}
|
||||
</h3>
|
||||
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">{{ modalTitle }}</h3>
|
||||
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isModalOpen = false" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="modalState.type === 'create'" class="space-y-4">
|
||||
<UFormGroup label="Titel" name="title">
|
||||
<UInput v-model="modalState.inputValue" autofocus placeholder="z.B. Meeting Notes" @keyup.enter="handleModalConfirm" />
|
||||
</UFormGroup>
|
||||
</div>
|
||||
|
||||
<div v-else-if="modalState.type === 'delete'">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-300">
|
||||
Möchtest du <strong>"{{ modalState.targetItem?.title }}"</strong> wirklich löschen?
|
||||
<br><span v-if="modalState.targetItem?.isFolder" class="text-red-500 font-medium">Alle Unterseiten werden ebenfalls gelöscht.</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-2">
|
||||
<UButton color="gray" variant="ghost" @click="isModalOpen = false">Abbrechen</UButton>
|
||||
<UButton
|
||||
:color="modalState.type === 'delete' ? 'red' : 'primary'"
|
||||
:loading="modalLoading"
|
||||
@click="handleModalConfirm"
|
||||
>
|
||||
<UButton :color="modalState.type === 'delete' ? 'red' : 'primary'" :loading="modalLoading" @click="handleModalConfirm">
|
||||
{{ modalState.type === 'delete' ? 'Löschen' : 'Erstellen' }}
|
||||
</UButton>
|
||||
</div>
|
||||
@@ -141,11 +129,11 @@ import WikiTreeItem from '~/components/wiki/TreeItem.vue'
|
||||
import WikiEditor from '~/components/wiki/WikiEditor.vue'
|
||||
import type { WikiPageItem } from '~/composables/useWikiTree'
|
||||
|
||||
// --- SETUP ---
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const { $api } = useNuxtApp()
|
||||
const { tree, isLoading: isLoadingTree, loadTree, isSidebarOpen, createItem, deleteItem } = useWikiTree()
|
||||
// NEU: searchQuery hier entpacken, damit es an UInput gebunden werden kann
|
||||
const { tree, isLoading: isLoadingTree, loadTree, isSidebarOpen, createItem, deleteItem, searchQuery } = useWikiTree()
|
||||
|
||||
// --- EDITOR LOGIC ---
|
||||
const pageId = computed(() => route.params.id as string | undefined)
|
||||
@@ -154,9 +142,7 @@ const lastSaved = ref(false)
|
||||
const saveTimeout = ref<any>(null)
|
||||
const contentBuffer = ref(null)
|
||||
|
||||
// Init Load
|
||||
onMounted(() => loadTree())
|
||||
|
||||
watch(pageId, () => {
|
||||
if (saveTimeout.value) clearTimeout(saveTimeout.value)
|
||||
isSaving.value = false
|
||||
@@ -170,95 +156,53 @@ const { data: page, pending: pendingPage } = await useAsyncData(
|
||||
const res = await $api<any>(`/api/wiki/${pageId.value}`)
|
||||
contentBuffer.value = res.content
|
||||
return res
|
||||
},
|
||||
{ watch: [pageId], immediate: true }
|
||||
}, { watch: [pageId], immediate: true }
|
||||
)
|
||||
|
||||
// --- MODAL LOGIC (Zentralisiert) ---
|
||||
|
||||
// --- MODAL LOGIC (Identisch wie vorher) ---
|
||||
const isModalOpen = ref(false)
|
||||
const modalLoading = ref(false)
|
||||
|
||||
const modalState = reactive({
|
||||
type: 'create' as 'create' | 'delete',
|
||||
targetItem: null as WikiPageItem | null, // Bei Create: Parent. Bei Delete: Das Item selbst.
|
||||
targetItem: null as WikiPageItem | null,
|
||||
isFolderCreation: false,
|
||||
inputValue: ''
|
||||
})
|
||||
|
||||
const modalTitle = computed(() => {
|
||||
if (modalState.type === 'delete') return 'Eintrag löschen'
|
||||
return modalState.isFolderCreation ? 'Neuen Ordner erstellen' : 'Neue Seite erstellen'
|
||||
})
|
||||
|
||||
// Diese Funktion wird an Kinder via Inject weitergegeben
|
||||
function openWikiAction(type: 'create' | 'delete', contextItem: WikiPageItem | null, isFolder = false) {
|
||||
modalState.type = type
|
||||
modalState.targetItem = contextItem
|
||||
modalState.isFolderCreation = isFolder
|
||||
modalState.inputValue = '' // Reset
|
||||
|
||||
if (type === 'create') {
|
||||
// Optional: Prefix generieren
|
||||
}
|
||||
|
||||
modalState.inputValue = ''
|
||||
isModalOpen.value = true
|
||||
}
|
||||
|
||||
// Bereitstellen für TreeItems
|
||||
provide('openWikiAction', openWikiAction)
|
||||
|
||||
async function handleModalConfirm() {
|
||||
modalLoading.value = true
|
||||
|
||||
try {
|
||||
if (modalState.type === 'create') {
|
||||
if (!modalState.inputValue.trim()) return
|
||||
|
||||
const parentId = modalState.targetItem ? modalState.targetItem.id : null
|
||||
const newItem = await createItem(modalState.inputValue, parentId, modalState.isFolderCreation)
|
||||
|
||||
// Wenn Seite erstellt wurde -> hin navigieren
|
||||
if (newItem && !modalState.isFolderCreation) {
|
||||
// @ts-ignore
|
||||
router.push(`/wiki/${newItem.id}`)
|
||||
}
|
||||
}
|
||||
else if (modalState.type === 'delete' && modalState.targetItem) {
|
||||
if (newItem && !modalState.isFolderCreation) router.push(`/wiki/${newItem.id}`)
|
||||
} else if (modalState.type === 'delete' && modalState.targetItem) {
|
||||
const success = await deleteItem(modalState.targetItem.id)
|
||||
|
||||
// Falls wir die aktuelle Seite löschen, ab zum Root
|
||||
if (success && pageId.value === modalState.targetItem.id) {
|
||||
router.push('/wiki')
|
||||
}
|
||||
if (success && pageId.value === modalState.targetItem.id) router.push('/wiki')
|
||||
}
|
||||
|
||||
isModalOpen.value = false
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
// Hier könnte man einen UNotification Toast anzeigen
|
||||
} finally {
|
||||
modalLoading.value = false
|
||||
}
|
||||
} catch (e) { console.error(e) } finally { modalLoading.value = false }
|
||||
}
|
||||
|
||||
// --- ROOT MENU ---
|
||||
// Konfiguration für UDropdown
|
||||
const rootMenuItems = [
|
||||
[{
|
||||
label: 'Neue Seite',
|
||||
icon: 'i-heroicons-document-plus',
|
||||
click: () => openWikiAction('create', null, false)
|
||||
}],
|
||||
[{
|
||||
label: 'Neuer Ordner',
|
||||
icon: 'i-heroicons-folder-plus',
|
||||
click: () => openWikiAction('create', null, true)
|
||||
}]
|
||||
[{ label: 'Neue Seite', icon: 'i-heroicons-document-plus', click: () => openWikiAction('create', null, false) }],
|
||||
[{ label: 'Neuer Ordner', icon: 'i-heroicons-folder-plus', click: () => openWikiAction('create', null, true) }]
|
||||
]
|
||||
|
||||
// --- EDITOR ACTIONS ---
|
||||
|
||||
// --- EDITOR ACTIONS (Identisch wie vorher) ---
|
||||
async function saveTitle() {
|
||||
if (!page.value || !pageId.value) return
|
||||
isSaving.value = true
|
||||
@@ -268,7 +212,6 @@ async function saveTitle() {
|
||||
showSavedFeedback()
|
||||
} finally { isSaving.value = false }
|
||||
}
|
||||
|
||||
function handleContentChange(newContent: any) {
|
||||
contentBuffer.value = newContent
|
||||
isSaving.value = true
|
||||
@@ -282,7 +225,6 @@ function handleContentChange(newContent: any) {
|
||||
} catch (e) { console.error(e) } finally { isSaving.value = false }
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
function showSavedFeedback() {
|
||||
lastSaved.value = true
|
||||
setTimeout(() => { lastSaved.value = false }, 2000)
|
||||
@@ -294,7 +236,4 @@ function showSavedFeedback() {
|
||||
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: #e5e7eb; border-radius: 10px; }
|
||||
:deep(.dark) .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #374151; }
|
||||
|
||||
.fade-enter-active, .fade-leave-active { transition: opacity 0.5s; }
|
||||
.fade-enter-from, .fade-leave-to { opacity: 0; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user