add ordering functionality to editionlist table

js/actions/edition_list_actions.js

@@ -11,13 +11,15 @@ class EditionListActions {
         );
     }
 
-    fetchEditionList(pieceId) {
+    fetchEditionList(pieceId, orderBy, orderAsc) {
         EditionListFetcher
-            .fetch(pieceId)
+            .fetch(pieceId, orderBy, orderAsc)
             .then((res) => {
                 this.actions.updateEditionList({
                     'editionListOfPiece': res.editions,
-                    pieceId
+                    pieceId,
+                    orderBy,
+                    orderAsc
                 });
             })
             .catch((err) => {

js/components/ascribe_accordion_list/accordion_list_item_table.js

@@ -14,7 +14,10 @@ let AccordionListItemTable = React.createClass({
         itemList: React.PropTypes.array,
         columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
         numOfTableItems: React.PropTypes.number,
-        show: React.PropTypes.bool
+        show: React.PropTypes.bool,
+        changeOrder: React.PropTypes.func,
+        orderBy: React.PropTypes.string,
+        orderAsc: React.PropTypes.bool
     },
 
     render() {
@@ -23,7 +26,10 @@ let AccordionListItemTable = React.createClass({
                 <div className={this.props.className}>
                     <Table
                       columnList={this.props.columnList} 
-                      itemList={this.props.itemList}>
+                      itemList={this.props.itemList}
+                      changeOrder={this.props.changeOrder}
+                      orderBy={this.props.orderBy}
+                      orderAsc={this.props.orderAsc}>
                         {this.props.itemList.map((item, i) => {
                             return (
                                  <TableItem

js/components/ascribe_accordion_list/accordion_list_item_table_editions.js

@@ -48,7 +48,11 @@ let AccordionListItemTableEditions = React.createClass({
 
     toggleTable() {
         PieceListActions.showEditionList(this.props.parentId);
-        EditionListActions.fetchEditionList(this.props.parentId);
+        EditionListActions.fetchEditionList(this.props.parentId, this.state.orderBy, this.state.orderAsc);
+    },
+
+    changeEditionListOrder(orderBy, orderAsc) {
+        EditionListActions.fetchEditionList(this.props.parentId, orderBy, orderAsc);
     },
 
     render() {
@@ -72,11 +76,11 @@ let AccordionListItemTableEditions = React.createClass({
                     return {
                         'content': item.edition_number
                     }},
-                    'num_editions',
+                    'edition_number',
                     '#',
                     TableItemText,
                     1,
-                    false
+                    true
             ),
             new TableColumnContentModel(
                 (item) => {
@@ -87,7 +91,7 @@ let AccordionListItemTableEditions = React.createClass({
                     getLangText('Bitcoin Address'),
                     TableItemText,
                     5,
-                    false
+                    true
             ),
             new TableColumnContentModel(
                 (item) => { 
@@ -110,7 +114,10 @@ let AccordionListItemTableEditions = React.createClass({
                     itemList={this.state.editionList[this.props.parentId]}
                     columnList={columnList}
                     numOfTableItems={this.props.numOfEditions}
-                    show={this.props.show}>
+                    show={this.props.show}
+                    orderBy={this.state.orderBy}
+                    orderAsc={this.state.orderAsc}
+                    changeOrder={this.changeEditionListOrder}>
                     <AccordionListItemTableToggle
                         className="ascribe-accordion-list-table-toggle" 
                         onClick={this.toggleTable}

js/components/ascribe_table/table.js

@@ -9,7 +9,9 @@ let Table = React.createClass({
     
     propTypes: {
         columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
-        changeOrder: React.PropTypes.func
+        changeOrder: React.PropTypes.func,
+        orderBy: React.PropTypes.string,
+        orderAsc: React.PropTypes.bool,
     },
 
     renderChildren() {
@@ -27,11 +29,10 @@ let Table = React.createClass({
         return (
             <div className="ascribe-table">
                 <TableHeader 
-                    columnList={this.props.columnList} 
+                    columnList={this.props.columnList}
-                    itemList={this.props.itemList} 
+                    itemList={this.props.itemList}
-                    fetchList={this.props.fetchList} 
+                    changeOrder={this.props.changeOrder}
-                    changeOrder={this.props.changeOrder} 
+                    orderAsc={this.props.orderAsc}
-                    orderAsc={this.props.orderAsc} 
                     orderBy={this.props.orderBy} />
                 <div className="row">
                     {this.renderChildren()}

js/fetchers/edition_list_fetcher.js

@@ -1,5 +1,7 @@
 import fetch from '../utils/fetch';
 
+import { generateOrderingQueryParams } from '../utils/fetch_api_utils';
+
 import AppConstants from '../constants/application_constants';
 
 
@@ -7,8 +9,9 @@ let EditionListFetcher = {
     /**
      * Fetches a list of editions from the API.
      */
-    fetch(pieceId) {
+    fetch(pieceId, orderBy, orderAsc) {
-        return fetch.get('editions_list', { 'piece_id': pieceId });
+        let ordering = generateOrderingQueryParams(orderBy, orderAsc);
+        return fetch.get('editions_list', { 'piece_id': pieceId, ordering });
     }
 };
 

js/stores/edition_list_store.js

@@ -6,10 +6,12 @@ import EditionsListActions from '../actions/edition_list_actions';
 class EditionListStore {
     constructor() {
         this.editionList = {};
+        this.orderBy = 'edition_number';
+        this.orderAsc = true;
         this.bindActions(EditionsListActions);
     }
 
-    onUpdateEditionList({pieceId, editionListOfPiece}) {
+    onUpdateEditionList({pieceId, editionListOfPiece, orderBy, orderAsc}) {
         if(this.editionList[pieceId]) {
             this.editionList[pieceId].forEach((edition, i) => {
                 // This uses the index of the new editionList for determining the edition.
@@ -18,6 +20,8 @@ class EditionListStore {
             })
         }
         this.editionList[pieceId] = editionListOfPiece;
+        this.orderBy = orderBy;
+        this.orderAsc = orderAsc;
     }
 
     onSelectEdition({pieceId, editionId}) {