implement ordering

css/main.css

@@ -29,7 +29,7 @@
 }
 
 .ascribe-table-header-column > span > .glyphicon {
-    font-size: .6em;
+    font-size: .5em;
 }
 
 .ascribe-table-item:nth-child(even) {

js/actions/piece_list_actions.js

@@ -9,10 +9,14 @@ class PieceListActions {
         );
     }
 
-    fetchList(page, pageSize, search, ordering) {
+    fetchList(page, pageSize, search, orderBy, orderAsc) {
-        PieceListFetcher.fetch(page, pageSize, search, ordering)
+        PieceListFetcher.fetch(page, pageSize, search, orderBy, orderAsc)
             .then((res) => {
-                this.actions.updatePieceList(res.pieces);
+                this.actions.updatePieceList({
+                    'itemList': res.pieces, 
+                    'orderBy': orderBy,
+                    'orderAsc': orderAsc
+                });
             })
             .catch((err) => {
                 console.log(err);           

js/components/piece_list.js

@@ -14,8 +14,12 @@ let Link = Router.Link;
 
 let PieceList = React.createClass({
     
+    getInitialState() {
+        return PieceListStore.getState();
+    },
+
     componentDidMount() {
-        PieceListActions.fetchList(1, 10);
+        PieceListActions.fetchList(this.state.page, this.state.pageSize, this.state.search, this.state.orderBy, this.state.orderAsc);
     },
 
     render() {

js/components/table.js

@@ -9,12 +9,11 @@ let Table = React.createClass({
         columnMap: React.PropTypes.object.isRequired
     },
     render() {
-
         if(this.props.itemList && this.props.itemList.length > 0) {
 
             return (
                 <div className="ascribe-table">
-                    <TableHeader columnMap={this.props.columnMap} itemList={this.props.itemList} fetchList={this.props.fetchList} />
+                    <TableHeader columnMap={this.props.columnMap} itemList={this.props.itemList} fetchList={this.props.fetchList} orderAsc={this.props.orderAsc} />
                     {this.props.itemList.map((item, i) => {
                         return (
                             <TableItem columnMap={this.props.columnMap} columnContent={item} key={i} />

js/components/table_header.js

@@ -9,11 +9,21 @@ let TableHeader = React.createClass({
     propTypes: {
         columnMap: React.PropTypes.object.isRequired,
         itemList: React.PropTypes.array.isRequired,
-        fetchList: React.PropTypes.func.isRequired
+        fetchList: React.PropTypes.func.isRequired,
+        orderAsc: React.PropTypes.bool.isRequired
     },
 
     sortIndex(i) {
-        this.props.fetchList(1, 10, null, '-' + Object.keys(this.props.columnMap)[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() {
@@ -25,12 +35,20 @@ let TableHeader = React.createClass({
 
             if(columnMapValuesList[i].canBeOrdered) {
 
-                let boundClick = this.sortIndex.bind(this, i)
+                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>
-                            <span className="glyphicon glyphicon-chevron-down"></span>
                             {val.displayName}
+                            <span className={'glyphicon ' + carretDirection}></span>
                         </span>
                     </div>
                 );

js/fetchers/piece_list_fetcher.js

@@ -8,10 +8,10 @@ let PieceListFetcher = {
     /**
      * Fetches a list of pieces from the API.
      * Can be called with all supplied queryparams the API.
-     * 
-     * 
      */
-    fetch(page, pageSize, search, ordering) {
+    fetch(page, pageSize, search, orderBy, orderAsc) {
+
+        let ordering = FetchApiUtils.generateOrderingQueryParams(orderBy, orderAsc);
 
         let params = FetchApiUtils.argsToQueryParams({
             page,

js/stores/piece_list_store.js

@@ -5,10 +5,17 @@ import PieceListActions from '../actions/piece_list_actions';
 class PieceListStore {
     constructor() {
         this.itemList = []; // rename this to pieceList after figuring out AltContainer transform
+        this.page = 1;
+        this.pageSize = 10;
+        this.search = "";
+        this.orderBy = "artist_name";
+        this.orderAsc = true;
         this.bindActions(PieceListActions);
     }
 
-    onUpdatePieceList(itemList) {
+    onUpdatePieceList({ itemList, orderBy, orderAsc }) {
+        this.orderAsc = orderAsc;
+        this.orderBy = orderBy;
         this.itemList = itemList;
     }
 };

js/utils/fetch_api_utils.js

@@ -40,6 +40,20 @@ let FetchApiUtils = {
                     return s + snakeCaseKey + '=' + encodeURIComponent(obj[key]);
                 })
                 .join('');
+    },
+
+    /**
+     * Takes a string and a boolean and generates a string query parameter for 
+     * an API call.
+     */
+    generateOrderingQueryParams(orderBy, orderAsc) {
+        let interpolation = '';
+
+        if(!orderAsc) {
+            interpolation += '-';
+        }
+
+        return interpolation + orderBy;
     }
 };