order by rating

js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js

@@ -3,6 +3,7 @@
 import React from 'react';
 
 import PieceListToolbarFilterWidget from './piece_list_toolbar_filter_widget';
+import PieceListToolbarOrderWidget from './piece_list_toolbar_order_widget';
 
 import Input from 'react-bootstrap/lib/Input';
 import Glyphicon from 'react-bootstrap/lib/Glyphicon';
@@ -13,8 +14,12 @@ let PieceListToolbar = React.createClass({
     propTypes: {
         className: React.PropTypes.string,
         searchFor: React.PropTypes.func,
+        filterParams: React.PropTypes.array,
         filterBy: React.PropTypes.object,
         applyFilterBy: React.PropTypes.func,
+        orderParams: React.PropTypes.array,
+        orderBy: React.PropTypes.string,
+        applyOrderBy: React.PropTypes.func,
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
@@ -37,7 +42,7 @@ let PieceListToolbar = React.createClass({
                             <span className="pull-left">
                                 {this.props.children}
                             </span>
-                            <span className="pull-right search-bar">
+                            <span className="pull-right search-bar ascribe-input-glyph">
                                 <Input
                                     type='text'
                                     ref="search"
@@ -45,12 +50,15 @@ let PieceListToolbar = React.createClass({
                                     onChange={this.searchFor}
                                     addonAfter={searchIcon} />
                             </span>
+                            <span className="pull-right">
+                                <PieceListToolbarOrderWidget
+                                    orderParams={this.props.orderParams}
+                                    orderBy={this.props.orderBy}
+                                    applyOrderBy={this.props.applyOrderBy}/>
+                            </span>
                             <span className="pull-right">
                                 <PieceListToolbarFilterWidget
-                                    filterParams={['acl_transfer', 'acl_consign', {
-                                        key: 'acl_create_editions',
-                                        label: 'create editions'
-                                    }]}
+                                    filterParams={this.props.filterParams}
                                     filterBy={this.props.filterBy}
                                     applyFilterBy={this.props.applyFilterBy}/>
                             </span>

js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js

@@ -0,0 +1,86 @@
+'use strict';
+
+import React from 'react';
+
+import DropdownButton from 'react-bootstrap/lib/DropdownButton';
+import MenuItem from 'react-bootstrap/lib/MenuItem';
+
+import { getLangText } from '../../utils/lang_utils.js';
+
+let PieceListToolbarOrderWidget = React.createClass({
+    propTypes: {
+        // An array of either strings (which represent acl enums) or objects of the form
+        //
+        // {
+        //      key: <acl enum>,
+        //      label: <a human readable string>
+        // }
+        orderParams: React.PropTypes.arrayOf(React.PropTypes.any).isRequired,
+        orderBy: React.PropTypes.string,
+        applyOrderBy: React.PropTypes.func
+    },
+
+    generateOrderByStatement(param) {
+        let orderBy = this.props.orderBy;
+        return orderBy;
+    },
+
+    /**
+     * We need overloading here to find the correct parameter of the label
+     * the user is clicking on.
+     */
+    orderBy(orderBy) {
+        return () => {
+            this.props.applyOrderBy(orderBy);
+        };
+    },
+
+    isOrderActive() {
+        // We're hiding the star in that complicated matter so that,
+        // the surrounding button is not resized up on appearance
+        if(this.props.orderBy.length > 0) {
+            return { visibility: 'visible'};
+        } else {
+            return { visibility: 'hidden' };
+        }
+    },
+
+    render() {
+        let filterIcon = (
+            <span>
+                <span className="glyphicon glyphicon-sort-by-alphabet" aria-hidden="true"></span>
+                <span style={this.isOrderActive()}>*</span>
+            </span>
+        );
+        return (
+
+            <DropdownButton
+                title={filterIcon}
+                className="ascribe-piece-list-toolbar-filter-widget">
+                <li style={{'textAlign': 'center'}}>
+                    <em>{getLangText('Sort by')}:</em>
+                </li>
+                {this.props.orderParams.map((param) => {
+                    return (
+                        <MenuItem
+                            key={param}
+                            onClick={this.orderBy(param)}
+                            className="filter-widget-item">
+                            <div className="checkbox-line">
+                                <span>
+                                    {getLangText(param.replace('_', ' '))}
+                                </span>
+                                <input
+                                    readOnly
+                                    type="checkbox"
+                                    checked={param.indexOf(this.props.orderBy) > -1} />
+                            </div>
+                        </MenuItem>
+                    );
+                })}
+            </DropdownButton>
+        );
+    }
+});
+
+export default PieceListToolbarOrderWidget;

js/components/piece_list.js

@@ -26,17 +26,27 @@ let PieceList = React.createClass({
     propTypes: {
         accordionListItemType: React.PropTypes.func,
         redirectTo: React.PropTypes.string,
-        customSubmitButton: React.PropTypes.element
+        customSubmitButton: React.PropTypes.element,
+        filterParams: React.PropTypes.array,
+        orderParams: React.PropTypes.array
+
     },
 
     mixins: [Router.Navigation, Router.State],
 
     getDefaultProps() {
         return {
-            accordionListItemType: AccordionListItemWallet
+            accordionListItemType: AccordionListItemWallet,
+            orderParams: ['artist_name', 'title'],
+            filterParams: [
+                'acl_transfer',
+                'acl_consign',
+                {
+                    key: 'acl_create_editions',
+                    label: 'create editions'
+                }]
         };
     },
-
     getInitialState() {
         return mergeOptions(
             PieceListStore.getState(),
@@ -104,7 +114,7 @@ let PieceList = React.createClass({
          this.transitionTo(this.getPathname(), {page: 1});
     },
 
-    applyFilterBy(filterBy) {
+    applyFilterBy(filterBy){
         // first we need to apply the filter on the piece list
         PieceListActions.fetchPieceList(1, this.state.pageSize, this.state.search,
                                         this.state.orderBy, this.state.orderAsc, filterBy)
@@ -128,9 +138,9 @@ let PieceList = React.createClass({
         this.transitionTo(this.getPathname(), {page: 1});
     },
 
-    accordionChangeOrder(orderBy, orderAsc) {
+    applyOrderBy(orderBy, orderAsc) {
         PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
-                                        orderBy, orderAsc, this.state.filterBy);
+                                        orderBy, this.state.orderAsc, this.state.filterBy);
     },
 
     render() {
@@ -141,8 +151,12 @@ let PieceList = React.createClass({
                 <PieceListToolbar
                     className="ascribe-piece-list-toolbar"
                     searchFor={this.searchFor}
+                    filterParams={this.props.filterParams}
+                    orderParams={this.props.orderParams}
                     filterBy={this.state.filterBy}
-                    applyFilterBy={this.applyFilterBy}>
+                    orderBy={this.state.orderBy}
+                    applyFilterBy={this.applyFilterBy}
+                    applyOrderBy={this.applyOrderBy}>
                     {this.props.customSubmitButton}
                 </PieceListToolbar>
                 <PieceListBulkModal className="ascribe-piece-list-bulk-modal" />

js/components/whitelabel/prize/components/piece_list.js

@@ -43,6 +43,7 @@ let PrizePieceList = React.createClass({
                 <PieceList
                     redirectTo="register_piece"
                     accordionListItemType={AccordionListItemPrize}
+                    orderParams={['rating', 'title']}
                     customSubmitButton={this.getButtonSubmit()}/>
             </div>
         );

sass/ascribe_piece_list_toolbar.scss

@@ -11,9 +11,37 @@
     }
 }
 
-.ascribe-piece-list-toolbar-filter-widget {
-    margin-right: 1em;
+.ascribe-input-glyph > .form-group > .input-group {
+    margin-left: 6px;
+    input {
+        border: 1px solid #02b6a3;
+        border-right: 0;
+    }
+    > .input-group-addon {
+        background-color: white;
+        > .filter-glyph {
+            color: #02b6a3;
+        }
+        border: 1px solid #02b6a3;
+        border-left: 0;
+    }
+}
 
+.ascribe-piece-list-toolbar-filter-widget {
+    button {
+        background-color: rgba(0,0,0,0);
+        color: #02b6a3;
+        border: 1px solid rgba(0,0,0,0);
+        padding: 6px 4px 6px 8px;
+        &:hover, &:active {
+            background-color: #02b6a3 !important;
+            color: white;
+            border: 1px solid #02b6a3 !important;
+        }
+        .caret {
+            display: none;
+        }
+    }
     .filter-widget-item {
 
         > a {