380 lines
11 KiB
Vue
380 lines
11 KiB
Vue
<template>
|
|
<div class="h-full min-h-[420px]">
|
|
<DocumentTreePanel
|
|
:tree="tree"
|
|
:loading="loading"
|
|
:selected-id="selectedId"
|
|
v-model:search-term="searchTerm"
|
|
:creating-label="creatingLabel"
|
|
:can-create="canCreate"
|
|
:members="members"
|
|
@select="selectDocument"
|
|
@create="openCreate"
|
|
/>
|
|
</div>
|
|
|
|
<DocumentViewerModal
|
|
:visible="viewerVisible"
|
|
:doc="doc"
|
|
:model-value="contentModel"
|
|
:editing="editing"
|
|
:save-state="saveState"
|
|
:can-edit="canEdit"
|
|
:can-delete="canDelete"
|
|
@update:visible="onViewerClose"
|
|
@update:model-value="onContentChange"
|
|
@edit="startEdit"
|
|
@cancel-edit="cancelEdit"
|
|
@save="onSave"
|
|
@rename="openRename"
|
|
@move="openMove"
|
|
@delete="confirmDelete"
|
|
/>
|
|
|
|
<Dialog v-model:visible="createDialog" :header="`New ${createType}`" :modal="true" style="width: min(480px, 92vw)">
|
|
<div class="field">
|
|
<label>Path</label>
|
|
<InputText v-model.trim="createPath" class="w-full font-mono" placeholder="/folder/file.md" @keyup.enter="onCreate" />
|
|
<small class="muted-note">Folders in the path will be created if they don't exist.</small>
|
|
</div>
|
|
<div class="field">
|
|
<label>Name</label>
|
|
<InputText v-model.trim="createTitle" class="w-full" autofocus @keyup.enter="onCreate" />
|
|
</div>
|
|
<template #footer>
|
|
<Button label="Cancel" severity="secondary" text @click="createDialog = false" />
|
|
<Button label="Create" :loading="creating" @click="onCreate" />
|
|
</template>
|
|
</Dialog>
|
|
|
|
<Dialog v-model:visible="renameDialog" header="Rename" :modal="true" style="width: min(420px, 92vw)">
|
|
<div class="field">
|
|
<label>Title</label>
|
|
<InputText v-model.trim="renameTitle" class="w-full" @keyup.enter="onRename" />
|
|
</div>
|
|
<template #footer>
|
|
<Button label="Cancel" severity="secondary" text @click="renameDialog = false" />
|
|
<Button label="Save" @click="onRename" />
|
|
</template>
|
|
</Dialog>
|
|
|
|
<Dialog v-model:visible="moveDialog" header="Move to Folder" :modal="true" style="width: min(440px, 92vw)">
|
|
<Select
|
|
v-model="moveTarget"
|
|
:options="folderOptions"
|
|
optionLabel="label"
|
|
optionValue="value"
|
|
placeholder="Root"
|
|
class="w-full"
|
|
/>
|
|
<template #footer>
|
|
<Button label="Cancel" severity="secondary" text @click="moveDialog = false" />
|
|
<Button label="Move" @click="onMove" />
|
|
</template>
|
|
</Dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import DocumentTreePanel from '../../components/DocumentTreePanel.vue'
|
|
import DocumentViewerModal from '../../components/DocumentViewerModal.vue'
|
|
import {
|
|
getDocumentTree,
|
|
getDocument,
|
|
createDocument,
|
|
updateDocument,
|
|
moveDocument,
|
|
deleteDocument,
|
|
searchDocuments,
|
|
} from '../../services/modules'
|
|
import { getMembers } from '../../services/backend'
|
|
import { errorMessage } from '../../services/api'
|
|
import { useAuthStore } from '../../stores/auth'
|
|
import type { DocumentItem, DocumentNode, DocumentType, ProjectMember } from '../../types'
|
|
|
|
const route = useRoute()
|
|
const toast = useToast()
|
|
const confirm = useConfirm()
|
|
const auth = useAuthStore()
|
|
|
|
const projectId = ref(String(route.params.id))
|
|
const tree = ref<DocumentNode[]>([])
|
|
const loading = ref(false)
|
|
const selectedId = ref<string | null>(null)
|
|
const doc = ref<DocumentItem | null>(null)
|
|
const contentModel = ref('')
|
|
const saveState = ref<'idle' | 'saving' | 'saved'>('idle')
|
|
const editing = ref(false)
|
|
const viewerVisible = ref(false)
|
|
|
|
const members = ref<ProjectMember[]>([])
|
|
|
|
const searchTerm = ref('')
|
|
const searchMode = ref(false)
|
|
|
|
const createDialog = ref(false)
|
|
const createType = ref<DocumentType>('Document')
|
|
const createTitle = ref('')
|
|
const createPath = ref('/')
|
|
const creating = ref(false)
|
|
const renameDialog = ref(false)
|
|
const renameTitle = ref('')
|
|
const moveDialog = ref(false)
|
|
const moveTarget = ref<string | null>(null)
|
|
|
|
let searchTimer: ReturnType<typeof setTimeout> | undefined
|
|
|
|
const currentMember = computed(() => members.value.find((m) => m.userId === auth.user?.id))
|
|
const canCreate = computed(() => currentMember.value?.canCreateDocuments ?? false)
|
|
const canEdit = computed(() => currentMember.value?.canEditDocuments ?? false)
|
|
const canDelete = computed(() => currentMember.value?.canDeleteDocuments ?? false)
|
|
|
|
const creatingLabel = computed(() =>
|
|
doc.value?.type === 'Folder' ? `New items go inside "${doc.value.title}"` : 'New items are created at the root',
|
|
)
|
|
|
|
const folderOptions = computed(() => {
|
|
const folders: { label: string; value: string }[] = []
|
|
function walk(nodes: DocumentNode[], prefix: string) {
|
|
for (const node of nodes) {
|
|
if (node.type === 'Folder') {
|
|
const label = prefix + node.title
|
|
folders.push({ label, value: node.id })
|
|
walk(node.children, label + '/')
|
|
}
|
|
}
|
|
}
|
|
walk(tree.value, '')
|
|
return folders
|
|
})
|
|
|
|
async function loadTree() {
|
|
try {
|
|
tree.value = searchMode.value ? await searchDocuments(searchTerm.value) : await getDocumentTree(projectId.value)
|
|
} catch (e) {
|
|
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
|
}
|
|
}
|
|
|
|
async function loadMembers() {
|
|
try {
|
|
const res = await getMembers(projectId.value, 1, 100)
|
|
members.value = res.items
|
|
} catch (e) {
|
|
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
|
}
|
|
}
|
|
|
|
watch(searchTerm, () => {
|
|
clearTimeout(searchTimer)
|
|
searchTimer = setTimeout(async () => {
|
|
searchMode.value = !!searchTerm.value
|
|
await loadTree()
|
|
}, 300)
|
|
})
|
|
|
|
async function selectDocument(id: string) {
|
|
selectedId.value = id
|
|
try {
|
|
doc.value = await getDocument(id)
|
|
contentModel.value = doc.value.content ?? ''
|
|
editing.value = false
|
|
saveState.value = 'idle'
|
|
viewerVisible.value = true
|
|
} catch (e) {
|
|
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
|
}
|
|
}
|
|
|
|
function onViewerClose(value: boolean) {
|
|
viewerVisible.value = value
|
|
if (!value) {
|
|
editing.value = false
|
|
}
|
|
}
|
|
|
|
function startEdit() {
|
|
editing.value = true
|
|
saveState.value = 'idle'
|
|
}
|
|
|
|
function cancelEdit() {
|
|
editing.value = false
|
|
contentModel.value = doc.value?.content ?? ''
|
|
saveState.value = 'idle'
|
|
}
|
|
|
|
function onContentChange(value: string) {
|
|
contentModel.value = value
|
|
saveState.value = 'idle'
|
|
}
|
|
|
|
async function onSave() {
|
|
if (!doc.value) return
|
|
saveState.value = 'saving'
|
|
try {
|
|
const updated = await updateDocument(doc.value.id, { title: doc.value.title, content: contentModel.value })
|
|
doc.value = updated
|
|
contentModel.value = updated.content ?? ''
|
|
editing.value = false
|
|
saveState.value = 'saved'
|
|
toast.add({ severity: 'success', summary: 'Saved', life: 2000 })
|
|
await loadTree()
|
|
} catch (e) {
|
|
saveState.value = 'idle'
|
|
toast.add({ severity: 'error', summary: 'Save failed', detail: errorMessage(e), life: 4000 })
|
|
}
|
|
}
|
|
|
|
function openCreate(type: DocumentType) {
|
|
createType.value = type
|
|
createTitle.value = ''
|
|
const currentFolder = doc.value?.type === 'Folder' ? doc.value.title : ''
|
|
createPath.value = currentFolder ? `/${currentFolder}/` : '/'
|
|
createDialog.value = true
|
|
}
|
|
|
|
function findFolderByPath(segments: string[]): string | null {
|
|
let nodes = tree.value
|
|
let parentId: string | null = null
|
|
for (const seg of segments) {
|
|
const folder = nodes.find((n) => n.type === 'Folder' && n.title.toLowerCase() === seg.toLowerCase())
|
|
if (!folder) return parentId
|
|
parentId = folder.id
|
|
nodes = folder.children
|
|
}
|
|
return parentId
|
|
}
|
|
|
|
async function onCreate() {
|
|
if (!createTitle.value) {
|
|
toast.add({ severity: 'warn', summary: 'Title is required', life: 3000 })
|
|
return
|
|
}
|
|
creating.value = true
|
|
try {
|
|
const rawPath = createPath.value.trim()
|
|
const segments = rawPath.split('/').filter(Boolean)
|
|
let parentId = findFolderByPath(segments)
|
|
|
|
// Create missing folders from path
|
|
let nodes = tree.value
|
|
for (const seg of segments) {
|
|
const existing = nodes.find((n) => n.type === 'Folder' && n.title.toLowerCase() === seg.toLowerCase())
|
|
if (existing) {
|
|
nodes = existing.children
|
|
} else {
|
|
const created = await createDocument(projectId.value, {
|
|
title: seg,
|
|
type: 'Folder',
|
|
parentId,
|
|
content: null,
|
|
})
|
|
parentId = created.id
|
|
nodes = []
|
|
}
|
|
}
|
|
|
|
const created = await createDocument(projectId.value, {
|
|
title: createTitle.value,
|
|
type: createType.value,
|
|
parentId,
|
|
content: createType.value === 'Document' ? '' : null,
|
|
})
|
|
createDialog.value = false
|
|
await loadTree()
|
|
if (created.type === 'Document') {
|
|
await selectDocument(created.id)
|
|
}
|
|
} catch (e) {
|
|
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
|
} finally {
|
|
creating.value = false
|
|
}
|
|
}
|
|
|
|
function openRename() {
|
|
if (doc.value) {
|
|
renameTitle.value = doc.value.title
|
|
renameDialog.value = true
|
|
}
|
|
}
|
|
|
|
async function onRename() {
|
|
if (!doc.value || !renameTitle.value) return
|
|
try {
|
|
const updated = await updateDocument(doc.value.id, { title: renameTitle.value, content: doc.value.content })
|
|
doc.value = updated
|
|
renameDialog.value = false
|
|
toast.add({ severity: 'success', summary: 'Renamed', life: 2000 })
|
|
await loadTree()
|
|
} catch (e) {
|
|
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
|
}
|
|
}
|
|
|
|
function openMove() {
|
|
moveTarget.value = doc.value?.parentId ?? null
|
|
moveDialog.value = true
|
|
}
|
|
|
|
async function onMove() {
|
|
if (!doc.value) return
|
|
try {
|
|
await moveDocument(doc.value.id, moveTarget.value)
|
|
moveDialog.value = false
|
|
toast.add({ severity: 'success', summary: 'Moved', life: 2000 })
|
|
await loadTree()
|
|
} catch (e) {
|
|
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
|
}
|
|
}
|
|
|
|
function confirmDelete() {
|
|
if (!doc.value) return
|
|
confirm.require({
|
|
message: `Delete "${doc.value.title}"?`,
|
|
header: 'Delete',
|
|
acceptProps: { severity: 'danger' },
|
|
rejectProps: { severity: 'secondary', outlined: true },
|
|
accept: async () => {
|
|
try {
|
|
await deleteDocument(doc.value!.id)
|
|
doc.value = null
|
|
selectedId.value = null
|
|
viewerVisible.value = false
|
|
toast.add({ severity: 'success', summary: 'Deleted', life: 2000 })
|
|
await loadTree()
|
|
} catch (e) {
|
|
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
|
}
|
|
},
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
loading.value = true
|
|
Promise.all([loadTree(), loadMembers()]).finally(() => {
|
|
loading.value = false
|
|
})
|
|
})
|
|
|
|
watch(
|
|
() => route.params.id,
|
|
async (id) => {
|
|
if (!id) return
|
|
projectId.value = String(id)
|
|
selectedId.value = null
|
|
doc.value = null
|
|
viewerVisible.value = false
|
|
editing.value = false
|
|
searchTerm.value = ''
|
|
searchMode.value = false
|
|
loading.value = true
|
|
try {
|
|
await Promise.all([loadTree(), loadMembers()])
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
},
|
|
)
|
|
</script> |