lowerrocklabs / laravellivewiretablesadvancedfilters

Advanced filters for Rappasoft Laravel Livewire Tables

LaravelLivewireTablesAdvancedFilters

Advanced filters for Rappasoft Laravel Livewire Tables v2.0 and above

• Numeric Range Filter
• Date Range Filter
• Date Picker Filter
• Smart Select (Select2 Style)
• Component Filter (Under Development)

Demo Available Here: https://tabledemo.lowerrocklabs.com/

Package is currently under active development & testing, please use caution when using in a production environment.

Configuration

Please see the Wiki for detailed configuration options and examples.

Current Status

Filter	Tailwind 3	Tailwind 2	Bootstrap 4	Bootstrap 5
Number Range	✓	✓	✓	✓
Date Range	✓	✓	✓	✓
Date/Time Picker	✓	✓	✓	✓
SmartSelect	✓	✓	✓ (Styling Improvements)	✓ (Styling Improvements)
Component Filter	Testing	Testing	✗	✗

Laravel Support

Version	Supported
8	✓
9	✓
10	✓

Installation

This package is available to be installed via Composer

composer require lowerrocklabs/laravel-livewire-tables-advanced-filters

The Filters

Filter classes should be in your table's head in the same way as existing filters.

Numeric Range Filter

Filter with a configurable Minimum/Maximum value, provides two values to the filter() function

| | |

Date Filters

There are two filters, one is a standard single-date picker (DatePickerFilter), and the other is a range filter (DateRangeFilter)

Date Range Filter

Flatpickr Filter with a configurable Minimum/Maximum value, provides two values to the filter() function () in the form of an array.

Date Picker Filter

Flatpickr Filter with a configurable Minimum/Maximum value, provides one values to the filter() function

| | | |

SmartSelect Filter

A Select2 style Filter built in AlpineJS. This takes a list of potential options, and allows the end-user to filter them on-the-fly, and select appropriate values.

Other Notes

This package makes several on-the-fly adjustments to the default toolbar blade, including:

• Customisable width of the filter menu Set the following value in the configuration file. You may pass any valid width class/selectors to this field. 'customFilterMenuWidth' => 'md:w-80',
• Filter menu will lock open until you click to close the menu

Publishing Assets

CSS

You may publish these to your public path using:

php artisan vendor:publish livewiretablesadvancedfilters-css

Lang

php artisan vendor:publish livewiretablesadvancedfilters-lang

Views

Please exercise restraint when publishing the views, as this package is in active development!

php artisan vendor:publish livewiretablesadvancedfilters-views

laravellivewiretablesadvancedfilters's Issues

DateRangeFilter showing current date as placeholder causes confusion

DateRangeFilter::make('Requested at', 'order_date')
                ->config([
                    'ariaDateFormat' => 'F j, Y',
                    'dateFormat' => 'Y-m-d',
                ])->filter(function (Builder $builder, array $date_range) {
                    $builder->whereDate('orders.created_at', '>=', $date_range['minDate'])
                        ->whereDate('orders.created_at', '<=', $date_range['maxDate']);
                }),

how can i fx this ? @lrljoe

problem while installing package

Demo tailwind 3 version, Smart select & changing per page rows to 50 throwin error

when changed to 50 it throws error

out of context question: is it normal that the dropdown filter is hidden when the filters are too long, we cant see the end of it ,
and how can i do the integrated filter inside table such as name in the demo

Problematic SmartSelectFilter

I was thrilled to discover this package, but ran into a few issues when setting things up and eventually got stuck.

My main usecase was in the attempted use of the SmartSelectFilter. A few undocumented items:

1. The $filterData property must be present on the component

class MyDataTableClass extends DataTableComponent {
  public $filterData = []; // must be present
}

2. When generating the options list, even if not using the htmlName the property must exist.

3. Tailwind config must be updated:

module.exports = {
  // ...
  content: [
    // ...
    "./vendor/lowerrocklabs/laravel-livewire-tables-advanced-filters/resources/views/**/*.blade.php",
  ],
  safelist: [
    // ...
    "md:w-80"
  ]
}

With these things, I'm able to get the select to render, but it doesn't present any results when interacting with the input and I'm not sure why.

Are there any other configuration or setup steps that I'm missing? It feels like I got close.

FWIW - I can see my data payload in the testObject.

Clicking a th to sort with that field Toggles the filter dropdown

so clicking on a sort button while having NO filters activated will toggle thhe filters dropdown for some reason

u can try it in my test repo

Feature Request: Default date range on config for DateRangeFilter

Would it be possible to set a default range filter:

'dateRangeDefStart' => '{{DATE}}'
'dateRangeDefEnd' => 'date('d-m-Y')'

Mainly requesting this as the default placeholder is todays date to todays date as so:

Or even the ability to set a placeholder?

No Issue : just couldnt find a way to connect with yoou

is this package ready can i include in my production website ? im using tailwind 3.x & alpine 3.x

Bootstrap 4 Implementations

Filter Dropdown Overflow

          another thing i dont think its related to your package but when i use some filters and theres no results , the filter tab goes under the table is there anyway to make it always up top 

Originally posted by @BenOussama180 in #39 (comment)

Config doesn't work with custom date format other than the default

To get the filter to work correctly, the default date format has to be preserved:

'altFormat' => 'F j, Y', // The date format to be displayed once a date is selected
'ariaDateFormat' => 'F j, Y', // The date format to be displayed for screen-readers
'dateFormat' => 'Y-m-d', // The date format to be returned for use in the filter
'earliestDate' => '2022-01-01', // The earliest date permitted, this is not required
'latestDate' => date('Y-m-d') // The latest date permitted, this is not required

I cannot change the dateFormat to d-m-Y as the filter fails to apply?

Alpine error on NumberRangeFilter

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

Bootstrap 5 Implementations

How to install flatpickr correctly on Laravel 10, vite.

I'm getting Uncaught ReferenceError: flatpickr is not defined. I've already installed flatpickr using npn.

npm i flatpickr --save

I've added import flatpickr from 'flatpickr'; to my vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import flatpickr from 'flatpickr';

I'm not sure if this is the right way to install.

DateRangeFilter // Have to include config on every filter

Writing a filter like this:

Results in a flatpockr error:

Adding the config to the filer:

Works a treat.