Skip to content

Commit cb8b974

Browse files
xidedixxidedix
committed
feat: Users Breadcrumb example with /users/:id
1 parent 1474700 commit cb8b974

File tree

5 files changed

+209
-5
lines changed

5 files changed

+209
-5
lines changed

‎src/containers/DefaultContainer.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
</b-link>
99
<SidebarToggler class="d-md-down-none" display="lg" />
1010
<b-navbar-nav class="d-md-down-none">
11-
<b-nav-item class="px-3">Dashboard</b-nav-item>
12-
<b-nav-item class="px-3">Users</b-nav-item>
11+
<b-nav-item class="px-3" to="/dashboard">Dashboard</b-nav-item>
12+
<b-nav-item class="px-3" to="/users" exact>Users</b-nav-item>
1313
<b-nav-item class="px-3">Settings</b-nav-item>
1414
</b-navbar-nav>
1515
<b-navbar-nav class="ml-auto">
@@ -37,7 +37,7 @@
3737
<SidebarMinimizer/>
3838
</AppSidebar>
3939
<main class="main">
40-
<breadcrumb :list="list"/>
40+
<Breadcrumb :list="list"/>
4141
<div class="container-fluid">
4242
<router-view></router-view>
4343
</div>
@@ -54,7 +54,7 @@
5454
</template>
5555

5656
<script>
57-
import nav from '../_nav'
57+
import nav from '@/_nav'
5858
import { Header as AppHeader, SidebarToggler, Sidebar as AppSidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, Aside as AppAside, AsideToggler, Footer as TheFooter, Breadcrumb } from '@coreui/vue'
5959
import DefaultAside from './DefaultAside'
6060
import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'
@@ -87,7 +87,7 @@ export default {
8787
return this.$route.name
8888
},
8989
list () {
90-
return this.$route.matched
90+
return this.$route.matched.filter((route) => route.name || route.meta.label )
9191
}
9292
}
9393
}

‎src/router/index.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,10 @@ const Page500 = () => import('@/views/pages/Page500')
5454
const Login = () => import('@/views/pages/Login')
5555
const Register = () => import('@/views/pages/Register')
5656

57+
// Users
58+
const Users = () => import('@/views/users/Users')
59+
const User = () => import('@/views/users/User')
60+
5761
Vue.use(Router)
5862

5963
export default new Router({
@@ -102,6 +106,25 @@ export default new Router({
102106
name: 'Widgets',
103107
component: Widgets
104108
},
109+
{
110+
path: 'users',
111+
meta: { label: 'Users'},
112+
component: {
113+
render (c) { return c('router-view') }
114+
},
115+
children: [
116+
{
117+
path: '',
118+
component: Users,
119+
},
120+
{
121+
path: ':id',
122+
meta: { label: 'User Details'},
123+
name: 'User',
124+
component: User,
125+
},
126+
]
127+
},
105128
{
106129
path: 'base',
107130
redirect: '/base/cards',

‎src/views/users/User.vue

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<template>
2+
<b-row>
3+
<b-col cols="12" lg="6">
4+
<b-card no-header>
5+
<template slot="header">
6+
User id: {{ $route.params.id }}
7+
</template>
8+
<b-table striped small fixed responsive="sm" :items="items($route.params.id)" :fields="fields">
9+
<template slot="value" slot-scope="data">
10+
<strong>{{data.item.value}}</strong>
11+
</template>
12+
</b-table>
13+
<template slot="footer">
14+
<b-button @click="goBack">Back</b-button>
15+
</template>
16+
</b-card>
17+
</b-col>
18+
</b-row>
19+
</template>
20+
21+
<script>
22+
import usersData from './UsersData'
23+
export default {
24+
name: 'User',
25+
props: {
26+
caption: {
27+
type: String,
28+
default: 'User id'
29+
},
30+
},
31+
data: () => {
32+
return {
33+
items: (id) => {
34+
const user = usersData.find( user => user.id.toString() === id)
35+
const userDetails = user ? Object.entries(user) : [['id', 'Not found']]
36+
return userDetails.map(([key, value]) => {return {key: key, value: value}})
37+
},
38+
fields: [
39+
{key: 'key'},
40+
{key: 'value'},
41+
],
42+
}
43+
},
44+
methods: {
45+
goBack() {
46+
this.$router.go(-1)
47+
// this.$router.replace({path: '/users'})
48+
}
49+
}
50+
}
51+
</script>

‎src/views/users/Users.vue

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<template>
2+
<b-row>
3+
<b-col cols="12" xl="6">
4+
<transition name="slide">
5+
<b-card :header="caption">
6+
<b-table :hover="hover" :striped="striped" :bordered="bordered" :small="small" :fixed="fixed" responsive="sm" :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage" @row-clicked="rowClicked">
7+
<template slot="id" slot-scope="data">
8+
<strong>{{data.item.id}}</strong>
9+
</template>
10+
<template slot="name" slot-scope="data">
11+
<strong>{{data.item.name}}</strong>
12+
</template>
13+
<template slot="status" slot-scope="data">
14+
<b-badge :variant="getBadge(data.item.status)">{{data.item.status}}</b-badge>
15+
</template>
16+
</b-table>
17+
<nav>
18+
<b-pagination size="sm" :total-rows="getRowCount(items)" :per-page="perPage" v-model="currentPage" prev-text="Prev" next-text="Next" hide-goto-end-buttons/>
19+
</nav>
20+
</b-card>
21+
</transition>
22+
</b-col>
23+
</b-row>
24+
</template>
25+
26+
<script>
27+
import usersData from './UsersData'
28+
export default {
29+
name: 'Users',
30+
props: {
31+
caption: {
32+
type: String,
33+
default: 'Users'
34+
},
35+
hover: {
36+
type: Boolean,
37+
default: true
38+
},
39+
striped: {
40+
type: Boolean,
41+
default: true
42+
},
43+
bordered: {
44+
type: Boolean,
45+
default: false
46+
},
47+
small: {
48+
type: Boolean,
49+
default: false
50+
},
51+
fixed: {
52+
type: Boolean,
53+
default: false
54+
}
55+
},
56+
data: () => {
57+
return {
58+
items: usersData.filter((user) => user.id < 42),
59+
fields: [
60+
{key: 'id'},
61+
{key: 'name'},
62+
{key: 'registered'},
63+
{key: 'role'},
64+
{key: 'status'}
65+
],
66+
currentPage: 1,
67+
perPage: 5,
68+
totalRows: 0
69+
}
70+
},
71+
computed: {
72+
},
73+
methods: {
74+
getBadge (status) {
75+
return status === 'Active' ? 'success'
76+
: status === 'Inactive' ? 'secondary'
77+
: status === 'Pending' ? 'warning'
78+
: status === 'Banned' ? 'danger' : 'primary'
79+
},
80+
getRowCount (items) {
81+
return items.length
82+
},
83+
userLink (id) {
84+
return `users/${id.toString()}`
85+
},
86+
rowClicked (item) {
87+
const userLink = this.userLink(item.id)
88+
this.$router.push({path: userLink})
89+
}
90+
91+
}
92+
}
93+
</script>
94+
95+
<style scoped>
96+
.card-body >>> table > tbody > tr > td {
97+
cursor: pointer;
98+
}
99+
</style>

‎src/views/users/UsersData.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
const usersData = [
2+
{id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'},
3+
{id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'},
4+
{id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
5+
{id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
6+
{id: 4, name: 'Derick Maximinus', registered: '2018/03/01', role: 'Member', status: 'Pending'},
7+
{id: 5, name: 'Friderik Dávid', registered: '2018/01/21', role: 'Staff', status: 'Active'},
8+
{id: 6, name: 'Yiorgos Avraamu', registered: '2018/01/01', role: 'Member', status: 'Active'},
9+
{id: 7, name: 'Avram Tarasios', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
10+
{id: 8, name: 'Quintin Ed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
11+
{id: 9, name: 'Enéas Kwadwo', registered: '2018/03/01', role: 'Member', status: 'Pending'},
12+
{id: 10, name: 'Agapetus Tadeáš', registered: '2018/01/21', role: 'Staff', status: 'Active'},
13+
{id: 11, name: 'Carwyn Fachtna', registered: '2018/01/01', role: 'Member', status: 'Active'},
14+
{id: 12, name: 'Nehemiah Tatius', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
15+
{id: 13, name: 'Ebbe Gemariah', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
16+
{id: 14, name: 'Eustorgios Amulius', registered: '2018/03/01', role: 'Member', status: 'Pending'},
17+
{id: 15, name: 'Leopold Gáspár', registered: '2018/01/21', role: 'Staff', status: 'Active'},
18+
{id: 16, name: 'Pompeius René', registered: '2018/01/01', role: 'Member', status: 'Active'},
19+
{id: 17, name: 'Paĉjo Jadon', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
20+
{id: 18, name: 'Micheal Mercurius', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
21+
{id: 19, name: 'Ganesha Dubhghall', registered: '2018/03/01', role: 'Member', status: 'Pending'},
22+
{id: 20, name: 'Hiroto Šimun', registered: '2018/01/21', role: 'Staff', status: 'Active'},
23+
{id: 21, name: 'Vishnu Serghei', registered: '2018/01/01', role: 'Member', status: 'Active'},
24+
{id: 22, name: 'Zbyněk Phoibos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
25+
{id: 23, name: 'Einar Randall', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
26+
{id: 24, name: 'Félix Troels', registered: '2018/03/21', role: 'Staff', status: 'Active'},
27+
{id: 25, name: 'Aulus Agmundr', registered: '2018/01/01', role: 'Member', status: 'Pending'},
28+
{id: 42, name: 'Ford Prefex', registered: '2001/05/21', role: 'Alien', status: 'Don\'t panic!'}
29+
]
30+
31+
export default usersData

0 commit comments

Comments
 (0)