Folders in Wiki
This commit is contained in:
@@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<div class="select-none text-sm text-gray-700">
|
||||
<div class="select-none text-sm text-gray-700 relative">
|
||||
|
||||
<div
|
||||
class="group flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer transition-colors mb-0.5"
|
||||
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 text-primary-700 font-medium' : 'hover:bg-gray-100']"
|
||||
:style="{ paddingLeft: `${indent}rem` }"
|
||||
@click.stop="handleClick"
|
||||
@@ -16,12 +17,42 @@
|
||||
</button>
|
||||
<span v-else class="w-4"></span>
|
||||
|
||||
<span class="text-gray-400">
|
||||
<span class="text-gray-400 shrink-0">
|
||||
<svg v-if="item.isFolder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 text-yellow-400"><path d="M3.75 3A1.75 1.75 0 002 4.75v3.26a3.235 3.235 0 011.75-.51h12.5c.644 0 1.245.188 1.75.51V6.75A1.75 1.75 0 0016.25 5h-4.836a.25.25 0 01-.177-.073L9.823 3.513A1.75 1.75 0 008.586 3H3.75zM3.75 9A1.75 1.75 0 002 10.75v4.5c0 .966.784 1.75 1.75 1.75h12.5A1.75 1.75 0 0018 15.25v-4.5A1.75 1.75 0 0016.25 9H3.75z" /></svg>
|
||||
<svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4"><path fill-rule="evenodd" d="M4.5 2A1.5 1.5 0 003 3.5v13A1.5 1.5 0 004.5 18h11a1.5 1.5 0 001.5-1.5V7.621a1.5 1.5 0 00-.44-1.06l-4.12-4.122A1.5 1.5 0 0011.378 2H4.5zm2.25 8.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5zm0 3a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z" clip-rule="evenodd" /></svg>
|
||||
</span>
|
||||
|
||||
<span class="truncate flex-1">{{ item.title }}</span>
|
||||
|
||||
<div 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 text-gray-500"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4"><path d="M3 10a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM8.5 10a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM15.5 8.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3z" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="showMenu" v-on-click-outside="() => showMenu = false" class="absolute right-0 top-8 z-50 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">
|
||||
|
||||
<template v-if="item.isFolder">
|
||||
<button @click.stop="createChild(false)" class="w-full text-left px-3 py-1.5 hover:bg-gray-50 flex items-center gap-2">
|
||||
<svg class="w-3 h-3" 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.stop="createChild(true)" class="w-full text-left px-3 py-1.5 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 class="h-px bg-gray-100 my-1"></div>
|
||||
</template>
|
||||
|
||||
<button @click.stop="handleDelete" class="w-full text-left px-3 py-1.5 hover:bg-red-50 text-red-600 flex items-center gap-2">
|
||||
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
|
||||
Löschen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div v-if="item.isFolder && isOpen">
|
||||
@@ -33,19 +64,24 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { WikiPageItem } from '~/composables/useWikiTree'
|
||||
// Expliziter Self-Import für Rekursion (wichtig in manchen Nuxt Setups)
|
||||
import TreeItem from './TreeItem.vue'
|
||||
// Simple Click Outside Directive (kannst du auch global registrieren)
|
||||
import { vOnClickOutside } from '@vueuse/components'
|
||||
|
||||
const props = defineProps<{ item: WikiPageItem; depth?: number }>()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
// Composable Actions holen
|
||||
const { createItem, deleteItem } = useWikiTree()
|
||||
|
||||
const depth = props.depth ?? 0
|
||||
const indent = computed(() => 0.5 + (depth * 0.7))
|
||||
const isOpen = ref(false)
|
||||
const showMenu = ref(false)
|
||||
const isActive = computed(() => route.params.id === props.item.id)
|
||||
|
||||
// Auto-Open: Wenn wir ein Parent sind und das aktive Kind enthalten
|
||||
// Auto-Open Logic
|
||||
watch(() => route.params.id, (newId) => {
|
||||
if (props.item.isFolder && hasActiveChild(props.item, newId as string)) isOpen.value = true
|
||||
}, { immediate: true })
|
||||
@@ -60,4 +96,34 @@ function handleClick() {
|
||||
}
|
||||
|
||||
function toggleFolder() { isOpen.value = !isOpen.value }
|
||||
|
||||
// --- ACTIONS ---
|
||||
|
||||
async function createChild(isFolder: boolean) {
|
||||
showMenu.value = false
|
||||
// Wir öffnen den Ordner automatisch, damit man das neue Item sieht
|
||||
isOpen.value = true
|
||||
|
||||
const type = isFolder ? "Ordner" : "Seite"
|
||||
const title = prompt(`Name für ${type}:`)
|
||||
if (!title) return
|
||||
|
||||
const newItem = await createItem(title, props.item.id, isFolder)
|
||||
|
||||
// Wenn es eine Seite ist, direkt hin navigieren
|
||||
if (newItem && !isFolder) {
|
||||
// @ts-ignore
|
||||
router.push(`/wiki/${newItem.id}`)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
showMenu.value = false
|
||||
const success = await deleteItem(props.item.id)
|
||||
|
||||
if (success && isActive.value) {
|
||||
// Wenn wir die aktive Seite gelöscht haben, zurück zum Root
|
||||
router.push('/wiki')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -7,6 +7,7 @@
|
||||
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }" class="toolbar-btn font-bold" title="Fett">B</button>
|
||||
<button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }" class="toolbar-btn italic" title="Kursiv">I</button>
|
||||
<button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }" class="toolbar-btn line-through" title="Durchgestrichen">S</button>
|
||||
<button @click="editor.chain().focus().toggleHighlight().run()" :class="{ 'is-active': editor.isActive('highlight') }" class="toolbar-btn text-yellow-500 font-bold" title="Markieren">M</button>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-0.5 border-r border-gray-200 pr-2 mr-2">
|
||||
@@ -16,7 +17,6 @@
|
||||
|
||||
<div class="flex gap-0.5 border-r border-gray-200 pr-2 mr-2">
|
||||
<button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }" class="toolbar-btn" title="Liste">• Liste</button>
|
||||
<button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }" class="toolbar-btn" title="Nummerierte Liste">1. Liste</button>
|
||||
<button @click="editor.chain().focus().toggleTaskList().run()" :class="{ 'is-active': editor.isActive('taskList') }" class="toolbar-btn" title="Checkliste">☑ Task</button>
|
||||
</div>
|
||||
|
||||
@@ -24,11 +24,11 @@
|
||||
<button @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()" class="toolbar-btn" title="Tabelle einfügen">▦ Tab</button>
|
||||
|
||||
<div v-if="editor.isActive('table')" class="flex gap-0.5 ml-2 pl-2 border-l border-gray-200 items-center">
|
||||
<button @click="editor.chain().focus().addColumnAfter().run()" class="toolbar-btn text-xs" title="Spalte hinzufügen">+Col</button>
|
||||
<button @click="editor.chain().focus().deleteColumn().run()" class="toolbar-btn text-xs text-red-400" title="Spalte löschen">-Col</button>
|
||||
<button @click="editor.chain().focus().addRowAfter().run()" class="toolbar-btn text-xs" title="Zeile hinzufügen">+Row</button>
|
||||
<button @click="editor.chain().focus().deleteRow().run()" class="toolbar-btn text-xs text-red-400" title="Zeile löschen">-Row</button>
|
||||
<button @click="editor.chain().focus().mergeCells().run()" class="toolbar-btn text-xs" title="Zellen verbinden">Merge</button>
|
||||
<button @click="editor.chain().focus().addColumnAfter().run()" class="toolbar-btn text-xs" title="Spalte +">+Col</button>
|
||||
<button @click="editor.chain().focus().deleteColumn().run()" class="toolbar-btn text-xs text-red-400" title="Spalte -">-Col</button>
|
||||
<button @click="editor.chain().focus().addRowAfter().run()" class="toolbar-btn text-xs" title="Zeile +">+Row</button>
|
||||
<button @click="editor.chain().focus().deleteRow().run()" class="toolbar-btn text-xs text-red-400" title="Zeile -">-Row</button>
|
||||
<button @click="editor.chain().focus().mergeCells().run()" class="toolbar-btn text-xs" title="Verbinden">Merge</button>
|
||||
<button @click="editor.chain().focus().deleteTable().run()" class="toolbar-btn text-red-500 hover:bg-red-50 ml-1" title="Tabelle löschen">🗑</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -37,15 +37,29 @@
|
||||
<BubbleMenu
|
||||
v-if="editor"
|
||||
:editor="editor"
|
||||
:tippy-options="{ duration: 100 }"
|
||||
class="bg-gray-800 text-white rounded-lg shadow-xl px-2 py-1 flex gap-1 text-sm items-center z-50"
|
||||
:tippy-options="{ duration: 200, placement: 'top-start', animation: 'scale' }"
|
||||
class="bg-white border border-gray-200 text-gray-700 rounded-lg shadow-xl flex items-center p-1 gap-1 z-50 overflow-hidden"
|
||||
>
|
||||
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'text-primary-400': editor.isActive('bold') }" class="bubble-btn font-bold">B</button>
|
||||
<button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'text-primary-400': editor.isActive('italic') }" class="bubble-btn italic">I</button>
|
||||
<button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'text-primary-400': editor.isActive('strike') }" class="bubble-btn line-through">S</button>
|
||||
<div class="w-px h-4 bg-gray-600 mx-1"></div>
|
||||
<button @click="setLink" :class="{ 'text-primary-400': editor.isActive('link') }" class="bubble-btn">Link</button>
|
||||
<button v-if="editor.isActive('link')" @click="editor.chain().focus().unsetLink().run()" class="bubble-btn text-red-300">Unlink</button>
|
||||
<div class="flex items-center gap-0.5">
|
||||
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }" class="bubble-btn font-bold">B</button>
|
||||
<button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }" class="bubble-btn italic">I</button>
|
||||
<button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }" class="bubble-btn line-through">S</button>
|
||||
<button @click="editor.chain().focus().toggleHighlight().run()" :class="{ 'is-active': editor.isActive('highlight') }" class="bubble-btn text-yellow-500 font-bold">M</button>
|
||||
</div>
|
||||
|
||||
<div class="w-px h-4 bg-gray-200 mx-1"></div>
|
||||
|
||||
<div class="flex items-center gap-0.5">
|
||||
<button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }" class="bubble-btn font-bold text-sm">H2</button>
|
||||
<button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }" class="bubble-btn text-lg leading-none">•</button>
|
||||
</div>
|
||||
|
||||
<div class="w-px h-4 bg-gray-200 mx-1"></div>
|
||||
|
||||
<div class="flex items-center gap-0.5">
|
||||
<button @click="setLink" :class="{ 'is-active': editor.isActive('link') }" class="bubble-btn text-sm">Link</button>
|
||||
<button v-if="editor.isActive('link')" @click="editor.chain().focus().unsetLink().run()" class="bubble-btn text-red-500 hover:text-red-700">✕</button>
|
||||
</div>
|
||||
</BubbleMenu>
|
||||
|
||||
<editor-content
|
||||
@@ -58,10 +72,10 @@
|
||||
<script setup lang="ts">
|
||||
import { watch } from 'vue'
|
||||
|
||||
// Tiptap Core Imports
|
||||
// Tiptap Core
|
||||
import { useEditor, EditorContent } from '@tiptap/vue-3'
|
||||
// @ts-ignore
|
||||
import { BubbleMenu } from '@tiptap/vue-3/menus'
|
||||
import { BubbleMenu } from '@tiptap/vue-3/menus' // Fix für Vite Import
|
||||
|
||||
import StarterKit from '@tiptap/starter-kit'
|
||||
import Placeholder from '@tiptap/extension-placeholder'
|
||||
@@ -72,8 +86,9 @@ import Link from '@tiptap/extension-link'
|
||||
import TaskList from '@tiptap/extension-task-list'
|
||||
import TaskItem from '@tiptap/extension-task-item'
|
||||
import Image from '@tiptap/extension-image'
|
||||
import Highlight from '@tiptap/extension-highlight'
|
||||
|
||||
// Table Imports (Named Imports um Vite Fehler zu vermeiden)
|
||||
// Table Imports (Named Imports)
|
||||
import { Table } from '@tiptap/extension-table'
|
||||
import { TableRow } from '@tiptap/extension-table-row'
|
||||
import { TableCell } from '@tiptap/extension-table-cell'
|
||||
@@ -86,16 +101,25 @@ const editor = useEditor({
|
||||
content: props.modelValue,
|
||||
extensions: [
|
||||
StarterKit,
|
||||
Placeholder.configure({ placeholder: 'Tippe "/" oder schreibe los...' }),
|
||||
BubbleMenuExtension,
|
||||
Link.configure({ openOnClick: false, autolink: true }),
|
||||
Image, // Für Paste Support aktiv lassen
|
||||
Placeholder.configure({ placeholder: 'Tippe "/" für Befehle oder schreibe los...' }),
|
||||
|
||||
// Task List Configuration
|
||||
// Bubble Menu Logik: Zeigt sich nur bei Text-Auswahl
|
||||
BubbleMenuExtension.configure({
|
||||
shouldShow: ({ editor, from, to }) => {
|
||||
// Nur anzeigen, wenn Text markiert ist und Dokument nicht leer
|
||||
return !editor.state.selection.empty && (to - from > 0)
|
||||
},
|
||||
}),
|
||||
|
||||
Link.configure({ openOnClick: false, autolink: true }),
|
||||
Image, // Für Copy-Paste Bilder aktiv lassen
|
||||
Highlight, // Gelber Marker
|
||||
|
||||
// Tasks
|
||||
TaskList,
|
||||
TaskItem.configure({ nested: true }),
|
||||
|
||||
// Table Configuration
|
||||
// Tables
|
||||
Table.configure({ resizable: true }),
|
||||
TableRow,
|
||||
TableHeader,
|
||||
@@ -131,23 +155,26 @@ const setLink = () => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Toolbar Buttons */
|
||||
/* Toolbar Button Styling */
|
||||
.toolbar-btn {
|
||||
@apply p-1.5 rounded text-gray-600 hover:bg-gray-100 transition-colors text-sm font-medium min-w-[28px] h-[28px] flex items-center justify-center;
|
||||
}
|
||||
.toolbar-btn.is-active {
|
||||
@apply bg-gray-200 text-black shadow-inner;
|
||||
}
|
||||
|
||||
/* Bubble Menu Button Styling */
|
||||
.bubble-btn {
|
||||
@apply px-2 py-1 hover:bg-gray-700 rounded transition-colors;
|
||||
@apply px-2 py-1 hover:bg-gray-100 rounded transition-colors text-sm min-w-[24px] h-[24px] flex items-center justify-center;
|
||||
}
|
||||
.bubble-btn.is-active {
|
||||
@apply bg-gray-200 text-black;
|
||||
}
|
||||
|
||||
/* WICHTIGE CSS REGELN FÜR EDITOR
|
||||
Dies überschreibt die Tailwind Typography Defaults, die das Layout zerschießen.
|
||||
*/
|
||||
/* CSS RESET & FIXES */
|
||||
:deep(.prose) {
|
||||
|
||||
/* --- 1. TABELLEN (Volle Breite erzwingen) --- */
|
||||
/* 1. TABLE FIX */
|
||||
table {
|
||||
width: 100% !important;
|
||||
border-collapse: collapse;
|
||||
@@ -179,16 +206,13 @@ const setLink = () => {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
/* --- 2. TASK LIST (Checkbox Layout Fix) --- */
|
||||
|
||||
/* Liste resetten */
|
||||
/* 2. TASK LIST FIX (Flexbox) */
|
||||
ul[data-type="taskList"] {
|
||||
list-style: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* Item als Flex-Zeile erzwingen */
|
||||
li[data-type="taskItem"] {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
@@ -197,11 +221,10 @@ const setLink = () => {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
/* Checkbox Container */
|
||||
li[data-type="taskItem"] > label {
|
||||
display: inline-flex !important;
|
||||
margin-right: 0.5rem !important;
|
||||
margin-top: 0.25rem !important; /* Feinjustierung für Ausrichtung am Text */
|
||||
margin-top: 0.25rem !important;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
@@ -212,27 +235,33 @@ const setLink = () => {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Inhalt Container */
|
||||
li[data-type="taskItem"] > div {
|
||||
flex: 1 1 auto !important;
|
||||
min-width: 0 !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* WICHTIG: Margins vom Paragraphen entfernen, sonst Umbruch */
|
||||
/* Kill Paragraph Margins inside Tasks */
|
||||
li[data-type="taskItem"] div > p {
|
||||
margin: 0 !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* Standard Marker entfernen */
|
||||
/* Remove Markers */
|
||||
li[data-type="taskItem"]::marker,
|
||||
li[data-type="taskItem"]::before {
|
||||
content: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* --- SONSTIGES --- */
|
||||
/* 3. HIGHLIGHT STYLE */
|
||||
mark {
|
||||
background-color: #fef08a; /* Yellow-200 */
|
||||
padding: 0.1rem 0.2rem;
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
|
||||
/* 4. SELECTION STYLE */
|
||||
.ProseMirror-selectednode {
|
||||
outline: 2px solid #3b82f6;
|
||||
}
|
||||
|
||||
@@ -12,22 +12,20 @@ export interface WikiPageItem {
|
||||
export const useWikiTree = () => {
|
||||
const { $api } = useNuxtApp()
|
||||
|
||||
// STATE
|
||||
// State
|
||||
const items = useState<WikiPageItem[]>('wiki-items', () => [])
|
||||
const isLoading = useState<boolean>('wiki-loading', () => false)
|
||||
|
||||
// NEU: Globaler Sidebar State (Standardmäßig offen)
|
||||
const isSidebarOpen = useState<boolean>('wiki-sidebar-open', () => true)
|
||||
|
||||
// COMPUTED: Tree Transformation
|
||||
// --- Computed: Tree Logic ---
|
||||
const tree = computed(() => {
|
||||
const rawItems = items.value
|
||||
if (!rawItems || rawItems.length === 0) return []
|
||||
const rawItems = items.value || []
|
||||
if (!rawItems.length) return []
|
||||
|
||||
const roots: WikiPageItem[] = []
|
||||
const lookup: Record<string, WikiPageItem> = {}
|
||||
|
||||
// Init Lookup
|
||||
// Clone & Init
|
||||
rawItems.forEach(item => {
|
||||
lookup[item.id] = { ...item, children: [] }
|
||||
})
|
||||
@@ -42,15 +40,14 @@ export const useWikiTree = () => {
|
||||
}
|
||||
})
|
||||
|
||||
// Sort
|
||||
// Sort: Folders first, then Alphabet
|
||||
const sortNodes = (nodes: WikiPageItem[]) => {
|
||||
nodes.sort((a, b) => {
|
||||
if (a.isFolder !== b.isFolder) return a.isFolder ? -1 : 1
|
||||
if (a.sortOrder !== b.sortOrder) return a.sortOrder - b.sortOrder
|
||||
return a.title.localeCompare(b.title)
|
||||
})
|
||||
nodes.forEach(node => {
|
||||
if (node.children?.length) sortNodes(node.children)
|
||||
nodes.forEach(n => {
|
||||
if (n.children?.length) sortNodes(n.children)
|
||||
})
|
||||
}
|
||||
|
||||
@@ -58,27 +55,47 @@ export const useWikiTree = () => {
|
||||
return roots
|
||||
})
|
||||
|
||||
// ACTIONS
|
||||
const loadTree = async (params: { entityType?: string, entityId?: number, entityUuid?: string } = {}) => {
|
||||
// --- Actions ---
|
||||
|
||||
const loadTree = async () => {
|
||||
isLoading.value = true
|
||||
try {
|
||||
const data = await $api<WikiPageItem[]>('/api/wiki/tree', {
|
||||
method: 'GET',
|
||||
query: params
|
||||
})
|
||||
const data = await $api<WikiPageItem[]>('/api/wiki/tree', { method: 'GET' })
|
||||
items.value = data
|
||||
} catch (e) { console.error(e) }
|
||||
finally { isLoading.value = false }
|
||||
}
|
||||
|
||||
// Zentralisierte Erstellen-Funktion
|
||||
const createItem = async (title: string, parentId: string | null, isFolder: boolean) => {
|
||||
try {
|
||||
const newItem = await $api('/api/wiki', {
|
||||
method: 'POST',
|
||||
body: { title, parentId, isFolder }
|
||||
})
|
||||
await loadTree() // Neu laden
|
||||
return newItem
|
||||
} catch (e) {
|
||||
console.error('Wiki Tree Load Error', e)
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
alert('Fehler beim Erstellen')
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
// Löschen Funktion
|
||||
const deleteItem = async (id: string) => {
|
||||
if (!confirm('Wirklich löschen? Alle Unterseiten werden ebenfalls gelöscht.')) return
|
||||
try {
|
||||
await $api(`/api/wiki/${id}`, { method: 'DELETE' })
|
||||
await loadTree()
|
||||
return true
|
||||
} catch (e) {
|
||||
alert('Fehler beim Löschen')
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
tree,
|
||||
items,
|
||||
isLoading,
|
||||
isSidebarOpen, // Exportiert für Zugriff in Pages
|
||||
loadTree
|
||||
tree, items, isLoading, isSidebarOpen,
|
||||
loadTree, createItem, deleteItem
|
||||
}
|
||||
}
|
||||
@@ -47,6 +47,7 @@
|
||||
"@sentry/browser": "^9.11.0",
|
||||
"@sentry/integrations": "^7.114.0",
|
||||
"@tiptap/extension-bubble-menu": "^3.17.1",
|
||||
"@tiptap/extension-highlight": "^3.17.1",
|
||||
"@tiptap/extension-image": "^3.17.1",
|
||||
"@tiptap/extension-link": "^3.17.1",
|
||||
"@tiptap/extension-placeholder": "^3.17.1",
|
||||
@@ -63,6 +64,7 @@
|
||||
"@vue-leaflet/vue-leaflet": "^0.10.1",
|
||||
"@vue-pdf-viewer/viewer": "^3.0.1",
|
||||
"@vuepic/vue-datepicker": "^7.4.0",
|
||||
"@vueuse/components": "^14.1.0",
|
||||
"@zip.js/zip.js": "^2.7.32",
|
||||
"array-sort": "^1.0.0",
|
||||
"axios": "^1.6.7",
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user