feat: dispatch quota fetch events

frontend/src/components/Quota.vue

@@ -1,14 +1,20 @@
 <template>
   <div id="quota">
     <div>
-      <label>{{ $t("sidebar.quota.space") }}</label>
-      <div class="bar" :title="spaceUsageTitle">
+      <div class="label">
+        <span>{{ $t("sidebar.quota.space") }}</span>
+        <span v-if="loaded" class="metric">{{ spaceUsageTitle }}</span>
+      </div>
+      <div class="bar" :title="spaceProgress + '%'">
         <div class="progress" :style="{ width: spaceProgress + '%' }"></div>
       </div>
     </div>
     <div>
-      <label>{{ $t("sidebar.quota.inodes") }}</label>
-      <div class="bar" :title="inodeUsageTitle">
+      <div class="label">
+        <span>{{ $t("sidebar.quota.inodes") }}</span>
+        <span v-if="loaded" class="metric">{{ inodeUsageTitle }}</span>
+      </div>
+      <div class="bar" :title="inodeProgress + '%'">
         <div class="progress" :style="{ width: inodeProgress + '%' }"></div>
       </div>
     </div>
@@ -64,6 +70,7 @@ export default {
   methods: {
     progress(metric) {
       let prc = (metric.usage / metric.quota) * 100;
+      prc = Math.round((prc + Number.EPSILON) * 100) / 100;
       return Math.min(prc, 100);
     },
   },

frontend/src/components/prompts/Archive.vue

@@ -84,6 +84,7 @@ export default {
       } finally {
         buttons.done("archive");
       }
+      this.$store.dispatch("quota/fetch", 3000);
     },
   },
 };

frontend/src/components/prompts/Copy.vue

@@ -86,7 +86,7 @@ export default {
       if (this.$route.path === this.dest) {
         this.$store.commit("closeHovers");
         action(false, true);
-
+        this.$store.dispatch("quota/fetch", 3000);
         return;
       }
 
@@ -106,6 +106,7 @@ export default {
             event.preventDefault();
             this.$store.commit("closeHovers");
             action(overwrite, rename);
+            this.$store.dispatch("quota/fetch", 3000);
           },
         });
 
@@ -113,6 +114,7 @@ export default {
       }
 
       action(overwrite, rename);
+      this.$store.dispatch("quota/fetch", 3000);
     },
   },
 };

frontend/src/components/prompts/Delete.vue

@@ -100,6 +100,7 @@ export default {
         await Promise.all(promises);
         buttons.success("delete");
         this.$store.commit("setReload", true);
+        this.$store.dispatch("quota/fetch", 3000);
       } catch (e) {
         buttons.done("delete");
         this.$showError(e);

frontend/src/components/prompts/NewDir.vue

@@ -74,6 +74,7 @@ export default {
       }
 
       this.$store.commit("closeHovers");
+      this.$store.dispatch("quota/fetch", 3000);
     },
   },
 };

frontend/src/components/prompts/NewFile.vue

@@ -74,6 +74,7 @@ export default {
       }
 
       this.$store.commit("closeHovers");
+      this.$store.dispatch("quota/fetch", 3000);
     },
   },
 };

frontend/src/components/prompts/Unarchive.vue

@@ -73,6 +73,7 @@ export default {
       } finally {
         buttons.done("unarchive");
       }
+      this.$store.dispatch("quota/fetch", 3000);
     },
   },
 };

frontend/src/css/base.css

@@ -153,10 +153,14 @@ main {
   margin-top: .5em;
 }
 
-#quota label {
+#quota .label {
   color: #546E7A;
 }
 
+#quota .label .metric {
+  float: right;
+}
+
 #quota .bar {
   width: 100%;
   height: 10px;

frontend/src/store/modules/quota.js

@@ -13,19 +13,21 @@ const mutations = {
 };
 
 const actions = {
-  fetch: async (context) => {
-    try {
-      let data = await api.getQuota();
-      if (
-        data !== null &&
-        data.inodes != undefined &&
-        data.space != undefined
-      ) {
-        context.commit("setQuota", data);
+  fetch: async (context, delay = 0) => {
+    setTimeout(async () => {
+      try {
+        let data = await api.getQuota();
+        if (
+          data !== null &&
+          data.inodes != undefined &&
+          data.space != undefined
+        ) {
+          context.commit("setQuota", data);
+        }
+      } catch (e) {
+        console.log(e);
       }
-    } catch (e) {
-      console.log(e);
-    }
+    }, delay);
   },
 };