Added Entity Wiki
This commit is contained in:
@@ -1,17 +1,37 @@
|
||||
import { FastifyInstance } from "fastify"
|
||||
import { and, eq, isNull, asc, desc } from "drizzle-orm"
|
||||
import { wikiPages, authUsers } from "../../db/schema/"
|
||||
import { and, eq, isNull, asc, inArray } from "drizzle-orm"
|
||||
// WICHTIG: Hier müssen die Schemas der Entitäten importiert werden!
|
||||
import {
|
||||
wikiPages,
|
||||
authUsers,
|
||||
customers,
|
||||
projects,
|
||||
plants,
|
||||
products,
|
||||
inventoryitems,
|
||||
// ... weitere Schemas hier importieren
|
||||
} from "../../db/schema/"
|
||||
|
||||
// Types für Request Body & Query (statt Zod)
|
||||
// Konfiguration: Welche Entitäten sollen im Wiki auftauchen?
|
||||
const ENTITY_CONFIG: Record<string, { table: any, labelField: any, rootLabel: string, idField: 'id' | 'uuid' }> = {
|
||||
'customers': { table: customers, labelField: customers.name, rootLabel: 'Kunden', idField: 'id' },
|
||||
'projects': { table: projects, labelField: projects.name, rootLabel: 'Projekte', idField: 'id' },
|
||||
'plants': { table: plants, labelField: plants.name, rootLabel: 'Objekte', idField: 'id' },
|
||||
'products': { table: products, labelField: products.name, rootLabel: 'Artikel', idField: 'id' },
|
||||
'inventoryitems': { table: inventoryitems, labelField: inventoryitems.name, rootLabel: 'Inventarartikel', idField: 'id' },
|
||||
// Hier weitere hinzufügen (z.B. vehicles, products...)
|
||||
}
|
||||
|
||||
// Types
|
||||
interface WikiTreeQuery {
|
||||
entityType?: string
|
||||
entityId?: number // Kommt als string oder number an, je nach parser
|
||||
entityId?: number
|
||||
entityUuid?: string
|
||||
}
|
||||
|
||||
interface WikiCreateBody {
|
||||
title: string
|
||||
parentId?: string // UUID
|
||||
parentId?: string
|
||||
isFolder?: boolean
|
||||
entityType?: string
|
||||
entityId?: number
|
||||
@@ -20,42 +40,53 @@ interface WikiCreateBody {
|
||||
|
||||
interface WikiUpdateBody {
|
||||
title?: string
|
||||
content?: any // Das Tiptap JSON Object
|
||||
content?: any
|
||||
parentId?: string | null
|
||||
sortOrder?: number
|
||||
isFolder?: boolean
|
||||
}
|
||||
|
||||
export default async function wikiRoutes (server: FastifyInstance) {
|
||||
export default async function wikiRoutes(server: FastifyInstance) {
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// 1. GET /wiki/tree
|
||||
// Lädt die Struktur für die Sidebar (OHNE Content -> Schnell)
|
||||
// Lädt Struktur: Entweder gefiltert (Widget) oder Global (mit virtuellen Ordnern)
|
||||
// ---------------------------------------------------------
|
||||
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)]
|
||||
// FALL A: WIDGET-ANSICHT (Spezifische Entität)
|
||||
// Wenn wir spezifisch filtern, wollen wir nur die echten Seiten ohne virtuelle Ordner
|
||||
if (entityType && (entityId || entityUuid)) {
|
||||
const filters = [
|
||||
eq(wikiPages.tenantId, user.tenant_id),
|
||||
eq(wikiPages.entityType, entityType)
|
||||
]
|
||||
|
||||
// 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))
|
||||
|
||||
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))
|
||||
return 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))
|
||||
}
|
||||
|
||||
// Performance: Nur Metadaten laden, kein riesiges JSON-Content
|
||||
const pages = await server.db
|
||||
// FALL B: GLOBALE ANSICHT (Haupt-Wiki)
|
||||
// Wir laden ALLES und bauen virtuelle Ordner für die Entitäten
|
||||
|
||||
// 1. Alle Wiki-Seiten des Tenants laden
|
||||
const allPages = await server.db
|
||||
.select({
|
||||
id: wikiPages.id,
|
||||
parentId: wikiPages.parentId,
|
||||
@@ -63,24 +94,115 @@ export default async function wikiRoutes (server: FastifyInstance) {
|
||||
isFolder: wikiPages.isFolder,
|
||||
sortOrder: wikiPages.sortOrder,
|
||||
entityType: wikiPages.entityType,
|
||||
entityId: wikiPages.entityId, // Wichtig für Zuordnung
|
||||
entityUuid: wikiPages.entityUuid, // Wichtig für Zuordnung
|
||||
updatedAt: wikiPages.updatedAt,
|
||||
})
|
||||
.from(wikiPages)
|
||||
.where(and(...filters))
|
||||
.where(eq(wikiPages.tenantId, user.tenant_id))
|
||||
.orderBy(asc(wikiPages.sortOrder), asc(wikiPages.title))
|
||||
|
||||
return pages
|
||||
// Trennen in Standard-Seiten und Entity-Seiten
|
||||
const standardPages = allPages.filter(p => !p.entityType)
|
||||
const entityPages = allPages.filter(p => p.entityType)
|
||||
|
||||
const virtualNodes: any[] = []
|
||||
|
||||
// 2. Virtuelle Ordner generieren
|
||||
// Wir iterieren durch unsere Config (Kunden, Projekte...)
|
||||
await Promise.all(Object.entries(ENTITY_CONFIG).map(async ([typeKey, config]) => {
|
||||
|
||||
// Haben wir überhaupt Notizen für diesen Typ?
|
||||
const pagesForType = entityPages.filter(p => p.entityType === typeKey)
|
||||
if (pagesForType.length === 0) return
|
||||
|
||||
// IDs sammeln, um Namen aus der DB zu holen
|
||||
// Wir unterscheiden zwischen ID (int) und UUID
|
||||
let entities: any[] = []
|
||||
|
||||
if (config.idField === 'id') {
|
||||
const ids = [...new Set(pagesForType.map(p => p.entityId).filter((id): id is number => id !== null))]
|
||||
if (ids.length > 0) {
|
||||
//@ts-ignore - Drizzle Typisierung bei dynamischen Tables ist tricky
|
||||
entities = await server.db.select({ id: config.table.id, label: config.labelField })
|
||||
.from(config.table)
|
||||
//@ts-ignore
|
||||
.where(inArray(config.table.id, ids))
|
||||
}
|
||||
} else {
|
||||
// Falls UUID genutzt wird (z.B. IoT Devices)
|
||||
const uuids = [...new Set(pagesForType.map(p => p.entityUuid).filter((uuid): uuid is string => uuid !== null))]
|
||||
if (uuids.length > 0) {
|
||||
//@ts-ignore
|
||||
entities = await server.db.select({ id: config.table.id, label: config.labelField })
|
||||
.from(config.table)
|
||||
//@ts-ignore
|
||||
.where(inArray(config.table.id, uuids))
|
||||
}
|
||||
}
|
||||
|
||||
if (entities.length === 0) return
|
||||
|
||||
// 3. Virtuellen Root Ordner erstellen (z.B. "Kunden")
|
||||
const rootId = `virtual-root-${typeKey}`
|
||||
virtualNodes.push({
|
||||
id: rootId,
|
||||
parentId: null, // Ganz oben im Baum
|
||||
title: config.rootLabel,
|
||||
isFolder: true,
|
||||
isVirtual: true, // Flag fürs Frontend (read-only Folder)
|
||||
sortOrder: 1000 // Ganz unten anzeigen
|
||||
})
|
||||
|
||||
// 4. Virtuelle Entity Ordner erstellen (z.B. "Müller GmbH")
|
||||
entities.forEach(entity => {
|
||||
const entityNodeId = `virtual-entity-${typeKey}-${entity.id}`
|
||||
|
||||
virtualNodes.push({
|
||||
id: entityNodeId,
|
||||
parentId: rootId,
|
||||
title: entity.label || 'Unbekannt',
|
||||
isFolder: true,
|
||||
isVirtual: true,
|
||||
sortOrder: 0
|
||||
})
|
||||
|
||||
// 5. Die echten Notizen verschieben
|
||||
// Wir suchen alle Notizen, die zu dieser Entity gehören
|
||||
const myPages = pagesForType.filter(p =>
|
||||
(config.idField === 'id' && p.entityId === entity.id) ||
|
||||
(config.idField === 'uuid' && p.entityUuid === entity.id)
|
||||
)
|
||||
|
||||
myPages.forEach(page => {
|
||||
// Nur Root-Notizen der Entity verschieben.
|
||||
// Sub-Pages bleiben wo sie sind (parentId zeigt ja schon auf die richtige Seite)
|
||||
if (!page.parentId) {
|
||||
// Wir modifizieren das Objekt für die Response (nicht in der DB!)
|
||||
// Wir müssen es clonen, sonst ändern wir es für alle Referenzen
|
||||
const pageClone = { ...page }
|
||||
pageClone.parentId = entityNodeId
|
||||
virtualNodes.push(pageClone)
|
||||
} else {
|
||||
// Sub-Pages einfach so hinzufügen
|
||||
virtualNodes.push(page)
|
||||
}
|
||||
})
|
||||
})
|
||||
}))
|
||||
|
||||
// Ergebnis: Normale Seiten + Virtuelle Struktur
|
||||
return [...standardPages, ...virtualNodes]
|
||||
})
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// 2. GET /wiki/:id
|
||||
// Lädt EINEN Eintrag komplett MIT Content (für den Editor)
|
||||
// Lädt EINEN Eintrag komplett MIT Content
|
||||
// ---------------------------------------------------------
|
||||
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),
|
||||
@@ -88,18 +210,12 @@ export default async function wikiRoutes (server: FastifyInstance) {
|
||||
),
|
||||
with: {
|
||||
author: {
|
||||
columns: {
|
||||
id: true,
|
||||
// name: true, // Falls im authUsers schema vorhanden
|
||||
}
|
||||
columns: { id: true } // Name falls vorhanden
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if (!page) {
|
||||
return reply.code(404).send({ error: "Page not found" })
|
||||
}
|
||||
|
||||
if (!page) return reply.code(404).send({ error: "Page not found" })
|
||||
return page
|
||||
})
|
||||
|
||||
@@ -111,10 +227,8 @@ export default async function wikiRoutes (server: FastifyInstance) {
|
||||
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
|
||||
@@ -122,10 +236,8 @@ export default async function wikiRoutes (server: FastifyInstance) {
|
||||
.values({
|
||||
tenantId: user.tenant_id,
|
||||
title: body.title,
|
||||
parentId: body.parentId || null, // undefined abfangen
|
||||
parentId: body.parentId || null,
|
||||
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,
|
||||
@@ -141,7 +253,7 @@ export default async function wikiRoutes (server: FastifyInstance) {
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// 4. PATCH /wiki/:id
|
||||
// Universal-Update (Inhalt, Titel, Verschieben, Sortieren)
|
||||
// Universal-Update
|
||||
// ---------------------------------------------------------
|
||||
server.patch<{ Params: { id: string }; Body: WikiUpdateBody }>(
|
||||
"/wiki/:id",
|
||||
@@ -150,21 +262,19 @@ export default async function wikiRoutes (server: FastifyInstance) {
|
||||
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" })
|
||||
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
|
||||
title: body.title,
|
||||
content: body.content,
|
||||
parentId: body.parentId,
|
||||
sortOrder: body.sortOrder,
|
||||
isFolder: body.isFolder,
|
||||
updatedAt: new Date(),
|
||||
@@ -180,7 +290,7 @@ export default async function wikiRoutes (server: FastifyInstance) {
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// 5. DELETE /wiki/:id
|
||||
// Löscht Eintrag (DB Cascade erledigt die Kinder)
|
||||
// Löscht Eintrag
|
||||
// ---------------------------------------------------------
|
||||
server.delete<{ Params: { id: string } }>("/wiki/:id", async (req, reply) => {
|
||||
const user = req.user
|
||||
@@ -190,13 +300,11 @@ export default async function wikiRoutes (server: FastifyInstance) {
|
||||
.delete(wikiPages)
|
||||
.where(and(
|
||||
eq(wikiPages.id, id),
|
||||
eq(wikiPages.tenantId, user.tenant_id) // WICHTIG: Security
|
||||
eq(wikiPages.tenantId, user.tenant_id)
|
||||
))
|
||||
.returning({ id: wikiPages.id })
|
||||
|
||||
if (result.length === 0) {
|
||||
return reply.code(404).send({ error: "Not found or not authorized" })
|
||||
}
|
||||
if (result.length === 0) return reply.code(404).send({ error: "Not found" })
|
||||
|
||||
return { success: true, deletedId: result[0].id }
|
||||
})
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script setup>
|
||||
|
||||
import EntityShowSubTimes from "~/components/EntityShowSubTimes.vue";
|
||||
import WikiEntityWidget from "~/components/wiki/WikiEntityWidget.vue";
|
||||
|
||||
const props = defineProps({
|
||||
type: {
|
||||
@@ -288,6 +289,13 @@ const changePinned = async () => {
|
||||
v-else-if="tab.label === 'Zeiten'"
|
||||
:platform="platform"
|
||||
/>
|
||||
<div v-else-if="tab.label === 'Wiki'" class="h-[600px] w-full overflow-hidden">
|
||||
<WikiEntityWidget
|
||||
:entity-type="type"
|
||||
:entity-id="typeof props.item.id === 'number' ? props.item.id : undefined"
|
||||
:entity-uuid="typeof props.item.id === 'string' ? props.item.id : undefined"
|
||||
/>
|
||||
</div>
|
||||
<EntityShowSub
|
||||
:item="props.item"
|
||||
:query-string-data="getAvailableQueryStringData()"
|
||||
|
||||
@@ -3,7 +3,10 @@
|
||||
|
||||
<div
|
||||
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 dark:bg-primary-900/10 text-primary-600 dark:text-primary-400 font-medium' : 'hover:bg-gray-100 dark:hover:bg-gray-800']"
|
||||
:class="[
|
||||
isActive ? 'bg-primary-50 dark:bg-primary-900/10 text-primary-600 dark:text-primary-400 font-medium' : 'hover:bg-gray-100 dark:hover:bg-gray-800',
|
||||
item.isVirtual ? 'opacity-90' : ''
|
||||
]"
|
||||
:style="{ paddingLeft: `${indent}rem` }"
|
||||
@click.stop="handleClick"
|
||||
>
|
||||
@@ -17,20 +20,42 @@
|
||||
</button>
|
||||
<span v-else class="w-4"></span>
|
||||
|
||||
<span class="text-gray-400 shrink-0 flex items-center">
|
||||
<UIcon v-if="item.isFolder" name="i-heroicons-folder-solid" class="w-4 h-4 text-yellow-400" />
|
||||
<UIcon v-else name="i-heroicons-document-text" class="w-4 h-4" />
|
||||
<span class="shrink-0 flex items-center">
|
||||
<UIcon
|
||||
v-if="item.isFolder && item.isVirtual"
|
||||
name="i-heroicons-folder"
|
||||
class="w-4 h-4 text-primary-500 dark:text-primary-400"
|
||||
/>
|
||||
<UIcon
|
||||
v-else-if="item.isFolder"
|
||||
name="i-heroicons-folder-solid"
|
||||
class="w-4 h-4 text-yellow-400"
|
||||
/>
|
||||
<UIcon
|
||||
v-else
|
||||
name="i-heroicons-document-text"
|
||||
class="w-4 h-4 text-gray-400"
|
||||
/>
|
||||
</span>
|
||||
|
||||
<span class="truncate flex-1">{{ item.title }}</span>
|
||||
<span class="truncate flex-1" :class="{'italic text-gray-500': item.isVirtual && !item.parentId}">
|
||||
{{ item.title }}
|
||||
</span>
|
||||
|
||||
<div class="absolute right-1 top-1 opacity-0 group-hover:opacity-100 transition-opacity" :class="{ '!opacity-100': showMenu }">
|
||||
<div v-if="!item.isVirtual" 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 dark:hover:bg-gray-700 text-gray-500">
|
||||
<UIcon name="i-heroicons-ellipsis-horizontal" class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-else class="absolute right-1 top-1 opacity-0 group-hover:opacity-50 transition-opacity flex items-center justify-center pt-0.5 pr-0.5">
|
||||
<UTooltip text="Automatisch generiert">
|
||||
<UIcon name="i-heroicons-lock-closed" class="w-3 h-3 text-gray-300" />
|
||||
</UTooltip>
|
||||
</div>
|
||||
|
||||
<div v-if="showMenu" v-on-click-outside="() => showMenu = false" class="absolute right-0 top-8 z-50 w-40 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-100 dark:border-gray-700 py-1 text-xs text-gray-700 dark:text-gray-200 animate-in fade-in slide-in-from-top-1 duration-100">
|
||||
|
||||
<template v-if="item.isFolder">
|
||||
<button @click.stop="triggerCreate(false)" class="w-full text-left px-3 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-plus" class="w-3 h-3" /> Neue Seite
|
||||
@@ -40,6 +65,7 @@
|
||||
</button>
|
||||
<div class="h-px bg-gray-100 dark:bg-gray-700 my-1"></div>
|
||||
</template>
|
||||
|
||||
<button @click.stop="triggerDelete" class="w-full text-left px-3 py-1.5 hover:bg-red-50 dark:hover:bg-red-900/30 text-red-600 flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-trash" class="w-3 h-3" /> Löschen
|
||||
</button>
|
||||
@@ -60,7 +86,6 @@ import type { WikiPageItem } from '~/composables/useWikiTree'
|
||||
const props = defineProps<{ item: WikiPageItem; depth?: number }>()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
// NEU: searchQuery importieren für Auto-Expand
|
||||
const { searchQuery } = useWikiTree()
|
||||
|
||||
const openWikiAction = inject('openWikiAction') as (action: 'create' | 'delete', contextItem: WikiPageItem | null, isFolder?: boolean) => void
|
||||
@@ -71,12 +96,12 @@ const isOpen = ref(false)
|
||||
const showMenu = ref(false)
|
||||
const isActive = computed(() => route.params.id === props.item.id)
|
||||
|
||||
// Auto-Open Logic 1: Aktive Seite
|
||||
// Auto-Open: Active Page
|
||||
watch(() => route.params.id, (newId) => {
|
||||
if (props.item.isFolder && hasActiveChild(props.item, newId as string)) isOpen.value = true
|
||||
}, { immediate: true })
|
||||
|
||||
// NEU: Auto-Open Logic 2: Suche aktiv -> Alles aufklappen
|
||||
// Auto-Open: Search
|
||||
watch(searchQuery, (newVal) => {
|
||||
if (newVal.trim().length > 0 && props.item.isFolder) {
|
||||
isOpen.value = true
|
||||
@@ -89,15 +114,30 @@ function hasActiveChild(node: WikiPageItem, targetId: string): boolean {
|
||||
}
|
||||
|
||||
function handleClick() {
|
||||
props.item.isFolder ? (isOpen.value = !isOpen.value) : router.push(`/wiki/${props.item.id}`)
|
||||
if (props.item.isFolder) {
|
||||
isOpen.value = !isOpen.value
|
||||
} else {
|
||||
// Falls es eine virtuelle Seite ist (Read only Entity View?), leiten wir trotzdem weiter
|
||||
// oder verhindern es, je nach Wunsch. Aktuell erlauben wir Navigation:
|
||||
router.push(`/wiki/${props.item.id}`)
|
||||
}
|
||||
}
|
||||
|
||||
function toggleFolder() { isOpen.value = !isOpen.value }
|
||||
|
||||
function triggerCreate(isFolder: boolean) {
|
||||
// Sicherheitscheck: Virtuelle Ordner dürfen nichts erstellen
|
||||
if (props.item.isVirtual) return
|
||||
|
||||
showMenu.value = false
|
||||
isOpen.value = true
|
||||
openWikiAction('create', props.item, isFolder)
|
||||
}
|
||||
|
||||
function triggerDelete() {
|
||||
// Sicherheitscheck
|
||||
if (props.item.isVirtual) return
|
||||
|
||||
showMenu.value = false
|
||||
openWikiAction('delete', props.item)
|
||||
}
|
||||
|
||||
236
frontend/components/wiki/WikiEntityWidget.vue
Normal file
236
frontend/components/wiki/WikiEntityWidget.vue
Normal file
@@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<div class="flex h-full w-full min-h-[500px] border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 shadow-sm relative isolate overflow-hidden">
|
||||
|
||||
<div
|
||||
class="flex flex-col border-r border-gray-200 dark:border-gray-800 bg-gray-50/80 dark:bg-gray-900/50 transition-all duration-300"
|
||||
:class="selectedPage ? 'w-64 hidden md:flex shrink-0' : 'w-full'"
|
||||
>
|
||||
<div class="flex items-center justify-between px-3 py-3 border-b border-gray-200 dark:border-gray-800 shrink-0">
|
||||
<span class="text-xs font-bold text-gray-500 uppercase tracking-wider flex items-center gap-1">
|
||||
<UIcon name="i-heroicons-list-bullet" class="w-3 h-3" />
|
||||
Inhalte
|
||||
</span>
|
||||
<UTooltip text="Neue Notiz erstellen">
|
||||
<UButton size="2xs" color="primary" variant="ghost" icon="i-heroicons-plus" @click="isCreateModalOpen = true" />
|
||||
</UTooltip>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto p-2 space-y-1 custom-scrollbar">
|
||||
<div v-if="loadingList" class="space-y-2 pt-2">
|
||||
<USkeleton class="h-8 w-full" />
|
||||
<USkeleton class="h-8 w-full" />
|
||||
</div>
|
||||
|
||||
<template v-else-if="pages.length">
|
||||
<div
|
||||
v-for="page in pages"
|
||||
:key="page.id"
|
||||
class="flex items-center gap-2 px-2.5 py-2 rounded-md cursor-pointer text-sm transition-all border border-transparent"
|
||||
:class="selectedPage?.id === page.id ? 'bg-white dark:bg-gray-800 text-primary-600 shadow-sm border-gray-200 dark:border-gray-700 font-medium' : 'text-gray-600 hover:bg-white dark:hover:bg-gray-800 hover:shadow-sm'"
|
||||
@click="selectPage(page.id)"
|
||||
>
|
||||
<UIcon :name="page.isFolder ? 'i-heroicons-folder' : 'i-heroicons-document-text'" class="w-4 h-4 shrink-0" />
|
||||
<span class="truncate flex-1">{{ page.title }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-else class="flex flex-col items-center justify-center py-12 px-4 text-center">
|
||||
<p class="text-xs text-gray-500">Keine Notizen vorhanden.</p>
|
||||
<UButton variant="link" size="xs" color="primary" @click="isCreateModalOpen = true" class="mt-1">Erstellen</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex flex-col bg-white dark:bg-gray-900 h-full relative min-w-0 w-full overflow-hidden">
|
||||
|
||||
<div v-if="selectedPage" class="flex flex-col h-full w-full">
|
||||
<div class="flex items-center justify-between px-4 py-2 border-b border-gray-100 dark:border-gray-800 z-10 shrink-0 bg-white dark:bg-gray-900">
|
||||
<div class="flex items-center gap-2 flex-1 min-w-0">
|
||||
<UButton icon="i-heroicons-arrow-left" variant="ghost" color="gray" class="md:hidden shrink-0" @click="selectedPage = null" />
|
||||
<input
|
||||
v-model="selectedPage.title"
|
||||
@input="onInputTitle"
|
||||
class="bg-transparent font-semibold text-gray-900 dark:text-white focus:outline-none w-full truncate"
|
||||
placeholder="Titel..."
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-xs text-gray-400 shrink-0 ml-2">
|
||||
<span class="hidden sm:inline">{{ isSaving ? 'Speichert...' : 'Gespeichert' }}</span>
|
||||
<UButton icon="i-heroicons-trash" color="gray" variant="ghost" size="xs" @click="deleteCurrentPage"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-hidden relative w-full">
|
||||
<div v-if="loadingContent" class="absolute inset-0 flex items-center justify-center bg-white/80 dark:bg-gray-900/80 z-20">
|
||||
<UIcon name="i-heroicons-arrow-path" class="w-8 h-8 animate-spin text-primary-500" />
|
||||
</div>
|
||||
|
||||
<WikiEditor
|
||||
v-model="selectedPage.content"
|
||||
class="h-full w-full"
|
||||
:page-id="selectedPage.id"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="hidden md:flex flex-1 flex-col items-center justify-center w-full h-full bg-gray-50/30 dark:bg-gray-900 p-6 text-center">
|
||||
|
||||
<div class="bg-white dark:bg-gray-800 p-4 rounded-full shadow-sm ring-1 ring-gray-100 dark:ring-gray-700 mb-4">
|
||||
<UIcon name="i-heroicons-book-open" class="w-10 h-10 text-primary-200 dark:text-primary-800" />
|
||||
</div>
|
||||
|
||||
<h3 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
|
||||
Wiki & Dokumentation
|
||||
</h3>
|
||||
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 max-w-xs mx-auto mb-6">
|
||||
Wähle links eine Notiz aus oder erstelle einen neuen Eintrag für diesen Datensatz.
|
||||
</p>
|
||||
|
||||
<UButton
|
||||
icon="i-heroicons-plus"
|
||||
color="primary"
|
||||
@click="isCreateModalOpen = true"
|
||||
>
|
||||
Neue Seite erstellen
|
||||
</UButton>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UModal v-model="isCreateModalOpen">
|
||||
<div class="p-5">
|
||||
<h3 class="font-bold mb-4">Neue Seite</h3>
|
||||
<form @submit.prevent="createPage">
|
||||
<UInput v-model="newTitle" placeholder="Titel..." autofocus />
|
||||
<div class="mt-4 flex justify-end gap-2">
|
||||
<UButton color="gray" variant="ghost" @click="isCreateModalOpen = false">Abbrechen</UButton>
|
||||
<UButton type="submit" color="primary" :loading="isCreating">Erstellen</UButton>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</UModal>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import WikiEditor from '~/components/wiki/WikiEditor.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
entityType: string
|
||||
entityId?: number | null
|
||||
entityUuid?: string | null
|
||||
}>()
|
||||
|
||||
const { $api } = useNuxtApp()
|
||||
const toast = useToast()
|
||||
|
||||
const loadingList = ref(false)
|
||||
const loadingContent = ref(false)
|
||||
const isCreateModalOpen = ref(false)
|
||||
const isCreating = ref(false)
|
||||
const isSaving = ref(false)
|
||||
const pages = ref<any[]>([])
|
||||
const selectedPage = ref<any>(null)
|
||||
const newTitle = ref('')
|
||||
let saveTimeout: any = null
|
||||
|
||||
const getParams = () => {
|
||||
const p: any = { entityType: props.entityType }
|
||||
if (props.entityId) p.entityId = props.entityId
|
||||
else if (props.entityUuid) p.entityUuid = props.entityUuid
|
||||
return p
|
||||
}
|
||||
|
||||
async function fetchList() {
|
||||
loadingList.value = true
|
||||
try {
|
||||
const data = await $api('/api/wiki/tree', { method: 'GET', params: getParams() })
|
||||
pages.value = data
|
||||
} catch (e) {
|
||||
console.error("Fetch Error:", e)
|
||||
} finally {
|
||||
loadingList.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function selectPage(id: string) {
|
||||
if (selectedPage.value?.id === id) return
|
||||
loadingContent.value = true
|
||||
try {
|
||||
const data = await $api(`/api/wiki/${id}`, { method: 'GET' })
|
||||
selectedPage.value = data
|
||||
} catch (e) {
|
||||
toast.add({ title: 'Fehler beim Laden', color: 'red' })
|
||||
} finally {
|
||||
loadingContent.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function triggerSave() {
|
||||
if (saveTimeout) clearTimeout(saveTimeout)
|
||||
isSaving.value = true
|
||||
saveTimeout = setTimeout(async () => {
|
||||
if (!selectedPage.value) return
|
||||
try {
|
||||
await $api(`/api/wiki/${selectedPage.value.id}`, {
|
||||
method: 'PATCH',
|
||||
body: {
|
||||
title: selectedPage.value.title,
|
||||
content: selectedPage.value.content
|
||||
}
|
||||
})
|
||||
const item = pages.value.find(p => p.id === selectedPage.value.id)
|
||||
if (item) item.title = selectedPage.value.title
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
} finally {
|
||||
isSaving.value = false
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
function onInputTitle() {
|
||||
triggerSave()
|
||||
}
|
||||
|
||||
watch(() => selectedPage.value?.content, (newVal, oldVal) => {
|
||||
if (newVal && oldVal && !loadingContent.value) triggerSave()
|
||||
}, { deep: true })
|
||||
|
||||
async function createPage() {
|
||||
if (!newTitle.value) return
|
||||
isCreating.value = true
|
||||
try {
|
||||
const res = await $api('/api/wiki', {
|
||||
method: 'POST',
|
||||
body: { title: newTitle.value, parentId: null, isFolder: false, ...getParams() }
|
||||
})
|
||||
await fetchList()
|
||||
newTitle.value = ''
|
||||
isCreateModalOpen.value = false
|
||||
await selectPage(res.id)
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
} finally {
|
||||
isCreating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteCurrentPage() {
|
||||
if(!confirm('Löschen?')) return
|
||||
await $api(`/api/wiki/${selectedPage.value.id}`, { method: 'DELETE' })
|
||||
selectedPage.value = null
|
||||
fetchList()
|
||||
}
|
||||
|
||||
onMounted(fetchList)
|
||||
watch(() => [props.entityId, props.entityUuid], fetchList)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: #ddd; border-radius: 4px; }
|
||||
</style>
|
||||
@@ -857,6 +857,8 @@ export const useDataStore = defineStore('data', () => {
|
||||
label: "Aufgaben"
|
||||
},{
|
||||
label: "Dateien"
|
||||
},{
|
||||
label: "Wiki"
|
||||
}]
|
||||
},
|
||||
products: {
|
||||
@@ -975,7 +977,9 @@ export const useDataStore = defineStore('data', () => {
|
||||
],
|
||||
showTabs: [
|
||||
{
|
||||
label: "Informationen"
|
||||
label: "Informationen",
|
||||
},{
|
||||
label: "Wiki",
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user