♻️ : rework breadcrumb

src/main/client/app/assets/css/style.css

@@ -593,12 +593,9 @@ a:focus {
 
 .page_title, .page_controls {
   background: #fff;
-  margin-top: 0;
-  margin-bottom: 30px;
-  padding: 25px 35px;
   box-shadow: 1px 0 5px rgba(0, 0, 0, 0.1);
-  margin-left: -40px;
-  margin-right: -40px;
+  margin: 0 -40px 30px -40px;
+  padding: 15px 25px;
   position: relative;
 }
 

src/main/client/app/layouts/default-layout.vue

@@ -8,7 +8,7 @@
           <div class="row column_title">
             <div class="col-md-12">
               <div class="page_title">
-                <!--<div id="navigation"></div>-->
+                <app-breadcrumb />
               </div>
             </div>
           </div>
@@ -21,13 +21,15 @@
 
 <script>
   import {
+    AppBreadcrumb,
     AppSideBar,
     AppTopBar,
   } from '@/shared/components';
 
   export default {
     name: 'AppDefaultLayout',
     components: {
+      AppBreadcrumb,
       AppTopBar,
       AppSideBar,
     },

src/main/client/app/pages/dashboard/dashboard-routes.js

@@ -5,7 +5,10 @@ const dashboardRoutes = [
     path: '/dashboard',
     name: 'dashboard',
     component: AppDashboard,
-    meta: { authorities: ['ROLE_USER'] },
+    meta: {
+      authorities: ['ROLE_USER'],
+      breadcrumb: [{ text: 'Dashboard' }],
+    },
   },
 ];
 

src/main/client/app/pages/modules/module-description.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>This is not the final module description {{ $route.params.id }} page xD</div>
+  <div>This is not the final module description {{ $route.params.moduleId }} page xD</div>
 </template>
 
 <script>

src/main/client/app/pages/modules/module.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>This is not the final module {{ $route.params.id }} page xD</div>
+  <div>This is not the final module {{ $route.params.moduleId }} page xD</div>
 </template>
 
 <script>

src/main/client/app/pages/modules/modules-routes.js

@@ -3,25 +3,37 @@ const modulesRoutes = [
     path: '/modules',
     name: 'modules',
     component: () => import(/* webpackChunkName: "chunk-modules" */ '@/pages/modules/modules.vue'),
-    meta: { authorities: ['ROLE_USER'] },
+    meta: {
+      authorities: ['ROLE_USER'],
+      breadcrumb: [{ text: 'Modules' }],
+    },
   },
   {
     path: '/modules/import',
-    name: 'module-import',
+    name: 'module_import',
     component: () => import(/* webpackChunkName: "chunk-modules" */ '@/pages/modules/module-import.vue'),
-    meta: { authorities: ['ROLE_USER'] },
+    meta: {
+      authorities: ['ROLE_USER'],
+      breadcrumb: [{ text: 'Modules', to: { name: 'modules' } }, { text: 'Module import' }],
+    },
   },
   {
-    path: '/modules/:id',
+    path: '/modules/:moduleId',
     name: 'module',
     component: () => import(/* webpackChunkName: "chunk-modules" */ '@/pages/modules/module.vue'),
-    meta: { authorities: ['ROLE_USER'] },
+    meta: {
+      authorities: ['ROLE_USER'],
+      breadcrumb: [{ text: 'Modules', to: { name: 'modules' } }, { text: 'Module edition' }],
+    },
   },
   {
-    path: '/modules/:id/description',
-    name: 'module-description',
+    path: '/modules/:moduleId/description',
+    name: 'module_description',
     component: () => import(/* webpackChunkName: "chunk-modules" */ '@/pages/modules/module-description.vue'),
-    meta: { authorities: ['ROLE_USER'] },
+    meta: {
+      authorities: ['ROLE_USER'],
+      breadcrumb: [{ text: 'Modules', to: { name: 'modules' } }, { text: 'Module description' }],
+    },
   },
 ];
 

src/main/client/app/pages/settings/settings-routes.js

@@ -3,7 +3,10 @@ const settingsRoutes = [
     path: '/settings',
     name: 'settings',
     component: () => import(/* webpackChunkName: "chunk-settings" */ '@/pages/settings/settings.vue'),
-    meta: { authorities: ['ROLE_ADMIN'] },
+    meta: {
+      authorities: ['ROLE_ADMIN'],
+      breadcrumb: [{ text: 'Settings' }],
+    },
   },
 ];
 

src/main/client/app/pages/stacks/stack-creation.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>This is not the final stack creation {{ $route.params.id }} page xD</div>
+  <div>This is not the final stack creation {{ $route.params.stackId }} page xD</div>
 </template>
 
 <script>

src/main/client/app/pages/stacks/stack-edition.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>This is not the final stack edition {{ $route.params.id }} page xD</div>
+  <div>This is not the final stack edition {{ $route.params.stackId }} page xD</div>
 </template>
 
 <script>

src/main/client/app/pages/stacks/stack.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p>This is not the final stack {{ $route.params.id }} page xD</p>
+    <p>This is not the final stack {{ $route.params.stackId }} page xD</p>
     <router-view />
   </div>
 </template>

src/main/client/app/pages/stacks/stacks-routes.js

@@ -3,31 +3,50 @@ const stacksRoutes = [
     path: '/stacks',
     name: 'stacks',
     component: () => import(/* webpackChunkName: "chunk-stacks" */ '@/pages/stacks/stacks.vue'),
-    meta: { authorities: ['ROLE_USER'] },
+    meta: {
+      authorities: ['ROLE_USER'],
+      breadcrumb: [{ text: 'Stacks' }],
+    },
   },
   {
-    path: '/stacks/:id',
+    path: '/stacks/:stackId',
     name: 'stack',
     component: () => import(/* webpackChunkName: "chunk-stacks" */ '@/pages/stacks/stack.vue'),
-    meta: { authorities: ['ROLE_USER'] },
+    meta: {
+      authorities: ['ROLE_USER'],
+      breadcrumb: [{ text: 'Stacks', to: { name: 'stacks' } }, { text: 'Stack' }],
+    },
     children: [
       {
         path: 'add',
-        name: 'stack-creation',
+        name: 'stack_creation',
         component: () => import(/* webpackChunkName: "chunk-stacks" */ '@/pages/stacks/stack-creation.vue'),
-        meta: { authorities: ['ROLE_USER'] },
+        meta: {
+          authorities: ['ROLE_USER'],
+          breadcrumb: [{ text: 'Modules', to: { name: 'modules' } }, { text: 'Stack creation' }],
+        },
       },
       {
         path: 'edit',
-        name: 'stack-edition',
+        name: 'stack_edition',
         component: () => import(/* webpackChunkName: "chunk-stacks" */ '@/pages/stacks/stack-edition.vue'),
-        meta: { authorities: ['ROLE_USER'] },
+        meta: {
+          authorities: ['ROLE_USER'],
+          breadcrumb: [{ text: 'Stacks', to: { name: 'stacks' } }, { text: 'Stack edition' }],
+        },
       },
       {
         path: 'jobs/:jobId',
         name: 'stack_job',
         component: () => import(/* webpackChunkName: "chunk-stacks" */ '@/pages/stacks/stack-job.vue'),
-        meta: { authorities: ['ROLE_USER'] },
+        meta: {
+          authorities: ['ROLE_USER'],
+          breadcrumb: [
+            { text: 'Stacks', to: { name: 'stacks' } },
+            { text: 'Stack', to: { name: 'stack' } },
+            { text: 'Job' },
+          ],
+        },
       },
     ],
   },

src/main/client/app/pages/users/users-routes.js

@@ -3,7 +3,10 @@ const usersRoutes = [
     path: '/users',
     name: 'users',
     component: () => import(/* webpackChunkName: "chunk-users" */ '@/pages/users/users.vue'),
-    meta: { authorities: ['ROLE_ADMIN'] },
+    meta: {
+      authorities: ['ROLE_ADMIN'],
+      breadcrumb: [{ text: 'Users' }],
+    },
   },
 ];
 

src/main/client/app/shared/components/breadcrumb/breadcrumb.vue

@@ -0,0 +1,22 @@
+<template>
+  <h2 class="navigation">
+    <b-breadcrumb :items="items" />
+  </h2>
+</template>
+
+<script>
+  export default {
+    name: 'AppBreadcrumb',
+    data: () => ({
+      items: [],
+    }),
+    watch: {
+      '$route.meta.breadcrumb': {
+        immediate: true,
+        handler(items) {
+          this.items = items;
+        },
+      },
+    },
+  };
+</script>

src/main/client/app/shared/components/index.js

@@ -2,3 +2,4 @@ export { default as AppPageNotFound } from '@/shared/components/error-pages/page
 export { default as AppPageForbidden } from '@/shared/components/error-pages/page-forbidden.vue';
 export { default as AppTopBar } from '@/shared/components/topbar/top-bar.vue';
 export { default as AppSideBar } from '@/shared/components/sidebar/side-bar.vue';
+export { default as AppBreadcrumb } from '@/shared/components/breadcrumb/breadcrumb.vue';

src/main/client/app/shared/config/bootstrap-vue-config.js

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import {
+  BreadcrumbPlugin,
   DropdownPlugin,
   FormCheckboxPlugin,
   FormInputPlugin,
@@ -18,5 +19,6 @@ export default {
     Vue.use(NavbarPlugin);
     Vue.use(DropdownPlugin);
     Vue.use(NavPlugin);
+    Vue.use(BreadcrumbPlugin);
   },
 };