From 6cb4396f2016d9b5ed07da858485dcd655c73712 Mon Sep 17 00:00:00 2001
From: shb <thebigtree123@gmail.com>
Date: Fri, 13 Jun 2025 11:29:45 +0800
Subject: [PATCH] Adding mapping function to match API data with current
 document structure

The current API endpoint data doesn't match the document structure in the frontend logic. So I introduced a mapping function but it has not been called into the code yet as this needs a major refactoring to do.
---
 dms-api.md          |  3 +-
 pages/dms/index.vue | 80 +++++++++++++++++++++++++++++++++++++++------
 2 files changed, 72 insertions(+), 11 deletions(-)

diff --git a/dms-api.md b/dms-api.md
index e368b72..634f132 100644
--- a/dms-api.md
+++ b/dms-api.md
@@ -78,7 +78,8 @@
   ```json
   {
     "status": 200,
-    "message": "Folder deleted successfully"
+    "message": "Folder deleted successfully",
+    "folder": {...}
   }
   ```
 
diff --git a/pages/dms/index.vue b/pages/dms/index.vue
index 5e51fda..09d4153 100644
--- a/pages/dms/index.vue
+++ b/pages/dms/index.vue
@@ -322,25 +322,78 @@ const getFileTypeColor = (fileName) => {
   return colorMap[extension] || colorMap.default;
 };
 
+const mapAPIToDocumentStructure = async () => {
+  const response = await fetch('/api/dms/folder');
+  const APIData = await response.json();
+
+  // const documentStructure.value = APIData.map(obj => {
+  //   id: obj.cb_id,
+  //   name: obj.cb_name,
+  //   type: obj.cb_type || "folder",
+  //   parent_id: obj.cb_parent_id,
+  //   access_level: obj.cb_access_level || "public",
+  //   itemCount: null,
+  //   children: obj.children_count || null
+  // })
+
+  return documentStructure.value;
+}
+
 // Navigation functions
 const buildBreadcrumbs = (path) => {
   if (path === '/') {
     return [{ name: 'Root', path: '/', type: 'root' }];
   }
   
-  const segments = path.split('/').filter(Boolean);
   const crumbs = [{ name: 'Root', path: '/', type: 'root' }];
+  const segments = path.split('/').filter(Boolean);
   
+  // const documentStructure.value = await mapAPIToDocumentStructure();
+  let itemsToSearch = documentStructure.value;
   let currentPath = '';
-  segments.forEach((segment, index) => {
+
+  for (const segment of segments) {
     currentPath += '/' + segment;
-    const item = findItemByPath(currentPath);
-    crumbs.push({
-      name: item?.name || segment,
-      path: currentPath,
-      type: item?.type || 'folder'
+    const isApiStructure = itemsToSearch.length > 0 && 'cb_id' in itemsToSearch[0];
+
+    // Slugify function to match path segments with names
+    const slugify = (text) => text.toString().toLowerCase()
+      .replace(/\s+/g, '-')
+      .replace(/[^\w-]+/g, '');
+
+    const foundItem = itemsToSearch.find(item => {
+      const itemName = isApiStructure ? item.cabinet_name : item.name;
+      if (!itemName) return false;
+      
+      if (item.path) {
+        // Prefer matching with existing path property
+        return item.path === currentPath;
+      }
+      // Fallback to comparing slugified names
+      return slugify(itemName) === segment;
     });
-  });
+
+    if (foundItem) {
+      const itemName = isApiStructure ? foundItem.cabinet_name : foundItem.name;
+      const itemPath = foundItem.path || currentPath;
+      const itemType = foundItem.type || 'folder';
+      crumbs.push({
+        name: itemName,
+        path: itemPath,
+        type: itemType
+      });
+      itemsToSearch = foundItem.children || [];
+    } else {
+      // If an item is not found in the structure, use the segment as its name
+      // This can happen for paths pointing to files or during transitions
+      crumbs.push({
+        name: segment,
+        path: currentPath,
+        type: 'folder'
+      });
+      itemsToSearch = []; // Stop searching deeper
+    }
+  }
   
   return crumbs;
 };
@@ -434,11 +487,18 @@ const loadFolderContents = async (path) => {
 };
 
 const findItemByPath = (path, items = documentStructure.value) => {
+  // Check if we're using the API-based structure or mock structure
+  const isApiStructure = items.length > 0 && 'cb_id' in items[0];
+  
   for (const item of items) {
-    if (item.path === path) {
+    const itemPath = isApiStructure ? (item.path || ('/' + (item.cabinet_name || '').toString().toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]+/g, ''))) : item.path;
+
+    if (itemPath === path) {
       return item;
     }
-    if (item.children && path.startsWith(item.path)) {
+    
+    // Check children if they exist and path might be inside this subtree
+    if (item.children && path.startsWith(itemPath + (itemPath === '/' ? '' : '/'))) {
       const found = findItemByPath(path, item.children);
       if (found) return found;
     }