300 lines
11 KiB
Vue
300 lines
11 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 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">
|
|
<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="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">
|
|
Keine Seiten vorhanden.<br>Erstelle den ersten Eintrag oben rechts.
|
|
</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"
|
|
/>
|
|
</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>
|
|
<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>
|
|
<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'
|
|
|
|
// --- SETUP ---
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const { $api } = useNuxtApp()
|
|
const { tree, isLoading: isLoadingTree, loadTree, isSidebarOpen, createItem, deleteItem } = 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)
|
|
|
|
// Init Load
|
|
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 (Zentralisiert) ---
|
|
|
|
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.
|
|
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
|
|
}
|
|
|
|
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) {
|
|
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')
|
|
}
|
|
}
|
|
|
|
isModalOpen.value = false
|
|
} catch (e) {
|
|
console.error(e)
|
|
// Hier könnte man einen UNotification Toast anzeigen
|
|
} 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)
|
|
}]
|
|
]
|
|
|
|
// --- EDITOR ACTIONS ---
|
|
|
|
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; }
|
|
|
|
.fade-enter-active, .fade-leave-active { transition: opacity 0.5s; }
|
|
.fade-enter-from, .fade-leave-to { opacity: 0; }
|
|
</style> |