JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite/vuetify-poc: localize big numbers

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

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

Change-Id: Ia1f6ba781fe0089803717aa0e2a9eb5da6ab2946
This commit is contained in:
Vitalii 2023-09-28 16:10:43 +03:00 committed by Storj Robot
parent 1f400a2750
commit c34202f5e2
3 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/satellite/vuetify-poc/src/components/dialogs/BucketDetailsDialog.vue
View File

@ -12,7 +12,7 @@
<v-card rounded="xlg"> <v-card rounded="xlg">
<v-card-item class="py-4 pl-7"> <v-card-item class="py-4 pl-7">
<template #prepend> <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> </template>
<v-card-title class="font-weight-bold"> <v-card-title class="font-weight-bold">
@ -34,7 +34,7 @@
<v-card-item class="pl-7"> <v-card-item class="pl-7">
<template #prepend> <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> </template>
<h4>Name</h4> <h4>Name</h4>
@ -43,25 +43,25 @@
<v-card-item class="pl-7"> <v-card-item class="pl-7">
<template #prepend> <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> </template>
<h4>Objects</h4> <h4>Objects</h4>
<p>{{ bucket.objectCount }}</p> <p>{{ bucket.objectCount.toLocaleString() }}</p>
</v-card-item> </v-card-item>
<v-card-item class="pl-7"> <v-card-item class="pl-7">
<template #prepend> <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> </template>
<h4>Segments</h4> <h4>Segments</h4>
<p>{{ bucket.segmentCount }}</p> <p>{{ bucket.segmentCount.toLocaleString() }}</p>
</v-card-item> </v-card-item>
<v-card-item class="pl-7"> <v-card-item class="pl-7">
<template #prepend> <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> </template>
<h4>Date Created</h4> <h4>Date Created</h4>
@ -70,7 +70,7 @@
<v-card-item class="mb-4 pl-7"> <v-card-item class="mb-4 pl-7">
<template #prepend> <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> </template>
<h4>Last Updated</h4> <h4>Last Updated</h4>

2
web/satellite/vuetify-poc/src/components/dialogs/EditProjectLimitDialog.vue
View File

@ -224,7 +224,7 @@ const availableUsage = computed<number>(() => {
* Returns the maximum amount of active measurement units that the usage limit can be set to. * Returns the maximum amount of active measurement units that the usage limit can be set to.
*/ */
const availableUsageFormatted = computed<string>(() => { 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);
}); });
/** /**

2
web/satellite/vuetify-poc/src/views/Dashboard.vue
View File

@ -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)" /> <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>
<v-col cols="12" md="6"> <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>
<v-col cols="12" md="6"> <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="" /> <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="" />