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

Added Wiki

Browse Source
This commit is contained in:
florianfederspiel
2026-01-26 19:44:08 +01:00
parent 9655d4fa05
commit c1d4b24418
12 changed files with 781 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
backend/db/schema/index.ts
View File

@@ -71,4 +71,5 @@ export * from "./vendors"
export * from "./staff_time_events"
export * from "./serialtypes"
export * from "./serialexecutions"
export * from "./public_links"
export * from "./public_links"
export * from "./wikipages"

99
backend/db/schema/wikipages.ts Normal file
View File

@@ -0,0 +1,99 @@
import {
pgTable,
bigint,
text,
timestamp,
boolean,
jsonb,
integer,
index,
uuid,
AnyPgColumn
} from "drizzle-orm/pg-core"
import { relations } from "drizzle-orm"
import { tenants } from "./tenants"
import { authUsers } from "./auth_users"
export const wikiPages = pgTable(
"wiki_pages",
{
// ID des Wiki-Eintrags selbst (neu = UUID)
id: uuid("id")
.primaryKey()
.defaultRandom(),
tenantId: bigint("tenant_id", { mode: "number" })
.notNull()
.references(() => tenants.id, { onDelete: "cascade" }),
parentId: uuid("parent_id")
.references((): AnyPgColumn => wikiPages.id, { onDelete: "cascade" }),
title: text("title").notNull(),
content: jsonb("content"),
isFolder: boolean("is_folder").notNull().default(false),
sortOrder: integer("sort_order").notNull().default(0),
// --- POLYMORPHE BEZIEHUNG (Split) ---
// Art der Entität (z.B. 'customer', 'invoice', 'iot_device')
entityType: text("entity_type"),
// SPALTE 1: Für Legacy-Tabellen (BigInt)
// Nutzung: Wenn entityType='customer', wird hier die ID 1050 gespeichert
entityId: bigint("entity_id", { mode: "number" }),
// SPALTE 2: Für neue Tabellen (UUID)
// Nutzung: Wenn entityType='iot_device', wird hier die UUID gespeichert
entityUuid: uuid("entity_uuid"),
// ------------------------------------
createdAt: timestamp("created_at", { withTimezone: true })
.notNull()
.defaultNow(),
updatedAt: timestamp("updated_at", { withTimezone: true }),
createdBy: uuid("created_by").references(() => authUsers.id),
updatedBy: uuid("updated_by").references(() => authUsers.id),
},
(table) => ({
tenantIdx: index("wiki_pages_tenant_idx").on(table.tenantId),
parentIdx: index("wiki_pages_parent_idx").on(table.parentId),
// ZWEI separate Indexe für schnelle Lookups, je nachdem welche ID genutzt wird
// Fall 1: Suche nach Notizen für Kunde 1050
entityIntIdx: index("wiki_pages_entity_int_idx")
.on(table.tenantId, table.entityType, table.entityId),
// Fall 2: Suche nach Notizen für IoT-Device 550e84...
entityUuidIdx: index("wiki_pages_entity_uuid_idx")
.on(table.tenantId, table.entityType, table.entityUuid),
})
)
export const wikiPagesRelations = relations(wikiPages, ({ one, many }) => ({
tenant: one(tenants, {
fields: [wikiPages.tenantId],
references: [tenants.id],
}),
parent: one(wikiPages, {
fields: [wikiPages.parentId],
references: [wikiPages.id],
relationName: "parent_child",
}),
children: many(wikiPages, {
relationName: "parent_child",
}),
author: one(authUsers, {
fields: [wikiPages.createdBy],
references: [authUsers.id],
}),
}))
export type WikiPage = typeof wikiPages.$inferSelect
export type NewWikiPage = typeof wikiPages.$inferInsert

2
backend/src/index.ts
View File

@@ -29,6 +29,7 @@ import staffTimeRoutes from "./routes/staff/time";
import staffTimeConnectRoutes from "./routes/staff/timeconnects";
import userRoutes from "./routes/auth/user";
import publiclinksAuthenticatedRoutes from "./routes/publiclinks/publiclinks-authenticated";
import wikiRoutes from "./routes/wiki";
//Public Links
import publiclinksNonAuthenticatedRoutes from "./routes/publiclinks/publiclinks-non-authenticated";
@@ -144,6 +145,7 @@ async function main() {
await subApp.register(userRoutes);
await subApp.register(publiclinksAuthenticatedRoutes);
await subApp.register(resourceRoutes);
await subApp.register(wikiRoutes);
},{prefix: "/api"})

2
backend/src/plugins/cors.ts
View File

@@ -14,7 +14,7 @@ export default fp(async (server: FastifyInstance) => {
"https://app.fedeo.de", // dein Nuxt-Frontend
"capacitor://localhost", // dein Nuxt-Frontend
],
methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS",
methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS","PATCH",
"PROPFIND", "PROPPATCH", "MKCOL", "COPY", "MOVE", "LOCK", "UNLOCK"],
allowedHeaders: ["Content-Type", "Authorization", "Context", "X-Public-Pin","Depth", "Overwrite", "Destination", "Lock-Token", "If"],
exposedHeaders: ["Authorization", "Content-Disposition", "Content-Type", "Content-Length"], // optional, falls du ihn auch auslesen willst

203
backend/src/routes/wiki.ts Normal file
View File

@@ -0,0 +1,203 @@
import { FastifyInstance } from "fastify"
import { and, eq, isNull, asc, desc } from "drizzle-orm"
import { wikiPages, authUsers } from "../../db/schema/"
// Types für Request Body & Query (statt Zod)
interface WikiTreeQuery {
entityType?: string
entityId?: number // Kommt als string oder number an, je nach parser
entityUuid?: string
}
interface WikiCreateBody {
title: string
parentId?: string // UUID
isFolder?: boolean
entityType?: string
entityId?: number
entityUuid?: string
}
interface WikiUpdateBody {
title?: string
content?: any // Das Tiptap JSON Object
parentId?: string | null
sortOrder?: number
isFolder?: boolean
}
export default async function wikiRoutes (server: FastifyInstance) {
// ---------------------------------------------------------
// 1. GET /wiki/tree
// Lädt die Struktur für die Sidebar (OHNE Content -> Schnell)
// ---------------------------------------------------------
server.get<{ Querystring: WikiTreeQuery }>("/wiki/tree", async (req, reply) => {
const user = req.user
const { entityType, entityId, entityUuid } = req.query
// Basis-Filter: Tenant Sicherheit
const filters = [eq(wikiPages.tenantId, user.tenant_id)]
// Logik: Laden wir "Allgemein" oder "Entitäts-Spezifisch"?
if (entityType) {
// Spezifisch (z.B. Kunde)
filters.push(eq(wikiPages.entityType, entityType))
if (entityId) {
filters.push(eq(wikiPages.entityId, Number(entityId)))
} else if (entityUuid) {
filters.push(eq(wikiPages.entityUuid, entityUuid))
}
} else {
// Allgemein (alles wo entityType NULL ist)
filters.push(isNull(wikiPages.entityType))
}
// Performance: Nur Metadaten laden, kein riesiges JSON-Content
const pages = await server.db
.select({
id: wikiPages.id,
parentId: wikiPages.parentId,
title: wikiPages.title,
isFolder: wikiPages.isFolder,
sortOrder: wikiPages.sortOrder,
entityType: wikiPages.entityType,
updatedAt: wikiPages.updatedAt,
})
.from(wikiPages)
.where(and(...filters))
.orderBy(asc(wikiPages.sortOrder), asc(wikiPages.title))
return pages
})
// ---------------------------------------------------------
// 2. GET /wiki/:id
// Lädt EINEN Eintrag komplett MIT Content (für den Editor)
// ---------------------------------------------------------
server.get<{ Params: { id: string } }>("/wiki/:id", async (req, reply) => {
const user = req.user
const { id } = req.params
// Drizzle Query API nutzen für Relation (optional Author laden)
const page = await server.db.query.wikiPages.findFirst({
where: and(
eq(wikiPages.id, id),
eq(wikiPages.tenantId, user.tenant_id)
),
with: {
author: {
columns: {
id: true,
// name: true, // Falls im authUsers schema vorhanden
}
}
}
})
if (!page) {
return reply.code(404).send({ error: "Page not found" })
}
return page
})
// ---------------------------------------------------------
// 3. POST /wiki
// Erstellt neuen Eintrag
// ---------------------------------------------------------
server.post<{ Body: WikiCreateBody }>("/wiki", async (req, reply) => {
const user = req.user
const body = req.body
// Simple Validierung
if (!body.title) return reply.code(400).send({ error: "Title required" })
// Split Logik für Polymorphie
const hasEntity = !!body.entityType
const [newPage] = await server.db
.insert(wikiPages)
.values({
tenantId: user.tenant_id,
title: body.title,
parentId: body.parentId || null, // undefined abfangen
isFolder: body.isFolder ?? false,
// Polymorphe Zuweisung
entityType: hasEntity ? body.entityType : null,
entityId: hasEntity && body.entityId ? body.entityId : null,
entityUuid: hasEntity && body.entityUuid ? body.entityUuid : null,
//@ts-ignore
createdBy: user.id,
//@ts-ignore
updatedBy: user.id
})
.returning()
return newPage
})
// ---------------------------------------------------------
// 4. PATCH /wiki/:id
// Universal-Update (Inhalt, Titel, Verschieben, Sortieren)
// ---------------------------------------------------------
server.patch<{ Params: { id: string }; Body: WikiUpdateBody }>(
"/wiki/:id",
async (req, reply) => {
const user = req.user
const { id } = req.params
const body = req.body
// 1. Prüfen ob Eintrag existiert & Tenant gehört
const existing = await server.db.query.wikiPages.findFirst({
where: and(eq(wikiPages.id, id), eq(wikiPages.tenantId, user.tenant_id)),
columns: { id: true }
})
if(!existing) return reply.code(404).send({ error: "Not found" })
// 2. Update durchführen
const [updatedPage] = await server.db
.update(wikiPages)
.set({
title: body.title, // update title if defined
content: body.content, // update content if defined
parentId: body.parentId, // update parent (move) if defined
sortOrder: body.sortOrder,
isFolder: body.isFolder,
updatedAt: new Date(),
//@ts-ignore
updatedBy: user.id
})
.where(eq(wikiPages.id, id))
.returning()
return updatedPage
}
)
// ---------------------------------------------------------
// 5. DELETE /wiki/:id
// Löscht Eintrag (DB Cascade erledigt die Kinder)
// ---------------------------------------------------------
server.delete<{ Params: { id: string } }>("/wiki/:id", async (req, reply) => {
const user = req.user
const { id } = req.params
const result = await server.db
.delete(wikiPages)
.where(and(
eq(wikiPages.id, id),
eq(wikiPages.tenantId, user.tenant_id) // WICHTIG: Security
))
.returning({ id: wikiPages.id })
if (result.length === 0) {
return reply.code(404).send({ error: "Not found or not authorized" })
}
return { success: true, deletedId: result[0].id }
})
}

63
frontend/components/wiki/TreeItem.vue Normal file
View File

@@ -0,0 +1,63 @@
<template>
<div class="select-none text-sm text-gray-700">
<div
class="group flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer transition-colors mb-0.5"
:class="[isActive ? 'bg-primary-50 text-primary-700 font-medium' : 'hover:bg-gray-100']"
:style="{ paddingLeft: `${indent}rem` }"
@click.stop="handleClick"
>
<button
v-if="item.isFolder"
class="h-4 w-4 flex items-center justify-center text-gray-400 hover:text-gray-600 transition-transform duration-200"
:class="{ 'rotate-90': isOpen }"
@click.stop="toggleFolder"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-3 h-3"><path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" /></svg>
</button>
<span v-else class="w-4"></span>
<span class="text-gray-400">
<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>
<div v-if="item.isFolder && isOpen">
<TreeItem v-for="child in item.children" :key="child.id" :item="child" :depth="depth + 1" />
<div v-if="!item.children?.length" class="text-xs text-gray-400 py-1 italic" :style="{ paddingLeft: `${indent + 1.8}rem` }">Leer</div>
</div>
</div>
</template>
<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'
const props = defineProps<{ item: WikiPageItem; depth?: number }>()
const router = useRouter()
const route = useRoute()
const depth = props.depth ?? 0
const indent = computed(() => 0.5 + (depth * 0.7))
const isOpen = ref(false)
const isActive = computed(() => route.params.id === props.item.id)
// Auto-Open: Wenn wir ein Parent sind und das aktive Kind enthalten
watch(() => route.params.id, (newId) => {
if (props.item.isFolder && hasActiveChild(props.item, newId as string)) isOpen.value = true
}, { immediate: true })
function hasActiveChild(node: WikiPageItem, targetId: string): boolean {
if (node.id === targetId) return true
return node.children?.some(c => hasActiveChild(c, targetId)) ?? false
}
function handleClick() {
props.item.isFolder ? (isOpen.value = !isOpen.value) : router.push(`/wiki/${props.item.id}`)
}
function toggleFolder() { isOpen.value = !isOpen.value }
</script>

61
frontend/components/wiki/WikiEditor.vue Normal file
View File

@@ -0,0 +1,61 @@
<template>
<div class="flex flex-col h-full bg-white relative">
<div v-if="editor" class="border-b border-gray-100 px-8 py-2 flex gap-1 items-center sticky top-0 bg-white z-10 shadow-sm">
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'bg-gray-100 text-black': editor.isActive('bold') }" class="p-1.5 rounded hover:bg-gray-50 text-gray-600 font-bold transition-colors">B</button>
<button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'bg-gray-100 text-black': editor.isActive('italic') }" class="p-1.5 rounded hover:bg-gray-50 text-gray-600 italic transition-colors">I</button>
<div class="w-px h-4 bg-gray-200 mx-2"></div>
<button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'bg-gray-100 text-black': editor.isActive('heading', { level: 1 }) }" class="p-1.5 rounded hover:bg-gray-50 text-gray-600 font-bold text-sm">H1</button>
<button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'bg-gray-100 text-black': editor.isActive('heading', { level: 2 }) }" class="p-1.5 rounded hover:bg-gray-50 text-gray-600 font-bold text-xs">H2</button>
<div class="w-px h-4 bg-gray-200 mx-2"></div>
<button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'bg-gray-100 text-black': editor.isActive('bulletList') }" class="p-1.5 rounded hover:bg-gray-50 text-gray-600 text-sm">Liste</button>
</div>
<editor-content :editor="editor" class="flex-1 overflow-y-auto px-8 py-6 prose prose-slate max-w-none focus:outline-none custom-editor-area" />
</div>
</template>
<script setup lang="ts">
import { useEditor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import Placeholder from '@tiptap/extension-placeholder'
const props = defineProps<{ modelValue: any }>()
const emit = defineEmits(['update:modelValue'])
const editor = useEditor({
content: props.modelValue,
extensions: [
StarterKit,
Placeholder.configure({ placeholder: 'Schreibe etwas...' }),
],
editorProps: {
// Tailwind Klassen für den inneren Bereich (damit man überall hinklicken kann)
attributes: { class: 'focus:outline-none min-h-[500px] pb-20' },
},
onUpdate: ({ editor }) => {
emit('update:modelValue', editor.getJSON())
},
})
// Reactivity: Wenn Parent Daten ändert (z.B. Seitenwechsel), Editor updaten
watch(() => props.modelValue, (val) => {
if (editor.value && JSON.stringify(val) !== JSON.stringify(editor.value.getJSON())) {
editor.value.commands.setContent(val, false)
}
})
</script>
<style>
/* Placeholder Grau */
.ProseMirror p.is-editor-empty:first-child::before {
color: #9ca3af;
content: attr(data-placeholder);
float: left;
height: 0;
pointer-events: none;
}
</style>

83
frontend/composables/useWikiTree.ts Normal file
View File

@@ -0,0 +1,83 @@
// composables/useWikiTree.ts
export interface WikiPageItem {
id: string
parentId: string | null
title: string
isFolder: boolean
sortOrder: number
entityType?: string | null
// children wird im Frontend berechnet
children?: WikiPageItem[]
}
export const useWikiTree = () => {
const { $api } = useNuxtApp()
// Globaler State (bleibt beim Navigieren erhalten)
const items = useState<WikiPageItem[]>('wiki-items', () => [])
const isLoading = useState<boolean>('wiki-loading', () => false)
// --- Computed: Flat List zu Baum ---
const tree = computed(() => {
const rawItems = items.value
if (!rawItems || rawItems.length === 0) return []
const roots: WikiPageItem[] = []
const lookup: Record<string, WikiPageItem> = {}
// 1. Kopieren & Lookup füllen
rawItems.forEach(item => {
lookup[item.id] = { ...item, children: [] }
})
// 2. Verknüpfen
rawItems.forEach(item => {
const node = lookup[item.id]
if (item.parentId && lookup[item.parentId]) {
lookup[item.parentId].children?.push(node)
} else {
roots.push(node)
}
})
// 3. Sortieren (Ordner zuerst, dann SortOrder, dann 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)
})
}
sortNodes(roots)
return roots
})
// --- Actions ---
/**
* Lädt den Baum.
* params kann { entityType: 'customer', entityId: 100 } enthalten.
*/
const loadTree = async (params: { entityType?: string, entityId?: number, entityUuid?: string } = {}) => {
isLoading.value = true
try {
// Wichtig: Bei GET nutzen wir 'query' für Parameter
const data = await $api<WikiPageItem[]>('/api/wiki/tree', {
method: 'GET',
query: params
})
items.value = data
} catch (e) {
// Fehler werden vom Plugin (Toast) behandelt, hier nur Log
console.error('Wiki Tree Load Error', e)
} finally {
isLoading.value = false
}
}
return { tree, items, isLoading, loadTree }
}

8
frontend/package.json
View File

@@ -46,10 +46,10 @@
"@popperjs/core": "^2.11.8",
"@sentry/browser": "^9.11.0",
"@sentry/integrations": "^7.114.0",
"@tiptap/extension-underline": "^2.1.15",
"@tiptap/pm": "^2.1.15",
"@tiptap/starter-kit": "^2.1.15",
"@tiptap/vue-3": "^2.1.15",
"@tiptap/extension-placeholder": "^3.17.1",
"@tiptap/pm": "^3.17.1",
"@tiptap/starter-kit": "^3.17.1",
"@tiptap/vue-3": "^3.17.1",
"@vicons/ionicons5": "^0.12.0",
"@vue-leaflet/vue-leaflet": "^0.10.1",
"@vue-pdf-viewer/viewer": "^3.0.1",

126
frontend/pages/wiki/[id].vue Normal file
View File

@@ -0,0 +1,126 @@
<template>
<div class="h-full flex flex-col relative">
<div v-if="pending" class="flex h-full items-center justify-center text-gray-400">
<div class="flex flex-col items-center gap-2">
<svg class="animate-spin h-6 w-6 text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
<span>Lade Inhalt...</span>
</div>
</div>
<div v-else-if="page" class="flex flex-col h-full bg-white">
<header class="px-8 pt-8 pb-2">
<input
v-model="page.title"
@blur="saveTitle"
@keydown.enter="($event.target as HTMLInputElement).blur()"
class="text-4xl font-bold text-gray-900 w-full outline-none placeholder-gray-300 bg-transparent"
placeholder="Unbenannte Seite"
/>
<div class="flex items-center gap-4 mt-2 text-xs text-gray-400 h-6">
<span>Erstellt am {{ new Date(page.createdAt).toLocaleDateString() }}</span>
<transition name="fade">
<span v-if="isSaving" class="text-primary-600 flex items-center gap-1">
<svg class="animate-spin h-3 w-3" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
Speichert...
</span>
<span v-else-if="lastSaved" class="text-green-600">Gespeichert</span>
</transition>
</div>
</header>
<div class="flex-1 overflow-hidden">
<WikiEditor
v-model="contentBuffer"
@update:modelValue="handleContentChange"
/>
</div>
</div>
<div v-else class="flex h-full items-center justify-center text-gray-500">
Seite nicht gefunden oder keine Berechtigung.
</div>
</div>
</template>
<script setup lang="ts">
import WikiEditor from '~/components/wiki/WikiEditor.vue'
const route = useRoute()
const { $api } = useNuxtApp()
const { loadTree } = useWikiTree()
const pageId = route.params.id as string
const isSaving = ref(false)
const lastSaved = ref(false)
const saveTimeout = ref<any>(null)
const contentBuffer = ref(null) // Zwischenspeicher für Editor
// Daten asynchron laden
// Wir nutzen eine unique Key-Strategy basierend auf der ID
const { data: page, pending } = await useAsyncData(`wiki-page-${pageId}`, async () => {
const res = await $api<any>(`/api/wiki/${pageId}`)
contentBuffer.value = res.content // Initiale Daten in Buffer
return res
}, {
// Wichtig: Neu laden wenn sich die Route ID ändert
watch: [() => route.params.id]
})
// Titel Speichern (Sofort bei Blur)
async function saveTitle() {
if (!page.value) return
isSaving.value = true
try {
await $api(`/api/wiki/${pageId}`, {
method: 'PATCH',
body: { title: page.value.title }
})
// Sidebar neu laden, damit Titel dort aktuell ist
loadTree()
showSavedFeedback()
} finally {
isSaving.value = false
}
}
// Inhalt Speichern (Mit Debounce Verzögerung)
function handleContentChange(newContent: any) {
contentBuffer.value = newContent
isSaving.value = true
lastSaved.value = false
if (saveTimeout.value) clearTimeout(saveTimeout.value)
// Warte 1000ms nach dem letzten Tippen
saveTimeout.value = setTimeout(async () => {
try {
await $api(`/api/wiki/${pageId}`, {
method: 'PATCH',
body: { content: contentBuffer.value }
})
showSavedFeedback()
} catch (e) {
// Fehler behandelt Plugin
} finally {
isSaving.value = false
}
}, 1000)
}
function showSavedFeedback() {
lastSaved.value = true
setTimeout(() => { lastSaved.value = false }, 2000)
}
</script>
<style scoped>
.fade-enter-active, .fade-leave-active { transition: opacity 0.5s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
</style>

84
frontend/pages/wiki/index.vue Normal file
View File

@@ -0,0 +1,84 @@
<template>
<div class="flex h-full w-full bg-white overflow-hidden">
<aside class="flex w-72 flex-col border-r border-gray-200 bg-gray-50/50">
<div class="flex items-center justify-between border-b border-gray-200 px-4 py-3 bg-white h-14">
<h2 class="font-semibold text-gray-800">Wiki</h2>
<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>
<div class="flex-1 overflow-y-auto px-2 py-3 custom-scrollbar">
<div v-if="isLoading && !tree.length" class="space-y-2 px-2 mt-2">
<div class="h-4 w-3/4 bg-gray-200 animate-pulse rounded"></div>
<div class="h-4 w-1/2 bg-gray-200 animate-pulse rounded"></div>
<div class="h-4 w-5/6 bg-gray-200 animate-pulse rounded"></div>
</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 Einträge vorhanden.<br>Erstelle die erste Seite!
</div>
</div>
</div>
</aside>
<main class="flex-1 overflow-hidden relative bg-white h-full">
<NuxtPage />
</main>
</div>
</template>
<script setup lang="ts">
import WikiTreeItem from '~/components/wiki/TreeItem.vue'
const { tree, isLoading, loadTree } = useWikiTree()
const { $api } = useNuxtApp()
const router = useRouter()
// Initiales Laden des "Allgemeinen" Wikis
onMounted(() => loadTree())
async function createNewPage() {
const title = prompt("Titel der neuen Seite:", "Neue Notiz")
if (!title) return
try {
// API Call: POST mit body
const newPage = await $api('/api/wiki', {
method: 'POST',
body: {
title,
parentId: null,
isFolder: false,
// EntityType ist hier null, da es im Haupt-Wiki erstellt wird
entityType: null
}
})
await loadTree() // Baum refreshen
// @ts-ignore (Falls Typen nicht perfekt gematcht)
if (newPage?.id) {
// @ts-ignore
router.push(`/wiki/${newPage.id}`)
}
} catch (e) {
// Fehler werden durch Plugin angezeigt
}
}
</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; }
</style>

53
frontend/stores/wiki.ts Normal file
View File

@@ -0,0 +1,53 @@
// stores/wiki.ts
import { defineStore } from 'pinia'
export const useWikiStore = defineStore('wiki', () => {
const flatItems = ref<any[]>([])
const isLoading = ref(false)
// Computed: Wandelt flatItems automatisch in Baum um, wenn sich Daten ändern
const tree = computed(() => buildTree(flatItems.value))
// Action: Baum laden
async function fetchTree(params: { entityType?: string, entityId?: number, entityUuid?: string } = {}) {
isLoading.value = true
try {
const { data } = await useFetch('/api/wiki/tree', {
query: params
})
if (data.value) {
flatItems.value = data.value
}
} catch (e) {
console.error('Wiki tree fetch error', e)
} finally {
isLoading.value = false
}
}
// Action: Eintrag verschieben (Drag & Drop im UI)
async function moveItem(itemId: string, newParentId: string | null, newSortOrder: number) {
// 1. Optimistic Update im State (damit es sich sofort schnell anfühlt)
const itemIndex = flatItems.value.findIndex(i => i.id === itemId)
if (itemIndex > -1) {
flatItems.value[itemIndex].parentId = newParentId
flatItems.value[itemIndex].sortOrder = newSortOrder
}
// 2. API Call im Hintergrund
await $fetch(`/api/wiki/${itemId}`, {
method: 'PATCH',
body: { parentId: newParentId, sortOrder: newSortOrder }
})
// Fallback: Wenn Error, müsste man hier den alten State wiederherstellen
}
return {
flatItems,
tree,
isLoading,
fetchTree,
moveItem
}
})