Skip to content

A nova package for dynamically add custom placeholders component in various section of views.

License

Notifications You must be signed in to change notification settings

jehkinen/nova-dynamic-views

 
 

Repository files navigation

Nova dynamic views

PHP Version Require Latest Stable Version Total Downloads License

This package will help to add some custom placeholder components like custom-index-header, custom-index-toolbar, custom-detail-header, custom-detail-toolbar, etc in various section in views. It provides a much easier API for it and it allows you to use these "placeholder" components multiple times without overwriting each other.

screenshot

Support For This Project

Buy Me A Coffee

Requirements

  • PHP (^8.1 or higher)
  • Laravel Nova (^4.0 or higher)

Installation

Require the package with composer

composer require shuvroroy/nova-dynamic-views

Register the tool in the tools method in \App\Providers\NovaServiceProvider:

use ShuvroRoy\NovaDynamicViews\NovaDynamicViews;

...

public function tools()
{
    return [
        new NovaDynamicViews()
    ];
}

Usage

Let's say you want to add a custom button to the toolbar of all index views. Just create a vue component for it, as you would do if you use the custom-index-header (see section "Create custom component" if you don't know how to). Let's call it my-index-toolbar-btn. Now the only thing you have to do is register it to your \App\Ņova\Resource class, within a new method called customIndexToolbarComponents, which returns a \ShuvroRoy\NovaDynamicViews\CustomComponents object:

public function customIndexToolbarComponents(): CustomComponents
{
    return CustomComponents::make()
       ->addItem('my-index-toolbar-btn');
}

Thats it. Now you should see the content of your component in the toolbar.

Provide extra data

If you want to add extra data (for example a label) to your component (without extra request), just add it to the addItem method as second parameter (as array):

public function customIndexToolbarComponents(): CustomComponents
{
    return CustomComponents::make()
       ->addItem('my-index-toolbar-btn', [
           'label' => 'My label'
       ]); 
}

Access resource data

You have access to the ressource class in all methods by using $this. On detail and edit components, you have access to the ID of the current model with request('id'). So if you need the model itself in your customDetailHeaderComponents, customDetailToolbarComponents or your customUpdateHeaderComponents, you can query for it like so:

public function customDetailToolbarComponents(): CustomComponents
{
    $model = $this->model()->query()->where('id', request('id'))->first();

    //...
}

Add (tailwind) class to the container

If you want to add additional CSS classes to the container div of a section (for example add flex w-full justify-end items-center mx-3 to the customIndexToolbarComponents section), add the class in the make function (or use the setClass method):

public function customIndexToolbarComponents(): CustomComponents
{
    return CustomComponents::make('flex w-full justify-end items-center mx-3')
       ->addItem('my-index-toolbar-btn'); 
}

Full usage example

use ShuvroRoy\NovaDynamicViews\CustomComponents;

class Resource extends \Laravel\Nova\Resource 
{
    ...

    /**
     * Using the `custom-index-toolbar` placeholder component
     * 
     * @return CustomComponents
     */
    public function customIndexToolbarComponents(): CustomComponents
    {
        return CustomComponents::make('flex w-full justify-end items-center mx-3')
            ->addItem('my-index-toolbar-btn', [
                'title' => 'My first btn'
            ])
            ->addItem('my-index-toolbar-btn', [
                'title' => 'My second btn'
            ]);
    }

    /**
     * Using the `custom-detail-header` placeholder component
     * 
     * @return CustomComponents
     */
    public function customDetailHeaderComponents(): CustomComponents
    {
        $model = $this->model()->query()->where('id', request('id'))->first();
        
        return CustomComponents::make()
           ->addItem('my-other-component', [
                'id' => $model->id,
                'name' => $model->name    
           ]);
    }
}

Use only on specific resources

If you want to show this button only on a specific resource, for example only for Users, just add this method to the \App\Nova\User class.

Available methods and areas

All custom-*-* nova placeholders are available as camel case methods postfixed with Components:

  • customIndexHeaderComponents
  • customIndexToolbarComponents
  • customDetailHeaderComponents
  • customDetailToolbarComponents
  • customCreateHeaderComponents
  • customAttachHeaderComponents
  • customUpdateAttachHeaderComponents
  • customUpdateHeaderComponents (Planned)
  • customLensHeaderComponents (Planned)

Create custom component

This is just a kick start documentation for this. For more info, see https://nova.laravel.com/docs/4.0/customization/resource-tools.html

Create a new resource tool with artisan:

php artisan nova:resource-tool acme/my-index-toolbar-btn

and say yes to all questions of the prompt. Now you can use this component (located ad nova-components/my-index-toolbar-btn) inside your customXXXComponents (f.e. customIndexToolbarComponents)

Credits

License

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

About

A nova package for dynamically add custom placeholders component in various section of views.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 49.0%
  • Vue 48.6%
  • PHP 2.4%