Ziffmedia Nova Select Plus

#Nova Select Plus

#Installation

composer require ziffmedia/nova-select-plus

#Versions & Compatibility

• Version ^1.0 supports Nova 2-3
• Version ^2.0 supports Nova 4 (with Vue 3, dark mode support, etc)

#Description & Use Cases

This Nova component was built to satisfy the use cases just beyond Nova's built-in <select> component. Here are some scenarios where you might want SelectPlus (which uses vue-select) over the simple Select:

#Select For BelongsToMany and MorphsToMany On the Form Screen

The default Nova experience for BelongsToMany and MorphsToMany is to have a separate UI screen for attaching/detaching and syncing relationships through a "Pivot" model. For simple relationships (relationships that do not have addition pivot values or the only value in the pivot table is there for ordering), it is benefitial to move this Selection to the Form workflow instead of a separate workflow.

#Ajax For Options

For Select's that have between a handful to several 1000 options, it is more peformant to load the full list of options only on the screen that needs it: the Form screen.

There are 2 options for Ajax Options, the default is to load them all on the Form load. The second is to allow for full option searching (in this case you can write you own ajax search resolver).

#Reordering Simple Pivot/BelongsToMany Relations

Through ->reorderable(), you can enable a SelectPlus field to be reorderable. This allows, at BelongsToMany->sync() time, to populate a pivot value useful for ordering relations.

#Usage

use ZiffMedia\NovaSelectPlus\SelectPlus;

// setup model like normal:
public function statesLivedIn()
{
    return $this->belongsToMany(State::class, 'state_user_lived_in')->withTimestamps();
}
 
// add Nova Resource Field
SelectPlus::make('States Lived In', 'statesLivedIn', State::class),

#Options & Examples

#->label(string|closure $attribute) Pick a different attribute to use as the label

Default: 'name'

SelectPlus::make('States Lived In', 'statesLivedIn', State::class)
  ->label('code')

If a closure is provided, it will be called and the value can be utilized. Additionally, the output may be HTML as the component will v-html the output on the frontend:

// Using php 7.4 short functions:
SelectPlus::make('States Visited', 'statesVisited', State::class)
    ->label(fn ($state) => $state->name . " <span class=\"text-xs\">({$state->code})</span>")

#->usingIndexLabel() & ->usingDetailLabel()

Default is to produce a count of the number of items on the index and detail screen

If a string name is provided, the name attribute is plucked and comma joined:

SelectPlus::make('States Lived In', 'statesLivedIn', State::class)
  ->usingIndexLabel('name'),

If a closure is provided, it will be called, and the value will be utilized. If the value is a string, it will be placed:

SelectPlus::make('States Lived In', 'statesLivedIn', State::class)
  ->usingIndexLabel(fn($models) => $models->first()->name ?? ''),

If an array is returned, the Index and Detail screens will produce a <ol> or <ul> list:

SelectPlus::make('States Lived In', 'statesLivedIn', State::class)
  ->usingIndexLabel(fn($models) => $models->pluck('name')),

#->reorderable(string $pivotOrderAttribute) - Ability to reorder multiple selects

// assuming in the User model:
public function statesVisited()
{
    return $this->belongsToMany(State::class, 'state_user_visited')
        ->withPivot('order')
        ->orderBy('order')
        ->withTimestamps();
}
 
// inside the Nova resource:
SelectPlus::make('States Lived In', 'statesLivedIn', State::class)
    ->reorderable('order'),

#->optionsQuery(closure) - Ability to apply changes to options query object

// inside the Nova resource (exclude all states that start with C)
SelectPlus::make('States Lived In', 'statesLivedIn', State::class)
    ->optionsQuery(function (Builder $query) {
        $query->where('name', 'NOT LIKE', 'C%');
    })

• Note: this will apply before any ajaxSearchable() functionality, it will not replace it but be applied along with ajaxSearchable() if it exists

#->ajaxSearchable(string|closure|true) Ajax search for values

Given a string, models will be search the resources via the provided attribute using WHERE LIKE. Given a callback, returning a Collection will populate the dropdown:

SelectPlus::make('States Visited', 'statesVisited', State::class)
    ->ajaxSearchable(function ($search) {
        return StateModel::where('name', 'LIKE', "%{$search}%")->limit(5);
    })