Agregar botones de encabezado

En cada instancia de tabla CRUD, puedes insertar botones de encabezado. Esos botones de encabezado son componentes de Vue 3 que proporcionan funciones personalizadas para la tabla CRUD actual. Los usarás para realizar solicitudes asíncronas sobre las entradas seleccionadas o más.

Así es como definirás tus botones.

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

use App\Services\CrudService;

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

Necesitas definir un método “getHeaderButtons” en tu componente CRUD que devuelva un array de strings. Esas cadenas están destinadas a ser propiedades definidas en nsExtraComponents, una variable global que contiene todos los componentes Vue personalizados definidos y proporcionados por NexoPOS o por módulos personalizados.

Una vez inyectados, los componentes se encargarán de renderizar el botón en sí y toda la lógica que hay detrás. Asumiendo lo que se define antes, así es como crearemos nuestro componente de botón:

@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

Esto producirá la siguiente salida.

Extiende los botones de encabezado de otras operaciones CRUD

También puedes insertar un botón de encabezado personalizado en otras tablas CRUD. Puede ser un CRUD definido por NexoPOS o por otro módulo. En tu ServiceProvider de módulo, primero insertarás el botón de tu módulo.

<?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;
        });
    }
}

Luego, insertarás una vista en el pie de la tabla CRUD, así:

<?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 función en línea utilizada como devolución de llamada para la acción «ProductCrud::method( 'getTableFooter' )», cargará una vista «footer.blade.php» definida en el directorio «Resources» dentro del módulo «YourModule».