Alpine error on NumberRangeFilter

[dgillier]

I added this filter to my table:

            NumberRangeFilter::make(__('cruds.group.min_members'),'range')
                ->config([
                    'min' => 0,
                    'max' => 100,
                    'cssInclude' => 'inline,'
                ])
                ->filter(function (Builder $builder, array $numberRange) {
                    $builder->whereHas('users', operator: '>=', count: $numberRange['min'])
                        ->whereHas('users', operator: '<=', count: $numberRange['max']);
                }),

And got his error, I'm probably missing something...

alpine.js:115 Alpine Error: "ReferenceError: $refs is not defined"

Expression: "{
    allFilters: $wire.entangle('table.filters'),
     twMenuElements: document.getElementsByClassName('relative block md:inline-block text-left'),         currentMin: $refs.filterMin.value,
    currentMax: $refs.filterMax.value,
    wireValues: $wire.entangle('table.filters.range'),
    defaultMin: 0,
    defaultMax: 100,
    restrictUpdates: true,
    setupFilterMenu() {
        if (document.querySelector('[aria-labelledby="filters-menu"]') !== null) {
            document.querySelector('[aria-labelledby="filters-menu"]').classList.add('md:w-80');
            document.querySelector('[aria-labelledby="filters-menu"]').classList.remove('md:w-56');
        }

        if (document.getElementById('table-filter-range-label') === null) {
            if (document.getElementById('numberRangeContainerrange').parentElement.firstElementChild !== null) {
                document.getElementById('numberRangeContainerrange').parentElement.firstElementChild.classList.add('hidden');
                document.getElementById('numberRangeContainerrange').parentElement.firstElementChild.classList.add('d-none');
            }
        } else {
            document.getElementById('table-filter-range-label').classList.add('hidden');
            document.getElementById('table-filter-range-label').classList.add('d-none');
        }

        if (document.getElementById('table-filter-range-labelInternal') !== null) {
            document.getElementById('table-filter-range-labelInternal').classList.remove('hidden');
            document.getElementById('table-filter-range-labelInternal').classList.remove('d-none');
        }
         for (let i = 0; i < this.twMenuElements.length; i++) {
            if (!this.twMenuElements.item(i).getAttribute('x-data').includes('childElementOpen'))
            {
                this.twMenuElements.item(i).setAttribute('x-data', '{ open: false, childElementOpen: true  }');
                this.twMenuElements.item(i).setAttribute('x-on:mousedown.away', 'if (!childElementOpen) { open = false }');
            }
        }         
    },
    updateStyles() {
        document.getElementById('table.filters.range').style.setProperty('--value-b', $refs.filterMin.value);
        document.getElementById('table.filters.range').style.setProperty('--text-value-b', JSON.stringify($refs.filterMin.value));
        document.getElementById('table.filters.range').style.setProperty('--value-a', $refs.filterMax.value);
        document.getElementById('table.filters.range').style.setProperty('--text-value-a', JSON.stringify($refs.filterMax.value));
    },
    setupWire() {
        if (this.wireValues !== undefined) {
            $refs.filterMin.value = (this.wireValues['min'] !== undefined) ? this.wireValues['min'] : this.defaultMin;
            $refs.filterMax.value = (this.wireValues['max'] !== undefined) ? this.wireValues['max'] : this.defaultMax;
        } else {
            $refs.filterMin.value = this.defaultMin;
            $refs.filterMax.value = this.defaultMax;
        }
        this.updateStyles();
    },
    allowUpdates() {
        this.restrictUpdates = false;
        this.updateWire();
    },
    updateWire() {
        this.updateStyles();

        if (!this.restrictUpdates) {
            if ($refs.filterMin.value != this.defaultMin || $refs.filterMax.value != this.defaultMax) {
                this.wireValues = { 'min': $refs.filterMin.value, 'max': $refs.filterMax.value };
            }
            this.restrictUpdates = true;
        }
    },
    init() {
        this.setupWire();
        this.setupFilterMenu();
        $watch('allFilters', value => this.setupFilterMenu());
        $watch('allFilters', value => this.setupWire());
    },
}"

Thanks, Denis

[lrljoe]

Should be sorted now in the latest release. Let me know if you have any issues as most of my stuff runs on Tailwind rather than Bootstrap!

More than happy to make any adjustments you recommend from your experience with Bootstrap :)

[dgillier]

Nope, same errors... I'm using Tailwind (V2) btw

[lrljoe]

Can you confirm if you have:

1. Included the blades in your tailwind.config.js content section along with the Rappasoft blades?
2. Are you using popover or slidedown for your filter display?
3. Are you getting any errors for Livewire and the "multiple root elements"?

Which version of AlpineJS are you running, and is it locally installed, or are you using a CDN?

[dgillier]

1. Yes

       content: [
           './resources/views/**/*.blade.php',
           './vendor/wire-elements/modal/resources/views/*.blade.php',
           './vendor/rappasoft/laravel-livewire-tables/resources/views/**/*.blade.php',
           "./storage/framework/views/*.php",
           './safelist.txt'
       ],

2. slidedown
3. No

2.8.2 through a CDN

[dgillier]

Just installed v3 of alpine, and I don't have error anymore :)

But got two sliders ??

[lrljoe]

Ah! Neither the core Rappasoft product (v2+) nor this really supports alpine 2.x.

Give me a few hours and I'll see if I can get it working properly in 2.x.

Do you have other dependencies on alpinejs 2.x I'm guessing?

Both this and the core Rappasoft tables depend on the cascading scope that comes with 3.x to do some of the functionality.

I may be able to leverage some other hooks, but it may not be smooth!

[dgillier]

No I'm fine using 3.x ;) Thanks for your proposal :)

Still I'm having the two slider issue as shown previously...

[lrljoe]

For two sliders, that happens if the CSS isn't available. Double check that one of the following is true:

'cssInclude' => 'inline' is set in the config file

OR

You're including the following as part of your webpack: "import '../../vendor/lowerrocklabs/laravel-livewire-tables-advanced-filters/resources/css/numberRange.min.css';" AND you have 'cssInclude' => 'none' set in the config file

OR

You've published the public CSS files via php artisan vendor:publish livewiretablesadvancedfilters-css And have set 'cssInclude' => 'include' set in the config file

I typically would recommend the first (inline) approach as it avoids pain when I inevitably release some updated CSS.

[lrljoe]

Or it may be as simple as re-running your build/dev commands, and clearing your view cache and browser cache. If that isn't working, then any errors from web console would be great, along with your browser.

I do have tests that run every time I change something across the common browsers, but you never know!

[dgillier]

My mistake, I was using:

                ->config([
                    'min' => 0,
                    'max' => 100,
                    'cssInclude ' => 'inline,'
                ])

instead of : 'numberRange.cssInclude ' => 'inline,'

Works like a charm now :)) Thanks !!!

Only enhancement I can think, is to have a live update of the indicator, so we now what will be the value when we release the cursor.

[lrljoe]

That's a very sensible idea, I'll put something together probably later today.

At the moment, it'll only push the update once your mouse moves off of the slider-bar, as first impressions from the internal users was that it updating before you slide the min/max was painful. That'll be configurable from 2 versions time (so you can choose to immediately update or wait for the cursor to move off).

You can always see any bleeding edge/new bits on here. Nothing exciting on there just yet though! https://tabledemo.lowerrocklabs.com/

[dgillier]

Great !!!

Personally I will only use the update after releasing the cursor version ;)

[lrljoe]

Great !!!

Personally I will only use the update after releasing the cursor version ;)

If you want to feed back on how this works for you, then it'd be appreciated: TW2: https://tabledemo.lowerrocklabs.com/tailwind TW3: https://tabledemo.lowerrocklabs.com/tailwind3

Frustrating thing about having to support Bootstrap4/5 and Tailwind 2/3 is it takes an age to validate everything, but I think that seems to be working from my perspective.

[lrljoe]

@dgillier - v1.0.13 now out with this functionality.

[dgillier]

Sorry, was not online...

Just installed it, works perfectly ! Many thanks :)

[lrljoe]

No worries. If you have any feedback or issues etc just stick an issue on here.

This started out as just a few filters that I needed for my projects, but happy to stick more customisations etc in as people want.

Sent from Outlook for Androidhttps://aka.ms/AAb9ysg

---

From: dgillier @.> Sent: Saturday, March 18, 2023 1:48:09 PM To: LowerRockLabs/LaravelLivewireTablesAdvancedFilters @.> Cc: Joe McElwee @.>; Comment @.> Subject: Re: [LowerRockLabs/LaravelLivewireTablesAdvancedFilters] Alpine error on NumberRangeFilter (Issue #59)

Sorry, was not online...

Just installed it, works perfectly ! Many thanks :)

— Reply to this email directly, view it on GitHubhttps://github.com/LowerRockLabs/LaravelLivewireTablesAdvancedFilters/issues/59#issuecomment-1474856480, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AZATUORFNW4CTAB2YMNYIKDW4W4JTANCNFSM6AAAAAAV7MIFM4. You are receiving this because you commented.Message ID: @.***>

[dgillier]

Looks like there is a small touch event problem on mobile (safari and chrome on ios, I don’t know about android).

When I’m releasing one of the handle, a new search is not launch until I touch with my finger somewhere else…

[lrljoe]

That's leftover from before I had the progress displaying as otherwise it'd update the query before you were ready.

I'll switch that off later this evening and issue a new version.

[lrljoe]

Apologies. This slipped off the radar over last couple of days. Just doing some tests then should be ready.

[lrljoe]

1.0.14 released with the fix for this.

[dgillier]

Thanks a lot !