Skip to content

Commit 4a583c1

Browse files
author
Ilya Kitayev
committed
Merge branch 'dev' into 'master'
closes #30 - Sort by column value See merge request awes-io/table-builder!30
2 parents 3c898f0 + 6591a3c commit 4a583c1

13 files changed

+203
-172
lines changed

‎dist/js/main.js

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/main.legacy.js

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/index.html

+63-64
Original file line numberDiff line numberDiff line change
@@ -22,78 +22,77 @@
2222
<script src="https://cdn.pkgkit.com/5cd207e2c94eb723c3307764a5693def/awes-io/context-menu/v1.x.x/js/main.js"></script>
2323

2424
<!-- core -->
25-
<script src="https://cdn.pkgkit.com/5cd207e2c94eb723c3307764a5693def/awes-io/base-js/v1.3.15/js/main.js"></script>
25+
<script src="https://cdn.pkgkit.com/5cd207e2c94eb723c3307764a5693def/awes-io/base-js/v1.x.x/js/main.js"></script>
2626
</head>
2727
<body>
28-
<div id="awes-app">
29-
<table-builder store-data="table" row-url="http://company.local-awescrm.de:5051/managers/{id}">
28+
<content-wrapper store-data="table" url="/test-data.json">
29+
<template slot-scope="table">
30+
<table-builder :default="table.data" row-url="http://company.local-awescrm.de:5051/managers/{id}">
3031

31-
<template slot="empty">
32-
<p>You do not have projects Want to create the first one?</p>
33-
</template>
34-
35-
<template slot="header">
36-
<h2 style="padding: 1rem; background-color: lightgray">
37-
Test header block
38-
</h2>
39-
</template>
40-
41-
<tb-column name="name">
42-
<template slot-scope="col">
43-
<div class="ava-text">
44-
<span v-if="col.data.avatar" v-html="col.data.avatar"></span>
45-
<i v-else class="icon icon-user"></i>
46-
47-
<span v-if="col.data.active">{{ $get(col.data, 'profile_manager.full_name') }}</span>
48-
<strike v-else>{{ $get(col.data, 'profile_manager.full_name') }}</strike>
49-
</div>
50-
</template>
51-
</tb-column>
52-
<tb-column name="position">
53-
<template slot-scope="col">
54-
{{ col.data.profile_manager.position }}
55-
</template>
56-
</tb-column>
57-
<tb-column name="phone" class="int-table__nowrap" media="tablet, desktop">
58-
<template slot-scope="col">
59-
<a :href="'tel:' + $get(col.data.phones[0], 'phone_link')">
60-
{{ $get(col.data.phones[0], 'phone_formatted') }}
61-
</a>
32+
<template slot="empty">
33+
<p>You do not have projects Want to create the first one?</p>
6234
</template>
63-
</tb-column>
64-
<tb-column name="email" class="int-table__nowrap" media="desktop">
65-
<template slot-scope="col">
66-
<a :href="'mailto:' + col.data.email">{{ col.data.email }}</a>
35+
36+
<template slot="header">
37+
<h2 style="padding: 1rem; background-color: lightgray">
38+
Test header block
39+
</h2>
6740
</template>
68-
</tb-column>
6941

70-
<template slot="hidden" slot-scope="h">
71-
<ul>
72-
<li v-if="h.matchedMedia.includes('mobile')">
73-
<strong>{{ h.rowData.profile_manager.position }}</strong>
74-
</li>
75-
<li v-if="h.rowData.phones.length">
76-
<a :href="'tel:' + h.rowData.phones[0].phone_link">
77-
{{ h.rowData.phones[0].phone_formatted }}
42+
<tb-column name="name">
43+
<template slot-scope="col">
44+
<div class="ava-text">
45+
<span v-if="col.data.avatar" v-html="col.data.avatar"></span>
46+
<i v-else class="icon icon-user"></i>
47+
<component :is="col.data.active ? 'span' : 'strike'">
48+
{{ $get(col.data, 'profile_manager.full_name') }}
49+
</component>
50+
</div>
51+
</template>
52+
</tb-column>
53+
<tb-column name="position" sort>
54+
<template slot-scope="col">
55+
{{ col.data.profile_manager.position }}
56+
</template>
57+
</tb-column>
58+
<tb-column name="phone" class="int-table__nowrap" media="tablet, desktop">
59+
<template slot-scope="col">
60+
<a :href="'tel:' + $get(col.data.phones[0], 'phone_link')">
61+
{{ $get(col.data.phones[0], 'phone_formatted') }}
7862
</a>
79-
</li>
80-
<li><a :href="'mailto:' + h.data.email">{{ h.data.email }}</a></li>
81-
</ul>
82-
</template>
63+
</template>
64+
</tb-column>
65+
<tb-column name="email" sort="mail|mail_down" class="int-table__nowrap" media="desktop">
66+
<template slot-scope="col">
67+
<a :href="'mailto:' + col.data.email">{{ col.data.email }}</a>
68+
</template>
69+
</tb-column>
70+
71+
<template slot="hidden" slot-scope="h">
72+
<ul>
73+
<li v-if="h.matchedMedia.includes('mobile')">
74+
<strong>{{ h.rowData.profile_manager.position }}</strong>
75+
</li>
76+
<li v-if="h.rowData.phones.length">
77+
<a :href="'tel:' + h.rowData.phones[0].phone_link">
78+
{{ h.rowData.phones[0].phone_formatted }}
79+
</a>
80+
</li>
81+
<li><a :href="'mailto:' + h.data.email">{{ h.data.email }}</a></li>
82+
</ul>
83+
</template>
8384

84-
<template slot="footer">
85-
<div style="padding: 1rem; background-color: lightgray">
86-
Test footer block with <button>no-effect button :)</button>
87-
</div>
88-
</template>
89-
</table-builder>
85+
<template slot="footer">
86+
<div style="padding: 1rem; background-color: lightgray">
87+
Test footer block with <button>no-effect button :)</button>
88+
</div>
89+
</template>
90+
</table-builder>
9091

91-
<paginate-builder
92-
ref="pb"
93-
url="/test-data.json"
94-
store-data="table"
95-
:default="false"
96-
></paginate-builder>
97-
</div>
92+
<paginate-builder
93+
:meta="table.meta"
94+
></paginate-builder>
95+
</template>
96+
</content-wrapper>
9897
</body>
9998
</html>

‎examples/table-form-modal.html

-81
This file was deleted.

‎examples/test-data.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"avatar": null,
2727
"phones": [],
2828
"email": "[email protected]",
29-
"active": 1,
29+
"active": 0,
3030
"theme_dark": 0,
3131
"profile_manager": {
3232
"full_name": "Clementine Farrell",

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "table-builder",
3-
"version": "1.1.1",
3+
"version": "1.2.0",
44
"description": "Dynamic tables with pagination and sorting for data visualization",
55
"main": "dist/js/main.js",
66
"module": "src/js/plugin.js",

‎resources/js/mixins/config.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import config from '../modules/config.js'
2+
3+
export default {
4+
5+
beforeCreate() {
6+
this._config = Object.assign(config, _.pick(AWES._config.tableBuilder, Object.keys(config)))
7+
}
8+
}

‎resources/js/modules/config.js

+5
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,10 @@ export default {
55
mobile: '(max-width: 600px)',
66
tablet: '(min-width: 601px) and (max-width: 900px)',
77
desktop: '(min-width: 901px)'
8+
},
9+
sort: {
10+
param: 'orderBy',
11+
ascTemplate: '%s',
12+
descTemplate: '%s_desc'
813
}
914
}

‎resources/js/modules/fp.js

+2
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,5 @@ export const isSet = (val) => {
1313
export const ucFirst = (string) => {
1414
return string.charAt(0).toUpperCase() + string.slice(1);
1515
}
16+
17+
export const trimStr = string => string.trim()

‎resources/vue/paginate-builder.vue

+3-7
Original file line numberDiff line numberDiff line change
@@ -51,12 +51,14 @@
5151

5252
<script>
5353
import { compare } from '../js/modules/fp.js'
54-
import config from '../js/modules/config.js'
54+
import configMixin from '../js/mixins/config.js'
5555
5656
export default {
5757
5858
name: 'paginate-builder',
5959
60+
mixins: [ configMixin ],
61+
6062
props: {
6163
6264
meta: Object,
@@ -146,12 +148,6 @@ export default {
146148
},
147149
148150
149-
beforeCreate() {
150-
// config
151-
this._config = Object.assign(config, _.pick(AWES._config.tableBuilder, Object.keys(config)))
152-
},
153-
154-
155151
created() {
156152
//Если данные не переданы в компонент, забираем с севера
157153
if ( this.default === false) {

‎resources/vue/table-builder.vue

+32-11
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,15 @@
4242
>
4343
<thead>
4444
<tr>
45-
<th v-for="(name, i) in columnNames" :key="i">{{ name }}</th>
45+
<th v-for="({ label, sort }, i) in columnsHead" :key="i">
46+
<tb-sort-button
47+
v-if="sort"
48+
v-bind="sort"
49+
>
50+
{{ label }}
51+
</tb-sort-button>
52+
<template v-else>{{ label }}</template>
53+
</th>
4654
<th v-if="hiddenOptions && hiddenOptions.length"></th>
4755
</tr>
4856
</thead>
@@ -91,17 +99,19 @@
9199
</template>
92100

93101
<script>
94-
import { ucFirst } from '../js/modules/fp.js'
95-
import mediaQueries from '../js/mixins/media-queries.js'
102+
import { ucFirst, trimStr } from '../js/modules/fp.js'
103+
import mediaQueriesMixin from '../js/mixins/media-queries.js'
104+
import configMixin from '../js/mixins/config.js'
96105
import tbRow from './tb-row.vue'
106+
import tbSortButton from './tb-sort-button.vue'
97107
98108
export default {
99109
100110
name: 'table-builder',
101111
102-
mixins: [ mediaQueries ],
112+
mixins: [ mediaQueriesMixin, configMixin ],
103113
104-
components: { tbRow },
114+
components: { tbRow, tbSortButton },
105115
106116
107117
props: {
@@ -189,13 +199,13 @@ export default {
189199
})
190200
},
191201
192-
columnNames() {
193-
return this.shownOptions.map( item => {
194-
return ucFirst( typeof item.label !== 'undefined' ?
195-
item.label :
196-
item.name )
202+
columnsHead() {
203+
return this.shownOptions.map( option => {
204+
let label = ucFirst( typeof option.label !== 'undefined' ? option.label : option.name )
205+
let sort = typeof option.sort === 'string' ? this._getSortParams( option.name, option.sort ) : false
206+
return { label, sort }
197207
})
198-
},
208+
}
199209
},
200210
201211
@@ -216,6 +226,17 @@ export default {
216226
this.activeItem = null
217227
}
218228
},
229+
230+
_getSortParams(label, sort) {
231+
let asc = this.$get(this._config, 'sort.ascTemplate').replace('%s', label)
232+
let desc = this.$get(this._config, 'sort.descTemplate').replace('%s', label)
233+
if ( sort !== '' ) {
234+
let [_asc, _desc] = sort.split('|').map(trimStr)
235+
asc = _asc ? _asc : asc
236+
desc = _desc ? _desc : desc
237+
}
238+
return { asc, desc }
239+
}
219240
}
220241
}
221242
</script>

‎resources/vue/tb-column.vue

+3-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ export default {
99
1010
label: String,
1111
12-
media: String
12+
media: String,
13+
14+
sort: String
1315
}
1416
}
1517
</script>

0 commit comments

Comments
 (0)