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

Merge pull request #61 from ascribe/AD-1484-hide-PieceListToolbarFilterWidget-if-no-filters-applicable

Browse Source 
Hide PieceListToolbarFilterWidget when no filters are applicable
This commit is contained in:
Brett Sun 2015-12-21 11:49:29 +01:00
commit 1e83de0b90
3 changed files with 105 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,30 +39,6 @@ let PieceListToolbar = React.createClass({
]) ])
}, },
getFilterWidget(){
if (this.props.filterParams){
return (
<PieceListToolbarFilterWidget
filterParams={this.props.filterParams}
filterBy={this.props.filterBy}
applyFilterBy={this.props.applyFilterBy} />
);
}
return null;
},
getOrderWidget(){
if (this.props.orderParams){
return (
<PieceListToolbarOrderWidget
orderParams={this.props.orderParams}
orderBy={this.props.orderBy}
applyOrderBy={this.props.applyOrderBy}/>
);
}
return null;
},
render() { render() {
const { className, children, searchFor, searchQuery } = this.props; const { className, children, searchFor, searchQuery } = this.props;
@ -75,8 +51,14 @@ let PieceListToolbar = React.createClass({
{children} {children}
</span> </span>
<span className="pull-right"> <span className="pull-right">
{this.getOrderWidget()} <PieceListToolbarOrderWidget
{this.getFilterWidget()} orderParams={this.props.orderParams}
orderBy={this.props.orderBy}
applyOrderBy={this.props.applyOrderBy}/>
<PieceListToolbarFilterWidget
filterParams={this.props.filterParams}
filterBy={this.props.filterBy}
applyFilterBy={this.props.applyFilterBy} />
</span> </span>
<SearchBar <SearchBar
className="pull-right search-bar ascribe-input-glyph" className="pull-right search-bar ascribe-input-glyph"

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

@ -30,15 +30,15 @@ let PieceListToolbarFilterWidget = React.createClass({
generateFilterByStatement(param) { generateFilterByStatement(param) {
const filterBy = Object.assign({}, this.props.filterBy); const filterBy = Object.assign({}, this.props.filterBy);
if(filterBy) { if (filterBy) {
// we need hasOwnProperty since the values are all booleans // we need hasOwnProperty since the values are all booleans
if(filterBy.hasOwnProperty(param)) { if (filterBy.hasOwnProperty(param)) {
filterBy[param] = !filterBy[param]; filterBy[param] = !filterBy[param];
// if the parameter is false, then we want to remove it again // if the parameter is false, then we want to remove it again
// from the list of queryParameters as this component is only about // from the list of queryParameters as this component is only about
// which actions *CAN* be done and not what *CANNOT* // which actions *CAN* be done and not what *CANNOT*
if(!filterBy[param]) { if (!filterBy[param]) {
delete filterBy[param]; delete filterBy[param];
} }
@ -66,7 +66,7 @@ let PieceListToolbarFilterWidget = React.createClass({
// We're hiding the star in that complicated matter so that, // We're hiding the star in that complicated matter so that,
// the surrounding button is not resized up on appearance // the surrounding button is not resized up on appearance
if(trueValuesOnly.length > 0) { if (trueValuesOnly.length) {
return { visibility: 'visible'}; return { visibility: 'visible'};
} else { } else {
return { visibility: 'hidden' }; return { visibility: 'hidden' };
@ -81,62 +81,66 @@ let PieceListToolbarFilterWidget = React.createClass({
</span> </span>
); );
return ( if (this.props.filterParams && this.props.filterParams.length) {
<DropdownButton return (
pullRight={true} <DropdownButton
title={filterIcon} pullRight={true}
className="ascribe-piece-list-toolbar-filter-widget"> title={filterIcon}
{/* We iterate over filterParams, to receive the label and then for each className="ascribe-piece-list-toolbar-filter-widget">
label also iterate over its items, to get all filterable options */} {/* We iterate over filterParams, to receive the label and then for each
{this.props.filterParams.map(({ label, items }, i) => { label also iterate over its items, to get all filterable options */}
return ( {this.props.filterParams.map(({ label, items }, i) => {
<div> return (
<li <div>
style={{'textAlign': 'center'}} <li
key={i}> style={{'textAlign': 'center'}}
<em>{label}:</em> key={i}>
</li> <em>{label}:</em>
{items.map((param, j) => { </li>
{items.map((param, j) => {
// As can be seen in the PropTypes, a param can either // As can be seen in the PropTypes, a param can either
// be a string or an object of the shape: // be a string or an object of the shape:
// //
// { // {
// key: <String>, // key: <String>,
// label: <String> // label: <String>
// } // }
// //
// This is why we need to distinguish between both here. // This is why we need to distinguish between both here.
if(typeof param !== 'string') { if (typeof param !== 'string') {
label = param.label; label = param.label;
param = param.key; param = param.key;
} else { } else {
param = param; param = param;
label = param.split('acl_')[1].replace(/_/g, ' '); label = param.split('acl_')[1].replace(/_/g, ' ');
} }
return ( return (
<li <li
key={j} key={j}
onClick={this.filterBy(param)} onClick={this.filterBy(param)}
className="filter-widget-item"> className="filter-widget-item">
<div className="checkbox-line"> <div className="checkbox-line">
<span> <span>
{getLangText(label)} {getLangText(label)}
</span> </span>
<input <input
readOnly readOnly
type="checkbox" type="checkbox"
checked={this.props.filterBy[param]} /> checked={this.props.filterBy[param]} />
</div> </div>
</li> </li>
); );
})} })}
</div> </div>
); );
})} })}
</DropdownButton> </DropdownButton>
); );
} else {
return null;
}
} }
}); });

66
js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js
View File

@ -37,7 +37,7 @@ let PieceListToolbarOrderWidget = React.createClass({
isOrderActive() { isOrderActive() {
// We're hiding the star in that complicated matter so that, // We're hiding the star in that complicated matter so that,
// the surrounding button is not resized up on appearance // the surrounding button is not resized up on appearance
if(this.props.orderBy.length > 0) { if (this.props.orderBy && this.props.orderBy.length) {
return { visibility: 'visible'}; return { visibility: 'visible'};
} else { } else {
return { visibility: 'hidden' }; return { visibility: 'hidden' };
@ -51,37 +51,41 @@ let PieceListToolbarOrderWidget = React.createClass({
<span style={this.isOrderActive()}>&middot;</span> <span style={this.isOrderActive()}>&middot;</span>
</span> </span>
); );
return (
<DropdownButton if (this.props.orderParams && this.props.orderParams.length) {
pullRight={true} return (
title={filterIcon} <DropdownButton
className="ascribe-piece-list-toolbar-filter-widget"> pullRight={true}
<li style={{'textAlign': 'center'}}> title={filterIcon}
<em>{getLangText('Sort by')}:</em> className="ascribe-piece-list-toolbar-filter-widget">
</li> <li style={{'textAlign': 'center'}}>
{this.props.orderParams.map((param) => { <em>{getLangText('Sort by')}:</em>
return ( </li>
<div> {this.props.orderParams.map((param) => {
<li return (
key={param} <div>
onClick={this.orderBy(param)} <li
className="filter-widget-item"> key={param}
<div className="checkbox-line"> onClick={this.orderBy(param)}
<span> className="filter-widget-item">
{getLangText(param.replace('_', ' '))} <div className="checkbox-line">
</span> <span>
<input {getLangText(param.replace('_', ' '))}
readOnly </span>
type="radio" <input
checked={param.indexOf(this.props.orderBy) > -1} /> readOnly
</div> type="radio"
</li> checked={param.indexOf(this.props.orderBy) > -1} />
</div> </div>
); </li>
})} </div>
</DropdownButton> );
); })}
</DropdownButton>
);
} else {
return null;
}
} }
}); });