From a30eff90a6accdbc085598155f9ba1fa1cc17207 Mon Sep 17 00:00:00 2001
From: Salem Yaslem <s@sy.sa>
Date: Mon, 29 May 2023 19:51:08 +0300
Subject: [PATCH] add history buttons and navigator

---
 app.vue                         | 63 ++++++++++++++++-----------
 composables/history-switcher.ts | 75 +++++++++++++++++++++++++++++++++
 package-lock.json               |  6 +++
 package.json                    |  1 +
 4 files changed, 120 insertions(+), 25 deletions(-)
 create mode 100644 composables/history-switcher.ts

diff --git a/app.vue b/app.vue
index 1819aea..07b0d47 100644
--- a/app.vue
+++ b/app.vue
@@ -17,7 +17,8 @@ let files = ref([]);
 let filesList = ref<any>([]);
 let selectedItem = useSelectedItem();
 let filesGridList = ref<any>([])
-let selectedList = ref<any>([])
+let selectedList = ref<any>([]);
+let history = new HistorySwitcher(selectedItem);
 
 watchEffect(async () => {
   if (files.value?.[0]) {
@@ -47,7 +48,7 @@ watchEffect(async () => {
 })
 
 function onDrop(e: any) {
-  if(!e.dataTransfer.files.length) return;
+  if (!e.dataTransfer.files.length) return;
   files.value = e.dataTransfer.files;
   selectedItem.value = '/';
 }
@@ -102,11 +103,6 @@ watchEffect(() => {
   }
 })
 
-watchEffect(() => {
-  console.log(selectedList.value)
-})
-
-
 let dragContainer = document.querySelector(".select-area");
 
 function onSelectStart(e: any) {
@@ -131,6 +127,16 @@ function onSelectEnd(e: any) {
   });
 }
 
+// step up from current path
+function stepUp(path: string) {
+  let pathArray = path.split("/");
+  if(path.endsWith("/")) {
+    pathArray.pop();
+  }
+  pathArray.pop();
+  return (pathArray.join("/") || "")+ "/";
+}
+
 </script>
 <template>
   <v-layout @drop.prevent="onDrop">
@@ -147,16 +153,30 @@ function onSelectEnd(e: any) {
       <TreeView :filesList="filesList" :nav=true></TreeView>
     </v-navigation-drawer>
     <v-main class="select-area" style="height: 100vh;">
-      <v-toolbar class="px-5" density="comfortable">
-        <v-text-field hide-details single-line placeholder="location" v-model="selectedItem"></v-text-field>
+      <v-toolbar class="px-5" height="auto">
+
+        <v-row align="center" justify="center">
+          <v-col cols="12" lg="2" md="12">
+            <v-btn title="Back" aria-label="Back" icon="mdi-arrow-left" :disabled="!history.hasUndo.value"
+              @click="history.undo()"></v-btn>
+            <v-btn title="Forward" aria-label="Forward" icon="mdi-arrow-right" :disabled="!history.hasRedo.value"
+              @click="history.redo()"></v-btn>
+            <v-btn title="Refresh" aria-label="Refresh" icon="mdi-refresh" @click="history.refresh()"></v-btn>
+            <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="12" lg="10" md="12">
+            <v-text-field hide-details single-line placeholder="location" v-model="selectedItem"></v-text-field>
+          </v-col>
+        </v-row>
       </v-toolbar>
       <template v-if="selectedItem.endsWith('/')">
         <v-container>
           <v-list :selected="[selectedItem]">
             <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="ma-2 pa-5 selectable" active-color="light-blue-darken-4" :value="file.path"
-                  rounded @click="() => {
+                <v-list-item class="ma-2 pa-5 selectable" active-color="light-blue-darken-4" :value="file.path" rounded
+                  @click="() => {
                     selectedItem = file.path;
                   }">
                   <v-avatar class="mb-2" :color="file.isFolder ? 'light-blue-accent-4' : 'blue-grey-darken-1'">
@@ -169,11 +189,11 @@ function onSelectEnd(e: any) {
           </v-list>
         </v-container>
       </template>
-      
+
       <VueSelecto :selectableTargets="['.selectable']" :dragContainer="dragContainer" :hitRate="20"
         :selectFromInside="false" :toggleContinueSelect="'ctrl'" @select="onSelectStart" @selectStart="onSelectStart"
         :get-element-rect="getElementInfo" @selectEnd="onSelectEnd" />
-        
+
       <template v-if="!files.length">
         <!-- tutorial drag and drop zipped file here and review it securely -->
         <v-container fill-height fluid>
@@ -188,26 +208,19 @@ function onSelectEnd(e: any) {
                 </v-card-text>
 
                 <!-- file input -->
-                <v-file-input class="mx-5" v-model="files" accept=".zip,.7z,.rar,.tar.bz2,.tar.gz,.tar.xz" label="or select a file..." variant="outlined"></v-file-input>
+                <v-file-input class="mx-5" v-model="files" accept=".zip,.7z,.rar,.tar.bz2,.tar.gz,.tar.xz"
+                  label="or select a file..." variant="outlined"></v-file-input>
               </v-card>
             </v-col>
           </v-row>
-        </v-container>        
+        </v-container>
       </template>
     </v-main>
-    <v-dialog
-      v-model="loadingModel"
-      persistent
-      width="auto"
-    >
+    <v-dialog v-model="loadingModel" persistent width="auto">
       <v-card>
         <v-card-text>
           Please stand by
-          <v-progress-linear
-            indeterminate
-            color="light-blue-darken-1"
-            class="mb-0"
-          ></v-progress-linear>
+          <v-progress-linear indeterminate color="light-blue-darken-1" class="mb-0"></v-progress-linear>
         </v-card-text>
       </v-card>
     </v-dialog>
diff --git a/composables/history-switcher.ts b/composables/history-switcher.ts
new file mode 100644
index 0000000..2cd9d9a
--- /dev/null
+++ b/composables/history-switcher.ts
@@ -0,0 +1,75 @@
+// class to manage undo and redo history
+export class HistorySwitcher {
+    // path to the current file
+    public path: Ref<String>
+    // history of paths
+    history: Ref<String[]>
+    // index of the current path in the history
+    index: Ref<number>
+
+    public readonly hasUndo: ComputedRef<boolean> = computed(() => this.index.value !== 0);
+    public readonly hasRedo: ComputedRef<boolean> = computed(() => this.index.value !== this.history.value.length - 1);
+    
+    // constructor
+    constructor(path: Ref<String>) {
+        this.path = path
+        this.history = ref([path.value])
+        this.index = ref(0);
+
+        watchEffect(() => {
+            this.add(path.value)
+        })
+    }
+
+    // add a new path to the history
+    add(path: String) {
+        // if the path is the same as the previous path, do nothing
+        if (path === this.history.value[this.index.value]) return
+
+        // if the path is the same as the last path in the history, do nothing
+        if (path === this.history.value[this.history.value.length - 1]) return
+        // if the index is not at the end of the history, remove all paths after the index
+        if (this.index.value !== this.history.value.length - 1) {
+            this.history.value.splice(this.index.value + 1)
+        }
+        // add the path to the history
+        this.history.value.push(path)
+        // move the index forward one
+        this.index.value++
+    }
+
+    // undo the last action
+    undo() {
+        // if the index is 0, do nothing
+        if (this.index.value === 0) return
+        // move the index back one
+        this.index.value--
+        // set the path to the path at the index
+        this.path.value = this.history.value[this.index.value]
+    }
+
+    // can undo the last action
+    canUndo() {
+        // return true if the index is not 0
+        return this.index.value !== 0
+    }
+    
+    // redo the last action
+    redo() {
+        // if the index is at the end of the history, do nothing
+        if (this.index.value === this.history.value.length - 1) return
+        // move the index forward one
+        this.index.value++
+        // set the path to the path at the index
+        this.path.value = this.history.value[this.index.value]
+    }
+
+    canRedo() {
+        // return true if the index is not at the end of the history
+        return this.index.value !== this.history.value.length - 1
+    }
+
+    refresh() {
+        this.path.value = this.history.value[this.index.value]
+    }
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 7be4e51..bd20907 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "moveable": "^0.47.7",
         "sass": "^1.62.1",
         "selecto": "^1.22.3",
+        "stateshot": "^1.3.5",
         "uuid": "^9.0.0",
         "vue3-selecto": "^1.8.4",
         "vuetify": "^3.2.4"
@@ -7324,6 +7325,11 @@
       "integrity": "sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==",
       "dev": true
     },
+    "node_modules/stateshot": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/stateshot/-/stateshot-1.3.5.tgz",
+      "integrity": "sha512-A/I230vCzTBDHAc2wzCXrH3ofcNnMd9Cs/HhRrxjWJ1YI90cOklljX9XATTdU45T4W/c/+g+jBtS/oQLs+Wkdw=="
+    },
     "node_modules/statuses": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
diff --git a/package.json b/package.json
index 4b1985a..8f50b6d 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "moveable": "^0.47.7",
     "sass": "^1.62.1",
     "selecto": "^1.22.3",
+    "stateshot": "^1.3.5",
     "uuid": "^9.0.0",
     "vue3-selecto": "^1.8.4",
     "vuetify": "^3.2.4"