Aggiungi pulsanti intestazione

Su ogni istanza della tabella CRUD, puoi inserire pulsanti di intestazione. Questi pulsanti di intestazione sono componenti Vue 3 che offrono funzionalità personalizzate per la tabella CRUD corrente. Li userai per eseguire richieste asincrone sulle voci selezionate o su altre.

Ecco come definirai i tuoi pulsanti.

<?php
namespace Modules\YourModule\Crud\YourCrud;

use App\Services\CrudService;

class YourCrud extends CrudService
{
    // ...
    
    public function getHeaderButtons(): array
    {
        return [ 'CustomHeaderButtonComponent' ];
    }
    
    // ...
}

Devi definire un metodo “getHeaderButtons” sul tuo componente CRUD che restituisca un array di stringhe. Queste stringhe sono pensate per essere proprietà definite su  nsExtraComponents, una variabile globale che contiene tutti i componenti Vue personalizzati definiti e forniti sia da NexoPOS sia da moduli personalizzati.

Una volta iniettati, i componenti si occuperanno di eseguire il rendering del pulsante stesso e di tutta la logica che vi sta dietro. Assumendo quanto definito in precedenza, ecco come creeremo il nostro componente del pulsante:

@verbatim
<script type="text/javascript">
    document.addEventListener( 'DOMContentLoaded', () => {
        nsExtraComponents.CustomHeaderButtonComponent   =   defineComponent({
            template  : `<ns-button @click="increment">Custom Button {{ count }}</ns-button>`,
            data() {
            return {
                count: 0
            }
            },
            mounted() {
            console.log( 'the component is mounted' )
            },
            methods: {
                increment(){
                    this.count++;
                }
            }
        });
    });
</script>
@endverbatim

Questo produrrà il seguente output.

Estende gli altri pulsanti di intestazione CRUD

Puoi anche inserire un pulsante di intestazione personalizzato su altre tabelle CRUD. Potrebbe trattarsi di un CRUD definito da NexoPOS o da un altro modulo. Nel tuo ServiceProvider del modulo, inserirai prima il pulsante del tuo modulo personalizzato.

<?php
namespace Modules\YourModule\Providers;

use App\Hook\Service;
use App\Providers\ServiceProvider as CoreServiceProvider;
use App\Crud\ProductCrud;

class ServiceProvider extends CoreServiceProvider
{
    public function register()
    {
        Hook::addFilter( ProductCrud::method( 'getHeaderButtons' ), function( $buttons ) {
            $buttons[]  = 'YourCustomComponentVariableName';
            return $buttons;
        });
    }
}

Poi, inserirai una vista nel footer della tabella CRUD, come segue:

<?php
namespace Modules\YourModule\Providers;

use App\Hook\Service;
use App\Providers\ServiceProvider as CoreServiceProvider;
use App\Crud\ProductCrud;
use App\Classes\Output;

class ServiceProvider extends CoreServiceProvider
{
    public function register()
    {
        Hook::addAction( ProductCrud::method( 'getHeaderButtons' ), function( $buttons ) {
            $buttons[]  = 'YourCustomComponentVariableName';
            return $buttons;
        });
        
        Hook::addAction( ProductCrud::method( 'getTableFooter' ), fn( Output $output ) => $output->addView( 'YourModule::footer' ) );
    }
}

La funzione inline utilizzata come callback per l’azione “ProductCrud::method( 'getTableFooter' )” caricherà una vista “footer.blade.php” definita nella directory “Resources” all’interno del modulo “YourModule”.