From 93a42b645800680cda7ea2383fefdf62e44c9025 Mon Sep 17 00:00:00 2001
From: Salem Yaslem <s@sy.sa>
Date: Sat, 3 Jun 2023 05:53:52 +0300
Subject: [PATCH] improve the performance and increase 3 dots column a little

---
 app.vue                      |  4 +-
 composables/files-manager.ts | 71 ++++++++++++++++++++++--------------
 2 files changed, 45 insertions(+), 30 deletions(-)

diff --git a/app.vue b/app.vue
index f29d4ec..dd42d22 100644
--- a/app.vue
+++ b/app.vue
@@ -124,11 +124,11 @@ function stepUp(path: string) {
             <v-btn title="Parent Folder" aria-label="Parent Folder" icon="mdi-arrow-up" :disabled="selectedItem == '/'"
               @click="selectedItem = stepUp(selectedItem);"></v-btn>
           </v-col>
-          <v-col cols="11" lg="9" md="11">
+          <v-col cols="10" lg="8" md="10">
             <v-text-field :disabled="!files.length" hide-details title="Location" single-line placeholder="location"
               v-model="selectedItem"></v-text-field>
           </v-col>
-          <v-col cols="1">
+          <v-col cols="2">
             <v-menu>
               <template v-slot:activator="{ props }">
                 <v-btn :disabled="!files.length" title="Menu" aria-label="Menu" icon="mdi-dots-vertical"
diff --git a/composables/files-manager.ts b/composables/files-manager.ts
index ecc93ab..8d6679d 100644
--- a/composables/files-manager.ts
+++ b/composables/files-manager.ts
@@ -59,29 +59,44 @@ export class FilesManager {
 
         // sort unorganized files by depth
         unorganizedFiles = unorganizedFiles.sort((a, b) => {
-            if (a.path.split("/").length > b.path.split("/").length) return -1;
-            if (a.path.split("/").length < b.path.split("/").length) return 1;
+            const aPathArray = a.path.split("/");
+            const bPathArray = b.path.split("/");
+            if (aPathArray.length > bPathArray.length) return -1;
+            if (aPathArray.length < bPathArray.length) return 1;
             return 0;
         });
 
         // sort files and folder inside each folder
+        const pathArrays: any = {};
         for (let file of unorganizedFiles) {
             // get parent folder file
-            let parentFolderFile = unorganizedFiles.find(_file => _file.path == file.path.substring(0, file.path.lastIndexOf("/")));
+            const parentPath = file.path.substring(0, file.path.lastIndexOf("/"));
+            const parentFolderFile = pathArrays[parentPath] || unorganizedFiles.find(_file => _file.path === parentPath);
             if (!parentFolderFile) continue;
 
             // add file to parent folder content
-            parentFolderFile.content!.push(file);
+            if (!parentFolderFile.content) parentFolderFile.content = [];
+            parentFolderFile.content.push(file);
+
+            // cache split path array to avoid calling split() multiple times
+            const pathArray = pathArrays[file.path] || file.path.split("/");
+            pathArrays[file.path] = pathArray;
+
+            parentFolderFile.content = parentFolderFile.content.sort((a:any, b:any) => {
+                // sort by folder and from a to z
+                if (a.isFolder && !b.isFolder) return -1;
+                if (!a.isFolder && b.isFolder) return 1;
+                if (a.name < b.name) return -1;
+                if (a.name > b.name) return 1;
+                return 0;
+            });
         }
 
         // remove folders from root
-        console.log(unorganizedFiles);
-        let files = unorganizedFiles.filter(file => file.path.split("/").length <= 2);
-        console.log(files);
-
+        const files = unorganizedFiles.filter(file => (file.path.match(/\//g) || []).length == 1);
+        console.log({files});
         this.filesList.value = files;
 
-
         return files;
     }
 
@@ -106,26 +121,26 @@ export class FilesManager {
     }
 
     getFile(path: string, innerList = undefined): any {
-      if (path == "/") {
-        return {
-          content: this.filesList.value,
-          isFolder: true,
-        };
-      }
+        if (path == "/") {
+            return {
+                content: this.filesList.value,
+                isFolder: true,
+            };
+        }
 
-      for (const file of (innerList || this.filesList.value)) {
-        if (file.path == path) {
-          return file;
+        for (const file of (innerList || this.filesList.value)) {
+            if (file.path == path) {
+                return file;
+            }
+
+            if (file.isFolder && path.includes(file.path)) {
+                let recursiveFile = this.getFile(path, file.content);
+                if (recursiveFile) {
+                    return recursiveFile;
+                }
+            }
         }
-    
-        if (file.isFolder && path.includes(file.path)) {
-          let recursiveFile = this.getFile(path, file.content);
-          if (recursiveFile) {
-            return recursiveFile;
-          }
-        }
-      }
-    
-      return undefined;
+
+        return undefined;
     }
 }
\ No newline at end of file