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

web/satellite/vuetify-poc: make project stat cards clickable

Browse Source 
When clicked, cards containing project stats will redirect the user to
the card's respective page.

Resolves #6305

Change-Id: I6a598ad2a8a6ab79f48f559eced55f8f8257a518
This commit is contained in:
Jeremy Wharton 2023-09-20 23:30:29 -05:00 committed by Storj Robot
parent 15c0c675b1
commit 6a4abb7f14
2 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/satellite/vuetify-poc/src/components/CardStatsComponent.vue
View File

@ -2,7 +2,7 @@
// See LICENSE for copying information.
<template>
<v-card :title="title" :subtitle="subtitle" variant="flat" :border="true" rounded="xlg">
<v-card :title="title" :subtitle="subtitle" variant="flat" :border="true" rounded="xlg" :to="to">
<v-card-text>
<v-chip rounded color="success" variant="outlined" class="font-weight-bold">{{ data }}</v-chip>
</v-card-text>
@ -16,5 +16,6 @@ const props = defineProps<{
title: string;
subtitle: string;
data: string;
to: string;
}>();
</script>

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

@ -38,22 +38,22 @@
<v-row class="d-flex align-center justify-center mt-2">
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="Files" subtitle="Project files" :data="limits.objectCount.toLocaleString()" />
<CardStatsComponent title="Files" subtitle="Project files" :data="limits.objectCount.toLocaleString()" to="buckets" />
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="Segments" subtitle="All file pieces" :data="limits.segmentCount.toLocaleString()" />
<CardStatsComponent title="Segments" subtitle="All file pieces" :data="limits.segmentCount.toLocaleString()" to="buckets" />
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="Buckets" subtitle="Project buckets" :data="bucketsCount.toLocaleString()" />
<CardStatsComponent title="Buckets" subtitle="Project buckets" :data="bucketsCount.toLocaleString()" to="buckets" />
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="Access" subtitle="Project accesses" :data="accessGrantsCount.toLocaleString()" />
<CardStatsComponent title="Access" subtitle="Project accesses" :data="accessGrantsCount.toLocaleString()" to="access" />
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="Team" subtitle="Project members" :data="teamSize.toLocaleString()" />
<CardStatsComponent title="Team" subtitle="Project members" :data="teamSize.toLocaleString()" to="team" />
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="Billing" :subtitle="`${paidTierString} account`" :data="paidTierString" />
<CardStatsComponent title="Billing" :subtitle="`${paidTierString} account`" :data="paidTierString" to="/account/billing" />
</v-col>
</v-row>