From 9e9c6b44a00be13b5c7be22b44b15b6e24af1116 Mon Sep 17 00:00:00 2001 From: shb Date: Thu, 12 Jun 2025 14:54:34 +0800 Subject: [PATCH] Linked frontend logic with backend API Create folder function now properly works to send data to the backend and is reflected in the database. The frontend still displays hierarchy from dummy data. --- components/dms/dialogs/CreateNewDialog.vue | 196 ++++++++++++++++----- 1 file changed, 153 insertions(+), 43 deletions(-) diff --git a/components/dms/dialogs/CreateNewDialog.vue b/components/dms/dialogs/CreateNewDialog.vue index 5dc291c..a725efd 100644 --- a/components/dms/dialogs/CreateNewDialog.vue +++ b/components/dms/dialogs/CreateNewDialog.vue @@ -163,42 +163,130 @@ const navigateToPath = (path) => { loadFolderContents(path); }; +// Convert flat array to tree structure +const convertToTreeStructure = (folders) => { + const folderMap = new Map(); + const tree = []; + + // First pass: create folder objects and store in map + folders.forEach(folder => { + folderMap.set(folder.cb_id, { + id: folder.cb_id, + name: folder.cb_name, + path: '', // We'll build this in the second pass + type: 'folder', + hasChildren: false, + children: [], + lastModified: folder.modified_at, + itemCount: 0, + icon: 'mdi:folder', + // Store original data for API operations + originalData: { + cb_parent_id: folder.cb_parent_id, + cb_sector: folder.cb_sector, + cb_owner: folder.cb_owner, + dp_id: folder.dp_id, + userID: folder.userID + } + }); + }); + + // Second pass: build hierarchy and paths + folders.forEach(folder => { + const folderNode = folderMap.get(folder.cb_id); + + if (folder.cb_parent_id === null) { + // Root level folder + folderNode.path = `/${folder.cb_name}`; + tree.push(folderNode); + } else { + // Has a parent + const parentNode = folderMap.get(folder.cb_parent_id); + if (parentNode) { + parentNode.hasChildren = true; + parentNode.children.push(folderNode); + // Build path by traversing up the tree + let path = `/${folder.cb_name}`; + let currentParent = parentNode; + while (currentParent) { + path = `/${currentParent.name}${path}`; + currentParent = currentParent.originalData.cb_parent_id ? + folderMap.get(currentParent.originalData.cb_parent_id) : + null; + } + folderNode.path = path; + parentNode.itemCount += 1; + } else { + // If parent not found, add to root level + folderNode.path = `/${folder.cb_name}`; + tree.push(folderNode); + } + } + }); + + return tree; +}; + +// Load all folders from API +const loadAllFolders = async () => { + try { + const response = await fetch('/api/dms/folder'); + const data = await response.json(); + + if (data.status === 200) { + // Convert flat array to tree structure + mockFolderStructure.value = convertToTreeStructure(data.folders); + } else { + throw new Error(data.message); + } + } catch (err) { + error('Failed to load folder structure: ' + err.message); + } +}; + +// Modified loadFolderContents to work with the tree structure const loadFolderContents = async (path) => { isLoading.value = true; try { - // Simulate API call - await new Promise(resolve => setTimeout(resolve, 300)); + // Find the current folder in the tree structure + let currentContents = []; + const pathParts = path.split('/').filter(Boolean); - // Mock folder contents - const contents = [ - { - id: 'c1', - name: 'Annual Report 2024.pdf', - type: 'file', - size: '2.4 MB', - lastModified: '2024-01-15T10:30:00Z', - icon: 'mdi:file-pdf' - }, - { - id: 'c2', - name: 'Budget Analysis', + if (path === '/') { + // Root level - show top-level folders + currentContents = mockFolderStructure.value.map(folder => ({ + id: folder.id, + name: folder.name, type: 'folder', - itemCount: 12, - lastModified: '2024-01-14T15:45:00Z', - icon: 'mdi:folder' - }, - { - id: 'c3', - name: 'Meeting Minutes.docx', - type: 'file', - size: '156 KB', - lastModified: '2024-01-13T09:15:00Z', - icon: 'mdi:file-word' + itemCount: folder.itemCount, + lastModified: folder.lastModified, + icon: folder.icon + })); + } else { + // Navigate to the correct folder in the tree + let currentNode = null; + let currentLevel = mockFolderStructure.value; + + for (const part of pathParts) { + currentNode = currentLevel.find(f => f.name === part); + if (!currentNode) break; + currentLevel = currentNode.children; } - ]; + + if (currentNode) { + currentContents = currentNode.children.map(child => ({ + id: child.id, + name: child.name, + type: 'folder', + itemCount: child.itemCount, + lastModified: child.lastModified, + icon: child.icon + })); + } + } - folderContents.value = contents; + folderContents.value = currentContents; } catch (err) { error('Failed to load folder contents'); } finally { @@ -223,22 +311,43 @@ const selectFolder = (folder) => { // Creation process const performCreation = async () => { try { - const newItem = { - name: itemName.value.trim(), - type: creationType.value, - path: selectedPath.value, - permissions: accessPermissions.value, - template: creationType.value === 'document' ? selectedTemplate.value : null + // Only proceed if creating a folder/subfolder + if (creationType.value !== 'folder' && creationType.value !== 'subfolder') { + return; + } + + const folderData = { + cabinet_name: itemName.value.trim(), + cabinet_parent_id: selectedPath.value === '/' ? null : + currentFolder.value?.id || null, + cabinet_owner: null, + cabinet_sector: "ayam", // Using the same sector as example + dp_id: null, + userID: null }; - - // Here you would implement actual creation logic - console.log('Creating:', newItem); - - success(`Successfully created ${creationType.value}: ${newItem.name}`); - emit('create-complete', newItem); - closeModal(); + + // Make API call to create folder + const response = await fetch('/api/dms/folder', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(folderData) + }); + + const result = await response.json(); + + if (result.status === 201) { + // Reload the entire folder structure to get the updated data + await loadAllFolders(); + success(`Successfully created folder: ${folderData.cabinet_name}`); + emit('create-complete', result.folder); + closeModal(); + } else { + throw new Error(result.message); + } } catch (err) { - error('Failed to create item: ' + err.message); + error('Failed to create folder: ' + err.message); } }; @@ -277,7 +386,8 @@ watch(() => props.visible, (visible) => { } }); -onMounted(() => { +onMounted(async () => { + await loadAllFolders(); if (props.visible) { navigateToPath(props.initialPath); }