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

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

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>

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": {

frontend/src/store/index.js

@@ -25,6 +25,7 @@ const state = {
   showShell: false,
   showConfirm: null,
   contextMenu: null,
+  diskUsages: {},
 };
 
 export default new Vuex.Store({

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;

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