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

web/satellite/vuetify-poc: download total usage report

Browse Source 
Added CTA to billing -> overview screen for user to download total usage report

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

Change-Id: I465c955486e6fa9bf922d56798b2338c4bd2d73f
This commit is contained in:
Vitalii 2023-10-06 15:25:00 +03:00 committed by Storj Robot
parent d7af97c919
commit 45fdc64300
2 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/satellite/vuetify-poc/src/components/billing/UsageAndChargesComponent.vue
View File

@ -4,7 +4,7 @@
<template> <template>
<v-row> <v-row>
<v-col> <v-col>
<h4 class="mt-4">Costs per project</h4> <h4>Costs per project</h4>
</v-col> </v-col>
</v-row> </v-row>

18
web/satellite/vuetify-poc/src/views/Billing.vue
View File

@ -144,6 +144,18 @@
</v-col> </v-col>
</v-row> </v-row>
<v-row>
<v-col>
<v-card title="Detailed Usage Report" subtitle="Get a complete usage report for all your projects." border>
<v-card-text>
<v-btn variant="outlined" color="default" size="small" @click="downloadReport">
Download Report
</v-btn>
</v-card-text>
</v-card>
</v-col>
</v-row>
<v-row v-if="isRollupLoading" justify="center" align="center"> <v-row v-if="isRollupLoading" justify="center" align="center">
<v-col cols="auto"> <v-col cols="auto">
<v-progress-circular indeterminate /> <v-progress-circular indeterminate />
@ -223,6 +235,7 @@ import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames
import { SHORT_MONTHS_NAMES } from '@/utils/constants/date'; import { SHORT_MONTHS_NAMES } from '@/utils/constants/date';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { useConfigStore } from '@/store/modules/configStore'; import { useConfigStore } from '@/store/modules/configStore';
import { Download } from '@/utils/download';
import CreditCardComponent from '@poc/components/CreditCardComponent.vue'; import CreditCardComponent from '@poc/components/CreditCardComponent.vue';
import AddCreditCardComponent from '@poc/components/AddCreditCardComponent.vue'; import AddCreditCardComponent from '@poc/components/AddCreditCardComponent.vue';
@ -316,6 +329,11 @@ const isCouponActive = computed((): boolean => {
return !!c && (c.duration === 'forever' || (!!c.expiresAt && now < c.expiresAt.getTime())); return !!c && (c.duration === 'forever' || (!!c.expiresAt && now < c.expiresAt.getTime()));
}); });
function downloadReport(): void {
const link = projectsStore.getTotalUsageReportLink();
Download.fileByLink(link);
}
function goToTransactionsTab() { function goToTransactionsTab() {
tab.value = 2; tab.value = 2;
} }