Laravel Nova Tabs Package
Branch: master
Clone or download
Bajram Emini
Latest commit 79e3f11 Feb 12, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Fix #20 - Allow Resource Tools, thanks to @dkulyk Feb 12, 2019
resources Fix #20 - Allow Resource Tools, thanks to @dkulyk Feb 12, 2019
src Add Tabs on Create Jan 26, 2019
.gitignore 'Init' Dec 17, 2018
CHANGELOG.md Update CHANGELOG.md Feb 3, 2019
README.md Update README.md Jan 26, 2019
composer.json Add Authors to composer.json Dec 21, 2018
package.json 'Init' Dec 17, 2018
webpack.mix.js 'Init' Dec 17, 2018

README.md

Laravel Nova Tabs Package

Latest Version on Github

  1. Installation
  2. Usage
    1. Tabs Panel
    2. Tabs Panel with Toolbar
    3. Relationship Tabs
    4. Combine Fields and Relations in Tabs
    5. Actions in Tabs
    6. Tabs on Edit View
  3. Customization
  4. Upgrade to 1.0.0

Installation

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

composer require eminiarts/nova-tabs

Usage

Tabs Panel

image

You can group Fields of a Resource into Tabs.

// in app/Nova/Resource.php

use Eminiarts\Tabs\Tabs;

public function fields()
{
    return [

        new Tabs('Tabs', [
            'Balance'    => [
                Number::make('Balance', 'balance'),
                Number::make('Total', 'total'),
            ],
            'Other Info' => [
                Number::make('Paid To Date', 'paid_to_date'),
            ],
        ]),

    ];
}

Tabs with Toolbar

If you are only using Tabs without another default Panel, you can set withToolbar to true.

image

// in app/Nova/Resource.php

use Eminiarts\Tabs\Tabs;

public function fields(Request $request)
    {
        return [

            (new Tabs('Contact Details', [
                'Address' => [
                    ID::make('Id', 'id')->rules('required'),
                    Text::make('Email', 'email')->sortable(),
                    Text::make('Phone', 'phone')->sortable(),
                ],

                'Relations' => [
                    BelongsTo::make('User'),
                    MorphTo::make('Contactable')->types([
                        Client::class,
                        Invoice::class,
                    ]),
                ]
            ]))->withToolbar(),

        ];
    }

Relationship Tabs

image

You can also group Relations into Tabs. Make sure to use the AvailableTabFields Trait in your Nova Resource.

// in app/Nova/Resource.php

use Eminiarts\Tabs\Tabs;

class User extends Resource
{
    public function fields(Request $request)
    {
        return [
            
           new Tabs('Relations', [
                HasMany::make('Invoices'),
                HasMany::make('Notes'),
                HasMany::make('Contacts')
            ]),

        ];
    }

}

Combine Fields and Relations in Tabs

image

image

use Eminiarts\Tabs\Tabs;

public function fields(Request $request)
{
    return [

        (new Tabs(__('Client Custom Details'), [
            new Panel(__('Details'), [
                    ID::make('Id', 'id')->rules('required')->hideFromIndex(),
                    Text::make('Name', 'name'),
            ]),
            HasMany::make('Invoices')
        ])

    ];
}

Actions in Tabs

If your Model uses the Laravel\Nova\Actions\Actionable Trait you can put the Actions into a Tab like this:

// in app/Nova/Resource.php

use Eminiarts\Tabs\Tabs;
use Eminiarts\Tabs\ActionsInTabs; // Add this Trait
use Laravel\Nova\Actions\ActionResource; // Import the Resource

class Client extends Resource
{
    use ActionsInTabs; // Use this Trait

    public function fields(Request $request)
    {
        return [
            
            (new Tabs('Client Custom Details', [
                'Address'  => [
                    ID::make('Id', 'id'),
                    Text::make('Name', 'name')->hideFromDetail(),
                ],
                'Invoices' => [
                    HasMany::make('Invoices'),
                ],
                'Actions'  => [
                    MorphMany::make(__('Actions'), 'actions', ActionResource::class), // Acc Actions whererver you like.
                ],
            ]))->withToolbar(),

        ];
    }
}

Tabs on Edit View

image

If you want to show Tabs on the Edit View, use the TabsOnEdit Trait in your Resource.

// in app/Nova/Resource.php

use Eminiarts\Tabs\Tabs;
use Eminiarts\Tabs\TabsOnEdit; // Add this Trait

class Client extends Resource
{
    use TabsOnEdit; // Use this Trait
    //...
}

Customization

By default, the Tabs component moves the search input and the create button to the tabs. If you have a lot of tabs, you can move them back down to its own line:

// in app/Nova/Resource.php

use Eminiarts\Tabs\Tabs;

class User extends Resource
{

    public function fields(Request $request)
    {
        return [
            
            (new Tabs('Relations', [
                HasMany::make('Invoices')
            ]))->defaultSearch(true),

        ];
    }
}

Set ->defaultSearch(true) to revert it to its default.

image

Upgrade to 1.0.0

Thanks to dkulyk/nova-tabs the Package got a lot simpler.

  • No need to use a Trait anymore. Remove all AvailableTabFields Traits in your Resources.
  • Everything is in Tabs now. There is no TabsPanel anymore. Remove all TabsPanels and adjust your Fields according to this Readme.