From 249cc552ec3068ff4849f5558d62ee20271ff30d Mon Sep 17 00:00:00 2001
From: Salem Yaslem <s@sy.sa>
Date: Mon, 4 Nov 2024 13:07:23 +0300
Subject: [PATCH] move folders to folders view; fix some bugs

---
 app.vue                                       | 74 ++---------------
 components/folder-viewer.vue                  | 79 +++++++++++++++++++
 .../{ImageViewer.vue => image-viewer.vue}     |  2 +-
 components/text-editor.vue                    |  2 +-
 composables/worker/7zip-manager.ts            |  3 +-
 5 files changed, 89 insertions(+), 71 deletions(-)
 create mode 100644 components/folder-viewer.vue
 rename components/{ImageViewer.vue => image-viewer.vue} (98%)

diff --git a/app.vue b/app.vue
index 42dab78..39bf2da 100644
--- a/app.vue
+++ b/app.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { getElementInfo } from "moveable";
-import { VueSelecto } from "vue3-selecto";
 import { useDisplay } from 'vuetify/lib/framework.mjs';
 import { HistoryManager } from './composables/history-manager';
 import { FilesManager, supportedExtensions, imageExtensions } from './composables/files-manager';
@@ -66,44 +64,13 @@ watchEffect(async () => {
   const file = filesManager.getFile(selectedPath.value);
   filesGridList.value = file?.content;
 
-  console.log("Selected file", file);
-
-  selectedList.value = [];
-  for (const selectedElement of document.querySelectorAll(".selectable.selected")) {
-    selectedElement.classList.remove("selected");
-  }
-
   // Update to handle both video and image files
   if (videoExtensions.includes(filesManager.getFile(selectedPath.value)?.extension?.toLowerCase()) ||
-      imageExtensions.includes(filesManager.getFile(selectedPath.value)?.extension?.toLowerCase())) {
+    imageExtensions.includes(filesManager.getFile(selectedPath.value)?.extension?.toLowerCase())) {
     mediaBlobUrl.value = await filesManager.getFileBlobUrl(selectedPath.value) as string;
   }
 })
 
-const dragContainer = document.querySelector(".select-area");
-
-function onSelectStart(e: any) {
-  e.added.forEach((el: any) => {
-    el.classList.add("selected");
-    selectedList.value = [...selectedList.value, el?.__vnode?.ctx?.props?.value];
-  });
-  e.removed.forEach((el: any) => {
-    el.classList.remove("selected");
-    selectedList.value = selectedList.value.filter((value: string) => value != el?.__vnode?.ctx?.props?.value)
-  });
-}
-
-function onSelectEnd(e: any) {
-  e.afterAdded.forEach((el: any) => {
-    el.classList.add("selected");
-    selectedList.value = [...selectedList.value, el?.__vnode?.ctx?.props?.value];
-  });
-  e.afterRemoved.forEach((el: any) => {
-    el.classList.remove("selected");
-    selectedList.value = selectedList.value.filter((value: string) => value != el?.__vnode?.ctx?.props?.value)
-  });
-}
-
 // step up from current path
 function stepUp(path: string) {
   const pathArray = path.split("/");
@@ -135,9 +102,8 @@ function stepUp(path: string) {
         </div>
       </v-footer>
     </v-navigation-drawer>
-    <v-main class="select-area" style="height: 100dvh;">
+    <v-main style="height: 100dvh;">
       <v-toolbar class="px-5" height="auto">
-
         <v-row align="center" justify="center">
           <v-col cols="12" lg="2" md="12" style="display: inline-flex;">
             <v-btn title="Back" aria-label="Back" icon="mdi-arrow-left" :disabled="!history.hasUndo.value"
@@ -173,32 +139,7 @@ function stepUp(path: string) {
       </v-toolbar>
       <v-container>
         <template v-if="filesManager.getFile(selectedPath)?.isFolder">
-          <v-list :selected="[selectedPath]" style="height: calc(100vh - 120px);">
-            <v-row no-gutters>
-              <v-col cols="6" lg="2" md="3" sm="6" v-for="file of filesGridList" style="text-align: center;">
-                <v-list-item class="position-relative ma-2 pa-5 selectable" active-color="light-blue-darken-4"
-                  :value="file.path" rounded @click="selectedPath = file.path">
-                  <v-menu v-if="!file.isFolder">
-                    <template v-slot:activator="{ props }">
-                      <v-btn class="position-absolute" style="right: 0; top: 0;" icon="mdi-dots-vertical" variant="text"
-                        v-bind="props"></v-btn>
-                    </template>
-                    <v-list>
-                      <v-list-item title="Download" aria-label="Download" icon="mdi-download"
-                        @click="filesManager.downloadFile(file.path)">
-                        <template v-slot:prepend>
-                          <v-icon icon="mdi-download"></v-icon>
-                        </template>
-                      </v-list-item>
-                    </v-list>
-                  </v-menu>
-
-                  <file-logo class="mb-2" :file="file" :key="file.path" />
-                  <p>{{ file.name }}</p>
-                </v-list-item>
-              </v-col>
-            </v-row>
-          </v-list>
+          <FolderViewer :filesManager="filesManager" :filesGridList="filesGridList" :selectedList="selectedList"></FolderViewer>
         </template>
         <template
           v-if="!filesManager.getFile(selectedPath)?.isFolder && videoExtensions.includes(filesManager.getFile(selectedPath)?.extension)">
@@ -234,17 +175,14 @@ function stepUp(path: string) {
                 </v-card-text>
 
                 <!-- file input -->
-                <v-file-input class="mx-5" v-model="files" :accept="supportedExtensions.map(extension => `.${extension}`).join(',')"
-                  label="or select a file..." variant="outlined"></v-file-input>
+                <v-file-input class="mx-5" v-model="files"
+                  :accept="supportedExtensions.map(extension => `.${extension}`).join(',')" label="or select a file..."
+                  variant="outlined"></v-file-input>
               </v-card>
             </v-col>
           </v-row>
         </template>
       </v-container>
-
-      <VueSelecto :selectableTargets="['.selectable']" :dragContainer="dragContainer" :hitRate="0"
-        :selectFromInside="false" :toggleContinueSelect="'ctrl'" @select="onSelectStart" @selectStart="onSelectStart"
-        :get-element-rect="getElementInfo" @selectEnd="onSelectEnd" :select-by-click="false" />
     </v-main>
     <v-dialog v-model="loadingModel" persistent width="auto">
       <v-card>
diff --git a/components/folder-viewer.vue b/components/folder-viewer.vue
new file mode 100644
index 0000000..a0ab266
--- /dev/null
+++ b/components/folder-viewer.vue
@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import { getElementInfo } from "moveable";
+import { VueSelecto } from "vue3-selecto";
+import { FilesManager } from '~/composables/files-manager';
+import { iFile } from '~/composables/worker/7zip-manager';
+
+interface Props {
+    filesManager: FilesManager;
+    filesGridList: iFile[];
+    selectedList: Ref<string[]>
+};
+
+const { filesManager, filesGridList, selectedList } = defineProps<Props>();
+
+const selectedPath = useSelectedPath();
+
+const dragContainer = document.querySelector(".select-area");
+
+function onSelectStart(e: any) {
+    e.added.forEach((el: any) => {
+        el.classList.add("selected");
+        selectedList.value = [...selectedList.value, el?.__vnode?.ctx?.props?.value];
+    });
+    e.removed.forEach((el: any) => {
+        el.classList.remove("selected");
+        selectedList.value = selectedList.value.filter((value: string) => value != el?.__vnode?.ctx?.props?.value)
+    });
+}
+
+function onSelectEnd(e: any) {
+    e.afterAdded.forEach((el: any) => {
+        el.classList.add("selected");
+        selectedList.value = [...selectedList.value, el?.__vnode?.ctx?.props?.value];
+    });
+    e.afterRemoved.forEach((el: any) => {
+        el.classList.remove("selected");
+        selectedList.value = selectedList.value.filter((value: string) => value != el?.__vnode?.ctx?.props?.value)
+    });
+}
+
+watchEffect(() => {
+    selectedList.value = [];
+    for (const selectedElement of document.querySelectorAll(".selectable.selected")) {
+        selectedElement.classList.remove("selected");
+    }
+})
+</script>
+
+<template>
+    <v-list class="select-area" :selected="[selectedPath]" style="height: calc(100vh - 120px);">
+        <v-row no-gutters>
+            <v-col cols="6" lg="2" md="3" sm="6" v-for="file of filesGridList" style="text-align: center;">
+                <v-list-item class="position-relative ma-2 pa-5 selectable" active-color="light-blue-darken-4"
+                    :value="file.path" rounded @click="selectedPath = file.path">
+                    <v-menu v-if="!file.isFolder">
+                        <template v-slot:activator="{ props }">
+                            <v-btn class="position-absolute" style="right: 0; top: 0;" icon="mdi-dots-vertical"
+                                variant="text" v-bind="props"></v-btn>
+                        </template>
+                        <v-list>
+                            <v-list-item title="Download" aria-label="Download" icon="mdi-download"
+                                @click="filesManager.downloadFile(file.path)">
+                                <template v-slot:prepend>
+                                    <v-icon icon="mdi-download"></v-icon>
+                                </template>
+                            </v-list-item>
+                        </v-list>
+                    </v-menu>
+
+                    <file-logo class="mb-2" :file="file" :key="file.path" />
+                    <p>{{ file.name }}</p>
+                </v-list-item>
+            </v-col>
+        </v-row>
+        <VueSelecto :selectableTargets="['.selectable']" :dragContainer="dragContainer" :hitRate="0"
+        :selectFromInside="false" :toggleContinueSelect="'ctrl'" @select="onSelectStart" @selectStart="onSelectStart"
+        :get-element-rect="getElementInfo" @selectEnd="onSelectEnd" :select-by-click="false" />
+    </v-list>
+</template>
\ No newline at end of file
diff --git a/components/ImageViewer.vue b/components/image-viewer.vue
similarity index 98%
rename from components/ImageViewer.vue
rename to components/image-viewer.vue
index 8a5dc13..40e09f3 100644
--- a/components/ImageViewer.vue
+++ b/components/image-viewer.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 const props = defineProps<{
   src: string;
 }>();
diff --git a/components/text-editor.vue b/components/text-editor.vue
index 6ec7783..67c4fc3 100644
--- a/components/text-editor.vue
+++ b/components/text-editor.vue
@@ -2,7 +2,6 @@
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
 import { ref, onMounted } from 'vue'
 import { FilesManager } from '~/composables/files-manager';
-// @ts-ignore
 import { iFile } from '~/composables/worker/7zip-manager';
 
 interface Props {
@@ -18,6 +17,7 @@ let { file, filesManager } = defineProps<Props>()
 onMounted(async () => {
   const darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
 
+  if(!file) return;
   let fileContent = await filesManager.getFileContent(file.path);
   monaco.editor.create(editor.value, {
     value: fileContent?.toString()!,
diff --git a/composables/worker/7zip-manager.ts b/composables/worker/7zip-manager.ts
index 40f366c..50dba85 100644
--- a/composables/worker/7zip-manager.ts
+++ b/composables/worker/7zip-manager.ts
@@ -166,9 +166,10 @@ export class SevenZipManager {
     async getFileContent(file: iFile, encoding: "utf8" | "binary" = "utf8") {
         if (!this.sevenZip) return;
         file = typeof file === "string" ? JSON.parse(file) : file;
+        if (!file) return;
 
         // extract file from archive
-        this.execute(['x', '-y', this.archiveName, file.path.substring(1)]);
+        this.execute(['x', '-y', this.archiveName, file?.path.substring(1)]);
         this.sevenZip.FS.chmod(file.path, 0o777);
 
         // get file buffer