From 564825f3a8337ae6dbb886208f05f79727ad2e93 Mon Sep 17 00:00:00 2001
From: Salem Yaslem <s@sy.sa>
Date: Sat, 3 Jun 2023 06:59:17 +0300
Subject: [PATCH] fix click on file

---
 app.vue                      |  2 +-
 components/tree-view.vue     | 31 +++++++++++++++----------------
 composables/files-manager.ts |  4 ++--
 3 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/app.vue b/app.vue
index ceed2cf..585b989 100644
--- a/app.vue
+++ b/app.vue
@@ -54,7 +54,7 @@ onUnmounted(() => {
 
 watchEffect(() => {
   const file = filesManager.getFile(selectedPath.value);
-  filesGridList.value = file?.isFolder ? file.content : [];
+  filesGridList.value = file?.content;
 
   selectedList.value = [];
   for (const selectedElement of document.querySelectorAll(".selectable.selected")) {
diff --git a/components/tree-view.vue b/components/tree-view.vue
index 7d3ca22..5fe11c5 100644
--- a/components/tree-view.vue
+++ b/components/tree-view.vue
@@ -2,35 +2,34 @@
 import { CompressedFile } from 'libarchive.js/src/compressed-file';
 
 interface Props {
-    filesList: (File | CompressedFile) & { name: string, path: string, toggle: Boolean, isFolder: Boolean, content: any, active: boolean } [],
+    filesList: (File | CompressedFile) & { name: string, path: string, toggle: Boolean, isFolder: Boolean, content: any, active: boolean }[],
     nav: boolean
 }
 
-let {filesList, nav} = defineProps<Props>()
+let { filesList, nav } = defineProps<Props>()
 let selectedPath = useSelectedPath();
 
 </script>
 <template>
     <v-list :selected="[selectedPath]" density="compact" :nav="nav">
         <template v-for="file in filesList" :key="file.path">
-            <v-list-item active-color="light-blue-darken-4" :active=file.active :title="file.name" :subtitle="file.path" :value="file.path"
-                @click="() =>{
+            <v-list-item active-color="light-blue-darken-4" :active=file.active :title="file.name" :subtitle="file.path"
+                :value="file.path" @click="() => {
                     selectedPath = file.path;
                     file.toggle = !file.toggle;
                 }">
-                    <template v-slot:prepend>
-                        <v-avatar :color="file.isFolder ? 'light-blue-accent-4' : 'blue-grey-darken-1'">
-                            <v-icon color="white">{{ file.isFolder ? 'mdi-folder' : 'mdi-file' }}</v-icon>
-                        </v-avatar>
-                    </template>
-                    <template v-if="file.isFolder" v-slot:append>
-                        <v-icon>{{ `mdi-chevron-${file.toggle ? 'up' : 'down'}` }}</v-icon>
-                    </template>
-            </v-list-item>
-            <div :style="`background-color: rgba(0,0,0,0.05);${nav ? `border-radius: 4px;` : ''}` ">
-                <template v-if="file.isFolder && file.toggle">
-                    <TreeView :files-list="file.content" :nav="false"></TreeView>
+                <template v-slot:prepend>
+                    <v-avatar :color="file.isFolder ? 'light-blue-accent-4' : 'blue-grey-darken-1'">
+                        <v-icon color="white">{{ file.isFolder ? 'mdi-folder' : 'mdi-file' }}</v-icon>
+                    </v-avatar>
                 </template>
+                <template v-if="file.isFolder" v-slot:append>
+                    <v-icon>{{ `mdi-chevron-${file.toggle ? 'up' : 'down'}` }}</v-icon>
+                </template>
+            </v-list-item>
+            <div v-if="file.isFolder && file.toggle"
+                :style="`background-color: rgba(0,0,0,0.05);${nav ? `border-radius: 4px;` : ''}`">
+                <TreeView :files-list="file.content" :nav="false"></TreeView>
             </div>
         </template>
     </v-list>
diff --git a/composables/files-manager.ts b/composables/files-manager.ts
index d36ce02..ff0e4fa 100644
--- a/composables/files-manager.ts
+++ b/composables/files-manager.ts
@@ -144,7 +144,7 @@ export class FilesManager {
 
         for (const file of (innerList || this.filesList.value)) {
             if (file.path == path) {
-                file.content = file.content.sort((a:any, b:any) => {
+                file.content = file.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;
@@ -157,7 +157,7 @@ export class FilesManager {
             }
 
             if (file.isFolder && path.includes(file.path)) {
-                let recursiveFile = this.getFile(path, file.content);
+                const recursiveFile = this.getFile(path, file.content);
                 if (recursiveFile) {
                     return recursiveFile;
                 }