From 8b1b7d7aa247a7e9421a8d83fcd88e865e52313c Mon Sep 17 00:00:00 2001
From: Salem Yaslem <s@sy.sa>
Date: Mon, 4 Nov 2024 14:18:19 +0300
Subject: [PATCH] add download for binary files

---
 app.vue                                  |  6 +++---
 components/{ => media}/binary-viewer.vue | 22 ++++++++++++++++++++++
 components/{ => media}/image-viewer.vue  |  0
 components/{ => media}/text-editor.vue   |  0
 4 files changed, 25 insertions(+), 3 deletions(-)
 rename components/{ => media}/binary-viewer.vue (88%)
 rename components/{ => media}/image-viewer.vue (100%)
 rename components/{ => media}/text-editor.vue (100%)

diff --git a/app.vue b/app.vue
index 39bf2da..56142e8 100644
--- a/app.vue
+++ b/app.vue
@@ -147,15 +147,15 @@ function stepUp(path: string) {
         </template>
         <template
           v-if="!filesManager.getFile(selectedPath)?.isFolder && imageExtensions.includes(filesManager.getFile(selectedPath)?.extension)">
-          <ImageViewer :src="mediaBlobUrl"></ImageViewer>
+          <MediaImageViewer :src="mediaBlobUrl"></MediaImageViewer>
         </template>
         <template
           v-if="!filesManager.getFile(selectedPath)?.isFolder && files.length && !imageExtensions.includes(filesManager.getFile(selectedPath)?.extension) && !videoExtensions.includes(filesManager.getFile(selectedPath)?.extension) && !binaryExtensions.includes(filesManager.getFile(selectedPath)?.extension)">
-          <TextEditor :file="filesManager.getFile(selectedPath)" :filesManager="filesManager"></TextEditor>
+          <MediaTextEditor :file="filesManager.getFile(selectedPath)" :filesManager="filesManager"></MediaTextEditor>
         </template>
         <template
           v-if="!filesManager.getFile(selectedPath)?.isFolder && files.length && binaryExtensions.includes(filesManager.getFile(selectedPath)?.extension)">
-          <BinaryViewer :file="filesManager.getFile(selectedPath)" :filesManager="filesManager"></BinaryViewer>
+          <MediaBinaryViewer :file="filesManager.getFile(selectedPath)" :filesManager="filesManager"></MediaBinaryViewer>
         </template>
         <template v-if="!files.length">
           <!-- tutorial drag and drop zipped file here and review it securely -->
diff --git a/components/binary-viewer.vue b/components/media/binary-viewer.vue
similarity index 88%
rename from components/binary-viewer.vue
rename to components/media/binary-viewer.vue
index 364e27b..de3755b 100644
--- a/components/binary-viewer.vue
+++ b/components/media/binary-viewer.vue
@@ -2,6 +2,7 @@
 import { ref, onMounted, computed } from 'vue'
 import { FilesManager } from '~/composables/files-manager';
 import { iFile } from '~/composables/worker/7zip-manager';
+import { VBtn } from 'vuetify/components';
 
 interface Props {
   file: iFile,
@@ -54,6 +55,10 @@ function updateVisibleRows() {
   }
 }
 
+function downloadBinaryFile() {
+  filesManager.downloadFile(file.path);
+}
+
 onMounted(async () => {
   try {
     buffer.value = await filesManager.getFileContent(file.path, "binary") as Uint8Array
@@ -67,6 +72,17 @@ onMounted(async () => {
 
 <template>
   <div class="binary-viewer">
+    <div class="toolbar">
+      <v-btn
+        color="primary"
+        variant="flat"
+        prepend-icon="mdi-download"
+        @click="downloadBinaryFile"
+        size="small"
+      >
+        Download {{ file.name }}
+      </v-btn>
+    </div>
     <div v-if="isLoading" class="loading">
       Loading...
     </div>
@@ -141,4 +157,10 @@ onMounted(async () => {
   align-items: center;
   height: 100%;
 }
+
+.toolbar {
+  margin-bottom: 1rem;
+  display: flex;
+  justify-content: flex-end;
+}
 </style>
diff --git a/components/image-viewer.vue b/components/media/image-viewer.vue
similarity index 100%
rename from components/image-viewer.vue
rename to components/media/image-viewer.vue
diff --git a/components/text-editor.vue b/components/media/text-editor.vue
similarity index 100%
rename from components/text-editor.vue
rename to components/media/text-editor.vue