updated listing view limit in v0.2.2 (#88)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Graham Steffaniak <graham.steffaniak@autodesk.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

frontend/src/views/files/Listing.vue

@@ -217,7 +217,6 @@
 </style>
 
 <script>
-import Vue from "vue";
 import { mapState, mapGetters, mapMutations } from "vuex";
 import { files as api } from "@/api";
 import * as upload from "@/utils/upload";
@@ -236,11 +235,9 @@ export default {
   data: function () {
     return {
       sortField: "name",
-      showLimit: 5000, // new directory limit
       columnWidth: 280,
       dragCounter: 0,
       width: window.innerWidth,
-      itemWeight: 0,
     };
   },
   computed: {
@@ -273,14 +270,10 @@ export default {
       return { dirs, files };
     },
     dirs() {
-      return this.items.dirs.slice(0, this.showLimit);
+      return this.items.dirs;
     },
     files() {
-      let showLimit = this.showLimit - this.items.dirs.length;
+      return this.items.files;
-
-      if (showLimit < 0) showLimit = 0;
-
-      return this.items.files.slice(0, showLimit);
     },
     nameIcon() {
       if (this.nameSorted && !this.ascOrdered) {
@@ -330,29 +323,13 @@ export default {
   },
   watch: {
     req: function () {
-      // Reset the show value
-      this.showLimit = 50;
-
       // Ensures that the listing is displayed
-      Vue.nextTick(() => {
-        // How much every listing item affects the window height
-        this.setItemWeight();
-
-        // Fill and fit the window with listing items
-        this.fillWindow(true);
-      });
     },
   },
   mounted: function () {
     // Check the columns size for the first time.
     this.colunmsResize();
 
-    // How much every listing item affects the window height
-    this.setItemWeight();
-
-    // Fill and fit the window with listing items
-    this.fillWindow(true);
-
     // Add the needed event listeners to the window and document.
     window.addEventListener("keydown", this.keyEvent);
     window.addEventListener("scroll", this.scrollEvent);
@@ -551,25 +528,6 @@ export default {
       if (columns === 0) columns = 1;
       items.style.width = `calc(${100 / columns}% - 1em)`;
     },
-    scrollEvent: throttle(function () {
-      const totalItems = this.req.numDirs + this.req.numFiles;
-
-      // All items are displayed
-      if (this.showLimit >= totalItems) return;
-
-      const currentPos = window.innerHeight + window.scrollY;
-
-      // Trigger at the 75% of the window height
-      const triggerPos = document.body.offsetHeight - window.innerHeight * 0.25;
-
-      if (currentPos > triggerPos) {
-        // Quantity of items needed to fill 2x of the window height
-        const showQuantity = Math.ceil((window.innerHeight * 2) / this.itemWeight);
-
-        // Increase the number of displayed items
-        this.showLimit += showQuantity;
-      }
-    }, 100),
     dragEnter() {
       this.dragCounter++;
 
@@ -708,11 +666,6 @@ export default {
       // Listing element is not displayed
       if (this.$refs.listing == null) return;
 
-      // How much every listing item affects the window height
-      this.setItemWeight();
-
-      // Fill but not fit the window
-      this.fillWindow();
     }, 100),
     download() {
       if (this.selectedCount === 1 && !this.req.items[this.selected[0]].isDir) {
@@ -748,33 +701,6 @@ export default {
         document.getElementById("upload-input").click();
       }
     },
-    setItemWeight() {
-      // Listing element is not displayed
-      if (this.$refs.listing == null) return;
-
-      let itemQuantity = this.req.numDirs + this.req.numFiles;
-      if (itemQuantity > this.showLimit) itemQuantity = this.showLimit;
-
-      // How much every listing item affects the window height
-      this.itemWeight = this.$refs.listing.offsetHeight / itemQuantity;
-    },
-    fillWindow(fit = false) {
-      const totalItems = this.req.numDirs + this.req.numFiles;
-
-      // More items are displayed than the total
-      if (this.showLimit >= totalItems && !fit) return;
-
-      const windowHeight = window.innerHeight;
-
-      // Quantity of items needed to fill 2x of the window height
-      const showQuantity = Math.ceil((windowHeight + windowHeight * 2) / this.itemWeight);
-
-      // Less items to display than current
-      if (this.showLimit > showQuantity && !fit) return;
-
-      // Set the number of displayed items
-      this.showLimit = showQuantity > totalItems ? totalItems : showQuantity;
-    },
   },
 };
 </script>