From d144b100b473a8ab9ca4857c3983f6ac93b41616 Mon Sep 17 00:00:00 2001
From: Jonathan Foucher <jfoucher@gmail.com>
Date: Tue, 21 Jun 2022 16:46:48 +0200
Subject: [PATCH] Add page header with breadcrumbs + page title configurable in
the routes. Fixes https://app.asana.com/0/1202404842967175/1202478652082893
and https://app.asana.com/0/1202404842967175/1202478652082899
---
resources/js/components/App.vue | 5 +-
.../js/components/Collectivities/List.vue | 8 +-
.../Collectivities/Single/index.vue | 1 -
.../js/components/Collectivities/index.vue | 2 +-
resources/js/components/Menu/PageHeader.vue | 81 +++++++++
resources/js/components/Users/List.vue | 4 -
resources/js/components/Users/Profile.vue | 2 +-
resources/js/components/Users/Single.vue | 1 -
resources/js/components/Users/index.vue | 2 +-
resources/js/routes/index.js | 167 +++++++++++++++---
10 files changed, 233 insertions(+), 40 deletions(-)
create mode 100644 resources/js/components/Menu/PageHeader.vue
diff --git a/resources/js/components/App.vue b/resources/js/components/App.vue
index 8e9d5985..75eef4e4 100644
--- a/resources/js/components/App.vue
+++ b/resources/js/components/App.vue
@@ -47,6 +47,7 @@
<Side v-if="user"></Side>
<div class="content-wrapper bg-light">
+ <PageHeader></PageHeader>
<router-view></router-view>
</div>
<div class="sidebar-closed-overlay" v-if="!closed" @click="close"></div>
@@ -56,6 +57,7 @@
<script>
import Side from "./Menu/Side";
import md5 from "crypto-js/md5";
+import PageHeader from './Menu/PageHeader'
export default {
name: 'App',
@@ -102,7 +104,8 @@ export default {
},
},
components: {
- Side
+ Side,
+ PageHeader,
}
}
</script>
diff --git a/resources/js/components/Collectivities/List.vue b/resources/js/components/Collectivities/List.vue
index 91aa9b61..3bec8733 100644
--- a/resources/js/components/Collectivities/List.vue
+++ b/resources/js/components/Collectivities/List.vue
@@ -1,9 +1,5 @@
<template>
<div>
- <!-- https://matanya.gitbook.io/vue-tables-2/child-rows -->
- <div class="mb-3">
- <span class="h3">Liste des collectivités</span>
- </div>
<router-link to="/collectivites/nouveau" class="btn btn-primary"><i class="fas fa-plus"></i> Créer une collectivité</router-link>
<div class="bg-white p-3 mt-4" v-if="isAdmin()">
@@ -26,8 +22,8 @@
</template>
<script>
-import isAdmin from '../../utils/isAdmin';
-import toaster from '../../utils/toaster';
+import isAdmin from '../../utils/isAdmin';
+import toaster from '../../utils/toaster';
export default {
name : "CollectivitiesList",
diff --git a/resources/js/components/Collectivities/Single/index.vue b/resources/js/components/Collectivities/Single/index.vue
index b58dbce8..7472b8af 100644
--- a/resources/js/components/Collectivities/Single/index.vue
+++ b/resources/js/components/Collectivities/Single/index.vue
@@ -1,6 +1,5 @@
<template>
<div>
- <div class="mb-3 h3">{{ org.id ? 'Éditer' : 'Créer' }} une collectivité</div>
<div class="row" v-if="errors">
<div class="col-12">
<div class="alert alert-danger" v-if="errors.status === 422" >
diff --git a/resources/js/components/Collectivities/index.vue b/resources/js/components/Collectivities/index.vue
index fc172abc..9f34fef6 100644
--- a/resources/js/components/Collectivities/index.vue
+++ b/resources/js/components/Collectivities/index.vue
@@ -1,5 +1,5 @@
<template>
- <div class="m-5">
+ <div class="mb-5 mx-5 mt-0">
<router-view></router-view>
</div>
</template>
diff --git a/resources/js/components/Menu/PageHeader.vue b/resources/js/components/Menu/PageHeader.vue
new file mode 100644
index 00000000..cd8e08df
--- /dev/null
+++ b/resources/js/components/Menu/PageHeader.vue
@@ -0,0 +1,81 @@
+<template>
+ <div class="content-header">
+ <div class="container">
+ <div class="row mb-0">
+ <div class="col-md-6">
+ <h1 class="m-0">
+ {{ $route.meta.title }}
+ <small class="text-sm text-muted">{{ itemName }}</small>
+ </h1>
+ </div>
+ <div class="col-md-6">
+ <nav aria-label="breadcrumb">
+ <ol class="breadcrumb float-sm-right">
+ <li v-for="route in matched" class="breadcrumb-item" v-if="route.name">
+ <router-link :to="route.path ? route.path : '/'">
+ <i :class="'fas ' + route.meta.icon"></i>
+ {{route.name}}
+ </router-link>
+ </li>
+ <li class="breadcrumb-item" v-if="$route.name">
+ <i :class="'fas ' + $route.meta.icon"></i>
+ {{$route.name}}
+ </li>
+ </ol>
+ </nav>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+<script>
+export default {
+ name: 'Breadcrumbs',
+ data() {
+ return {
+ routes: []
+ }
+ },
+ computed: {
+ matched() {
+ console.log('matched', this.$route.matched)
+ console.log('route', this.$route)
+ return this.$route.matched.slice(0, -1)
+ },
+ itemName() {
+ console.log(this.$route)
+ if (!this.$route.meta.type || !this.$route.params.id) {
+ return null;
+ }
+
+ switch (this.$route.meta.type) {
+ case 'user':
+ const user = this.$store.state.users.all.find(u => u.id === parseInt(this.$route.params.id, 10))
+ if (!user) {
+ return null;
+ }
+ return user.firstname + ' ' + user.lastname
+ case 'organization':
+ const org = this.$store.state.organizations.all.find(o => o.id === parseInt(this.$route.params.id, 10))
+ if (!org) {
+ return null;
+ }
+ return org.name
+ case 'profile':
+ const u = this.$store.state.user.data
+ if (!u) {
+ return null;
+ }
+ return u.firstname + ' ' + u.lastname
+ default:
+ return null;
+ }
+ }
+ },
+}
+</script>
+<style scoped>
+li > a {
+ text-decoration:none;
+}
+</style>
diff --git a/resources/js/components/Users/List.vue b/resources/js/components/Users/List.vue
index d40c18f8..46c4012b 100644
--- a/resources/js/components/Users/List.vue
+++ b/resources/js/components/Users/List.vue
@@ -1,9 +1,5 @@
<template>
<div>
- <!-- https://matanya.gitbook.io/vue-tables-2/child-rows -->
- <div class="mb-3">
- <span class="h3">Liste des utilisateurs</span>
- </div>
<router-link to="/utilisateurs/nouveau" class="btn btn-primary"><i class="fas fa-plus"></i> Créer un utilisateur</router-link>
<div class="bg-white p-3 mt-4" v-if="isAdmin()">
diff --git a/resources/js/components/Users/Profile.vue b/resources/js/components/Users/Profile.vue
index 0b894c78..eec7dfd7 100644
--- a/resources/js/components/Users/Profile.vue
+++ b/resources/js/components/Users/Profile.vue
@@ -1,5 +1,5 @@
<template>
- <div class="m-5">
+ <div class="mb-5 mx-5 mt-0">
<router-view></router-view>
</div>
</template>
diff --git a/resources/js/components/Users/Single.vue b/resources/js/components/Users/Single.vue
index 133cacb0..b37ed7fd 100644
--- a/resources/js/components/Users/Single.vue
+++ b/resources/js/components/Users/Single.vue
@@ -1,6 +1,5 @@
<template>
<div>
- <div class="mb-3 h3">{{ user.id ? 'Modifier' : 'Créer' }} un utilisateur</div>
<div class="row" v-if="errors">
<div class="col-12">
<div class="alert alert-danger" v-if="errors.status === 422" >
diff --git a/resources/js/components/Users/index.vue b/resources/js/components/Users/index.vue
index b9266b3e..d5e36217 100644
--- a/resources/js/components/Users/index.vue
+++ b/resources/js/components/Users/index.vue
@@ -1,5 +1,5 @@
<template>
- <div class="m-5">
+ <div class="mb-5 mx-5 mt-0">
<router-view></router-view>
</div>
</template>
diff --git a/resources/js/routes/index.js b/resources/js/routes/index.js
index cb57d066..819451f0 100644
--- a/resources/js/routes/index.js
+++ b/resources/js/routes/index.js
@@ -15,29 +15,148 @@ import EvaluationsList from "../components/Evaluations/List";
export default [
- { path: '/', component: App, children: [
- { path: '', component: Dashboard },
- { path: 'login', component: Login },
-
- { path: 'profil', component: Profile, children: [
- { path: '', component: SingleUser },
- ]},
- { path: 'utilisateurs', component: Users, children: [
- { path: '', component: UsersList },
- { path: ':id', component: SingleUser },
- { path: 'nouveau', component: SingleUser },
- ]},
- { path: 'evaluations', component: Evaluations, children: [
- { path: '', component: EvaluationsList },
- ]},
- { path: 'mesures', component: Measures, children: [
- { path: '', component: MeasuresList },
- ]},
- { path: 'collectivites', component: Collectivities, children: [
- { path: '', component: CollectivitiesList },
- { path: ':id', component: SingleCollectivity },
- { path: 'nouveau', component: SingleCollectivity },
- ]},
+ {
+ path: '/',
+ name: 'Tableau de bord',
+ component: App,
+ meta: {
+ icon: 'fa-tachometer-alt',
+ title: 'Tableau de bord',
+ },
+ children: [
+ {
+ path: '',
+ component: Dashboard,
+ meta: {
+ icon: 'fa-tachometer-alt',
+ title: 'Tableau de bord',
+ },
+ },
+ {
+ path: 'login',
+ component: Login
+ },
+ {
+ name: 'Profil',
+ path: 'profil',
+ component: Profile,
+ children: [
+ {
+ path: '',
+ component: SingleUser,
+ meta: {
+ icon: 'fa-user',
+ title: 'Modifier votre profil',
+ type: 'profile',
+ },
+ },
+ ],
+ },
+ {
+ path: 'utilisateurs',
+ component: Users,
+ name: 'Utilisateurs',
+ meta: {
+ icon: 'fa-users',
+ title: 'Liste des utilisateurs',
+ },
+ children: [
+ {
+ path: '',
+ component: UsersList,
+ meta: {
+ icon: 'fa-users',
+ title: 'Liste des utilisateurs',
+ },
+ },
+ {
+ name: 'Nouvel Utilisateur',
+ path: 'nouveau',
+ component: SingleUser,
+ meta: {
+ icon: 'fa-user',
+ title: 'Créer un utilisateur',
+ type: 'user',
+ },
+ },
+ {
+ name: 'Modification',
+ path: ':id',
+ component: SingleUser,
+ meta: {
+ icon: 'fa-user',
+ title: 'Modifier un utilisateur',
+ type: 'user',
+ },
+ },
+ ]
+ },
+ {
+ path: 'evaluations',
+ name: 'Evaluations',
+ meta: {
+ icon: 'fa-search'
+ },
+ component: Evaluations,
+ children: [
+ {
+ path: '',
+ component: EvaluationsList,
+ },
+ ]
+ },
+ {
+ path: 'mesures',
+ name: 'Mesures de sécurité',
+ meta: {
+ icon: 'fa-list'
+ },
+ component: Measures,
+ children: [
+ {
+ path: '',
+ component: MeasuresList,
+ },
+ ]
+ },
+ {
+ path: 'collectivites',
+ name: 'Collectivités',
+ meta: {
+ icon: 'fa-home',
+ title: 'Liste des collectivités',
+ },
+ component: Collectivities,
+ children: [
+ {
+ path: '',
+ component: CollectivitiesList,
+ meta: {
+ icon: 'fa-home',
+ title: 'Liste des collectivités',
+ },
+ },
+ {
+ name: 'Nouvelle collectivité',
+ path: 'nouveau',
+ component: SingleCollectivity,
+ meta: {
+ icon: 'fa-home',
+ title: 'Créer une collectivité',
+ type: 'organization',
+ },
+ },
+ {
+ name: 'Modification',
+ path: ':id',
+ component: SingleCollectivity,
+ meta: {
+ icon: 'fa-home',
+ title: 'Modifier une collectivité',
+ type: 'organization',
+ },
+ },
+ ]
+ },
]},
-
];
--
GitLab