From 34bcd7dfc8ce593d072e100e386547dc8295c0d4 Mon Sep 17 00:00:00 2001
From: Laurynas Gadliauskas <laurynas.gadliauskas@hostinger.com>
Date: Tue, 27 Jul 2021 09:42:03 +0300
Subject: [PATCH] feat: add directory size calculation (#16)

* feat: add directory size calculation

* feat: add dir disk usage button

* feat: add dir size button
---
 frontend/src/components/files/ListingItem.vue | 27 +++++++++++-
 frontend/src/components/prompts/Upload.vue    |  4 +-
 frontend/src/i18n/en_GB.json                  |  3 ++
 frontend/src/store/index.js                   |  1 +
 frontend/src/store/mutations.js               | 10 +++++
 frontend/src/views/files/Listing.vue          | 42 +++++++++++++++++++
 6 files changed, 83 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/files/ListingItem.vue b/frontend/src/components/files/ListingItem.vue
index 9b2f367e..7c6c9f57 100644
--- a/frontend/src/components/files/ListingItem.vue
+++ b/frontend/src/components/files/ListingItem.vue
@@ -36,7 +36,14 @@
       </p>
       <p v-else class="name">{{ name }}</p>
 
-      <p v-if="isDir" class="size" data-order="-1">&mdash;</p>
+      <p v-if="isDir && !diskUsage" class="size" data-order="-1">&mdash;</p>
+      <p
+        v-else-if="isDir && diskUsage"
+        class="size"
+        :data-order="humanDiskUsage()"
+      >
+        {{ humanDiskUsage() }}
+      </p>
       <p v-else class="size" :data-order="humanSize()">{{ humanSize() }}</p>
 
       <p class="modified">
@@ -61,6 +68,7 @@ export default {
   name: "item",
   data: function () {
     return {
+      diskUsage: null,
       touches: 0,
     };
   },
@@ -78,7 +86,7 @@ export default {
     "readOnly",
   ],
   computed: {
-    ...mapState(["user", "selected", "req", "jwt"]),
+    ...mapState(["user", "selected", "req", "jwt", "diskUsages"]),
     ...mapGetters(["selectedCount"]),
     singleClick() {
       return this.readOnly == undefined && this.user.singleClick;
@@ -119,8 +127,14 @@ export default {
       return enableThumbs;
     },
   },
+  watch: {
+    diskUsages() {
+      this.fetchDiskUsage();
+    },
+  },
   mounted() {
     this.$refs.item.addEventListener("contextmenu", this.contextMenu);
+    this.fetchDiskUsage();
   },
   beforeDestroy() {
     this.$refs.item.removeEventListener("contextmenu", this.contextMenu);
@@ -133,6 +147,12 @@ export default {
       "showContextMenu",
       "hideContextMenu",
     ]),
+    fetchDiskUsage() {
+      if (this.isDir) {
+        this.diskUsage =
+          this.diskUsages[this.req.items[this.index].path] || null;
+      }
+    },
     permissions() {
       let s = "";
       if (this.isSymlink) {
@@ -153,6 +173,9 @@ export default {
       s += (this.mode & 1) != 0 ? "x" : "-";
       return s;
     },
+    humanDiskUsage: function () {
+      return filesize(this.diskUsage);
+    },
     humanSize: function () {
       return filesize(this.size);
     },
diff --git a/frontend/src/components/prompts/Upload.vue b/frontend/src/components/prompts/Upload.vue
index d1b9fa4d..2192bd8b 100644
--- a/frontend/src/components/prompts/Upload.vue
+++ b/frontend/src/components/prompts/Upload.vue
@@ -11,11 +11,11 @@
     <div class="card-action full">
       <div @click="uploadFile" class="action">
         <i class="material-icons">insert_drive_file</i>
-        <div class="title">File</div>
+        <div class="title">{{ $t("prompts.uploadFile") }}</div>
       </div>
       <div @click="uploadFolder" class="action">
         <i class="material-icons">folder</i>
-        <div class="title">Folder</div>
+        <div class="title">{{ $t("prompts.uploadFolder") }}</div>
       </div>
     </div>
   </div>
diff --git a/frontend/src/i18n/en_GB.json b/frontend/src/i18n/en_GB.json
index ce0e1341..a9e78f32 100644
--- a/frontend/src/i18n/en_GB.json
+++ b/frontend/src/i18n/en_GB.json
@@ -9,6 +9,7 @@
     "create": "Create",
     "delete": "Delete",
     "download": "Download",
+    "directorySizes": "Calculate directory sizes",
     "hideDotfiles": "Hide dotfiles",
     "info": "Info",
     "more": "More",
@@ -170,6 +171,8 @@
     "unsavedChanges": "Changes that you made may not be saved. Leave page?",
     "upload": "Upload",
     "uploadMessage": "Select an option to upload.",
+    "uploadFile": "File",
+    "uploadFolder": "Folder",
     "write": "Write"
   },
   "search": {
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 6c9e5dc8..21647ff0 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -25,6 +25,7 @@ const state = {
   showShell: false,
   showConfirm: null,
   contextMenu: null,
+  diskUsages: {},
 };
 
 export default new Vuex.Store({
diff --git a/frontend/src/store/mutations.js b/frontend/src/store/mutations.js
index 3d252744..2c77e8c8 100644
--- a/frontend/src/store/mutations.js
+++ b/frontend/src/store/mutations.js
@@ -91,6 +91,16 @@ const mutations = {
   hideContextMenu: (state) => {
     state.contextMenu = null;
   },
+  addDiskUsage: (state, value) => {
+    if (value.path[value.path.length - 1] == "/") {
+      value.path = value.path.slice(0, -1);
+    }
+
+    let tmp = state.diskUsages;
+    state.diskUsages = null;
+    tmp[value.path] = value.usage;
+    state.diskUsages = tmp;
+  },
 };
 
 export default mutations;
diff --git a/frontend/src/views/files/Listing.vue b/frontend/src/views/files/Listing.vue
index d0a3ea58..de18ddd5 100644
--- a/frontend/src/views/files/Listing.vue
+++ b/frontend/src/views/files/Listing.vue
@@ -92,6 +92,12 @@
           :label="$t('buttons.upload')"
           @action="upload"
         />
+        <action
+          icon="assessment"
+          id="dir_size-button"
+          :label="$t('buttons.directorySizes')"
+          @action="calculateDirSizes"
+        />
         <action icon="info" :label="$t('buttons.info')" show="info" />
         <action
           icon="check_circle"
@@ -293,6 +299,7 @@ import { enableExec } from "@/utils/constants";
 import * as upload from "@/utils/upload";
 import css from "@/utils/css";
 import throttle from "lodash.throttle";
+import buttons from "@/utils/buttons";
 
 import HeaderBar from "@/components/header/HeaderBar";
 import Action from "@/components/header/Action";
@@ -838,6 +845,41 @@ export default {
         },
       });
     },
+    calculateDirSizes() {
+      let links = [];
+
+      if (this.selectedCount === 0) {
+        for (let item of this.req.items) {
+          if (item.isDir) {
+            links.push(item.url);
+          }
+        }
+      } else {
+        for (let selected of this.selected) {
+          if (this.req.items[selected].isDir) {
+            links.push(this.req.items[selected].url);
+          }
+        }
+      }
+
+      let promises = [];
+      for (let link of links) {
+        promises.push(api.diskUsage(link));
+      }
+
+      buttons.loading("dir_size");
+      Promise.allSettled(promises).then((results) => {
+        for (let result of results) {
+          if (result.status === "fulfilled") {
+            this.$store.commit("addDiskUsage", {
+              path: result.value.path,
+              usage: result.value.diskUsage,
+            });
+          }
+        }
+        buttons.success("dir_size");
+      });
+    },
     switchView: async function () {
       this.$store.commit("closeHovers");