Complete ordering functionality

js/components/table_header.js

@@ -2,6 +2,7 @@ import React from 'react';
 
 import TableColumnMixin from '../mixins/table_column_mixin';
 import GeneralUtils from '../utils/general_utils';
+import TableHeaderItem from './table_header_item';
 
 
 let TableHeader = React.createClass({
@@ -14,66 +15,30 @@ let TableHeader = React.createClass({
         orderBy: React.PropTypes.string.isRequired
     },
 
-    sortIndex(i) {
-
-        let orderAsc;
-
-        if(this.props.orderAsc) {
-            orderAsc = false;
-        } else {
-            orderAsc = true;
-        }
-
-        this.props.fetchList(1, 10, null, Object.keys(this.props.columnMap)[i], orderAsc);
-    },
-
     render() {
 
         let columnMapValuesList = GeneralUtils.valuesOfObject(this.props.columnMap);
 
-        let calcHeaderText = (val, i, columnClass) => {
-
-            if(columnMapValuesList[i].canBeOrdered && Object.keys(this.props.columnMap)[i] === this.props.orderBy) {
-
-                let boundClick = this.sortIndex.bind(this, i);
-                let carretDirection = 'glyphicon-triangle-';
-
-                if(this.props.orderAsc) {
-                    carretDirection += 'top';
-                } else {
-                    carretDirection += 'bottom';
-                }
-
-                return (
-                    <div className={columnClass + ' ascribe-table-header-column'} key={i} onClick={boundClick}>
-                        <span>
-                            {val.displayName}
-                            <span className={'glyphicon ' + carretDirection}></span>
-                        </span>
-                    </div>
-                );
-            } else {
-                return (
-                    <div className={columnClass + ' ascribe-table-header-column'} key={i}>
-                        <span>
-                            {val.displayName}
-                        </span>
-                    </div>
-                );
-            }
-        };
-
         return (
             <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-header-row">
                 <div className="row">
                     {columnMapValuesList.map((val, i) => {
 
-                        let columnClass = this.calcColumnClasses(this.props.columnMap, i);
+                        let columnClasses = this.calcColumnClasses(this.props.columnMap, i);
+                        let columnName = Object.keys(this.props.columnMap)[i];
+                        let canBeOrdered = columnMapValuesList[i].canBeOrdered;
 
                         return (
-                            <div key={i}>
+                            <TableHeaderItem
-                                {calcHeaderText(val, i, columnClass)}
+                                key={i}
-                            </div>
+                                columnClasses={columnClasses} 
+                                displayName={val.displayName} 
+                                columnName={columnName} 
+                                canBeOrdered={canBeOrdered} 
+                                orderAsc={this.props.orderAsc}
+                                orderBy={this.props.orderBy}
+                                fetchList={this.props.fetchList}>
+                            </TableHeaderItem>
                         );
                     })}
                 </div>

js/components/table_header_item.js

@@ -1,9 +1,52 @@
 import React from 'react';
 
+import TableHeaderItemCarret from './table_header_item_carret';
 
 let TableHeaderItem = React.createClass({
-    mixins: [TableColumnMixin],
+
+    propTypes: {
+        columnClasses: React.PropTypes.string.isRequired,
+        displayName: React.PropTypes.string.isRequired,
+        columnName: React.PropTypes.string.isRequired,
+        canBeOrdered: React.PropTypes.bool.isRequired,
+        orderAsc: React.PropTypes.bool.isRequired,
+        orderBy: React.PropTypes.string.isRequired,
+        fetchList: React.PropTypes.func.isRequired
+    },
+
+    changeOrder() {
+        this.props.fetchList(1, 10, null, this.props.columnName, !this.props.orderAsc);
+    },
+
     render() {
-        return()
+        if(this.props.canBeOrdered) {
+            if(this.props.columnName === this.props.orderBy) {
+                return (
+                    <div 
+                        className={this.props.columnClasses + ' ascribe-table-header-column'}
+                        onClick={this.changeOrder}>
+                        <span>{this.props.displayName} <TableHeaderItemCarret orderAsc={this.props.orderAsc} /></span>
+                    </div>
+                );
+            } else {
+                return (
+                    <div 
+                        className={this.props.columnClasses + ' ascribe-table-header-column'}
+                        onClick={this.changeOrder}>
+                        <span>{this.props.displayName}</span>
+                    </div>
+                );
+            }
+        } else {
+            return (
+                <div className={this.props.columnClasses + ' ascribe-table-header-column'}>
+                    <span>
+                        {this.props.displayName}
+                    </span>
+                </div>
+            );
+        }
     }
 });
+
+export default TableHeaderItem;

js/components/table_header_item_carret.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+let TableHeaderItemCarret = React.createClass({
+    propTypes: {
+        orderAsc: React.PropTypes.bool.isRequired
+    },
+
+    render() {
+        let carretDirection = 'glyphicon-triangle-';
+
+        if(this.props.orderAsc) {
+            carretDirection += 'top';
+        } else {
+            carretDirection += 'bottom';
+        }
+
+        return (
+            <span className={'glyphicon ' + carretDirection}>
+            </span>
+        );
+    }
+});
+
+export default TableHeaderItemCarret;