Maxi - Add table sorter [skip ci]
This commit is contained in:
parent
0bd26c8aa4
commit
c63fce6a26
|
@ -6,6 +6,8 @@ import Table from 'core-components/table';
|
|||
import Button from 'core-components/button';
|
||||
import Tooltip from 'core-components/tooltip';
|
||||
|
||||
import DateTransformer from 'lib-core/date-transformer';
|
||||
|
||||
class TicketList extends React.Component {
|
||||
static propTypes = {
|
||||
tickets: React.PropTypes.arrayOf(React.PropTypes.object),
|
||||
|
@ -23,7 +25,7 @@ class TicketList extends React.Component {
|
|||
render() {
|
||||
return (
|
||||
<div className="ticket-list">
|
||||
<Table headers={this.getTableHeaders()} rows={this.getTableRows()} pageSize={10} />
|
||||
<Table headers={this.getTableHeaders()} rows={this.getTableRows()} pageSize={10} comp={this.compareFunction} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -109,10 +111,12 @@ class TicketList extends React.Component {
|
|||
priority: this.getTicketPriority(ticket.priority),
|
||||
department: ticket.department.name,
|
||||
author: ticket.author.name,
|
||||
date: ticket.date,
|
||||
date: DateTransformer.transformToString(ticket.date),
|
||||
unread: ticket.unread,
|
||||
highlighted: ticket.unread
|
||||
};
|
||||
}
|
||||
|
||||
getTicketPriority(priority) {
|
||||
if(priority == 'high'){
|
||||
return (
|
||||
|
@ -130,6 +134,39 @@ class TicketList extends React.Component {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
compareFunction(row1, row2) {
|
||||
let ans = 0;
|
||||
|
||||
if (row1.closed == row2.closed) {
|
||||
if (row1.unread == row2.unread) {
|
||||
let s1 = row1.date;
|
||||
let s2 = row2.date;
|
||||
|
||||
let y1 = s1.substring(0, 4);
|
||||
let y2 = s2.substring(0, 4);
|
||||
|
||||
if (y1 == y2) {
|
||||
let m1 = s1.substring(4, 6);
|
||||
let m2 = s2.substring(4, 6);
|
||||
|
||||
if (m1 == m2) {
|
||||
let d1 = s1.substring(6, 8);
|
||||
let d2 = s2.substring(6, 8);
|
||||
|
||||
if (d1 == d2) {
|
||||
return 0;
|
||||
}
|
||||
return d1 > d2 ? -1 : 1;
|
||||
}
|
||||
return m1 > m2 ? -1 : 1;
|
||||
}
|
||||
return y1 > y2 ? -1 : 1;
|
||||
}
|
||||
return row1.unread ? -1 : 1;
|
||||
}
|
||||
return row1.closed ? -1 : 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -128,21 +128,28 @@ let DemoPage = React.createClass({
|
|||
{value:'Title First', key: 'title1'},
|
||||
{value:'Title Second', key: 'title2'}
|
||||
]} rows={[
|
||||
{title1: 'Row1', title2: 'Example'},
|
||||
{title1: 'Row2', title2: 'Example'},
|
||||
{title1: 'Row3', title2: 'Example'},
|
||||
{title1: 'Row4', title2: 'Example'},
|
||||
{title1: 'Row5', title2: 'Example'},
|
||||
{title1: 'Row6', title2: 'Example'},
|
||||
{title1: 'Row7', title2: 'Example'},
|
||||
{title1: 'Row8', title2: 'Example'},
|
||||
{title1: 'Row9', title2: 'Example'},
|
||||
{title1: 'Row10', title2: 'Example'},
|
||||
{title1: 'Row11', title2: 'Example'},
|
||||
{title1: 'Row12', title2: 'Example'},
|
||||
{title1: 'Row13', title2: 'Example'},
|
||||
{title1: 'Row14', title2: 'Example'}
|
||||
]} pageSize={3}/>
|
||||
{title1: 'Row1', title2: 'Example', n: 1},
|
||||
{title1: 'Row2', title2: 'Example', n: 2},
|
||||
{title1: 'Row3', title2: 'Example', n: 3},
|
||||
{title1: 'Row4', title2: 'Example', n: 4},
|
||||
{title1: 'Row5', title2: 'Example', n: 5},
|
||||
{title1: 'Row6', title2: 'Example', n: 6},
|
||||
{title1: 'Row7', title2: 'Example', n: 7},
|
||||
{title1: 'Row8', title2: 'Example', n: 8},
|
||||
{title1: 'Row9', title2: 'Example', n: 9},
|
||||
{title1: 'Row10', title2: 'Example', n: 10},
|
||||
{title1: 'Row11', title2: 'Example', n: 11},
|
||||
{title1: 'Row12', title2: 'Example', n: 12},
|
||||
{title1: 'Row13', title2: 'Example', n: 13},
|
||||
{title1: 'Row14', title2: 'Example', n: 14}
|
||||
]} pageSize={3} comp={function (a, b) {
|
||||
let ans = 0;
|
||||
if(a.title1 < b.title1)
|
||||
ans = -1;
|
||||
else if(a.title1 > b.title1)
|
||||
ans = 1;
|
||||
return ans;
|
||||
}}/>
|
||||
)
|
||||
}
|
||||
],
|
||||
|
|
|
@ -13,7 +13,8 @@ class Table extends React.Component {
|
|||
})),
|
||||
rows: React.PropTypes.arrayOf(React.PropTypes.object),
|
||||
pageSize: React.PropTypes.number,
|
||||
type: React.PropTypes.oneOf(['default'])
|
||||
type: React.PropTypes.oneOf(['default']),
|
||||
comp: React.PropTypes.func
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
|
@ -34,7 +35,7 @@ class Table extends React.Component {
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{this.props.rows.map(this.renderRow.bind(this))}
|
||||
{this.getRows().map(this.renderRow.bind(this))}
|
||||
</tbody>
|
||||
</table>
|
||||
{(this.props.pageSize && this.props.rows.length > this.props.pageSize) ? this.renderNavigation() : null}
|
||||
|
@ -100,6 +101,13 @@ class Table extends React.Component {
|
|||
|
||||
return classNames(classes);
|
||||
}
|
||||
|
||||
getRows() {
|
||||
let v = _.clone(this.props.rows);
|
||||
v.sort(this.props.comp);
|
||||
return v;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default Table;
|
|
@ -143,10 +143,10 @@ module.exports = [
|
|||
id: 2,
|
||||
name: 'Environment Setup'
|
||||
},
|
||||
date: '15 Apr 2016',
|
||||
date: '20140415',
|
||||
file: 'http://www.opensupports.com/some_file.zip',
|
||||
language: 'en',
|
||||
unread: true,
|
||||
unread: false,
|
||||
closed: false,
|
||||
priority: 'low',
|
||||
author: {
|
||||
|
@ -168,7 +168,7 @@ module.exports = [
|
|||
email: 'jobs@steve.com',
|
||||
staff: true
|
||||
},
|
||||
date: '12 Dec 2016',
|
||||
date: '20161212',
|
||||
file: ''
|
||||
},
|
||||
{
|
||||
|
@ -179,7 +179,7 @@ module.exports = [
|
|||
steve: 'haskell@lambda.com',
|
||||
staff: false
|
||||
},
|
||||
date: '12 Dec 2016',
|
||||
date: '20161212',
|
||||
file: ''
|
||||
}
|
||||
]
|
||||
|
@ -192,7 +192,7 @@ module.exports = [
|
|||
id: 2,
|
||||
name: 'Environment Setup'
|
||||
},
|
||||
date: '15 Apr 2016',
|
||||
date: '20170415',
|
||||
file: 'http://www.opensupports.com/some_file.zip',
|
||||
language: 'en',
|
||||
unread: false,
|
||||
|
@ -232,10 +232,10 @@ module.exports = [
|
|||
id: 2,
|
||||
name: 'Environment Setup'
|
||||
},
|
||||
date: '15 Apr 2016',
|
||||
date: '20160415',
|
||||
file: 'http://www.opensupports.com/some_file.zip',
|
||||
language: 'en',
|
||||
unread: false,
|
||||
unread: true,
|
||||
closed: false,
|
||||
priority: 'high',
|
||||
author: {
|
||||
|
|
|
@ -0,0 +1,12 @@
|
|||
let month = ["", "Jan", "Feb", "Mar", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
||||
|
||||
export default {
|
||||
transformToString (date) {
|
||||
let y = date.substring(0, 4);
|
||||
let m = date.substring(4, 6);
|
||||
let d = date.substring(6, 8);
|
||||
m = (m[0] - '0') * 10 + (m[1] - '0');
|
||||
|
||||
return d + " " + month[m] + " " + y;
|
||||
}
|
||||
};
|
Loading…
Reference in New Issue