From 39c9ada2b00c6c9f76ea2410cde8009aa00b18f2 Mon Sep 17 00:00:00 2001
From: Sweet Palma <paul.marlow@ukr.net>
Date: Sun, 10 Dec 2023 18:09:27 +0200
Subject: [PATCH] fix: restore scroll position after closing the preview

---
 frontend/src/store/index.js          |  2 ++
 frontend/src/store/mutations.js      |  6 ++++++
 frontend/src/views/Files.vue         | 19 +++++++++++++++++--
 frontend/src/views/files/Listing.vue | 20 ++++++++++++--------
 frontend/src/views/files/Preview.vue | 12 ++++++++----
 5 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 0a0b9713..2017bd70 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -22,6 +22,8 @@ const state = {
   multiple: false,
   prompts: [],
   showShell: false,
+  scrollPosition: 0,
+  showLimit: 50,
 };
 
 export default new Vuex.Store({
diff --git a/frontend/src/store/mutations.js b/frontend/src/store/mutations.js
index 93eb5d03..0b316c22 100644
--- a/frontend/src/store/mutations.js
+++ b/frontend/src/store/mutations.js
@@ -104,6 +104,12 @@ const mutations = {
   setETA(state, value) {
     state.upload.eta = value;
   },
+  setShowLimit(state, value) {
+    state.showLimit = value;
+  },
+  setScrollPosition(state, value) {
+    state.scrollPosition = value;
+  },
   resetUpload(state) {
     state.upload.uploads = {};
     state.upload.queue = [];
diff --git a/frontend/src/views/Files.vue b/frontend/src/views/Files.vue
index ff7b84a6..2f98d637 100644
--- a/frontend/src/views/Files.vue
+++ b/frontend/src/views/Files.vue
@@ -50,7 +50,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(["req", "reload", "loading"]),
+    ...mapState(["req", "scrollPosition", "reload", "loading"]),
     currentView() {
       if (this.req.type == undefined) {
         return null;
@@ -72,7 +72,22 @@ export default {
     this.fetchData();
   },
   watch: {
-    $route: "fetchData",
+    $route: async function (value) {
+      // Do not fetch data if "cache" query parameter is set
+      if (!this.$route.query.cache) {
+        await this.fetchData();
+        return;
+      }
+
+      // Load previous listing view parameters
+      if (this.currentView === "listing") {
+        const cachedShowLimit = this.$store.state.showLimit;
+        this.$nextTick(() => {
+          this.$store.commit('setShowLimit', cachedShowLimit);
+          this.$nextTick(() => window.scrollTo(0, this.scrollPosition));
+        });
+      }
+    },
     reload: function (value) {
       if (value === true) {
         this.fetchData();
diff --git a/frontend/src/views/files/Listing.vue b/frontend/src/views/files/Listing.vue
index c204de45..b355dc36 100644
--- a/frontend/src/views/files/Listing.vue
+++ b/frontend/src/views/files/Listing.vue
@@ -290,7 +290,6 @@ export default {
   },
   data: function () {
     return {
-      showLimit: 50,
       columnWidth: 280,
       dragCounter: 0,
       width: window.innerWidth,
@@ -298,7 +297,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(["req", "selected", "user", "multiple", "selected", "loading"]),
+    ...mapState(["req", "selected", "showLimit", "user", "multiple", "selected", "loading"]),
     ...mapGetters(["selectedCount", "currentPrompt"]),
     nameSorted() {
       return this.req.sorting.by === "name";
@@ -383,9 +382,7 @@ export default {
   },
   watch: {
     req: function () {
-      // Reset the show value
-      this.showLimit = 50;
-
+      this.$store.commit("setShowLimit", 50);
       // Ensures that the listing is displayed
       Vue.nextTick(() => {
         // How much every listing item affects the window height
@@ -611,9 +608,14 @@ export default {
     scrollEvent: throttle(function () {
       const totalItems = this.req.numDirs + this.req.numFiles;
 
+      // Stop if listing is loading
+      if (this.loading) return;
+
+      // Update store scroll position
+      this.$store.commit("setScrollPosition", window.scrollY);
+
       // All items are displayed
       if (this.showLimit >= totalItems) return;
-
       const currentPos = window.innerHeight + window.scrollY;
 
       // Trigger at the 75% of the window height
@@ -626,7 +628,7 @@ export default {
         );
 
         // Increase the number of displayed items
-        this.showLimit += showQuantity;
+        this.$store.commit('setShowLimit', this.showLimit + showQuantity);
       }
     }, 100),
     dragEnter() {
@@ -884,7 +886,9 @@ export default {
       if (this.showLimit > showQuantity && !fit) return;
 
       // Set the number of displayed items
-      this.showLimit = showQuantity > totalItems ? totalItems : showQuantity;
+      const newShowLimit = showQuantity > totalItems ? totalItems : showQuantity;
+      this.$store.commit('setShowLimit', newShowLimit);
+      
     },
   },
 };
diff --git a/frontend/src/views/files/Preview.vue b/frontend/src/views/files/Preview.vue
index 6422ac5a..64a39ade 100644
--- a/frontend/src/views/files/Preview.vue
+++ b/frontend/src/views/files/Preview.vue
@@ -342,10 +342,14 @@ export default {
       }, 1500);
     }, 500),
     close() {
-      this.$store.commit("updateRequest", {});
-
-      let uri = url.removeLastDir(this.$route.path) + "/";
-      this.$router.push({ path: uri });
+      const uri = url.removeLastDir(this.$route.path) + "/";
+      const hasCachedListing = !!this.oldReq.items;
+      this.$store.commit("updateRequest", this.oldReq);
+      if (hasCachedListing) {
+        this.$router.push({ path: uri, query: { cache: true } });
+      } else {
+        this.$router.push({ path: uri });
+      }
     },
     download() {
       window.open(this.downloadUrl);