Filament•6d ago

Global filter...how to refresh on change though.

I want a kind of global filter. Users are allocated locations, and their resources can be filtered by locations. I want to give users the functionality to select one or more of their permitted locations, and then for all their resources to be filtered accordingly. So far I have worked out how to: 1) Create the filter select in the header 2) Persist this throughout the session, across the panels 3) Apply the relevant global scopes dynamically to filter everything I am only missing one thing...which is when the select items are altered...it needs some sort of page refresh or change of resource to take effect. How can I make it reload everything on change ?

Solution:

Answer:

                ->afterStateUpdated(function (Component $livewire) {
                    $livewire->dispatch('locationrefresh');
                })

...

Jump to solution

2 Replies

Matthew•6d ago

Here is some of the code:

class LocationSelect extends Component implements HasForms
{
    use InteractsWithForms;

    public $selectedLocations = [];

    public function mount()
    {

        $this->selectedLocations = Session::get('selected_locations', []);

        $this->form->fill([
            'selectedLocations' => $this->selectedLocations,
        ]);
    }

    protected function getFormSchema() : array
    {
        return [
            Select::make('selectedLocations')
                ->label('Filter Locations')
                ->options(getClientUser()->getClientUserLocationOptions())
                ->inlineLabel()
                ->multiple()
                ->hintIcon('heroicon-m-question-mark-circle', tooltip: 'You can filter to one or more locations here.')
                ->visible()
                ->live()
                ->placeholder('')
                ->prefixAction(
                    Action::make('clear')
                        ->label('')
                        ->tooltip('Clear')
                        ->icon('heroicon-s-x-mark')
                        ->color('danger')
                        ->action(function ($get) {

                            $this->form->fill(['selectedLocations' => []]);

                            self::updatedSelectedLocations($get('selectedLocations'));

                        })
                        ->visible(fn (callable $get) => ! empty($get('selectedLocations'))),
                )
                ->extraAttributes(['class' => 'fixed-height-multiselect']),

        ];
    }

    public function updatedSelectedLocations($value)
    {

        $value = is_array($value) ? $value : [$value];

        Session::put('selected_locations', $value);

    }

    public function submit()
    {
        $this->validate();
    }

    public function render()
    {
        return view('web.components.panel.customer.location', [
            'form' => $this->form,
        ]);
    }
}

class LocationSelect extends Component implements HasForms
{
    use InteractsWithForms;

    public $selectedLocations = [];

    public function mount()
    {

        $this->selectedLocations = Session::get('selected_locations', []);

        $this->form->fill([
            'selectedLocations' => $this->selectedLocations,
        ]);
    }

    protected function getFormSchema() : array
    {
        return [
            Select::make('selectedLocations')
                ->label('Filter Locations')
                ->options(getClientUser()->getClientUserLocationOptions())
                ->inlineLabel()
                ->multiple()
                ->hintIcon('heroicon-m-question-mark-circle', tooltip: 'You can filter to one or more locations here.')
                ->visible()
                ->live()
                ->placeholder('')
                ->prefixAction(
                    Action::make('clear')
                        ->label('')
                        ->tooltip('Clear')
                        ->icon('heroicon-s-x-mark')
                        ->color('danger')
                        ->action(function ($get) {

                            $this->form->fill(['selectedLocations' => []]);

                            self::updatedSelectedLocations($get('selectedLocations'));

                        })
                        ->visible(fn (callable $get) => ! empty($get('selectedLocations'))),
                )
                ->extraAttributes(['class' => 'fixed-height-multiselect']),

        ];
    }

    public function updatedSelectedLocations($value)
    {

        $value = is_array($value) ? $value : [$value];

        Session::put('selected_locations', $value);

    }

    public function submit()
    {
        $this->validate();
    }

    public function render()
    {
        return view('web.components.panel.customer.location', [
            'form' => $this->form,
        ]);
    }
}

Solution

Matthew•6d ago

Answer:

                ->afterStateUpdated(function (Component $livewire) {
                    $livewire->dispatch('locationrefresh');
                })

in a blade:

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
            Livewire.on('locationrefresh', refresh => {
                window.location.reload(true);
            });
        });
</script>
@endpush

Gaming

Programming

Global filter...how to refresh on change though.