outl1ne / nova-multiselect-filter

Multiselect filter for Laravel Nova.

Nova Multiselect Filter

This Laravel Nova package adds a multiselect to Nova's filters.

Requirements

• php: >=7.2
• laravel/nova: ^4.0

Features

• Multi select
• Single select
• Group select
• Search

Screenshots

Multiselect

Groupselect

Installation

Install the package in a Laravel Nova project via Composer:

composer require outl1ne/nova-multiselect-filter

Usage

The filter can be used when switching Filter class with MultiselectFilter.

use Outl1ne\NovaMultiselectFilter\MultiselectFilter;

class BooksByAuthorFilter extends MultiselectFilter
{
    public function apply(Request $request, $query, $value)
    {
        return $query->whereHas('books', function ($query) use ($value) {
            $query->whereIn('author_id', $value);
        });
    }

    public function options(Request $request)
    {
        return Authors::all()->pluck('name', 'id');
    }
}

Option groups

Option groups are supported. Their syntax is the same as Laravel's option group syntax.

In this example (from Nova docs), all values are grouped by the group key:

    public function options(Request $request)
    {
        return [
          'cat' => ['label' => 'Cat', 'group' => 'Pets'],
          'dog' => ['label' => 'Dog', 'group' => 'Pets'],
          'eagle' => ['label' => 'Eagle', 'group' => 'Birds'],
          'parrot' => ['label' => 'Parrot', 'group' => 'Birds'],
        ]
    }

Options

Possible options you can pass to the filter using the option name as a function, ie ->placeholder('Choose peanuts').

Option	type	default	description
options	Array|callable	[]	Options in an array as key-value pairs (['id' => 'value']).
placeholder	String	Field name	The placeholder string for the input.
max	Number	Infinite	The maximum number of options a user can select.
groupSelect	Boolean	false	For use with option groups - allows the user to select whole groups at once
singleSelect	Boolean	false	Makes the field act as a single select. The returned value will be an array with one element.
optionsLimit	Number	1000	The maximum number of options displayed at once. Other options are still accessible through searching.

Localization

The translations file can be published by using the following publish command:

php artisan vendor:publish --provider="Outl1ne\NovaMultiselectFilter\FieldServiceProvider" --tag="translations"

You can then edit the strings to your liking.

Credits

• Kaspar Rosin
• Tarvo Reinpalu
• shentao/vue-multiselect
• All Contributors

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

License

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

nova-multiselect-filter's Issues

Multiselect filter is always opened first

Hi,

When I open filters and if multiselect filter is first filter then it is opened.

How to make it closed?

singleSelect() error

When multiselect field created as singleSelect(), one option selected, and when I click on same option again I get error in console.
Picture attached.

Option Groups - Incorrect dark mode colours

Package: 4.0.3
Nova: 4.13.0

Option groups seem to retain light mode styling when in dark mode:

public function options(NovaRequest $request): array
{
    return Currency::all()
        ->sortBy('sort_by_fields')
        ->mapWithKeys(fn (Currency $currency) => [
            $currency->id => [
                'label' => $currency->currency_name_code,
                'group' => $currency->enabled ? trans('fields.enabled') : trans('fields.disabled'),
            ],
        ])
        ->toArray();
}

Multiselect filter does not dropdown if to close to the bottom of browser

Hi,

If multiselect filter has a lot of options (I mean much more than 1, 2, 3 ... etc. E.g. from 30 options) and the filter to close to the bottom of browser window then the filter does not dropdown. I need to scroll page to see the options list.

Could you please fix this issue?

Style with nova-multiselect-filter, while having many options.

Another problem when using optimistdigital/nova-multiselect-filter with nova-detached-filters. When many options choosen, input field doesnt expand.
Picture attached.

I dont know if this is this package bug, or multiselect-filter bug.

How to Filter Translatable Field

• Laravel Version: v8.83.10
• Nova Version: 3.32.0
• PHP Version: PHP 7.4
• Browser type and version: Chrome 100.0
• Database Driver & Version:Mysql 5
• Operating System and Version: linux mint

Description:

i want to filter a resource according to title wether English or other language any help

Detailed

this is the function apply how can i put condition to this query so i can choose between title->en and title->es 


public function apply(Request $request, $query, $value)
{
    return $query->whereNotNull('title->en');
}

public function options(Request $request)
{
    return [
        'ES' => 'title->es',
        'En' => 'title->en'
    ];
}

Ajax support

Hello, do you have plans, to implement dynamic options?

How do you prevent options from being preloaded ?

I'm really confused about what's going on here because this behaviour somehow is not occurring on my dev environment, but on production I've noticed that both calls to /nova-api/my-resource/cards /nova-api/my-resource/filters is preloading ALL the options from your multiselect filter.. which in my case is 50k+ records which causes a huge performance cost.

I don't understand why this is happening or how to prevent it from happening, but am hoping you might know more about what's going on here?

Thanks

Multiselect list not display on various Browsers

Hi,

Multiselect list not displayed on Mac Firefox 118, safari, chrome iOS, safari iOS
With Mac Chrome it's ok

It looks that is a problem with list height calculation. If I set height: to fixed value in the inspector and the list appears properly.

Regards

Nova multiselect not working in nova 3

Hello!
I have installed the package version 2.0.0 as per documentation:
https://github.com/outl1ne/nova-multiselect-filter/tree/2.0.0

but for some reason it's not working:

Here is my filter:

<?php

namespace App\Nova\Filters;

use Illuminate\Http\Request;
use OptimistDigtal\NovaMultiselectFilter\MultiselectFilter;
use App\Location;

class ProvinceFilter extends MultiselectFilter
{
    /**
     * The filter's component.
     *
     * @var string
     */
    public $component = 'select-filter';

    /**
     * Apply the filter to the given query.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Illuminate\Database\Eloquent\Builder  $query
     * @param  mixed  $value
     * @return \Illuminate\Database\Eloquent\Builder
     */
    public function apply(Request $request, $query, $value)
    {
        return $query->where('province', $value);
    }

    /**
     * Get the filter's available options.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function options(Request $request)
    {
        $array = Location::where('type', 'province')->get();
        $options = [];
        foreach ($array as $item) {
            $options[$item['name']] = $item['name'];
        }

        return $options;
    }
}

here is where I register the filter in my resource:

/**
     * Get the filters available for the resource.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function filters(Request $request)
    {
        return [
            new Filters\ProvinceFilter,
]
}

I'm really not sure what i'm missing.

Laravel nova 3 support

Hello!
I have installed the package version 2.0.0
and included in my filter: use Outl1ne\NovaMultiselectFilter\MultiselectFilter;
for some reason it's saying Class 'Outl1ne\NovaMultiselectFilter\MultiselectFilter' not found

The intellisense picks up: use OptimistDigtal\NovaMultiselectFilter\MultiselectFilter;
and even with that the filter dropdown does not show as a multiselect

    {
        return [
            'cat' => ['label' => 'Cat', 'group' => 'Pets'],
            'dog' => ['label' => 'Dog', 'group' => 'Pets'],
            'eagle' => ['label' => 'Eagle', 'group' => 'Birds'],
            'parrot' => ['label' => 'Parrot', 'group' => 'Birds'],
        ];
   }

What is the correct class to import or what could I be doing wrong?

Do not show all options list before start typing

Hi,
Thank you for the component!

I want to have clear options list first.
How do not show all options before I start typing? Can I manage it?

Thx!

Options hidden behind filter box

When the options are shown its not showing outside the filter box is this expected?

Nova: 3.26.1

singleSelect not working as expected

I tried using ->singleSelect(true) and it does change the behaviour but it seems like something is missing.

First of all, the readme says Makes the field act as a single select which also means the saved value will not be an array. yet when using ->singleSelect(true) the $value passed to the apply method is still an array, the same way it is when not using ->singleSelect(true)

This it not a biggie but means I must use return $query->where('id', $value[0]);, whereas when not using ->singleSelect(true) then I would use return $query->whereIn('id', $value);

The second thing is that when using ->singleSelect(true), the filter does not show the currently selected value.

I also feel like when using ->singleSelect(true), you should be able to press 'Enter' on a value and it would activate the filter and close the autocomplete search dropdown. Currently you have to TAB out of the field for it to activate.

Maybe I'm using it wrong? Any tips appreciated.

Many thanks!

Can I set the filter not to "open" by default ?

Hello,

Can I disable somehow the filter not to "open" up by default ? It takes a lot of space and goes over the other filers
This is the default state when I click on filters:

I would like this to be the default state:

Thanks.

Light and Darkmode: `color` property of selected option pills have problem using white

Problem:
.nova-multiselect-filter .multiselect__tag color is not compatible in light mode using nova 4 branding config.

        'colors' => [
            "400" => "0, 213, 254",
            "500" => "0, 127, 152",
            "600" => "37, 87, 96",
        ]

Cause:

The CSS var used are in Hex format.
--colors-white = #fff

Screenshots:

Meh Solution:
I'm currently using Nova Assets for overriding the CSS with !important value

.nova-multiselect-filter .multiselect__tag {
  color: var(--colors-white) !important;
}

Could anyone suggest a better solution? 😄

Nova 4 Support

deselecting option does not actually clear the active filter

After selecting a filter it automatically filters as expected. Awesome.

However, deselecting the active option still leaves the filter as 'active' but the option is unselected. This gives the awkward situation that the filter 'dropdown' is 'active' (1 filter active) but the actual filter is 'empty'

Selecting an option:

But deselecting:

(this leaves the active 'filters' set to 1 (and is indeed still active in the AJAX filter calls) but the option isnt selected anymore. As if the component is missing some callback / event somewhere?

Responsive

Hello !

First of all, thank you for this great plugin, however, I have a little problem with the responsive.

On devices less than 828px high, the selector does not display correctly. The choices are displayed at the very top when you scroll.

Is it possible to correct this problem?

THANKS.

Enum support

I've been trying to use this filter with a field that has an enum for its possible values. It half-works... I define an options method to fetch all the allowed values from an enum:

    public function options(NovaRequest $request)
    {
        return \App\Enums\MyEnum::cases();
    }

This creates a pop-up menu with all the possible values, correctly formatted. However, when it actually performs the search it doesn't match anything. It seems that this is because the array of possibilities that ends up in the $value param in the apply method is not the right shape for the search. I figured out how to translate it in the apply method so that the enum works, and I thought others might find it useful, or you could integrate it into this package:

    public function apply(NovaRequest $request, $query, $value)
    {
        $opts = [];
        if (is_array($value)) {
            foreach ($value as $st) {
                $sts = \App\Enums\MyEnum::tryFrom($st);
                if ($sts) {
                    $opts[] = $sts;
                }
            }
            if (!empty($sts)) {
                return $query->whereIn('scans.status', $opts);
            }
        }
        return $query;
    }

How do I clear Selection

Hello

I need to cancel or clear selection in case of singleSelection

Thanks