feat(Dashboard): first basic breadcrumb for user dashboard pages (#927)

openfoodfacts · Oct 4, 2024 · 58065a8 · 58065a8
1 parent f76277a
commit 58065a8
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>