mws.frontend.vue/src/views/documents/DocumentsView.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 = 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)
  } catch (e) {
    toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
  }
}

async function loadMembers() {
  try {
    const res = await getMembers(projectId, 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, {
          title: seg,
          type: 'Folder',
          parentId,
          content: null,
        })
        parentId = created.id
        nodes = []
      }
    }

    const created = await createDocument(projectId, {
      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
  })
})
</script>