fix: fix user view routing, refactor users view

This commit is contained in:
woothu
2020-03-19 13:00:04 +01:00
parent b9d9b6a124
commit e1972c2cea
4 changed files with 61 additions and 68 deletions
+11 -1
View File
@@ -26,6 +26,16 @@
import usersData from './UsersData' import usersData from './UsersData'
export default { export default {
name: 'User', name: 'User',
beforeRouteEnter(to, from, next) {
next(vm => {
vm.usersOpened = from.fullPath.includes('users')
})
},
data () {
return {
usersOpened: null
}
},
computed: { computed: {
fields () { fields () {
return [ return [
@@ -48,7 +58,7 @@ export default {
}, },
methods: { methods: {
goBack() { goBack() {
this.$router.go(-1) this.usersOpened ? this.$router.go(-1) : this.$router.push({path: '/users'})
} }
} }
} }
+27 -34
View File
@@ -1,40 +1,33 @@
<template> <template>
<CRow> <CRow>
<CCol col="12" xl="8"> <CCol col="12" xl="8">
<transition name="slide"> <CCard>
<CCard> <CCardHeader>
<CCardHeader> Users
Users </CCardHeader>
</CCardHeader> <CCardBody>
<CCardBody> <CDataTable
<CDataTable hover
hover striped
striped :items="items"
:items="items" :fields="fields"
:fields="fields" :items-per-page="5"
:items-per-page="5" clickable-rows
clickable-rows :active-page="activePage"
:active-page="activePage" @row-clicked="rowClicked"
@row-clicked="rowClicked" :pagination="{ doubleArrows: false, align: center}"
> @page-change="pageChange"
<template #status="data"> >
<td> <template #status="data">
<CBadge :color="getBadge(data.item.status)"> <td>
{{data.item.status}} <CBadge :color="getBadge(data.item.status)">
</CBadge> {{data.item.status}}
</td> </CBadge>
</template> </td>
</CDataTable> </template>
<CPagination </CDataTable>
align="center" </CCardBody>
:double-arrows="false" </CCard>
:active-page="activePage"
:pages="5"
@update:activePage="pageChange"
/>
</CCardBody>
</CCard>
</transition>
</CCol> </CCol>
</CRow> </CRow>
</template> </template>
@@ -22,32 +22,32 @@ exports[`User.vue renders correctly 1`] = `
class="card-body" class="card-body"
> >
<div <div
data-v-31168812="" data-v-ceef3348=""
small="" small=""
> >
<!----> <!---->
<div <div
class="position-relative table-responsive" class="position-relative table-responsive"
data-v-31168812="" data-v-ceef3348=""
> >
<table <table
class="table table-striped b-table-fixed" class="table table-striped b-table-fixed"
data-v-31168812="" data-v-ceef3348=""
> >
<thead <thead
data-v-31168812="" data-v-ceef3348=""
> >
<tr <tr
data-v-31168812="" data-v-ceef3348=""
> >
<th <th
class="" class=""
data-v-31168812="" data-v-ceef3348=""
style="width: 150px;" style="width: 150px;"
> >
<div <div
class="d-inline" class="d-inline"
data-v-31168812="" data-v-ceef3348=""
> >
Samppa Nori Samppa Nori
</div> </div>
@@ -55,12 +55,12 @@ exports[`User.vue renders correctly 1`] = `
</th> </th>
<th <th
class="" class=""
data-v-31168812="" data-v-ceef3348=""
style="width: 150px;" style="width: 150px;"
> >
<div <div
class="d-inline" class="d-inline"
data-v-31168812="" data-v-ceef3348=""
> >
</div> </div>
@@ -71,54 +71,54 @@ exports[`User.vue renders correctly 1`] = `
</thead> </thead>
<tbody <tbody
class="position-relative" class="position-relative"
data-v-31168812="" data-v-ceef3348=""
> >
<tr <tr
data-v-31168812="" data-v-ceef3348=""
> >
<td <td
class="" class=""
data-v-31168812="" data-v-ceef3348=""
> >
registered registered
</td> </td>
<td <td
class="" class=""
data-v-31168812="" data-v-ceef3348=""
> >
2012/01/01 2012/01/01
</td> </td>
</tr> </tr>
<!----> <!---->
<tr <tr
data-v-31168812="" data-v-ceef3348=""
> >
<td <td
class="" class=""
data-v-31168812="" data-v-ceef3348=""
> >
role role
</td> </td>
<td <td
class="" class=""
data-v-31168812="" data-v-ceef3348=""
> >
Member Member
</td> </td>
</tr> </tr>
<!----> <!---->
<tr <tr
data-v-31168812="" data-v-ceef3348=""
> >
<td <td
class="" class=""
data-v-31168812="" data-v-ceef3348=""
> >
status status
</td> </td>
<td <td
class="" class=""
data-v-31168812="" data-v-ceef3348=""
> >
Active Active
</td> </td>
@@ -10,12 +10,10 @@ exports[`Users.vue renders correctly 1`] = `
tag="div" tag="div"
xl="8" xl="8"
> >
<ccard-stub <ccard-stub>
name="slide"
>
<ccardheader-stub> <ccardheader-stub>
Users Users
</ccardheader-stub> </ccardheader-stub>
@@ -28,19 +26,11 @@ exports[`Users.vue renders correctly 1`] = `
hover="true" hover="true"
items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
itemsperpage="5" itemsperpage="5"
pagination="[object Object]"
responsive="true" responsive="true"
sortervalue="[object Object]" sortervalue="[object Object]"
striped="true" striped="true"
/> />
<cpagination-stub
activepage="1"
align="center"
arrows="true"
dots="true"
limit="5"
pages="5"
/>
</ccardbody-stub> </ccardbody-stub>
</ccard-stub> </ccard-stub>
</ccol-stub> </ccol-stub>