Support Filters (Select2 and DataRange)

[gpibarra]

First of all, sorry for my English!

This is a proof of concept. The idea is to have a more complete set of filters than those that currently exist. These filters have their own logic using jquery javascript to emit livewire events (could be vanilla or alpine, but in this example I use jquery).

Note that the demo project https://github.com/gpibarra/laravel-livewire-tables-demo/tree/filters should use the "dev-filters" branch of the "https://github.com/gpibarra/laravel- livewire-tables", making a local copy and changing the composer.json

     require: {
        ...
         "rappasoft/laravel-livewire-tables": "dev-filters"
     },

and the path of the repo (in my case):

     "repositories": [
         {
             "type": "vcs",
             "url" : "../laravel-livewire-tables"
         }
     ],

To do this test I used bootstrap-4 because as I said before, I used jquery.

I change the rendering of "MultiSelectFilter" from checkbox to the Select2 library (might as well have been a new filter, but I only made a change in the view) (Select2 library depends on jquery)

Also using select2 I made a new filter of type MultiText (dynamic tags).

Finally I made a datarange (only bootstrap4 compatible because it uses the daterangepicker & moment library that depends on jquery).

I insist, it is a proof of concept, in the future it would be better to use a more generic library like choices.js instead of Select2 that does not have dependencies like jquery, but this is the example I used for a project I was working on lately.

Note that the change to the MultiSelectFilter view, such as the new TextMultiTagFilter (class + view) and DateRangeFilter (class + view) are not in the main library repository, but are only from this Demo project.

The objective of this test is to modify from the library only the behaviors that did not work. In fact, the changes that I propose can also be applied at the resource/view level and by overloading the component's methods, but it would be nice if they are already changes in the original library, so that in the future I can work on some filters like the ones I propose but that are compatible with tailwind for example.

Changes in library:

Modify 2 methods and create a new one in src/Traits/Helpers/FilterHelpers.php on how to clear filters (difference between reset filter and set default)

Modify views to:

• when clearing the filters (clearing all filters), you should call a new event instead of setDefault (resources/views/components/tools/filter-pills.blade.php)
• then some details from alpine which causes it to not render correctly because it was not detecting changes in the dom when clearing the filters (clear all filter or clear specific filter). (resources/views/components/tools/toolbar.blade.php resources/views/datatable.blade.php)

I didn't do the PR of https://github.com/gpibarra/laravel-livewire-tables because first I wanted you to tell me what you think.

Greetings

[lrljoe]

I do like the idea, I've also written a custom filter component for Date Range selection using Flatpickr which looks a little snazzier than the current min/max method, and works smoothly, but comes with the cost of a dependency.

I think my only concern around any change like this is in a package that "just works" is relying on/supporting the various dependencies. I've briefly considered publishing a "Bolt-Ons" package with all of my weird/whacky things that I highly doubt @rappasoft will want to take on, but that I find useful.

I'll definitely take a look at your code this weekend tho!

[lrljoe]

So just an update, I've just about finished off documenting my alpine only version of a select2 box, and number range (min/max slider)

Plus the date range (using flatpickr).

Hoping to have docs done on Monday. I'm doing it as a separate package/add-on to avoid adding dependencies, but may look at adding the alpine only ones in as pull requests.

[lrljoe]

@gpibarra - This PR may interest you as I definitely had interesting experiences when using the PopOver filter style with different filters, not sure if you had the same! This PR presents an AlpineJS variable that you can set to prevent the closing on mouseaway event from firing when you're displaying more complex filters.

#1076

[lrljoe]

@gpibarra - This PR may also be of interest. #1077 - Adding Custom Pills blades, very useful for interacting with a custom filter.

[gpibarra]

@lrljoe - I still couldn't see these changes, but you definitely know more than I do.

gpibarra@e1f5d01#diff-b0938baaa4a7b8b1f0c193eb3a6b554fa4357ceb9c4d7131cc2516ecb0688783
I think this is important, because otherwise livewire detects changes and redraws the entire toolbar when only changing the filters

[lrljoe]

#1076 adds a variable to allow you to lock the mouseaway event, which doesn't work smoothly when opening child elements beyond the original size of the parent element, so you can set the childElementOpen to true when you open up a Select2/DataRange/whatever, and it won't let the menu close until you set it back to false.

            @if ($component->columnSelectIsEnabled())
                <div class="@if ($component->getColumnSelectIsHiddenOnMobile()) hidden sm:block @elseif ($component->getColumnSelectIsHiddenOnTablet()) hidden md:block @endif mb-4 w-full md:w-auto md:mb-0 md:ml-2">
                    <div
                        x-data="{ open: false }"
                        @keydown.window.escape="open = false"
                        x-on:click.away="open = false"
                        x-data="{ open: false, childElementOpen: false  }"
                        @keydown.window.escape="if (!childElementOpen) { open = false }"
                        x-on:click.away="if (!childElementOpen) { open = false }"

Core change in #1077 is the filter pills having this section, to allow for an individual filter to present its own blade file for the filter pill, and the underlying get/set functions to set it up

                    @if ($filter->hasCustomPillBlade())
                        @include($filter->getCustomPillBlade(), ['filter' => $filter])
                    @else
                        // Normal Filter Pill
                    @endif

Idea behind the blades will be to eventually migrate some of the more... interesting filters and stop Livewire from re-rendering constantly. To be fair a lot of this woe goes away with Livewire 3.0 which has some SPA elements that can handle it a little better than my current SPA version of Livewire which does end up chewing up CPU cycles for the end-user.

[lrljoe]

And in terms of your filters, I've got some time set aside tomorrow to properly play, so far I've only seen it working in BS4 btw, Date Range does not work in Tailwind.