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

web/satellite: migrate vue filters

Browse Source 
This change removes vue filters declared in main.ts and replaces them
with exported functions in utils/strings.ts. This is toward migration
to Vue 3; it has no support for filters.

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

Change-Id: I0f0e73f5a4ba3300cd8804b083b18c05e614fa8c
This commit is contained in:
Wilfred Asomani 2023-04-26 13:00:50 +00:00
parent b4ac006462
commit 774ac50528
10 changed files with 42 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/satellite/src/components/account/billing/billingTabs/BillingHistoryItem.vue
View File

@ -14,7 +14,7 @@
<span>{{ item.formattedStatus }}</span>
</p>
<p class="array-val">
{{ item.amount | centsToDollars }}
{{ centsToDollars(item.amount) }}
</p>
</div>
</th>
@ -33,7 +33,7 @@
</th>
<th class="align-left data tablet-laptop">
<p>
{{ item.amount | centsToDollars }}
{{ centsToDollars(item.amount) }}
</p>
</th>
<th class="align-left data tablet-laptop">
@ -46,6 +46,7 @@
<script setup lang="ts">
import { Fragment as VFragment } from 'vue-fragment';
import { centsToDollars } from '@/utils/strings';
import { PaymentsHistoryItem, PaymentsHistoryItemStatus } from '@/types/payments';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';

5
web/satellite/src/components/account/billing/billingTabs/Overview.vue
View File

@ -11,7 +11,7 @@
<div class="total-cost__card-container">
<div class="total-cost__card">
<EstimatedChargesIcon class="total-cost__card__main-icon" />
<p class="total-cost__card__money-text">{{ priceSummary | centsToDollars }}</p>
<p class="total-cost__card__money-text">{{ centsToDollars(priceSummary) }}</p>
<p class="total-cost__card__label-text">
Total Estimated Charges
<img
@ -36,7 +36,7 @@
</div>
<div class="total-cost__card">
<AvailableBalanceIcon class="total-cost__card__main-icon" />
<p class="total-cost__card__money-text">${{ balance.coins }}</p>
<p class="total-cost__card__money-text">{{ balance.formattedCoins }}</p>
<p class="total-cost__card__label-text">STORJ Token Balance</p>
<p
class="total-cost__card__link-text"
@ -91,6 +91,7 @@
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { centsToDollars } from '@/utils/strings';
import { RouteConfig } from '@/router';
import { SHORT_MONTHS_NAMES } from '@/utils/constants/date';
import { AccountBalance } from '@/types/payments';

10
web/satellite/src/components/account/billing/billingTabs/UsageAndChargesItem.vue
View File

@ -12,7 +12,7 @@
Estimated Total &nbsp;
<span
class="usage-charges-item-container__summary__amount"
>{{ projectCharges.getProjectPrice(projectId) | centsToDollars }}
>{{ centsToDollars(projectCharges.getProjectPrice(projectId)) }}
</span>
</span>
</div>
@ -46,9 +46,9 @@
<p>{{ getSegmentCountFormatted(charge) }} Segment-month</p>
</div>
<div class="usage-charges-item-container__detailed-info-container__content-area__cost-container">
<p class="price">{{ charge.storagePrice | centsToDollars }}</p>
<p class="price">{{ charge.egressPrice | centsToDollars }}</p>
<p class="price">{{ charge.segmentPrice | centsToDollars }}</p>
<p class="price">{{ centsToDollars(charge.storagePrice) }}</p>
<p class="price">{{ centsToDollars(charge.egressPrice) }}</p>
<p class="price">{{ centsToDollars(charge.segmentPrice) }}</p>
</div>
</div>
</div>
@ -59,11 +59,11 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { centsToDollars, decimalShift, formatPrice, CENTS_MB_TO_DOLLARS_GB_SHIFT } from '@/utils/strings';
import { ProjectCharge, ProjectCharges, ProjectUsagePriceModel } from '@/types/payments';
import { Project } from '@/types/projects';
import { Size } from '@/utils/bytesSize';
import { SHORT_MONTHS_NAMES } from '@/utils/constants/date';
import { decimalShift, formatPrice, CENTS_MB_TO_DOLLARS_GB_SHIFT } from '@/utils/strings';
import { useBillingStore } from '@/store/modules/billingStore';
import { useProjectsStore } from '@/store/modules/projectsStore';

3
web/satellite/src/components/modals/LimitWarningModal.vue
View File

@ -7,7 +7,7 @@
<div class="modal">
<Icon class="modal__icon" :class="{ warning: severity === 'warning', critical: severity === 'critical' }" />
<h1 class="modal__title">{{ title }}</h1>
<p class="modal__info">To get more {{ limitType }} limit, upgrade to a Pro Account. You will still get {{ limits.storageLimit | bytesToBase10String }} free storage and bandwidth per month, and only pay what you use beyond that.</p>
<p class="modal__info">To get more {{ limitType }} limit, upgrade to a Pro Account. You will still get {{ bytesToBase10String(limits.storageUsed) }} free storage and bandwidth per month, and only pay what you use beyond that.</p>
<div class="modal__buttons">
<VButton
label="Cancel"
@ -38,6 +38,7 @@ import { computed } from 'vue';
import { ProjectLimits } from '@/types/projects';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { bytesToBase10String } from '@/utils/strings';
import VButton from '@/components/common/VButton.vue';
import VModal from '@/components/common/VModal.vue';

3
web/satellite/src/components/notifications/UpgradeNotification.vue
View File

@ -7,7 +7,7 @@
<SunnyIcon class="notification-wrap__left__icon" />
<p>
Ready to upgrade? Upload up to 75TB and pay what you use only, no minimum.
{{ limits.bandwidthLimit | bytesToBase10String }} free included.
{{ bytesToBase10String(limits.bandwidthLimit) }} free included.
</p>
</div>
<div class="notification-wrap__right">
@ -20,6 +20,7 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { bytesToBase10String } from '@/utils/strings';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { AnalyticsHttpApi } from '@/api/analytics';
import { ProjectLimits } from '@/types/projects';

5
web/satellite/src/components/project/dashboard/DashboardFunctionalHeader.vue
View File

@ -44,9 +44,9 @@
</p>
<p class="dashboard-header__limits">
<span class="dashboard-header__limits--bold">Storage Limit</span>
per month: {{ limits.storageLimit | bytesToBase10String }} |
per month: {{ bytesToBase10String(limits.storageLimit) }} |
<span class="dashboard-header__limits--bold">Bandwidth Limit</span>
per month: {{ limits.bandwidthLimit | bytesToBase10String }}
per month: {{ bytesToBase10String(limits.bandwidthLimit) }}
</p>
<VButton
label="Upload"
@ -71,6 +71,7 @@ import { LocalData } from '@/utils/localData';
import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { bytesToBase10String } from '@/utils/strings';
import VButton from '@/components/common/VButton.vue';
import VLoader from '@/components/common/VLoader.vue';

3
web/satellite/src/components/project/dashboard/ProjectDashboard.vue
View File

@ -107,7 +107,7 @@
<InfoContainer
title="Billing"
:subtitle="status"
:value="estimatedCharges | centsToDollars"
:value="centsToDollars(estimatedCharges)"
:is-data-fetching="isDataFetching"
>
<template #side-value>
@ -170,6 +170,7 @@ import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { useConfigStore } from '@/store/modules/configStore';
import { centsToDollars } from '@/utils/strings';
import VLoader from '@/components/common/VLoader.vue';
import InfoContainer from '@/components/project/dashboard/InfoContainer.vue';

21
web/satellite/src/main.ts
View File

@ -69,27 +69,6 @@ Vue.directive('number', {
},
});
/**
* centsToDollars is a Vue filter that converts amount of cents in dollars string.
*/
Vue.filter('centsToDollars', (cents: number): string => {
return `$${(cents / 100).toFixed(2)}`;
});
/**
* Converts bytes to base-10 types.
*/
Vue.filter('bytesToBase10String', (amountInBytes: number): string => {
return `${Size.toBase10String(amountInBytes)}`;
});
/**
* Adds leading zero to number if it is less than 10.
*/
Vue.filter('leadingZero', (value: number): string => {
return value <= 9 ? `0${value}` : `${value}`;
});
new Vue({
router,
pinia,

4
web/satellite/src/types/payments.ts
View File

@ -145,6 +145,10 @@ export class AccountBalance {
return formatPrice(decimalShift(this._credits, 2));
}
public get formattedCoins(): string {
return formatPrice(this._coins);
}
public get sum(): number {
return this.freeCredits + this.coins;
}

18
web/satellite/src/utils/strings.ts
View File

@ -1,6 +1,8 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
import { Size } from '@/utils/bytesSize';
/**
* CENTS_MB_TO_DOLLARS_GB_SHIFT constant represents how many places to the left
* a decimal point must be shifted to convert from cents/MB to dollars/GB.
@ -78,3 +80,19 @@ export function formatPrice(decimal: string) {
return sign + '$' + (int || '0') + (frac ? '.' + frac : '');
}
/**
* centsToDollars formats amounts in cents as dollars.
* @param cents - the cent value
*/
export function centsToDollars(cents: number) {
return formatPrice(decimalShift(cents.toString(), 2));
}
/**
* bytesToBase10String Converts bytes to base-10 types.
* @param amountInBytes
*/
export function bytesToBase10String(amountInBytes: number) {
return Size.toBase10String(amountInBytes);
}