ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2025-01-03 10:25:08 +01:00
Code Issues Releases Wiki Activity

Make PieceListToolbar filters generic

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-09-16 23:36:21 +02:00
parent 48508d5756
commit a96aa1005f
6 changed files with 126 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js
View File

@ -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,

71
js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js
View File

@ -16,7 +16,12 @@ let PieceListToolbarFilterWidgetFilter = React.createClass({
// label: <a human readable string>
// }
//
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({
<DropdownButton
title={filterIcon}
className="ascribe-piece-list-toolbar-filter-widget">
<li style={{'textAlign': 'center'}}>
<em>{getLangText('Show works I can')}:</em>
</li>
{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 (
<MenuItem
key={i}
onClick={this.filterBy(param)}
className="filter-widget-item">
<div className="checkbox-line">
<span>
{getLangText(label)}
</span>
<input
readOnly
type="checkbox"
checked={this.props.filterBy[param]} />
</div>
</MenuItem>
<div>
<li
style={{'textAlign': 'center'}}
key={i}>
<em>{label}:</em>
</li>
{items.map((param, j) => {
let label;
if(typeof param !== 'string') {
label = param.label;
param = param.key;
} else {
param = param;
label = param.split('_')[1];
}
return (
<li
key={j}
onClick={this.filterBy(param)}
className="filter-widget-item">
<div className="checkbox-line">
<span>
{getLangText(label)}
</span>
<input
readOnly
type="checkbox"
checked={this.props.filterBy[param]} />
</div>
</li>
);
})}
</div>
);
})}
</DropdownButton>

18
js/components/piece_list.js
View File

@ -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}
</PieceListToolbar>
<PieceListBulkModal className="ascribe-piece-list-bulk-modal" />
<PieceListFilterDisplay filterBy={this.state.filterBy} />
<PieceListFilterDisplay
filterBy={this.state.filterBy}
filterParams={this.props.filterParams}/>
<AccordionList
className="ascribe-accordion-list"
changeOrder={this.accordionChangeOrder}

66
js/components/piece_list_filter_display.js
View File

@ -7,24 +7,68 @@ import { getLangText } from '../utils/lang_utils';
let PieceListFilterDisplay = React.createClass({
propTypes: {
filterBy: React.PropTypes.string
filterBy: React.PropTypes.object,
filterParams: React.PropTypes.arrayOf(
React.PropTypes.shape({
label: React.PropTypes.string,
items: React.PropTypes.array
})
)
},
getFilterText() {
let { filterBy } = this.props;
let filterText = '';
transformFilterParamsItemsToBools() {
let { filterParams, filterBy } = this.props;
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(', ');
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 (
<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()}
{this.getFilterText(filtersWithLabel)}
<hr />
</div>
</div>

10
sass/ascribe_piece_list_toolbar.scss
View File

@ -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;

4
sass/main.scss
View File

@ -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;