GithubHelp home page GithubHelp logo

elrowfamily / nova-inline-select Goto Github PK

View Code? Open in Web Editor NEW

This project forked from kirschbaum-development/nova-inline-select

0.0 1.0 0.0 1.64 MB

An inline select field for Nova apps

License: MIT License

Vue 26.68% JavaScript 31.17% PHP 42.02% CSS 0.13%

nova-inline-select's Introduction

Nova Inline Select banner

An inline select field for Nova apps

Latest Version on Packagist Total Downloads Actions Status

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

screenshot of the inline select field screenshot of the inline select field ready for submitting

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

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 People

Contributors

brandonferens avatar didix16 avatar dependabot[bot] avatar benabbottnz avatar 4n70w4 avatar lorenzosapora avatar luisdalmolin avatar crynobone avatar noahlocke avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.