kirschbaum-development / nova-inline-select

An inline select field for Nova apps

An inline select field for Nova apps

This package contains a Nova select field that can update field values inline from the index and detail views.

Requirements

Nova Version	Inline Select Version
v1-3	^1.0
v4	^2.0

This Nova field requires Nova 1.0 or higher.

Installation

You can install this package in a Laravel app that uses Nova via composer:

composer require kirschbaum-development/nova-inline-select

Usage

Next you can use the KirschbaumDevelopment\Nova\InlineSelect field in your Nova resource:

namespace App\Nova;

use KirschbaumDevelopment\Nova\InlineSelect;

class User extends Resource
{
    // ...

    public function fields(Request $request)
    {
        return [
            // ...

            InlineSelect::make('Status'),

            // ...
        ];
    }
}

Use the InlineSelect field just like Nova's Select field. But now for the magic...

Inline editing

By default, the inline select field works just like a normal select field. To enable the inline editing capabilities we can use the inlineOnIndex() and inlineOnDetail() methods.

InlineSelect::make('Status')->options($options)
    ->inlineOnIndex()
    ->inlineOnDetail(),

The above inline select field will show up on both the index and detail views. When making a change to the select field, a button will display next to the field allowing you to commit the change. If you would rather the field auto-submits the change, simply add enableOneStepOnIndex() or enableOneStepOnDetail().

InlineSelect::make('Status')->options($options)
    ->inlineOnIndex()
    ->enableOneStepOnIndex(),

The inline select field on the index view now will auto-submit the changed value. You can also continue to use the old disableTwoStepOnIndex() method if you choose, which just calls enableOneStepOnIndex() under the hood.

You can also add the inline select to Lenses. Use the inlineOnLens() method. Auto-submitting works the same as well with enableOneStepOnLens().

InlineSelect::make('Status')->options($options)
    ->inlineOnLens()
    ->enableOneStepOnLens(),

Display using labels

This method works just like Nova's select field. It will display the option value rather than the option key.

InlineSelect::make('Status')->options($options)
    ->displayUsingLabels(),

Using closures as options() argument

You may pass a closure to the options method. It must return a key value pair array.

InlineSelect::make('Status')
    ->options(function () {
        return [
            'one' => 'foo',
            'two' => 'bar',
        ];
    }),

Validation caveats

In the case where fields on a model are required, which is likely, an extra step needs to be taken to ensure the inline select update persists and doesn't throw an error. The validation rule sometimes needs to be added to the updateRules() method on any field that is required.

Text::make('Email')
    ->rules('required', 'email')
    ->updateRules('sometimes'),

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email [email protected] or [email protected] instead of using the issue tracker.

Credits

• Brandon Ferens

Sponsorship

Development of this package is sponsored by Kirschbaum Development Group, a developer driven company focused on problem solving, team building, and community. Learn more about us or join us!

License

The MIT License (MIT). Please see License File for more information.

nova-inline-select's Issues

Inline select of a related entity field

I'm trying to use the component to update a related entity but i'm beginning to feel this is not possible.

Basically i'm trying to do something like this:

            InlineSelect::make('Status', 'relatedStuff.status')
                ->options(RelatedStuff::STATUS_NAMES)
                ->displayUsingLabels()->inlineOnIndex()->disableTwoStepOnIndex(),

The status list displays correctly but the value doesn't get updated when i change it.

Any guidelines on how to approach this development? i could try to do a pull request with this.

$toasted not showing when changing value

After some debugging, I think the problem lies in the following code:

nova-inline-select/resources/js/components/mixins/inline.js

Line 25 in 25ac353

let label = _.find(this.field.options, option => option.value == this.field.value).label;

This piece of code is trying to set the label based on the field.value. The problem is that this is the old value and not the new one.

Fixing this would tackle 2 issues:

• First, if the old value is null, $toasted will never show up because is trying to get label on null.
• Second, if there was an old value, then the $toasted will show but referencing the old value and not the updated one.

This issues is related with #11

Can anyone confirm if the issue still persists?

Feature: render new options after save

Case: state machine. Display on select only possible transitions.

After update value return to frontend new array of possible transitions.

[Feature request] inlineOnLenses()

Would be great if we could make the same functionality on lenses as well.

I'm working on a project where the user must be able to update a field inline on a lenses page.

Currently it is only possible to use this package on Index and Detail pages.

inlineOnLenses() could even accept a single lens or an array of the resource related lenses:

inlineOnLenses(LensesOne::class)

// Or..

inlineOnLenses([LensesOne::class, LensesTwo::class])

What do you think @kirschbaum ? Is this a nice feature to implement? Is it hard to work on it?

Not selecting option if value is integer 0

I have a tinyInteger field that I'm using the InlineSelect field on.

The value can be between 0 and 5

The field looks like this:

InlineSelect::make('Account Level')
                ->options(function () {
                    return [
                        0 => 'Normal User',
                        1 => 'Backer',
                        2 => 'Moderator',
                        3 => 'Tester',
                        4 => 'Admin',
                        5 => 'Super Admin',
                    ];
                })
                ->displayUsingLabels()
                ->inlineOnIndex()
                ->inlineOnLens()
                ->inlineOnDetail()
                ->disableTwoStepOnIndex()
                ->disableTwoStepOnLens()
                ->disableTwoStepOnDetail();

If the value is anything but 0, it correctly selects the currently selected option, but if the value is 0, it fails to select 'Normal User' and instead selects the Choose an option option

Any idea on how to remedy this?

Thanks!

Need to typecast v-model as number

@brandonferens When updating the inline-select field, I noticed that the Toasted message was always the same, no matter what I selected. More specifically, the select option of the field visibly changed to what I had selected, but the notification remained at whatever the value was when the page loaded. Even more strange was that everything else was working--meaning, the model was updated successfully. What I discovered was that when the page loads, Vue has the appropriate value for the field, which in my case is an integer (status_id). Yet when I selected a new select option, Vue updated the new value with a string. So 3 returned as "3". I was able to fix this by changing v-model="value" to v-model.number="value" in the component.

I'm not sure if this is the right way to approach this, I've never had this problem with Vue. I'm also not sure how we'd go about dynamically typecasting, as I'd imagine others will want to use string values as well as integers...

Any ideas?

Hydrate field with current value

Sorry if I'm just missing this, but is it possible for the select field to be hydrated with the model/resources's current value? When I load up the index view, the select field is blank, but I'd expect it to show the current value.

Translation

Thank you for this great package! Is it possible to translate the 'updated to' string?

Thank you in advance 😃

Not working on Laravel v8.83 Nova v3.26.1

use KirschbaumDevelopment\Nova\InlineSelect;

Default/"Choose an Option" option should hide Update button

After you choose an option in the drop-down, if you switch back to the "Choose an option" option, the "Update" button is still displayed/enabled:

Causes a 500:
SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'status' cannot be null ...

Is it possible to refresh the record after the update?

I have a colourful Badge next to my InlineSelect, they both display the same value but based on the value I used different colours. It would be nice if the Badge could get updated after I change its value using your InlineSelect. Is this possible?

Request > different way to present messages

For example: Say you have an index screen full of users and you want to change a few fields for each user. When you work fast allot of popus show up (toasted messages). Would be nice if there would be some alternative, like perhaps a temporary icon beside the field?

For example something like this:

[ select ]
[ select ] V
[ select ] X

Like the toasted messages these message will be shown for a few seconds. Text could be shown when you click on the icon / hover the mouse.

Cut nova requirement, causing composer issues

Composer spits out this when trying to composer require [this-package]

  Problem 1
    - kirschbaum-development/nova-inline-select 1.0.1 requires laravel/nova ^2.0 -> no matching package found.
    - kirschbaum-development/nova-inline-select 1.0.0 requires laravel/nova ^2.0 -> no matching package found.
    - Installation request for kirschbaum-development/nova-inline-select ^1.0 -> satisfiable by kirschbaum-development/nova-inline-select[1.0.0, 1.0.1].

This is caused when following the manual install of nova (drop a folder in, and add manually to composer.json). However, if you use composer directly, this doesn't pop.

Considering that the main documented method is the manual method, I'd assume it's the most common installation method at the moment.

Going to push a PR for cutting the nova requirement from composer.json.

Nulling currency field value

What a crazy bug, nulling currency field after inline update :/

[Feature Request] Passing a closure to options()

Hey once again!

It would be great if we could pass a closure into the options() method.

On my fields()I wanted to set a variable using the current class property, because we are not able to use $this inside the options() since it refers to the actual resource model.

I thought I could tackle this one and if it works as expected I will submit a PR if you are intersted on it.

Custom button css classes

Would be nice to be able to overwrite the button css classes.

Are you open to a PR?

Toasted not firing notification, `label` is undefined.

Here's my Resource code:

$this->when(
  isAdmin($request->user()),
    InlineSelect::make('Status', 'status_id')
      ->options(Status::get()->pluck('name','id')->all())  
      ->inlineOnIndex()
      ->inlineOnDetail()
      ->disableTwoStepOnIndex() 
      ->disableTwoStepOnDetail()
),

When I change the value of the InlineSelect field, the value updates successfully, but I get nothing from Toatsted (should see something like "Status updated to ${option.label}")

Here's what I'm getting from the Console:

Here's what I've got in Vue DevTools, looks like I've got a label/value:

When flag a field as required, the inline edit in index does not work

Problem

As the inline edit uses the default Nova endpoint to save data, it applies the validation rules for other fields.

Suggestion

My suggestion is to create a new endpoint only to save the data from the inline editing, which does not apply the the validation rules.

Request failed with status code 422

I have an InlineSelect on an index that is displayed on the details screen of a resource (so the inline select is on a relationship) and I get a code 422 when submitting.

Nova v4.18.2

Vue is not defined

i'm getting the error

inline-select:18292 Uncaught ReferenceError: Vue is not defined

Value don't saved if field used exceptOnForms() or hideWhenUpdating()

            InlineSelect::make(__('Status'), 'status')
                ->options([...])
                ->exceptOnForms()
                ->inlineOnIndex()->inlineOnDetail(),

Error: Request fail with status code 422

Hi,

When I select the option the system throw this error

Error: Request fail with status code 422

My code is:

InlineSelect::make('Status')->options([
'Pendiente' => 'Pendiente',
'En Proceso' => 'En Proceso',
'En Deploy' => 'En Deploy',
'Terminada' => 'Terminada',
])
->inlineOnIndex()
->disableTwoStepOnIndex(),

Do I miss something?

Thks,