fix: restore scroll position after closing the preview

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({

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 = [];

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();

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);
+      
     },
   },
 };

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);