bernhardh / nova-dynamic-views
A tool for easier overwriting custom-header and toolbaars in Laravel Nova
Installs: 100 686
Dependents: 0
Suggesters: 0
Security: 0
Stars: 17
Watchers: 3
Forks: 9
Open Issues: 1
Requires
- php: >=7.1.0
README
This repository is archived and no longer supported. It doesn't work with Nova 4. Just have a look at the form from https://github.com/shuvroroy/nova-dynamic-views
Nova dynamic views
This package is meant to be used INSTEAD of overwriting the custom-index-header
, custom-index-toolbar
, custom-detail-header
, custom-detail-toolbar
, etc. by yourself. It provides a much easier API for it and it allows you to use these "placeholder" components multiple times without overwriting each other.
Installation
Require the package with composer
composer require bernhardh/nova-dynamic-views
Register the tool in the tools
method in your \App\Providers\NovaServiceProvider
:
use Bernhardh\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 \Bernhardh\NovaDynamicViews\CustomComponents
object:
public function customIndexToolbarComponents() { 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() { 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 customDetailhHeaderComponents
, customDetailToolbarComponents
or your customUpdateHeaderComponents
, you can query for it like so:
public function customDetailToolbarComponents() { $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() { return CustomComponents::make('flex w-full justify-end items-center mx-3') ->addItem('my-index-toolbar-btn'); }
Full usage example
class Resource extends \Laravel\Nova\Resource { ... /** * Using the `custom-index-toolbar` placeholder component * * @return array[] */ public function customIndexToolbarComponents() { 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 array[] */ public function customDetailHeaderComponents() { $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 (except custom-dashboard-header
) are available as camel case methods postfixed with Components
:
customAttachHeaderComponents
customCreateHeaderComponents
customDetailhHeaderComponents
customDetailToolbarComponents
customIndexHeaderComponents
customIndexToolbarComponents
customLensHeaderComponents
customUpdateAttachHeaderComponents
customUpdateHeaderComponents
Create custom component
This is just a kick start documentation for this. For more info, see https://nova.laravel.com/docs/3.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
)