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
-    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;
 
-    folderContents.value = contents;
+      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 = 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);
+    // Make API call to create folder
+    const response = await fetch('/api/dms/folder', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(folderData)
+    });
 
-    success(`Successfully created ${creationType.value}: ${newItem.name}`);
-    emit('create-complete', newItem);
+    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);
   }