239 lines
10 KiB
Vue
239 lines
10 KiB
Vue
<template>
|
|
<div class="flex h-full w-full bg-white dark:bg-gray-900 overflow-hidden relative">
|
|
|
|
<aside
|
|
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 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>
|
|
|
|
<div class="flex items-center gap-1">
|
|
<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" />
|
|
<USkeleton class="h-4 w-1/2" />
|
|
</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">
|
|
<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 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-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>
|
|
</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>
|
|
<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">
|
|
{{ modalState.type === 'delete' ? 'Löschen' : 'Erstellen' }}
|
|
</UButton>
|
|
</div>
|
|
</template>
|
|
</UCard>
|
|
</UModal>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import WikiTreeItem from '~/components/wiki/TreeItem.vue'
|
|
import WikiEditor from '~/components/wiki/WikiEditor.vue'
|
|
import type { WikiPageItem } from '~/composables/useWikiTree'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const { $api } = useNuxtApp()
|
|
// 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)
|
|
const isSaving = ref(false)
|
|
const lastSaved = ref(false)
|
|
const saveTimeout = ref<any>(null)
|
|
const contentBuffer = ref(null)
|
|
|
|
onMounted(() => loadTree())
|
|
watch(pageId, () => {
|
|
if (saveTimeout.value) clearTimeout(saveTimeout.value)
|
|
isSaving.value = false
|
|
lastSaved.value = false
|
|
})
|
|
|
|
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
|
|
return res
|
|
}, { watch: [pageId], immediate: true }
|
|
)
|
|
|
|
// --- 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,
|
|
isFolderCreation: false,
|
|
inputValue: ''
|
|
})
|
|
const modalTitle = computed(() => {
|
|
if (modalState.type === 'delete') return 'Eintrag löschen'
|
|
return modalState.isFolderCreation ? 'Neuen Ordner erstellen' : 'Neue Seite erstellen'
|
|
})
|
|
function openWikiAction(type: 'create' | 'delete', contextItem: WikiPageItem | null, isFolder = false) {
|
|
modalState.type = type
|
|
modalState.targetItem = contextItem
|
|
modalState.isFolderCreation = isFolder
|
|
modalState.inputValue = ''
|
|
isModalOpen.value = true
|
|
}
|
|
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)
|
|
if (newItem && !modalState.isFolderCreation) router.push(`/wiki/${newItem.id}`)
|
|
} else if (modalState.type === 'delete' && modalState.targetItem) {
|
|
const success = await deleteItem(modalState.targetItem.id)
|
|
if (success && pageId.value === modalState.targetItem.id) router.push('/wiki')
|
|
}
|
|
isModalOpen.value = false
|
|
} catch (e) { console.error(e) } finally { modalLoading.value = false }
|
|
}
|
|
|
|
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) }]
|
|
]
|
|
|
|
// --- EDITOR ACTIONS (Identisch wie vorher) ---
|
|
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()
|
|
showSavedFeedback()
|
|
} finally { isSaving.value = false }
|
|
}
|
|
function handleContentChange(newContent: any) {
|
|
contentBuffer.value = newContent
|
|
isSaving.value = true
|
|
lastSaved.value = false
|
|
if (saveTimeout.value) clearTimeout(saveTimeout.value)
|
|
saveTimeout.value = setTimeout(async () => {
|
|
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; }
|
|
:deep(.dark) .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #374151; }
|
|
</style> |