Maxi - Add table sorter [skip ci]

This commit is contained in:
ivan 2016-09-30 18:54:29 -03:00
parent 0bd26c8aa4
commit c63fce6a26
5 changed files with 91 additions and 27 deletions

View File

@ -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;
}
}

View File

@ -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;
}}/>
)
}
],

View File

@ -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;

View File

@ -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: {

View File

@ -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;
}
};