From d035f1e41c73a90d44a0f93825e4cd897acc529d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Tue, 8 Dec 2015 16:49:06 +0100 Subject: [PATCH 1/2] Hide PieceListToolbarFilterWidget when no filters are applicable --- .../piece_list_toolbar_filter_widget.js | 112 +++++++++--------- 1 file changed, 58 insertions(+), 54 deletions(-) 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 c463330c..b798857a 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 @@ -81,62 +81,66 @@ let PieceListToolbarFilterWidget = React.createClass({ ); - return ( - - {/* We iterate over filterParams, to receive the label and then for each - label also iterate over its items, to get all filterable options */} - {this.props.filterParams.map(({ label, items }, i) => { - return ( -
-
  • - {label}: -
    • - {items.map((param, j) => { + if(this.props.filterParams.length) { + return ( + + {/* We iterate over filterParams, to receive the label and then for each + label also iterate over its items, to get all filterable options */} + {this.props.filterParams.map(({ label, items }, i) => { + return ( +
    +
  • + {label}: +
    • + {items.map((param, j) => { - // As can be seen in the PropTypes, a param can either - // be a string or an object of the shape: - // - // { - // key: , - // label: - // } - // - // This is why we need to distinguish between both here. - if(typeof param !== 'string') { - label = param.label; - param = param.key; - } else { - param = param; - label = param.split('acl_')[1].replace(/_/g, ' '); - } + // As can be seen in the PropTypes, a param can either + // be a string or an object of the shape: + // + // { + // key: , + // label: + // } + // + // This is why we need to distinguish between both here. + if(typeof param !== 'string') { + label = param.label; + param = param.key; + } else { + param = param; + label = param.split('acl_')[1].replace(/_/g, ' '); + } - return ( -
  • -
    - - {getLangText(label)} - - -
    -
    • - ); - })} -
    - ); - })} -     - ); + return ( +
  • +
    + + {getLangText(label)} + + +
    +
    • + ); + })} +
    + ); + })} +     + ); + } else { + return null; + } } }); From 8278f5404f2975f3d95e018453efeb7c20e510c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Wed, 9 Dec 2015 16:17:08 +0100 Subject: [PATCH 2/2] Increase robustness of: - PieceListToolbarOrderWidget - PieceListToolbarFilterWidget --- .../piece_list_toolbar.js | 34 +++------- .../piece_list_toolbar_filter_widget.js | 12 ++-- .../piece_list_toolbar_order_widget.js | 66 ++++++++++--------- 3 files changed, 49 insertions(+), 63 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 60370431..bcc15603 100644 --- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js +++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js @@ -39,30 +39,6 @@ let PieceListToolbar = React.createClass({ ]) }, - getFilterWidget(){ - if (this.props.filterParams){ - return ( - - ); - } - return null; - }, - - getOrderWidget(){ - if (this.props.orderParams){ - return ( - - ); - } - return null; - }, - render() { const { className, children, searchFor, searchQuery } = this.props; @@ -75,8 +51,14 @@ let PieceListToolbar = React.createClass({ {children} - {this.getOrderWidget()} - {this.getFilterWidget()} + + 0) { + if (trueValuesOnly.length) { return { visibility: 'visible'}; } else { return { visibility: 'hidden' }; @@ -81,7 +81,7 @@ let PieceListToolbarFilterWidget = React.createClass({ ); - if(this.props.filterParams.length) { + if (this.props.filterParams && this.props.filterParams.length) { return ( 0) { + if (this.props.orderBy && this.props.orderBy.length) { return { visibility: 'visible'}; } else { return { visibility: 'hidden' }; @@ -51,37 +51,41 @@ let PieceListToolbarOrderWidget = React.createClass({ · ); - return ( - -
  • - {getLangText('Sort by')}: -
    • - {this.props.orderParams.map((param) => { - return ( -
    -
  • -
    - - {getLangText(param.replace('_', ' '))} - - -1} /> -
    -
    • -
    - ); - })} -     - ); + if (this.props.orderParams && this.props.orderParams.length) { + return ( + +
  • + {getLangText('Sort by')}: +
    • + {this.props.orderParams.map((param) => { + return ( +
    +
  • +
    + + {getLangText(param.replace('_', ' '))} + + -1} /> +
    +
    • +
    + ); + })} +     + ); + } else { + return null; + } } });