Implement filter display for piece list

js/components/ascribe_accordion_list/accordion_list.js

@@ -21,7 +21,7 @@ let AccordionList = React.createClass({
             );
         } else if(this.props.count === 0) {
             return (
-                <div>
+                <div className="ascribe-accordion-list-placeholder">
                     <p className="text-center">{getLangText('We could not find any works related to you...')}</p>
                     <p className="text-center">{getLangText('To register one, click')} <a href="register_piece">{getLangText('here')}</a>!</p>
                 </div>

js/components/piece_list.js

@@ -15,6 +15,8 @@ import AccordionListItemTableEditions from './ascribe_accordion_list/accordion_l
 
 import Pagination from './ascribe_pagination/pagination';
 
+import PieceListFilterDisplay from './piece_list_filter_display';
+
 import GlobalAction from './global_action';
 import PieceListBulkModal from './ascribe_piece_list_bulk_modal/piece_list_bulk_modal';
 import PieceListToolbar from './ascribe_piece_list_toolbar/piece_list_toolbar';
@@ -22,6 +24,8 @@ import PieceListToolbar from './ascribe_piece_list_toolbar/piece_list_toolbar';
 import AppConstants from '../constants/application_constants';
 
 import { mergeOptions } from '../utils/general_utils';
+import { getLangText } from '../utils/lang_utils';
+
 
 let PieceList = React.createClass({
     propTypes: {
@@ -149,9 +153,6 @@ let PieceList = React.createClass({
         let loadingElement = (<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />);
         let AccordionListItemType = this.props.accordionListItemType;
 
-        //<GlobalAction requestActions={this.state.requestActions} />
-
-
         return (
             <div>
                 <PieceListToolbar
@@ -166,6 +167,7 @@ let PieceList = React.createClass({
                     {this.props.customSubmitButton}
                 </PieceListToolbar>
                 <PieceListBulkModal className="ascribe-piece-list-bulk-modal" />
+                <PieceListFilterDisplay filterBy={this.state.filterBy} />
                 <AccordionList
                     className="ascribe-accordion-list"
                     changeOrder={this.accordionChangeOrder}

js/components/piece_list_filter_display.js

@@ -0,0 +1,45 @@
+'use strict';
+
+import React from 'react';
+
+import { getLangText } from '../utils/lang_utils';
+
+
+let PieceListFilterDisplay = React.createClass({
+    propTypes: {
+        filterBy: React.PropTypes.string
+    },
+
+    getFilterText() {
+        let { filterBy } = this.props;
+        let filterText = '';
+
+        filterText += getLangText('Showing works that I can: ')
+        // take every filter, split it on acl_ and join the resulting array as a comma separated list
+        filterText += Object.keys(filterBy).map((filter) => filter.split('acl_')[1]).join(', ');
+
+        // there are acls, like acl_create_editions that still have underscores in them,
+        // therefore we need to replace all underscores with spaces
+        return filterText.replace(/_/g, ' ');
+    },
+
+    render() {
+        let { filterBy } = this.props;
+
+        // do not show the FilterDisplay if there are no filters applied
+        if(filterBy && Object.keys(filterBy).length === 0) {
+            return null;
+        } else {
+            return (
+                <div className="row">
+                    <div className="ascribe-piece-list-filter-display col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2">
+                        {this.getFilterText()}
+                        <hr />
+                    </div>
+                </div>
+            );
+        }
+    }
+});
+
+export default PieceListFilterDisplay;

sass/ascribe_accordion_list.scss

@@ -5,6 +5,10 @@ $ascribe-accordion-list-item-height: 8em;
     padding-right: 15px;
 }
 
+.ascribe-accordion-list-placeholder {
+    margin-top: 1em;
+}
+
 .ascribe-accordion-list-item {
     background-color: white;
     border: 1px solid black;

sass/main.scss

@@ -487,3 +487,23 @@ hr {
 .ascribe-progress-bar-xs {
     height: 12px;
 }
+
+
+.ascribe-piece-list-filter-display {
+    padding-left: 0;
+    padding-right: 0;
+
+    > span {
+        font-size: 1.1em;
+        font-weight: 600;
+        color: #616161;
+
+        padding-left: .3em;
+    }
+
+    > hr {
+        margin-top: .15em;
+        margin-bottom: .1em;
+        border-color: #ccc;
+    }
+}