From 4d3138694466b2c9f271fadeb6725350176b6c45 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Mon, 7 Apr 2025 10:56:13 +0200
Subject: [PATCH] fix(front): upload quota

---
 front/src/utils/filters.ts                  |   2 +-
 front/src/views/content/libraries/Home.vue  |  19 +-
 front/src/views/content/libraries/Quota.vue | 339 ++++++++++++--------
 3 files changed, 212 insertions(+), 148 deletions(-)

diff --git a/front/src/utils/filters.ts b/front/src/utils/filters.ts
index 90520b5b5..d0771b81a 100644
--- a/front/src/utils/filters.ts
+++ b/front/src/utils/filters.ts
@@ -24,7 +24,7 @@ export function humanSize (bytes: number, isSI = true) {
   const threshold = isSI ? 1000 : 1024
 
   if (Math.abs(bytes) < threshold) {
-    return `${bytes} B`
+    return `${Math.floor(bytes)}`
   }
 
   const units = HUMAN_UNITS[isSI ? 'SI' : 'powerOf2']
diff --git a/front/src/views/content/libraries/Home.vue b/front/src/views/content/libraries/Home.vue
index 423a280ec..5fad39c7c 100644
--- a/front/src/views/content/libraries/Home.vue
+++ b/front/src/views/content/libraries/Home.vue
@@ -59,25 +59,8 @@ const libraryCreated = (library: Library) => {
     :h1="t('views.content.libraries.Home.header.libraries')"
     page-header
   >
-    <Alert
-      v-if="libraries.length == 0"
-      yellow
-    >
-      {{ t('views.content.libraries.Home.empty.noLibrary') }}
-      <Button
-        :aria-expanded="!hiddenForm"
-        :icon="hiddenForm ? 'bi-plus' : 'bi-minus'"
-        @click.prevent="hiddenForm = !hiddenForm"
-      >
-        {{ t('views.content.libraries.Home.link.createLibrary') }}
-      </Button>
-    </Alert>
-    <library-form
-      v-if="!hiddenForm"
-      @created="libraryCreated"
-    />
-  </Section>
   <quota />
+</Section>
   <Spacer />
   <Section
     v-if="libraries.length > 0"
diff --git a/front/src/views/content/libraries/Quota.vue b/front/src/views/content/libraries/Quota.vue
index 1cd577dd2..875b24e6d 100644
--- a/front/src/views/content/libraries/Quota.vue
+++ b/front/src/views/content/libraries/Quota.vue
@@ -62,29 +62,22 @@ const purgeErroredFiles = () => purge('errored')
 </script>
 
 <template>
-  <Section
-    :h3="t('views.content.libraries.Quota.header.currentUsage')"
+  <Loader v-if="isLoading" />
+  <Alert
+    data-percent="progress"
+    :green="progress < 60"
+    :yellow="progress >= 60 && progress < 96"
+    :red="progress >= 95"
+    style="width: 100%;"
   >
-    <div
-      v-if="isLoading"
-      :class="['ui', {'active': isLoading}, 'inverted', 'dimmer']"
-    >
-      <div class="ui text loader">
-        {{ t('views.content.libraries.Quota.loading.currentUsage') }}
-      </div>
-    </div>
-    <Alert
-      data-percent="progress"
-      :green="progress < 60"
-      :yellow="progress >= 60 && progress < 96"
-      :red="progress >= 95"
-    >
+    <h3>{{ t('views.content.libraries.Quota.header.currentUsage') }}</h3>
+    <div :class="['ui', {'success': progress < 60}, {'warning': progress >= 60 && progress < 96}, {'error': progress >= 95}, 'progress']">
       <div
         class="bar"
         :style="{width: `${progress}%`}"
       >
         <div class="progress">
-          {{ t('views.content.libraries.Quota.label.percentUsed', {progress: progress}) }}
+          {{ t('views.content.libraries.Quota.label.percentUsed', {progress: humanSize(progress)}) }}
         </div>
       </div>
       <div
@@ -93,123 +86,211 @@ const purgeErroredFiles = () => purge('errored')
       >
         {{ t('views.content.libraries.Quota.label.currentUsage', {max: humanSize(quotaStatus.max * 1000 * 1000), currentAmount: humanSize(quotaStatus.current * 1000 * 1000)}) }}
       </div>
-    </Alert>
-    <Layout
-      v-if="quotaStatus"
-      flex
+    </div>
+  </Alert>
+  <Layout
+    v-if="quotaStatus"
+    flex
+  >
+    <Alert
+      v-if="quotaStatus.pending > 0"
+      yellow
     >
-      <Alert
-        v-if="quotaStatus.pending > 0"
-        yellow
-      >
-        <div class="statistic">
-          <div class="value">
-            {{ humanSize(quotaStatus.pending * 1000 * 1000) }}
-          </div>
-          <div class="label">
-            {{ t('views.content.libraries.Quota.label.pending') }}
-          </div>
+      <div class="statistic">
+        <div class="value">
+          {{ humanSize(quotaStatus.pending * 1000 * 1000) }}
         </div>
-        <Spacer />
-        <Layout flex>
-          <Link
-            primary
-            solid
-            low-height
-            :to="{name: 'content.libraries.files', query: {q: compileTokens([{field: 'status', value: 'pending'}])}}"
-          >
-            {{ t('views.content.libraries.Quota.link.viewFiles') }}
-          </Link>
+        <div class="label">
+          {{ t('views.content.libraries.Quota.label.pending') }}
+        </div>
+      </div>
+      <Spacer />
+      <Layout flex>
+        <Link
+          primary
+          solid
+          low-height
+          :to="{name: 'content.libraries.files', query: {q: compileTokens([{field: 'status', value: 'pending'}])}}"
+        >
+          {{ t('views.content.libraries.Quota.link.viewFiles') }}
+        </Link>
 
-          <dangerous-button
-            low-height
-            :action="purgePendingFiles"
-            :title="t('views.content.libraries.Quota.modal.purgePending.header')"
-          >
+        <dangerous-button
+          low-height
+          :action="purgePendingFiles"
+          :title="t('views.content.libraries.Quota.modal.purgePending.header')"
+        >
+          {{ t('views.content.libraries.Quota.button.purge') }}
+          <template #modal-content>
+            {{ t('views.content.libraries.Quota.modal.purgePending.content.description') }}
+          </template>
+          <template #modal-confirm>
             {{ t('views.content.libraries.Quota.button.purge') }}
-            <template #modal-content>
-              {{ t('views.content.libraries.Quota.modal.purgePending.content.description') }}
-            </template>
-            <template #modal-confirm>
-              {{ t('views.content.libraries.Quota.button.purge') }}
-            </template>
-          </dangerous-button>
-        </Layout>
-      </Alert>
-      <Alert
-        v-if="quotaStatus.skipped > 0"
-        yellow
-      >
-        <div class="ui tiny statistic">
-          <div class="value">
-            {{ humanSize(quotaStatus.skipped * 1000 * 1000) }}
-          </div>
-          <div class="label">
-            {{ t('views.content.libraries.Quota.label.skipped') }}
-          </div>
+          </template>
+        </dangerous-button>
+      </Layout>
+    </Alert>
+    <Alert
+      v-if="quotaStatus.skipped > 0"
+      yellow
+    >
+      <div class="ui tiny statistic">
+        <div class="value">
+          {{ humanSize(quotaStatus.skipped * 1000 * 1000) }}
         </div>
-        <Spacer />
-        <Layout flex>
-          <Link
-            primary
-            solid
-            low-height
-            :to="{name: 'content.libraries.files', query: {q: compileTokens([{field: 'status', value: 'skipped'}])}}"
-          >
-            {{ t('views.content.libraries.Quota.link.viewFiles') }}
-          </Link>
-          <dangerous-button
-            low-height
-            :action="purgeSkippedFiles"
-            :title="t('views.content.libraries.Quota.modal.purgeSkipped.header')"
-          >
-            {{ t('views.content.libraries.Quota.button.purge') }}
-            <template #modal-content>
-              {{ t('views.content.libraries.Quota.modal.purgeSkipped.content.description') }}
-            </template>
-            <template #modal-confirm>
-              {{ t('views.content.libraries.Quota.button.purge') }}
-            </template>
-          </dangerous-button>
-        </Layout>
-      </Alert>
-      <Alert
-        v-if="quotaStatus.errored > 0"
-        red
-      >
-        <div class="ui tiny danger statistic">
-          <div class="value">
-            {{ humanSize(quotaStatus.errored * 1000 * 1000) }}
-          </div>
-          <div class="label">
-            {{ t('views.content.libraries.Quota.label.errored') }}
-          </div>
+        <div class="label">
+          {{ t('views.content.libraries.Quota.label.skipped') }}
         </div>
-        <Spacer />
-        <Layout flex>
-          <Link
-            primary
-            solid
-            low-height
-            :to="{name: 'content.libraries.files', query: {q: compileTokens([{field: 'status', value: 'errored'}])}}"
-          >
-            {{ t('views.content.libraries.Quota.link.viewFiles') }}
-          </Link>
-          <dangerous-button
-            low-height
-            :action="purgeErroredFiles"
-            :title="t('views.content.libraries.Quota.modal.purgeErrored.header')"
-          >
+      </div>
+      <Spacer />
+      <Layout flex>
+        <Link
+          primary
+          solid
+          low-height
+          :to="{name: 'content.libraries.files', query: {q: compileTokens([{field: 'status', value: 'skipped'}])}}"
+        >
+          {{ t('views.content.libraries.Quota.link.viewFiles') }}
+        </Link>
+        <dangerous-button
+          low-height
+          :action="purgeSkippedFiles"
+          :title="t('views.content.libraries.Quota.modal.purgeSkipped.header')"
+        >
+          {{ t('views.content.libraries.Quota.button.purge') }}
+          <template #modal-content>
+            {{ t('views.content.libraries.Quota.modal.purgeSkipped.content.description') }}
+          </template>
+          <template #modal-confirm>
             {{ t('views.content.libraries.Quota.button.purge') }}
-            <template #modal-content>
-              {{ t('views.content.libraries.Quota.modal.purgeErrored.content.description') }}
-            </template>
-            <template #modal-confirm>
-              {{ t('views.content.libraries.Quota.button.purge') }}
-            </template>
-          </dangerous-button>
-        </Layout>
-      </Alert>
-    </Layout>
-  </Section>
+          </template>
+        </dangerous-button>
+      </Layout>
+    </Alert>
+    <Alert
+      v-if="quotaStatus.errored > 0"
+      red
+    >
+      <div class="ui tiny danger statistic">
+        <div class="value">
+          {{ humanSize(quotaStatus.errored * 1000 * 1000) }}
+        </div>
+        <div class="label">
+          {{ t('views.content.libraries.Quota.label.errored') }}
+        </div>
+      </div>
+      <Spacer />
+      <Layout flex>
+        <Link
+          primary
+          solid
+          low-height
+          :to="{name: 'content.libraries.files', query: {q: compileTokens([{field: 'status', value: 'errored'}])}}"
+        >
+          {{ t('views.content.libraries.Quota.link.viewFiles') }}
+        </Link>
+        <dangerous-button
+          low-height
+          :action="purgeErroredFiles"
+          :title="t('views.content.libraries.Quota.modal.purgeErrored.header')"
+        >
+          {{ t('views.content.libraries.Quota.button.purge') }}
+          <template #modal-content>
+            {{ t('views.content.libraries.Quota.modal.purgeErrored.content.description') }}
+          </template>
+          <template #modal-confirm>
+            {{ t('views.content.libraries.Quota.button.purge') }}
+          </template>
+        </dangerous-button>
+      </Layout>
+    </Alert>
+  </Layout>
 </template>
+
+<style lang="scss" scoped>
+.ui.progress {
+    position: relative;
+    display: -webkit-box;
+    display: flex;
+    width: 100%;
+    height: 20px;
+    border: none;
+    margin: 1em 0 2.5em;
+    box-shadow: none;
+    background: rgba(0,0,0,.1);
+    padding: 0;
+    border-radius: .28571429rem
+}
+
+.ui.progress .bar {
+    display: block;
+    line-height: 1;
+    position: relative;
+    width: 0;
+    min-width: 2em;
+    background: #888;
+    border-radius: .28571429rem;
+    -webkit-transition: width .1s ease,background-color .1s ease;
+    transition: width .1s ease,background-color .1s ease;
+    overflow: hidden
+}
+
+.ui.progress .bar>.progress {
+    white-space: nowrap;
+    position: absolute;
+    width: auto;
+    font-size: .92857143em;
+    top: 50%;
+    right: .5em;
+    left: auto;
+    bottom: auto;
+    color: var(--background-color);
+    text-shadow: none;
+    margin-top: -.5em;
+    font-weight: 700;
+    text-align: left
+}
+
+.ui.progress>.label {
+    position: absolute;
+    width: 100%;
+    font-size: 1em;
+    top: 100%;
+    right: auto;
+    left: 0;
+    bottom: auto;
+    font-weight: 700;
+    text-shadow: none;
+    margin-top: .2em;
+    text-align: center;
+    -webkit-transition: color .4s ease;
+    transition: color .4s ease
+}
+
+.ui.progress.success .bar {
+    background-color: var(--success-color)
+}
+
+.ui.progress.success .bar,.ui.progress.success .bar:after {
+    -webkit-animation: none;
+    animation: none
+}
+
+.ui.progress.warning .bar {
+    background-color: var(--warning-color)
+}
+
+.ui.progress.warning .bar,.ui.progress.warning .bar:after {
+    -webkit-animation: none;
+    animation: none
+}
+
+.ui.progress.error .bar {
+    background-color: var(--danger-color)
+}
+
+.ui.progress.error .bar,.ui.progress.error .bar:after {
+    -webkit-animation: none;
+    animation: none
+}
+</style>