Button - Implementing responsive filter button

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.

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

_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);
 }

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

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

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

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

• Server preparation - Linux - CentOS8
• Installation of CzechIdM - Linux - CentOS8
• [[tutorial:adm:basic_operations]