Skip to content

Commit b7ab69e

Browse files
xidedixxidedix
committed
refactor: views Tables, Table
- refactor: extract shuffleArray() to shared/utils - refactor: Tables/Table pass items as props to c-table
1 parent 7e84252 commit b7ab69e

File tree

3 files changed

+101
-63
lines changed

3 files changed

+101
-63
lines changed

‎src/shared/utils.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,17 @@
11
export function random (min, max) {
22
return Math.floor(Math.random() * (max - min + 1) + min)
33
}
4+
5+
/**
6+
* Randomize array element order in-place.
7+
* Using Durstenfeld shuffle algorithm.
8+
*/
9+
export const shuffleArray = (array) => {
10+
for (let i = array.length - 1; i > 0; i--) {
11+
let j = Math.floor(Math.random() * (i + 1))
12+
let temp = array[i]
13+
array[i] = array[j]
14+
array[j] = temp
15+
}
16+
return array
17+
}

‎src/views/base/Table.vue

Lines changed: 30 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,22 @@
11
<template>
22
<b-card :header="caption">
3-
<b-table :hover="hover" :striped="striped" :bordered="bordered" :small="small" :fixed="fixed" responsive="sm" :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage">
3+
<b-table :dark="dark" :hover="hover" :striped="striped" :bordered="bordered" :small="small" :fixed="fixed" responsive="sm" :items="items" :fields="captions" :current-page="currentPage" :per-page="perPage">
44
<template slot="status" slot-scope="data">
55
<b-badge :variant="getBadge(data.item.status)">{{data.item.status}}</b-badge>
66
</template>
77
</b-table>
88
<nav>
9-
<b-pagination :total-rows="getRowCount(items)" :per-page="perPage" v-model="currentPage" prev-text="Prev" next-text="Next" hide-goto-end-buttons/>
9+
<b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" prev-text="Prev" next-text="Next" hide-goto-end-buttons/>
1010
</nav>
1111
</b-card>
1212
</template>
1313

1414
<script>
15-
/**
16-
* Randomize array element order in-place.
17-
* Using Durstenfeld shuffle algorithm.
18-
*/
19-
const shuffleArray = (array) => {
20-
for (let i = array.length - 1; i > 0; i--) {
21-
let j = Math.floor(Math.random() * (i + 1))
22-
let temp = array[i]
23-
array[i] = array[j]
24-
array[j] = temp
25-
}
26-
return array
27-
}
15+
2816
2917
export default {
3018
name: 'c-table',
19+
inheritAttrs: false,
3120
props: {
3221
caption: {
3322
type: String,
@@ -52,57 +41,46 @@ export default {
5241
fixed: {
5342
type: Boolean,
5443
default: false
44+
},
45+
tableData: {
46+
type: [Array, Function],
47+
default: () => []
48+
},
49+
fields: {
50+
type: [Array, Object],
51+
default: () => []
52+
},
53+
perPage: {
54+
type: Number,
55+
default: 5
56+
},
57+
dark: {
58+
type: Boolean,
59+
default: false
5560
}
5661
},
5762
data: () => {
5863
return {
59-
items: shuffleArray([
60-
{username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'},
61-
{username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
62-
{username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
63-
{username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
64-
{username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
65-
{username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
66-
{username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
67-
{username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
68-
{username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
69-
{username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
70-
{username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active'},
71-
{username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
72-
{username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
73-
{username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
74-
{username: 'Leopold Gáspár', registered: '2012/01/21', role: 'Staff', status: 'Active'},
75-
{username: 'Pompeius René', registered: '2012/01/01', role: 'Member', status: 'Active'},
76-
{username: 'Paĉjo Jadon', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
77-
{username: 'Micheal Mercurius', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
78-
{username: 'Ganesha Dubhghall', registered: '2012/03/01', role: 'Member', status: 'Pending'},
79-
{username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
80-
{username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
81-
{username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
82-
{username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
83-
{username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
84-
{username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
85-
]),
86-
fields: [
87-
{key: 'username'},
88-
{key: 'registered'},
89-
{key: 'role'},
90-
{key: 'status'}
91-
],
9264
currentPage: 1,
93-
perPage: 5,
94-
totalRows: 0
9565
}
9666
},
67+
computed: {
68+
items: function() {
69+
const items = this.tableData
70+
return Array.isArray(items) ? items : items()
71+
},
72+
totalRows: function () { return this.getRowCount() },
73+
captions: function() { return this.fields }
74+
},
9775
methods: {
9876
getBadge (status) {
9977
return status === 'Active' ? 'success'
10078
: status === 'Inactive' ? 'secondary'
10179
: status === 'Pending' ? 'warning'
10280
: status === 'Banned' ? 'danger' : 'primary'
10381
},
104-
getRowCount (items) {
105-
return items.length
82+
getRowCount: function () {
83+
return this.items.length
10684
}
10785
}
10886
}

‎src/views/base/Tables.vue

Lines changed: 57 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,38 +3,84 @@
33

44
<b-row>
55
<b-col lg="6">
6-
<c-table caption="<i class='fa fa-align-justify'></i> Simple Table"></c-table>
7-
</b-col><!--/.col-->
6+
<c-table :table-data="items" :fields="fields" caption="<i class='fa fa-align-justify'></i> Simple Table"></c-table>
7+
</b-col>
88

99
<b-col lg="6">
10-
<c-table striped caption="<i class='fa fa-align-justify'></i> Striped Table"></c-table>
11-
</b-col><!--/.col-->
10+
<c-table :table-data="items" striped caption="<i class='fa fa-align-justify'></i> Striped Table"></c-table>
11+
</b-col>
1212
</b-row><!--/.row-->
1313

1414
<b-row>
1515
<b-col lg="6">
16-
<c-table small caption="<i class='fa fa-align-justify'></i> Condensed Table"></c-table>
17-
</b-col><!--/.col-->
16+
<c-table :table-data="items" small caption="<i class='fa fa-align-justify'></i> Condensed Table"></c-table>
17+
</b-col>
1818

1919
<b-col lg="6">
20-
<c-table fixed bordered caption="<i class='fa fa-align-justify'></i> Bordered Table"></c-table>
21-
</b-col><!--/.col-->
22-
</b-row><!--/.row-->
20+
<c-table :table-data="items" fixed bordered caption="<i class='fa fa-align-justify'></i> Bordered Table"></c-table>
21+
</b-col>
22+
</b-row>
2323

2424
<b-row>
2525
<b-col sm="12">
26-
<c-table hover striped bordered small fixed caption="<i class='fa fa-align-justify'></i> Combined All Table"></c-table>
26+
<c-table :table-data="itemsArray" :per-page=10 hover striped bordered small fixed caption="<i class='fa fa-align-justify'></i> Combined All Table"></c-table>
27+
</b-col>
28+
</b-row>
29+
<b-row>
30+
<b-col sm="12">
31+
<c-table dark :table-data="itemsArray" :per-page=10 hover striped bordered small fixed caption="<i class='fa fa-align-justify'></i> Dark Table"></c-table>
2732
</b-col>
2833
</b-row>
2934
</div>
3035

3136
</template>
3237

3338
<script>
39+
import { shuffleArray } from '@/shared/utils'
3440
import cTable from './Table.vue'
3541
42+
const someData = () => shuffleArray([
43+
{username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active', _rowVariant: 'success'},
44+
{username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned', _rowVariant: 'danger'},
45+
{username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _rowVariant: 'info'},
46+
{username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
47+
{username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
48+
{username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
49+
{username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
50+
{username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
51+
{username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
52+
{username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
53+
{username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active'},
54+
{username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
55+
{username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
56+
{username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
57+
{username: 'Leopold Gáspár', registered: '2012/01/21', role: 'Staff', status: 'Active'},
58+
{username: 'Pompeius René', registered: '2012/01/01', role: 'Member', status: 'Active'},
59+
{username: 'Paĉjo Jadon', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
60+
{username: 'Micheal Mercurius', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
61+
{username: 'Ganesha Dubhghall', registered: '2012/03/01', role: 'Member', status: 'Pending'},
62+
{username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
63+
{username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
64+
{username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
65+
{username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
66+
{username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
67+
{username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
68+
])
69+
3670
export default {
3771
name: 'tables',
38-
components: {cTable}
72+
components: {cTable},
73+
data: () => {
74+
return {
75+
items: someData,
76+
itemsArray: someData(),
77+
fields: [
78+
{key: 'username', label: 'User', sortable: true},
79+
{key: 'registered'},
80+
{key: 'role'},
81+
{key: 'status', sortable: true}
82+
],
83+
}
84+
}
3985
}
4086
</script>

0 commit comments

Comments
 (0)