====== Button - Implementing responsive filter button  ======

=== Description ===

When we have filled some information in filter table than button with label “Filter” in top right corner changes its color to light blue instead of gray. It will help us recognize if the table below have all data we need and no filter is set.

=== How to do it ===


If filter is set search parameters won’t be blank. So we find out size of searchParameters.

<code java>_isFilterEmpty() {
    const { searchParameters, forceSearchParameters } = this.props;
    if (!searchParameters) {
      // search paramters are empty
      return false;
    }
    if (!forceSearchParameters || forceSearchParameters.getFilters().size === 0) {
      return searchParameters.getFilters().size === 0;
    }
    return searchParameters.getFilters().reduce((result, filter, key) => {
      return result && forceSearchParameters.getFilters().has(key);
    }, true);
 }</code>

then we depend level of the button on this boolean function.

<code JavaScript><Basic.Button
            className="btn-xs"
            level={level}
            onClick={this._filterOpen.bind(this, !filterOpened)}
            showLoading={showLoading}
            icon="filter"
            {...others}>
            { this.i18n('button.filter.toogle') }
            {' '}
     <Basic.Icon icon={!filterOpened ? 'triangle-bottom' : 'triangle-top'} style={{ fontSize: '0.85em'}}/>
 </Basic.Button></code>



And then it will automatically appear with every usage of FilterToggleButton.

=== Examples ===


You can find example in our git repository:
https://github.com/bcvsolutions/CzechIdMng/blob/develop/Realization/frontend/czechidm-core/src/components/advanced/Filter/FilterToogleButton.js

=== See also ===


  * [[tutorial:adm:server_preparation]]
  * [[tutorial:adm:czechidm_installation]]
  * [[tutorial:adm:basic_operations]