2015-05-20 14:48:57 +02:00
|
|
|
import React from 'react';
|
|
|
|
|
|
|
|
import TableColumnMixin from '../mixins/table_column_mixin';
|
|
|
|
import GeneralUtils from '../utils/general_utils';
|
|
|
|
|
2015-05-20 16:44:45 +02:00
|
|
|
|
2015-05-20 14:48:57 +02:00
|
|
|
let TableHeader = React.createClass({
|
|
|
|
mixins: [TableColumnMixin],
|
|
|
|
propTypes: {
|
2015-05-20 19:19:57 +02:00
|
|
|
columnMap: React.PropTypes.object.isRequired,
|
|
|
|
itemList: React.PropTypes.array.isRequired,
|
|
|
|
fetchList: React.PropTypes.func.isRequired
|
|
|
|
},
|
|
|
|
|
|
|
|
sortIndex(i) {
|
|
|
|
this.props.fetchList(1, 10, null, '-' + Object.keys(this.props.columnMap)[i]);
|
2015-05-20 14:48:57 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
|
|
|
let columnMapValuesList = GeneralUtils.valuesOfObject(this.props.columnMap);
|
|
|
|
|
2015-05-20 19:19:57 +02:00
|
|
|
let calcHeaderText = (val, i, columnClass) => {
|
|
|
|
let s = "";
|
|
|
|
|
|
|
|
if(columnMapValuesList[i].canBeOrdered) {
|
|
|
|
|
|
|
|
let boundClick = this.sortIndex.bind(this, i)
|
|
|
|
return (
|
|
|
|
<div className={columnClass + ' ascribe-table-header-column'} key={i} onClick={boundClick}>
|
|
|
|
<span>
|
|
|
|
<span className="glyphicon glyphicon-chevron-down"></span>
|
|
|
|
{val.displayName}
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
return (
|
|
|
|
<div className={columnClass + ' ascribe-table-header-column'} key={i}>
|
|
|
|
<span>
|
|
|
|
{val.displayName}
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2015-05-20 14:48:57 +02:00
|
|
|
return (
|
2015-05-20 17:32:06 +02:00
|
|
|
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-header-row">
|
2015-05-20 14:48:57 +02:00
|
|
|
<div className="row">
|
|
|
|
{columnMapValuesList.map((val, i) => {
|
2015-05-20 16:10:02 +02:00
|
|
|
|
|
|
|
let columnClass = this.calcColumnClasses(this.props.columnMap, i);
|
|
|
|
|
2015-05-20 14:48:57 +02:00
|
|
|
return (
|
2015-05-20 19:19:57 +02:00
|
|
|
<div key={i}>
|
|
|
|
{calcHeaderText(val, i, columnClass)}
|
2015-05-20 14:48:57 +02:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2015-05-20 16:44:45 +02:00
|
|
|
export default TableHeader;
|