Adicionar Botões de Cabeçalho

Em cada instância da tabela CRUD, você pode injetar botões de cabeçalho. Esses botões de cabeçalho são componentes Vue3 que fornecem recursos personalizados para a tabela CRUD atual. Você os usará para executar solicitações assíncronas nas entradas selecionadas ou em mais itens.

Aqui está como você vai definir seus botões.

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

use App\Services\CrudService;

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

Você precisa definir um método “getHeaderButtons” no seu componente CRUD que retornará um array de strings. Essas strings são destinadas a serem propriedades definidas em nsExtraComponents, que é uma variável global que contém todos os componentes Vue personalizados definidos e fornecidos tanto pelo NexoPOS quanto por módulos personalizados.

Depois de injetados, os componentes serão responsáveis por renderizar o próprio botão e toda a lógica por trás dele. Considerando o que foi definido antes, veja como criaremos nosso componente de botão:

@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

Isto produzirá a seguinte saída.

Estende Outros Botões de Cabeçalho do CRUD

Você também pode injetar um botão de cabeçalho personalizado em outras tabelas CRUD. Pode ser um CRUD definido pelo NexoPOS ou por outro módulo. No ServiceProvider do seu módulo, primeiro você deve injetar o botão do seu 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;
        });
    }
}

Em seguida, você vai inserir uma visualização no rodapé da tabela CRUD, assim:

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

A função inline usada como callback para a ação “ProductCrud::method( 'getTableFooter' )” carregará uma view “footer.blade.php” definida no diretório “Resources” dentro do módulo “YourModule”.