From c34202f5e27b5a43e68bf48e4c91b4a901a98cdd Mon Sep 17 00:00:00 2001
From: Vitalii <takur12345@gmail.com>
Date: Thu, 28 Sep 2023 16:10:43 +0300
Subject: [PATCH] web/satellite/vuetify-poc: localize big numbers

Localized number formatting (e.g. dots, commas, spaces)

Issue:
https://github.com/storj/storj/issues/6335

Change-Id: Ia1f6ba781fe0089803717aa0e2a9eb5da6ab2946
---
 .../components/dialogs/BucketDetailsDialog.vue   | 16 ++++++++--------
 .../dialogs/EditProjectLimitDialog.vue           |  2 +-
 .../vuetify-poc/src/views/Dashboard.vue          |  2 +-
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/web/satellite/vuetify-poc/src/components/dialogs/BucketDetailsDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/BucketDetailsDialog.vue
index 832e2f8d0..369cb428e 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/BucketDetailsDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/BucketDetailsDialog.vue
@@ -12,7 +12,7 @@
         <v-card rounded="xlg">
             <v-card-item class="py-4 pl-7">
                 <template #prepend>
-                    <img class="d-block" src="@/../static/images/buckets/createBucket.svg">
+                    <img class="d-block" src="@/../static/images/buckets/createBucket.svg" alt="bucket">
                 </template>
 
                 <v-card-title class="font-weight-bold">
@@ -34,7 +34,7 @@
 
             <v-card-item class="pl-7">
                 <template #prepend>
-                    <img class="d-block" src="@poc/assets/icon-bookmark-circle.svg">
+                    <img class="d-block" src="@poc/assets/icon-bookmark-circle.svg" alt="bookmark">
                 </template>
 
                 <h4>Name</h4>
@@ -43,25 +43,25 @@
 
             <v-card-item class="pl-7">
                 <template #prepend>
-                    <img class="d-block" src="@poc/assets/icon-file-circle.svg">
+                    <img class="d-block" src="@poc/assets/icon-file-circle.svg" alt="file">
                 </template>
 
                 <h4>Objects</h4>
-                <p>{{ bucket.objectCount }}</p>
+                <p>{{ bucket.objectCount.toLocaleString() }}</p>
             </v-card-item>
 
             <v-card-item class="pl-7">
                 <template #prepend>
-                    <img class="d-block" src="@poc/assets/icon-globe-circle.svg">
+                    <img class="d-block" src="@poc/assets/icon-globe-circle.svg" alt="globe">
                 </template>
 
                 <h4>Segments</h4>
-                <p>{{ bucket.segmentCount }}</p>
+                <p>{{ bucket.segmentCount.toLocaleString() }}</p>
             </v-card-item>
 
             <v-card-item class="pl-7">
                 <template #prepend>
-                    <img class="d-block" src="@poc/assets/icon-calendar-circle.svg">
+                    <img class="d-block" src="@poc/assets/icon-calendar-circle.svg" alt="calendar">
                 </template>
 
                 <h4>Date Created</h4>
@@ -70,7 +70,7 @@
 
             <v-card-item class="mb-4 pl-7">
                 <template #prepend>
-                    <img class="d-block" src="@poc/assets/icon-clock-circle.svg">
+                    <img class="d-block" src="@poc/assets/icon-clock-circle.svg" alt="clock">
                 </template>
 
                 <h4>Last Updated</h4>
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/EditProjectLimitDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/EditProjectLimitDialog.vue
index 97424c2be..06a0c727a 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/EditProjectLimitDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/EditProjectLimitDialog.vue
@@ -224,7 +224,7 @@ const availableUsage = computed<number>(() => {
  * Returns the maximum amount of active measurement units that the usage limit can be set to.
  */
 const availableUsageFormatted = computed<string>(() => {
-    return decimalShift((availableUsage.value / Memory[activeMeasurement.value]).toFixed(2), 0);
+    return decimalShift((availableUsage.value / Memory[activeMeasurement.value]).toLocaleString(undefined, { maximumFractionDigits: 2 }), 0);
 });
 
 /**
diff --git a/web/satellite/vuetify-poc/src/views/Dashboard.vue b/web/satellite/vuetify-poc/src/views/Dashboard.vue
index 48fd78e74..e9739d92f 100644
--- a/web/satellite/vuetify-poc/src/views/Dashboard.vue
+++ b/web/satellite/vuetify-poc/src/views/Dashboard.vue
@@ -74,7 +74,7 @@
                 <UsageProgressComponent icon="arrow-down" title="Download" :progress="egressUsedPercent" :used="`${usedLimitFormatted(limits.bandwidthUsed)} Used`" :limit="`Limit: ${usedLimitFormatted(limits.bandwidthLimit)}`" :available="`${usedLimitFormatted(availableEgress)} Available`" cta="Need more?" @cta-click="onNeedMoreClicked(LimitToChange.Bandwidth)" />
             </v-col>
             <v-col cols="12" md="6">
-                <UsageProgressComponent icon="globe" title="Segments" :progress="segmentUsedPercent" :used="`${limits.segmentUsed} Used`" :limit="`Limit: ${limits.segmentLimit}`" :available="`${availableSegment} Available`" cta="Learn more" />
+                <UsageProgressComponent icon="globe" title="Segments" :progress="segmentUsedPercent" :used="`${limits.segmentUsed.toLocaleString()} Used`" :limit="`Limit: ${limits.segmentLimit.toLocaleString()}`" :available="`${availableSegment.toLocaleString()} Available`" cta="Learn more" />
             </v-col>
             <v-col cols="12" md="6">
                 <UsageProgressComponent v-if="billingStore.state.coupon" icon="check" :title="billingStore.state.coupon.name" :progress="couponProgress" :used="`${usedLimitFormatted(limits.storageUsed + limits.bandwidthUsed)} Used`" :limit="`Limit: ${couponValue}`" :available="`${couponRemainingPercent}% Available`" cta="" />