October: [UX] Add "Apply Filter" button to filter groups

[LukeTowers]

We should add an "Apply Filter" button to filter groups between the selectable filter options and the selected filters in order to provide a hint to users for how to apply their selected filters.

The current behaviour is requiring the user to close the filter popup by clicking anywhere else on the page before the selected filters are sent in an AJAX request and the list is filtered appropriately. This proposal would retain the current behaviour but also add a button to close the filter popup and apply the filters.

I ran into this issue with clients that didn't know how to actually apply their chosen filter options, so this button would provide a visual prompt for users unfamiliar with the system.

[Teranode]

I'd need a visual representation on what needs to be done.

[LukeTowers]

Something like:

Apply would basically close the dialog triggering the application of the filters and clear would clear the active filter data from the dialog. Feel free to play around with the styling of those buttons but that's the general gist of it @Teranode

[Teranode]

@LukeTowers https://github.com/octobercms/october/pull/3882/

[LukeTowers]

@Teranode what's the reasoning between using that language and no icons?

[Teranode]

@LukeTowers
Just wanted to get something bare bones out and just update as needed (because i would have forgot about this request). I can add it if you want me to.

For the language? I was just following the naming conventions in the lang file

---

Commited changes

[LukeTowers]

Meant language in terms of the words chose :) Looks good, any thoughts on how it functions?

[Teranode]

Not really, i had no issues with it before, since this is more of a client issue wouldn't hurt to have buttons.

[AugmentBLU]

If you use multiple lists on a single page, only the first filter popover apply/clear buttons work. The default behavior works fine - clicking outwith the popover the filter is applied for that specific list and no others are affected, however the apply/clear buttons seem bound to the first list only.

storm-min.js?v446:formatted:22674 Uncaught TypeError: Cannot read property 'data' of null

FilterWidget.prototype.filterScope = function(isReset) {
        var scopeName = this.$activeScope.data('scope-name') // JS halts here
        if (isReset) {
            this.scopeValues[scopeName] = null
            this.updateScopeSetting(this.$activeScope, 0)
        }
        this.pushOptions(scopeName);
        this.isActiveScopeDirty = true;
        this.$activeScope.data('oc.popover').hide()
    }

[LukeTowers]

@AugmentBLU could you submit a PR to fix that? Or perhaps @Teranode are you able to look into that?

[Teranode]

im not sure where i would be in a position to use multiple lists on the same page, so i cant reproduce the issue.

[AugmentBLU]

It's to support an existing feature. If you have multiple lists, say in tabs the filter works but not the apply and clear buttons.

https://octobercms.com/docs/backend/lists#multiple-list-definitions