October: [UX] Add "Clear filters" button to filter

[vosco88]

When you have couple of filter scopes with something selected it is a bit annoying to have to click through all of them to clear them.
My suggestion would be to add a button to the filter toolbar that would clear all filters.

I was trying to look on how to approach this as I would like to code it but probably would need some guidance and help. As I am not sure how to approach clearing all.

[w20k]

Hi @vosco88 could you add a screenshot of this issue? Would be a bit easier to understand. It might be fixed in the dev branch already 😄

[LukeTowers]

@vosco do you have a mockup of how you would like envision it looking? Ideally two mockups, one with one filter and one with a lot of filters

[vosco88]

@LukeTowers I was envisoning it as something like this quick mockup

I do not think I would specify it differently with different amount of filters, but basic idea is you click the button and it clears all applied filters from the list.

@w20k it is not an issue per say, more a feture request :)

[w20k]

@vosco88 Would it be better to add a code block or practical example to the docs, how it could be implemented. I guess you have to call every single filter with 'reset' method (right now).

[LukeTowers]

@vosco88 I would probably want it at the end, or as a button outside of the filter container

Edit: I would agree with @w20k, I don't think it could be made in such a way to be solidly noninvasive by default so an example of how to implement it as a custom button / AJAX handler in the documentation would be ideal.

[bennothommo]

Closing as it has been over a month since any activity on this occurred and we are trying to figure out what issues are still relevant. If this is still something that you would like to see through to fruition please respond and we can get the ball rolling.

[LukeTowers]

@Teranode or @alxy is this something you'd be interested in looking into?

[w20k]

Could be also great addition to add clear (cross) button to search input :)

[Samuell1]

@w20k clear button on search input is already there

[Eoler]

clear button on search input is already there

Not on Number/Text filter scopes.

[github-actions[bot]]

This issue will be closed and archived in 3 days, as there has been no activity in the last 30 days. If this issue is still relevant or you would like to see action on it, please respond and we will get the ball rolling.

[robinbonnes]

Anyone working on this? If not I can try to fix it and make a pull request.

[w20k]

@robinbonnes do it :) Added it to my todo list, but it's way at the bottom!

[github-actions[bot]]

This issue will be closed and archived in 3 days, as there has been no activity in the last 60 days.
If this issue is still relevant or you would like to see it actioned, please respond and we will re-open this issue.
If this issue is critical to your business, consider joining the Premium Support Program where a Service Level Agreement is offered.

[msimkunas]

@robinbonnes Are you still planning to make that PR sometime?

[robinbonnes]

@robinbonnes Are you still planning to make that PR sometime?

I've supplied a screenshot and asked to reopen the PR: https://github.com/octobercms/october/pull/4744

I'm using the following myself in a plugin, to add the clear filter button globally for all lists that have list filters:

Add /filters/_scope_button.htm in your plugin:

<!-- Button scope -->
<a
    class="filter-scope-button btn btn-sm btn-secondary <?= $scope->cssClass ?>"
    style="margin-top: -4px;"
    href="javascript:;"
    data-request="<?= $this->getEventHandler('onFilterUpdate') ?>"
    data-request-data="'scopeName':'<?= $scope->scopeName ?>'"
    data-scope-name="<?= $scope->scopeName ?>"
    data-stripe-load-indicator
    >
    <span class="filter-label"><?= e(trans($scope->label)) ?></span>
</a> 

Add the following to your Plugin.php:

public function boot()
{
    Event::listen(
        'backend.filter.extendScopes',
        function ($filterWidget) {
            if (isset($filterWidget->scopes) && is_array($filterWidget->scopes) && count($filterWidget->scopes) > 0) {
                // Add scope
                $filterWidget->addScopes(
                    [
                        'clear' => [
                            'label' => 'Clear filters',
                            'cssClass' => 'oc-icon-eraser',
                            'type' => 'button',
                        ]
                    ]
                );

                // Clear filters
                if (post('scopeName') == 'clear') {
                    foreach ($filterWidget->getScopes() as $scope) {
                        $filterWidget->setScopeValue($scope, null);
                    }
                }

                // Update filter
                $filterWidget->bindEvent('filter.update', function () use ($filterWidget): array {
                    return [
                       // Prevent double outer div
                        '.control-filter' => preg_replace('/^<[^>]+>|<\/[^>]+>$/', '', $filterWidget->render()),
                    ];
                });
            }

            // Add custom view path
            $filterWidget->addViewPath(plugins_path('/pluginnamespace/pluginname/filters'));
        }
    );
}

Don't forget to change the view path location to your plugin. Also you can add more filter buttons for any use case.

[msimkunas]

@robinbonnes Thanks for sharing this, I wasn't aware it was possible to extend the scopes like that. Is this way of extending them documented anywhere?

Edit: nevermind, just noticed that you're simply using the ViewMaker trait to add a custom view.

[msimkunas]

Also, see my comment regarding a bug. Your sample code would also benefit from the proposed changes outlined there (specifically the filter.update handler which should only update the inner filter_scopes partial).