From 6a4abb7f14ac5236477d9f183b537895e0024c81 Mon Sep 17 00:00:00 2001
From: Jeremy Wharton <jeremy.e.wharton@gmail.com>
Date: Wed, 20 Sep 2023 23:30:29 -0500
Subject: [PATCH] web/satellite/vuetify-poc: make project stat cards clickable

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

Resolves #6305

Change-Id: I6a598ad2a8a6ab79f48f559eced55f8f8257a518
---
 .../src/components/CardStatsComponent.vue            |  3 ++-
 web/satellite/vuetify-poc/src/views/Dashboard.vue    | 12 ++++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/web/satellite/vuetify-poc/src/components/CardStatsComponent.vue b/web/satellite/vuetify-poc/src/components/CardStatsComponent.vue
index 4c06167ec..ff65ab503 100644
--- a/web/satellite/vuetify-poc/src/components/CardStatsComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/CardStatsComponent.vue
@@ -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>
diff --git a/web/satellite/vuetify-poc/src/views/Dashboard.vue b/web/satellite/vuetify-poc/src/views/Dashboard.vue
index bc627bf7f..3d402edaf 100644
--- a/web/satellite/vuetify-poc/src/views/Dashboard.vue
+++ b/web/satellite/vuetify-poc/src/views/Dashboard.vue
@@ -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>