From 58065a8ff55df76a8dd27e04623c5b7b43348412 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Odini?= <raphodn@users.noreply.github.com>
Date: Fri, 4 Oct 2024 11:27:38 +0200
Subject: [PATCH] feat(Dashboard): first basic breadcrumb for user dashboard
 pages (#927)

---
 src/App.vue                          |  3 +++
 src/components/Breadcrumbs.vue       | 17 +++++++++++++++++
 src/i18n/locales/en.json             |  6 ++++++
 src/router.js                        |  7 +++----
 src/views/UserDashboard.vue          |  4 ----
 src/views/UserDashboardPriceList.vue |  7 -------
 src/views/UserDashboardProofList.vue |  7 -------
 7 files changed, 29 insertions(+), 22 deletions(-)
 create mode 100644 src/components/Breadcrumbs.vue

diff --git a/src/App.vue b/src/App.vue
index 75882202936..f958cd28d50 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,6 +4,7 @@
 
     <v-main class="d-flex justify-center">
       <v-container>
+        <Breadcrumbs />
         <router-view />
       </v-container>
     </v-main>
@@ -16,11 +17,13 @@
 import { defineComponent } from 'vue'
 import Header from './components/Header.vue'
 import Footer from './components/Footer.vue'
+import Breadcrumbs from './components/Breadcrumbs.vue';
 
 export default defineComponent({
   components: {
     Header,
     Footer,
+    Breadcrumbs,
   },
 })
 </script>
diff --git a/src/components/Breadcrumbs.vue b/src/components/Breadcrumbs.vue
new file mode 100644
index 00000000000..a438b6ac9a6
--- /dev/null
+++ b/src/components/Breadcrumbs.vue
@@ -0,0 +1,17 @@
+<template>
+  <v-breadcrumbs v-if="breadcrumbs" class="text-h5 pa-0" density="compact" :items="breadcrumbs">
+    <template #title="{ item }">
+      {{ $t(`Router.${item.title}.Title`) }}
+    </template>
+  </v-breadcrumbs>
+</template>
+  
+<script>
+export default {
+  computed: {
+    breadcrumbs() {
+      return this.$route.meta.breadcrumbs;
+    }
+  },
+}
+</script>
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index fa503af707a..91fa1217d4e 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -438,6 +438,12 @@
 		"LatestPrices": {
 			"Title": "Latest prices"
 		},
+		"MyPrices": {
+			"Title": "My prices"
+		},
+		"MyProofs": {
+			"Title": "My proofs"
+		},
 		"ProofAddSingle": {
 			"Title": "Add a proof"
 		},
diff --git a/src/router.js b/src/router.js
index f316caec2b1..de1dc52c15c 100644
--- a/src/router.js
+++ b/src/router.js
@@ -6,9 +6,9 @@ import localeManager from './i18n/localeManager.js'
 const routes = [
   { path: '/', name: 'home', component: () => import('./views/Home.vue'), meta: { title: 'Home', icon: 'mdi-home', drawerMenu: true } },
   { path: '/sign-in', name: 'sign-in', component: () => import('./views/SignIn.vue'), meta: { title: 'SignIn', icon: 'mdi-login', drawerMenu: true, requiresAuth: false } },
-  { path: '/dashboard', name: 'dashboard', component: () => import('./views/UserDashboard.vue'), meta: { title: 'Dashboard', icon: 'mdi-view-dashboard-outline', drawerMenu: true, requiresAuth: true } },
-  { path: '/dashboard/prices', name: 'dashboard-prices', component: () => import('./views/UserDashboardPriceList.vue'), meta: { title: 'MyPrices', requiresAuth: true } },
-  { path: '/dashboard/proofs', name: 'dashboard-proofs', component: () => import('./views/UserDashboardProofList.vue'), meta: { title: 'MyProofs', requiresAuth: true } },
+  { path: '/dashboard', name: 'dashboard', component: () => import('./views/UserDashboard.vue'), meta: { title: 'Dashboard', icon: 'mdi-view-dashboard-outline', drawerMenu: true, requiresAuth: true, breadcrumbs: [{title: 'Dashboard', disabled: true }] } },
+  { path: '/dashboard/prices', name: 'dashboard-prices', component: () => import('./views/UserDashboardPriceList.vue'), meta: { title: 'MyPrices', requiresAuth: true, breadcrumbs: [{title: 'Dashboard', disabled: false, to: '/dashboard' }, {title: 'MyPrices', disabled: true}] } },
+  { path: '/dashboard/proofs', name: 'dashboard-proofs', component: () => import('./views/UserDashboardProofList.vue'), meta: { title: 'MyProofs', requiresAuth: true, breadcrumbs: [{title: 'Dashboard', disabled: false, to: '/dashboard' }, {title: 'MyProofs', disabled: true}] } },
   { path: '/settings', name: 'settings', component: () => import('./views/UserSettings.vue'), meta: { title: 'Settings', requiresAuth: true } },
   { path: '/prices/add', name: 'add-price', component: () => import('./views/AddPriceHome.vue'), meta: { title: 'AddPrice', icon: 'mdi-tag-plus-outline', drawerMenu: true, color: 'primary', requiresAuth: true }},
   { path: '/prices/add/single', name: 'add-price-single', component: () => import('./views/AddPriceSingle.vue'), meta: { title: 'Add a single price (price tag)', requiresAuth: true }},
@@ -58,7 +58,6 @@ const router = createRouter({
     await localeManager.changeLanguage(locale)
   }
   if (to.meta.requiresAuth && !store.user.token) {
-    console.log('checkAuth')
     return next({ name: 'sign-in' })
   }
 
diff --git a/src/views/UserDashboard.vue b/src/views/UserDashboard.vue
index ab3346ea15c..a525c586b57 100644
--- a/src/views/UserDashboard.vue
+++ b/src/views/UserDashboard.vue
@@ -1,8 +1,4 @@
 <template>
-  <h1 class="text-h5 mb-1">
-    {{ $t('UserDashboard.Title') }}
-  </h1>
-
   <v-row>
     <v-col>
       <v-chip class="mr-2" label variant="text" prepend-icon="mdi-account">
diff --git a/src/views/UserDashboardPriceList.vue b/src/views/UserDashboardPriceList.vue
index 2284451feb7..5949b12f5e6 100644
--- a/src/views/UserDashboardPriceList.vue
+++ b/src/views/UserDashboardPriceList.vue
@@ -1,17 +1,10 @@
 <template>
-  <h1 class="text-h5 mb-1">
-    {{ $t('UserDashboard.MyPrices') }}
-  </h1>
-
   <v-row v-if="!loading">
     <v-col>
       <v-chip label variant="text" prepend-icon="mdi-tag-multiple-outline">
         {{ $t('UserDashboard.UserPriceTotal', { count: userPriceTotal }) }}
       </v-chip>
       <LoadedCountChip v-if="!loading" :loadedCount="userPriceList.length" :totalCount="userPriceTotal" />
-      <v-btn size="x-small" prepend-icon="mdi-arrow-left" to="/dashboard">
-        {{ $t('UserDashboard.Title') }}
-      </v-btn>
     </v-col>
   </v-row>
 
diff --git a/src/views/UserDashboardProofList.vue b/src/views/UserDashboardProofList.vue
index f2560889161..abf5cc83ebc 100644
--- a/src/views/UserDashboardProofList.vue
+++ b/src/views/UserDashboardProofList.vue
@@ -1,8 +1,4 @@
 <template>
-  <h1 class="text-h5 mb-1">
-    {{ $t('UserDashboard.MyProofs') }}
-  </h1>
-
   <v-row v-if="!loading">
     <v-col>
       <v-chip label variant="text" prepend-icon="mdi-image">
@@ -11,9 +7,6 @@
       <LoadedCountChip :loadedCount="userProofList.length" :totalCount="userProofTotal" />
       <FilterMenu kind="proof" :currentFilter="currentFilter" @update:currentFilter="toggleProofFilter($event)" />
       <OrderMenu kind="proof" :currentOrder="currentOrder" @update:currentOrder="selectProofOrder($event)" />
-      <v-btn size="x-small" prepend-icon="mdi-arrow-left" to="/dashboard">
-        {{ $t('UserDashboard.Title') }}
-      </v-btn>
     </v-col>
   </v-row>