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

@@ -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
+    // Find the current folder in the tree structure
-    await new Promise(resolve => setTimeout(resolve, 300));
+    let currentContents = [];
+    const pathParts = path.split('/').filter(Boolean);
     
-    // Mock folder contents
+    if (path === '/') {
-    const contents = [
+      // Root level - show top-level folders
-      {
+      currentContents = mockFolderStructure.value.map(folder => ({
-        id: 'c1',
+        id: folder.id,
-        name: 'Annual Report 2024.pdf',
+        name: folder.name,
-        type: 'file',
-        size: '2.4 MB',
-        lastModified: '2024-01-15T10:30:00Z',
-        icon: 'mdi:file-pdf'
-      },
-      {
-        id: 'c2',
-        name: 'Budget Analysis',
         type: 'folder',
-        itemCount: 12,
+        itemCount: folder.itemCount,
-        lastModified: '2024-01-14T15:45:00Z',
+        lastModified: folder.lastModified,
-        icon: 'mdi:folder'
+        icon: folder.icon
-      },
+      }));
-      {
+    } else {
-        id: 'c3',
+      // Navigate to the correct folder in the tree
-        name: 'Meeting Minutes.docx',
+      let currentNode = null;
-        type: 'file',
+      let currentLevel = mockFolderStructure.value;
-        size: '156 KB',
+
-        lastModified: '2024-01-13T09:15:00Z',
+      for (const part of pathParts) {
-        icon: 'mdi:file-word'
+        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 = {
+    // Only proceed if creating a folder/subfolder
-      name: itemName.value.trim(),
+    if (creationType.value !== 'folder' && creationType.value !== 'subfolder') {
-      type: creationType.value,
+      return;
-      path: selectedPath.value,
+    }
-      permissions: accessPermissions.value,
+
-      template: creationType.value === 'document' ? selectedTemplate.value : null
+    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
+    // Make API call to create folder
-    console.log('Creating:', newItem);
+    const response = await fetch('/api/dms/folder', {
-    
+      method: 'POST',
-    success(`Successfully created ${creationType.value}: ${newItem.name}`);
+      headers: {
-    emit('create-complete', newItem);
+        'Content-Type': 'application/json',
-    closeModal();
+      },
+      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);
   }