Merge branch 'master' into AD-410-finish-implementing-piecelist-pag

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/app.js

@@ -14,6 +14,26 @@ import alt from './alt';
 import fetch from './utils/fetch';
 import AlertDismissable from './components/ascribe_forms/alert';
 
+/* 
+    Taken from 
+    http://stackoverflow.com/questions/30613447/how-to-debug-reactjss-setstate?noredirect=1#comment49301874_30613447
+
+    <remove this in production>
+
+*/
+
+var warn = console.warn;
+console.warn = function(warning) {
+  if (/(setState)/.test(warning)) {
+    throw new Error(warning);
+  }
+  warn.apply(console, arguments);
+};
+
+/*
+    </remove this in production>
+
+ */
 
 fetch.defaults({
     urlMap: ApiUrls,

js/components/ascribe_accordion_list/accordion_list_item.js

@@ -1,9 +1,12 @@
 import React from 'react';
+import Router from 'react-router';
 
 import AccordionListItemTable from './accordion_list_item_table';
 
 import { getLangText } from '../../utils/lang_utils';
 
+let Link = Router.Link;
+
 let AccordionListItem = React.createClass({
     propTypes: {
         className: React.PropTypes.string,

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import Router from 'react-router';
 
 import EditionListStore from '../../stores/edition_list_store';
 import EditionListActions from '../../actions/edition_list_actions';
@@ -7,6 +8,7 @@ import PieceListActions from '../../actions/piece_list_actions';
 
 import AccordionListItemTable from './accordion_list_item_table';
 import AccordionListItemTableToggle from './accordion_list_item_table_toggle';
+import AccordionListItemTableSelectAllEditionsToggle from './accordion_list_item_table_select_all_editions_toggle';
 
 import TableColumnContentModel from '../../models/table_column_content_model';
 
@@ -17,6 +19,8 @@ import TableItemAclFiltered from '../ascribe_table/table_item_acl_filtered';
 
 import { getLangText } from '../../utils/lang_utils';
 
+let Link = Router.Link;
+
 let AccordionListItemTableEditions = React.createClass({
 
     propTypes: {
@@ -38,7 +42,7 @@ let AccordionListItemTableEditions = React.createClass({
         EditionListStore.listen(this.onChange);
     },
 
-    componentDidUnmount() {
+    componentWillUnmount() {
         EditionListStore.unlisten(this.onChange);
     },
 
@@ -46,12 +50,40 @@ let AccordionListItemTableEditions = React.createClass({
         EditionListActions.selectEdition({pieceId, editionId});
     },
 
+    selectAllItems() {
+        this.state.editionList[this.props.parentId]
+            .forEach((edition) => {
+                this.selectItem(this.props.parentId, edition.id);
+            });
+    },
+
+    filterSelectedEditions() {
+        let selectedEditions = this.state.editionList[this.props.parentId]
+            .filter((edition) => edition.selected);
+        return selectedEditions;
+    },
+
     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() {
+        let selectedEditionsCount = 0;
+        let allEditionsCount = 0;
+
+        // here we need to check if all editions of a specific
+        // piece are already defined. Otherwise .length will throw an error and we'll not
+        // be notified about it.
+        if(this.state.editionList[this.props.parentId]) {
+            selectedEditionsCount = this.filterSelectedEditions().length;
+            allEditionsCount = this.state.editionList[this.props.parentId].length;
+        }
+
         let columnList = [
             new TableColumnContentModel(
                 (item) => {
@@ -62,7 +94,10 @@ let AccordionListItemTableEditions = React.createClass({
                         'selected': item.selected
                     }},
                     '',
-                    '',
+                    <AccordionListItemTableSelectAllEditionsToggle
+                        onChange={this.selectAllItems}
+                        numOfSelectedEditions={selectedEditionsCount}
+                        numOfAllEditions={allEditionsCount}/>,
                     TableItemCheckbox,
                     1,
                     false
@@ -72,11 +107,12 @@ let AccordionListItemTableEditions = React.createClass({
                     return {
                         'content': item.edition_number
                     }},
-                    'num_editions',
+                    'edition_number',
                     '#',
                     TableItemText,
                     1,
-                    false
+                    true,
+                    {to: 'edition', paramsKey: 'editionId', contentKey: 'bitcoin_id'}
             ),
             new TableColumnContentModel(
                 (item) => {
@@ -87,7 +123,8 @@ let AccordionListItemTableEditions = React.createClass({
                     getLangText('Bitcoin Address'),
                     TableItemText,
                     5,
-                    false
+                    true,
+                    {to: 'edition', paramsKey: 'editionId', contentKey: 'bitcoin_id'}
             ),
             new TableColumnContentModel(
                 (item) => { 
@@ -98,7 +135,8 @@ let AccordionListItemTableEditions = React.createClass({
                     getLangText('Actions'),
                     TableItemAclFiltered,
                     4,
-                    false
+                    false,
+                    {to: 'edition', paramsKey: 'editionId', contentKey: 'bitcoin_id'}
             )
         ];
 
@@ -110,7 +148,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_accordion_list/accordion_list_item_table_select_all_editions_toggle.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+
+let AccordionListItemTableSelectAllEditionsToggle = React.createClass({
+    
+    propTypes: {
+        onChange: React.PropTypes.func.isRequired,
+        numOfSelectedEditions: React.PropTypes.number.isRequired,
+        numOfAllEditions: React.PropTypes.number.isRequired
+    },
+
+    render() {
+        return (
+            <input type="checkbox" 
+                onChange={this.props.onChange} 
+                checked={this.props.numOfAllEditions === this.props.numOfSelectedEditions} />
+        );
+    }
+});
+
+export default AccordionListItemTableSelectAllEditionsToggle;

js/components/ascribe_media/resource_viewer.js

@@ -25,7 +25,7 @@ let ResourceViewer = React.createClass({
     mixins: [InjectInHeadMixin],
 
     componentDidMount() {
-        this.inject('http://antani.com');
+        //this.inject('http://antani.com');
     },
 
     render() {

js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js

@@ -15,7 +15,10 @@ let PieceListBulkModal = React.createClass({
     },
 
     getInitialState() {
-        return EditionListStore.getState();
+        return {
+            editions: EditionListStore.getState(),
+            user: UserStore.getState()
+        };
     },
 
     onChange(state) {
@@ -28,7 +31,7 @@ let PieceListBulkModal = React.createClass({
         UserStore.listen(this.onChange);
     },
 
-    componentDidUnmount() {
+    componentWillUnmount() {
         EditionListStore.unlisten(this.onChange);
         UserStore.unlisten(this.onChange);
     },
@@ -37,9 +40,9 @@ let PieceListBulkModal = React.createClass({
         let selectedEditionList = [];
 
         Object
-            .keys(this.state.editionList)
+            .keys(this.state.editions.editionList)
             .forEach((key) => {
-                let filteredEditionsForPiece = this.state.editionList[key].filter((edition) => edition.selected);
+                let filteredEditionsForPiece = this.state.editions.editionList[key].filter((edition) => edition.selected);
                 selectedEditionList = selectedEditionList.concat(filteredEditionsForPiece);
             });
 
@@ -73,10 +76,6 @@ let PieceListBulkModal = React.createClass({
         EditionListActions.clearAllEditionSelections();
     },
 
-    handleSuccess(){
-
-    },
-
     render() {
         let availableAcls = this.getAvailableAcls();
         let selectedEditions = this.fetchSelectedEditionList();
@@ -104,25 +103,25 @@ let PieceListBulkModal = React.createClass({
                                         availableAcls={availableAcls}
                                         action="transfer"
                                         editions={selectedEditions}
-                                        currentUser={this.state.currentUser}
+                                        currentUser={this.state.user.currentUser}
                                         handleSuccess={this.handleSuccess} />
                                     <AclButton
                                         availableAcls={availableAcls}
                                         action="consign"
                                         editions={selectedEditions}
-                                        currentUser={this.state.currentUser}
+                                        currentUser={this.state.user.currentUser}
                                         handleSuccess={this.handleSuccess} />
                                     <AclButton
                                         availableAcls={availableAcls}
                                         action="loan"
                                         editions={selectedEditions}
-                                        currentUser={this.state.currentUser}
+                                        currentUser={this.state.user.currentUser}
                                         handleSuccess={this.handleSuccess} />
                                     <AclButton
                                         availableAcls={availableAcls}
                                         action="share"
                                         editions={selectedEditions}
-                                        currentUser={this.state.currentUser}
+                                        currentUser={this.state.user.currentUser}
                                         handleSuccess={this.handleSuccess} />
                                 </div>
                             </div>

js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js

@@ -22,7 +22,7 @@ let PieceListToolbar = React.createClass({
         PieceListStore.listen(this.onChange);
     },
 
-    componentDidUnmount() {
+    componentWillUnmount() {
         PieceListStore.unlisten(this.onChange);
     },
 

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} 
-                    itemList={this.props.itemList} 
-                    fetchList={this.props.fetchList} 
-                    changeOrder={this.props.changeOrder} 
-                    orderAsc={this.props.orderAsc} 
+                    columnList={this.props.columnList}
+                    itemList={this.props.itemList}
+                    changeOrder={this.props.changeOrder}
+                    orderAsc={this.props.orderAsc}
                     orderBy={this.props.orderBy} />
                 <div className="row">
                     {this.renderChildren()}

js/components/ascribe_table/table_header_item.js

@@ -6,7 +6,10 @@ let TableHeaderItem = React.createClass({
 
     propTypes: {
         columnClasses: React.PropTypes.string.isRequired,
-        displayName: React.PropTypes.string.isRequired,
+        displayName: React.PropTypes.oneOfType([
+            React.PropTypes.string,
+            React.PropTypes.element
+        ]).isRequired,
         columnName: React.PropTypes.string.isRequired,
         canBeOrdered: React.PropTypes.bool,
         changeOrder: React.PropTypes.func,

js/components/ascribe_table/table_item_wrapper.js

@@ -1,16 +1,30 @@
 import React from 'react';
+import Router from 'react-router';
 
 import TableColumnContentModel from '../../models/table_column_content_model';
 import TableColumnMixin from '../../mixins/table_column_mixin';
 
 let TableItemWrapper = React.createClass({
-    mixins: [TableColumnMixin],
+    mixins: [TableColumnMixin, Router.Navigation],
     propTypes: {
         columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
         columnContent: React.PropTypes.object,
         columnWidth: React.PropTypes.number.isRequired
     },
 
+    /**
+     * If a link is defined in columnContent, then we can use
+     * Router.Navigation.transitionTo to redirect the user
+     * programmatically
+     */
+    transition(column) {
+        if(column.link) {
+            let params = {};
+            params[column.link.paramsKey] = this.props.columnContent[column.link.contentKey];
+            this.transitionTo(column.link.to, params);
+        }
+    },
+
     render() {
         return (
             <div>
@@ -21,8 +35,13 @@ let TableItemWrapper = React.createClass({
 
                     let columnClass = this.calcColumnClasses(this.props.columnList, i, this.props.columnWidth);
 
+                    let transition = this.transition.bind(this, column);
+
                     return (
-                        <div className={columnClass + ' ascribe-table-item-column'} key={i}>
+                        <div 
+                            className={columnClass + ' ascribe-table-item-column'} 
+                            key={i}
+                            onClick={transition}>
                             <TypeElement {...typeElementProps} />
                         </div>
                     );

js/components/edition_container.js

@@ -11,10 +11,11 @@ import Edition from './edition';
  * This is the component that implements resource/data specific functionality
  */
 let EditionContainer = React.createClass({
-
     getInitialState() {
-        return {'user': UserStore.getState(),
-                'edition': EditionStore.getState()}
+        return {
+            'user': UserStore.getState(),
+            'edition': EditionStore.getState()
+        };
     },
 
     onChange(state) {
@@ -22,29 +23,30 @@ let EditionContainer = React.createClass({
     },
 
     componentDidMount() {
-        EditionActions.fetchOne(this.props.params.editionId);
         EditionStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
         UserStore.listen(this.onChange);
+
+        UserActions.fetchCurrentUser();
+        EditionActions.fetchOne(this.props.params.editionId);
     },
-    componentDidUnmount() {
+    componentWillUnmount() {
         EditionStore.unlisten(this.onChange);
         UserStore.unlisten(this.onChange);
     },
 
     render() {
-
         if('title' in this.state.edition) {
             return (
-                <Edition edition={this.state.edition } currentUser={this.state.currentUser}></Edition>
+                <Edition 
+                    edition={this.state.edition} 
+                    currentUser={this.state.currentUser}>
+                </Edition>
             );
         } else {
             return (
                 <p>Loading</p>
             );
         }
-
-        
     }
 });
 

js/components/header.js

@@ -26,6 +26,10 @@ let Header = React.createClass({
         UserActions.fetchCurrentUser();
     },
 
+    componentWillUnmount() {
+        UserStore.unlisten(this.onChange);
+    },
+
     onChange(state) {
         this.setState(state);
     },

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) {
-        return fetch.get('editions_list', { 'piece_id': pieceId });
+    fetch(pieceId, orderBy, orderAsc) {
+        let ordering = generateOrderingQueryParams(orderBy, orderAsc);
+        return fetch.get('editions_list', { 'piece_id': pieceId, ordering });
     }
 };
 

js/models/table_column_content_model.js

@@ -1,12 +1,13 @@
 class TableColumnContentModel {
     // ToDo: Add validation for all passed-in parameters
-    constructor(transformFn, columnName, displayName, displayType, rowWidth, canBeOrdered) {
+    constructor(transformFn, columnName, displayName, displayType, rowWidth, canBeOrdered, link) {
         this.transformFn = transformFn;
         this.columnName = columnName;
         this.displayName = displayName;
         this.displayType = displayType;
         this.rowWidth = rowWidth;
         this.canBeOrdered = canBeOrdered;
+        this.link = link;
     }
 }
 

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}) {

js/stores/piece_list_store.js

@@ -36,15 +36,30 @@ class PieceListStore {
                 }
             });
     }
-
+    
     onUpdatePieceList({ page, pageSize, search, pieceList, orderBy, orderAsc, pieceListCount }) {
         this.page = page;
         this.pageSize = pageSize;
         this.search = search;
         this.orderAsc = orderAsc;
         this.orderBy = orderBy;
-        this.pieceList = pieceList;
         this.pieceListCount = pieceListCount;
+
+        /**
+         * The piece list store currently stores the open/close state of a piece list item.
+         *
+         * Once a new page is requested, this.pieceList will be overwritten, which means that the 
+         * open/close state of a specific list item will be thrown away.
+         *
+         * This means that when opening an editionListTable on a piece, and continuing 
+         * clicking next or back in the pagination, the editionListTable will return to its
+         * default value, which is "close".
+         *
+         * We did not implement this, as we're going to add pagination to pieceList at some
+         * point anyway. Then, this problem is automatically resolved.
+         * 
+         */
+        this.pieceList = pieceList;
     }
 };