From 7f4593d2ccdb1f56bb5a0f7fac1ec6bea01e3b21 Mon Sep 17 00:00:00 2001
From: Laurynas Gadliauskas <laurynas.gadliauskas@hostinger.com>
Date: Fri, 11 Jun 2021 16:06:58 +0300
Subject: [PATCH] feat: dispatch quota fetch events

---
 frontend/src/components/Quota.vue             | 15 ++++++++---
 frontend/src/components/prompts/Archive.vue   |  1 +
 frontend/src/components/prompts/Copy.vue      |  4 ++-
 frontend/src/components/prompts/Delete.vue    |  1 +
 frontend/src/components/prompts/NewDir.vue    |  1 +
 frontend/src/components/prompts/NewFile.vue   |  1 +
 frontend/src/components/prompts/Unarchive.vue |  1 +
 frontend/src/css/base.css                     |  6 ++++-
 frontend/src/store/modules/quota.js           | 26 ++++++++++---------
 9 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/Quota.vue b/frontend/src/components/Quota.vue
index 647d1f07..669cf01d 100644
--- a/frontend/src/components/Quota.vue
+++ b/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);
     },
   },
diff --git a/frontend/src/components/prompts/Archive.vue b/frontend/src/components/prompts/Archive.vue
index 810cc3f3..6bf531cc 100644
--- a/frontend/src/components/prompts/Archive.vue
+++ b/frontend/src/components/prompts/Archive.vue
@@ -84,6 +84,7 @@ export default {
       } finally {
         buttons.done("archive");
       }
+      this.$store.dispatch("quota/fetch", 3000);
     },
   },
 };
diff --git a/frontend/src/components/prompts/Copy.vue b/frontend/src/components/prompts/Copy.vue
index 05683a66..94b9a58a 100644
--- a/frontend/src/components/prompts/Copy.vue
+++ b/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);
     },
   },
 };
diff --git a/frontend/src/components/prompts/Delete.vue b/frontend/src/components/prompts/Delete.vue
index 92bff7f6..965d1e6c 100644
--- a/frontend/src/components/prompts/Delete.vue
+++ b/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);
diff --git a/frontend/src/components/prompts/NewDir.vue b/frontend/src/components/prompts/NewDir.vue
index bdcae64a..acd5d57d 100644
--- a/frontend/src/components/prompts/NewDir.vue
+++ b/frontend/src/components/prompts/NewDir.vue
@@ -74,6 +74,7 @@ export default {
       }
 
       this.$store.commit("closeHovers");
+      this.$store.dispatch("quota/fetch", 3000);
     },
   },
 };
diff --git a/frontend/src/components/prompts/NewFile.vue b/frontend/src/components/prompts/NewFile.vue
index 8b6fc582..44536821 100644
--- a/frontend/src/components/prompts/NewFile.vue
+++ b/frontend/src/components/prompts/NewFile.vue
@@ -74,6 +74,7 @@ export default {
       }
 
       this.$store.commit("closeHovers");
+      this.$store.dispatch("quota/fetch", 3000);
     },
   },
 };
diff --git a/frontend/src/components/prompts/Unarchive.vue b/frontend/src/components/prompts/Unarchive.vue
index b00cf8fa..ee957719 100644
--- a/frontend/src/components/prompts/Unarchive.vue
+++ b/frontend/src/components/prompts/Unarchive.vue
@@ -73,6 +73,7 @@ export default {
       } finally {
         buttons.done("unarchive");
       }
+      this.$store.dispatch("quota/fetch", 3000);
     },
   },
 };
diff --git a/frontend/src/css/base.css b/frontend/src/css/base.css
index a3b4bbc0..4a87825a 100644
--- a/frontend/src/css/base.css
+++ b/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;
diff --git a/frontend/src/store/modules/quota.js b/frontend/src/store/modules/quota.js
index 28e66fc1..d1305c2d 100644
--- a/frontend/src/store/modules/quota.js
+++ b/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);
   },
 };