sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: Users Breadcrumb example with /users/:id

Browse Source
This commit is contained in:
xidedix
2018-06-27 15:29:17 +02:00
parent 14747004fc
commit cb8b974396
5 changed files with 209 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/containers/DefaultContainer.vue
+5 -5
View File
@@ -8,8 +8,8 @@
</b-link>
<SidebarToggler class="d-md-down-none" display="lg" />
<b-navbar-nav class="d-md-down-none">
<b-nav-item class="px-3">Dashboard</b-nav-item>
<b-nav-item class="px-3">Users</b-nav-item>
<b-nav-item class="px-3" to="/dashboard">Dashboard</b-nav-item>
<b-nav-item class="px-3" to="/users" exact>Users</b-nav-item>
<b-nav-item class="px-3">Settings</b-nav-item>
</b-navbar-nav>
<b-navbar-nav class="ml-auto">
@@ -37,7 +37,7 @@
<SidebarMinimizer/>
</AppSidebar>
<main class="main">
<breadcrumb :list="list"/>
<Breadcrumb :list="list"/>
<div class="container-fluid">
<router-view></router-view>
</div>
@@ -54,7 +54,7 @@
</template>
<script>
import nav from '../_nav'
import nav from '@/_nav'
import { Header as AppHeader, SidebarToggler, Sidebar as AppSidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, Aside as AppAside, AsideToggler, Footer as TheFooter, Breadcrumb } from '@coreui/vue'
import DefaultAside from './DefaultAside'
import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'
@@ -87,7 +87,7 @@ export default {
return this.$route.name
},
list () {
return this.$route.matched
return this.$route.matched.filter((route) => route.name || route.meta.label )
}
}
}
src/router/index.js
+23
View File
@@ -54,6 +54,10 @@ const Page500 = () => import('@/views/pages/Page500')
const Login = () => import('@/views/pages/Login')
const Register = () => import('@/views/pages/Register')
// Users
const Users = () => import('@/views/users/Users')
const User = () => import('@/views/users/User')
Vue.use(Router)
export default new Router({
@@ -102,6 +106,25 @@ export default new Router({
name: 'Widgets',
component: Widgets
},
{
path: 'users',
meta: { label: 'Users'},
component: {
render (c) { return c('router-view') }
},
children: [
{
path: '',
component: Users,
},
{
path: ':id',
meta: { label: 'User Details'},
name: 'User',
component: User,
},
]
},
{
path: 'base',
redirect: '/base/cards',
src/views/users/User.vue
+51
View File
@@ -0,0 +1,51 @@
<template>
<b-row>
<b-col cols="12" lg="6">
<b-card no-header>
<template slot="header">
User id: {{ $route.params.id }}
</template>
<b-table striped small fixed responsive="sm" :items="items($route.params.id)" :fields="fields">
<template slot="value" slot-scope="data">
<strong>{{data.item.value}}</strong>
</template>
</b-table>
<template slot="footer">
<b-button @click="goBack">Back</b-button>
</template>
</b-card>
</b-col>
</b-row>
</template>
<script>
import usersData from './UsersData'
export default {
name: 'User',
props: {
caption: {
type: String,
default: 'User id'
},
},
data: () => {
return {
items: (id) => {
const user = usersData.find( user => user.id.toString() === id)
const userDetails = user ? Object.entries(user) : [['id', 'Not found']]
return userDetails.map(([key, value]) => {return {key: key, value: value}})
},
fields: [
{key: 'key'},
{key: 'value'},
],
}
},
methods: {
goBack() {
this.$router.go(-1)
// this.$router.replace({path: '/users'})
}
}
}
</script>
src/views/users/Users.vue
+99
View File
@@ -0,0 +1,99 @@
<template>
<b-row>
<b-col cols="12" xl="6">
<transition name="slide">
<b-card :header="caption">
<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">
<template slot="id" slot-scope="data">
<strong>{{data.item.id}}</strong>
</template>
<template slot="name" slot-scope="data">
<strong>{{data.item.name}}</strong>
</template>
<template slot="status" slot-scope="data">
<b-badge :variant="getBadge(data.item.status)">{{data.item.status}}</b-badge>
</template>
</b-table>
<nav>
<b-pagination size="sm" :total-rows="getRowCount(items)" :per-page="perPage" v-model="currentPage" prev-text="Prev" next-text="Next" hide-goto-end-buttons/>
</nav>
</b-card>
</transition>
</b-col>
</b-row>
</template>
<script>
import usersData from './UsersData'
export default {
name: 'Users',
props: {
caption: {
type: String,
default: 'Users'
},
hover: {
type: Boolean,
default: true
},
striped: {
type: Boolean,
default: true
},
bordered: {
type: Boolean,
default: false
},
small: {
type: Boolean,
default: false
},
fixed: {
type: Boolean,
default: false
}
},
data: () => {
return {
items: usersData.filter((user) => user.id < 42),
fields: [
{key: 'id'},
{key: 'name'},
{key: 'registered'},
{key: 'role'},
{key: 'status'}
],
currentPage: 1,
perPage: 5,
totalRows: 0
}
},
computed: {
},
methods: {
getBadge (status) {
return status === 'Active' ? 'success'
: status === 'Inactive' ? 'secondary'
: status === 'Pending' ? 'warning'
: status === 'Banned' ? 'danger' : 'primary'
},
getRowCount (items) {
return items.length
},
userLink (id) {
return `users/${id.toString()}`
},
rowClicked (item) {
const userLink = this.userLink(item.id)
this.$router.push({path: userLink})
}
}
}
</script>
<style scoped>
.card-body >>> table > tbody > tr > td {
cursor: pointer;
}
</style>
src/views/users/UsersData.js
+31
View File
@@ -0,0 +1,31 @@
const usersData = [
{id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'},
{id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
{id: 4, name: 'Derick Maximinus', registered: '2018/03/01', role: 'Member', status: 'Pending'},
{id: 5, name: 'Friderik Dávid', registered: '2018/01/21', role: 'Staff', status: 'Active'},
{id: 6, name: 'Yiorgos Avraamu', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 7, name: 'Avram Tarasios', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 8, name: 'Quintin Ed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
{id: 9, name: 'Enéas Kwadwo', registered: '2018/03/01', role: 'Member', status: 'Pending'},
{id: 10, name: 'Agapetus Tadeáš', registered: '2018/01/21', role: 'Staff', status: 'Active'},
{id: 11, name: 'Carwyn Fachtna', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 12, name: 'Nehemiah Tatius', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 13, name: 'Ebbe Gemariah', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
{id: 14, name: 'Eustorgios Amulius', registered: '2018/03/01', role: 'Member', status: 'Pending'},
{id: 15, name: 'Leopold Gáspár', registered: '2018/01/21', role: 'Staff', status: 'Active'},
{id: 16, name: 'Pompeius René', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 17, name: 'Paĉjo Jadon', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 18, name: 'Micheal Mercurius', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
{id: 19, name: 'Ganesha Dubhghall', registered: '2018/03/01', role: 'Member', status: 'Pending'},
{id: 20, name: 'Hiroto Šimun', registered: '2018/01/21', role: 'Staff', status: 'Active'},
{id: 21, name: 'Vishnu Serghei', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 22, name: 'Zbyněk Phoibos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 23, name: 'Einar Randall', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
{id: 24, name: 'Félix Troels', registered: '2018/03/21', role: 'Staff', status: 'Active'},
{id: 25, name: 'Aulus Agmundr', registered: '2018/01/01', role: 'Member', status: 'Pending'},
{id: 42, name: 'Ford Prefex', registered: '2001/05/21', role: 'Alien', status: 'Don\'t panic!'}
]
export default usersData