From a96aa1005fba0db7dd770ef2f0872e897adbcc83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Wed, 16 Sep 2015 23:36:21 +0200 Subject: [PATCH] Make PieceListToolbar filters generic --- .../piece_list_toolbar.js | 7 +- .../piece_list_toolbar_filter_widget.js | 71 +++++++++++-------- js/components/piece_list.js | 18 +++-- js/components/piece_list_filter_display.js | 66 ++++++++++++++--- sass/ascribe_piece_list_toolbar.scss | 10 ++- sass/main.scss | 4 +- 6 files changed, 126 insertions(+), 50 deletions(-) diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js index 233f4089..ea609155 100644 --- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js +++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js @@ -14,7 +14,12 @@ let PieceListToolbar = React.createClass({ propTypes: { className: React.PropTypes.string, searchFor: React.PropTypes.func, - filterParams: React.PropTypes.array, + filterParams: React.PropTypes.arrayOf( + React.PropTypes.shape({ + label: React.PropTypes.string, + items: React.PropTypes.array + }) + ), filterBy: React.PropTypes.object, applyFilterBy: React.PropTypes.func, orderParams: React.PropTypes.array, diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js index 2520c499..9591f970 100644 --- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js +++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js @@ -16,7 +16,12 @@ let PieceListToolbarFilterWidgetFilter = React.createClass({ // label: // } // - filterParams: React.PropTypes.arrayOf(React.PropTypes.any).isRequired, + filterParams: React.PropTypes.arrayOf( + React.PropTypes.shape({ + label: React.PropTypes.string, + items: React.PropTypes.array + }) + ).isRequired, filterBy: React.PropTypes.object, applyFilterBy: React.PropTypes.func }, @@ -79,35 +84,43 @@ let PieceListToolbarFilterWidgetFilter = React.createClass({ -
  • - {getLangText('Show works I can')}: -
    • - {this.props.filterParams.map((param, i) => { - let label; - - if(typeof param !== 'string') { - label = param.label; - param = param.key; - } else { - param = param; - label = param.split('_')[1]; - } - + {this.props.filterParams.map(({ label, items }, i) => { return ( - -
    - - {getLangText(label)} - - -
    -     +
    +
  • + {label}: +
    • + {items.map((param, j) => { + let label; + + if(typeof param !== 'string') { + label = param.label; + param = param.key; + } else { + param = param; + label = param.split('_')[1]; + } + + return ( +
  • +
    + + {getLangText(label)} + + +
    +
    • + ); + })} +
    ); })}     diff --git a/js/components/piece_list.js b/js/components/piece_list.js index c7cab0f4..dd8ee91e 100644 --- a/js/components/piece_list.js +++ b/js/components/piece_list.js @@ -35,7 +35,6 @@ let PieceList = React.createClass({ filterParams: React.PropTypes.array, orderParams: React.PropTypes.array, orderBy: React.PropTypes.string - }, mixins: [Router.Navigation, Router.State], @@ -44,13 +43,20 @@ let PieceList = React.createClass({ return { accordionListItemType: AccordionListItemWallet, orderParams: ['artist_name', 'title'], - filterParams: [ + filterParams: [{ + label: getLangText('Show works I can'), + items: [ 'acl_transfer', 'acl_consign', { key: 'acl_create_editions', label: 'create editions' }] + }, + { + label: getLangText('Show works I have'), + items: ['acl_loaned'] + }] }; }, getInitialState() { @@ -95,8 +101,8 @@ let PieceList = React.createClass({ // the site should go to the top document.body.scrollTop = document.documentElement.scrollTop = 0; PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search, - this.state.orderBy, this.state.orderAsc, - this.state.filterBy); + this.state.orderBy, this.state.orderAsc, + this.state.filterBy); }; }, @@ -167,7 +173,9 @@ let PieceList = React.createClass({ {this.props.customSubmitButton} - + filter.split('acl_')[1]).join(', '); + return filterParams.map((filterParam) => { + return { + label: filterParam.label, + items: filterParam.items.map((item) => { + if(typeof item !== 'string' && typeof item.key === 'string' && typeof item.label === 'string') { + return { + key: item.key, + label: item.label, + value: filterBy[item.key] ? filterBy[item.key] : false + }; + } else { + return { + key: item, + label: item.split('acl_')[1].replace(/_/g, ' '), + value: filterBy[item] ? filterBy[item] : false + } + } + }) + } + }); + }, - // 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, ' '); + getFilterText(filtersWithLabel) { + let filterTextList = filtersWithLabel + .map((filterWithLabel) => { + let activeFilterWithLabel = filterWithLabel + .items + .map((filter) => { + if(filter.value) { + return filter.label; + } + }) + .filter((filterName) => !!filterName) + .join(', '); + + if(activeFilterWithLabel) { + return filterWithLabel.label + ': ' + activeFilterWithLabel + } + }) + .filter((filterText) => !!filterText) + // if there are multiple sentences, capitalize the first one and lowercase the others + .map((filterText, i) => i === 0 ? filterText.charAt(0).toUpperCase() + filterText.substr(1) : filterText.charAt(0).toLowerCase() + filterText.substr(1)) + .join(' and '); + + return filterTextList; }, render() { let { filterBy } = this.props; + let filtersWithLabel = this.transformFilterParamsItemsToBools(); // do not show the FilterDisplay if there are no filters applied if(filterBy && Object.keys(filterBy).length === 0) { @@ -33,7 +77,7 @@ let PieceListFilterDisplay = React.createClass({ return (
    - {this.getFilterText()} + {this.getFilterText(filtersWithLabel)}
    diff --git a/sass/ascribe_piece_list_toolbar.scss b/sass/ascribe_piece_list_toolbar.scss index aeec1bff..dde7f2f0 100644 --- a/sass/ascribe_piece_list_toolbar.scss +++ b/sass/ascribe_piece_list_toolbar.scss @@ -54,8 +54,7 @@ } .filter-widget-item { - - > a { + a { padding-left: 0; padding-right: 0; } @@ -64,6 +63,13 @@ .checkbox-line { height: 25px; position: relative; + color: #333333; + + /* Fuck you react-bootstrap */ + &:hover { + background-color: $dropdown-link-hover-bg; + cursor: pointer; + } span { cursor: pointer; diff --git a/sass/main.scss b/sass/main.scss index 39ea78bd..e7170b6d 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -490,8 +490,8 @@ hr { .ascribe-piece-list-filter-display { - padding-left: 0; - padding-right: 0; + padding-left: 10px; + padding-right: 10px; > span { font-size: 1.1em;