Added Entity Wiki
This commit is contained in:
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>
|
||||
Reference in New Issue
Block a user