Javascript Vue

Nova 4 filter component based on the Headless UI combobox component1 min read

Nova Combobox Filter




This component is based on the Headless UI Combobox component and adds a multiselect filter to Laravel Nova.

Requirements

php: >=7.3
laravel/nova: ^4.0

Installation

Install via Composer:

composer require harrald/nova-combobox-filter

Usage

The nova-combobox-filter extends the Nova select filter. And thus follows the same logic as to how to implement it.

Filter

Make a new Filter class in App/Nova/Filters and let it extend the HarraldNovaComboboxFilterNovaComboboxFilter class.

Use the following format:

<?php

namespace AppNovaFilters;

use HarraldNovaComboboxFilterNovaComboboxFilter;
use IlluminateHttpRequest;
use IlluminateSupportCollection;

class OpenPaidStateFilter extends NovaComboboxFilter
{
/**
* The displayable name of the filter.
*
* @var string
*/
public $name = ‘State’;

/**
* The name of the column to filter on
*/
protected function columnName(): string
{
return ‘state’;
}

/**
* Get the filter’s available options.
*/
public function options(Request $request): Collection
{
return Collection::make([
‘Open’ => ‘open’,
‘Paid’ => ‘paid’,
]);
}
}

The property $name is the displayable name of the filter.
The method columnName must return the name of the column to filter on
The options method should return a IlluminateSupportCollection with key/value pairs.

With Dynamic options

public function options(Request $request): Collection
{
return User::all()->pluck(‘id’, ‘name’);
}

Resource

Use the new filter in you Resource. Follows the same logic as a any other Nova filter

/**
* Get the filters available for the resource.
*
* @param NovaRequest $request
* @return array
*/
public function filters(NovaRequest $request): array
{
return [
OpenPaidStateFilter::make(),
];
}

Screenshots

Credits

This package was inspired by optimistdigital/nova-multiselect-filter

License

This project is open-sourced software licensed under the MIT license.

GitHub

View Github

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest