Capturar Ação de Crud com JavaScript

Ao estender um CRUD com ações personalizadas, a lógica nem sempre deve ficar no backend — às vezes é melhor tratá-la no frontend, especialmente para interações de interface com o usuário.

Por exemplo, imagine adicionar uma ação “Transferir estoque” para mover unidades específicas de um produto para um armazém. Em vez de processar isso diretamente, você pode acionar um pop-up quando a ação for clicada, permitindo carregar e exibir um componente Vue personalizado para lidar com a transferência.

Injetar Rodapé em uma Instância CRUD

Agora, precisamos injetar condicionalmente um rodapé personalizado em uma instância de Crud que queremos estender. Isso significa que, quando estiver sendo usada apenas uma instância de ProductCrud, por exemplo. Para isso, primeiro precisamos registrar um filtro.

<?php
namespace Modules\MyModuleNamespace\Providers;

use Illuminate\Support\ServiceProvider;
use App\Classes\Hook;
use App\Classes\Output;

class MyModuleProvider extends ServiceProvider
{
    public function register()
    {        
        Hook::addFilter( 'ns-crud-footer', function( Output $output, $namespace ) {
            if ( $namespace === 'ns-products' ) {
                $output->addView( 'MyModuleNamespace::footer' );
            }
          
            return $output;
        });
    }
}

Aqui, injetamos uma visualização no rodapé da instância do CRUD que processará “produtos”.

Observe que o “ns-products” aqui se refere a um identificador (anteriormente namespace) do componente CRUD ProductCrud (disponível em App\Crud\ProductCrud). Isso significa que, para injetar uma Vue em um componente CRUD específico, precisamos ter o identificador primeiro.

Registrar uma ação de linha personalizada

Agora, precisamos registrar uma ação personalizada de linha com o identificador "my-product-transfer".

<?php
namespace Modules\MyModuleNamespace\Providers;

use Illuminate\Support\ServiceProvider;
use App\Classes\Hook;
use App\Services\CrudEntry;

class MyModuleProvider extends ServiceProvider
{
    public function register()
    {
        $namespace  = 'ns.products';
        
        Hook::addAction( Product::method( 'setActions' ), function( CrudEntry $row ) {
            $row->action( 
                label: __( 'Transfer Product' ),
                identifier: 'my-product-transfer'
            );

            return $row;
        });
    }
}

Capturando a Ação do JavaScript

Agora precisamos capturar essa ação, pois não definimos nenhum tipo específico conhecido.

<script>
nsEvent.subject().subscribe( event => {
    if ( event.identifier === 'ns-table-row-action' && event.value.action.identifier === 'my-product-transfer' ) {
        // Display you action here. "event.value.row" contains the actual clicked row. 
    }
});
</script>

Primeiro, verificamos se o evento é “ns-table-row-action” e, em seguida, verificamos se o namespace da ação é “my-product-transfer”. Então, podemos executar nosso componente. Em seguida, precisaremos usar um objeto “Popup” para criar um pop-up para nosso componente específico. Vamos assumir que você registrou corretamente seu componente Vue e gostaria de abri-lo quando uma ação for clicada. Usaremos o exemplo anterior aqui.

<script>
nsEvent.subject().subscribe( event => {
    if ( event.identifier === 'ns-table-row-action' && event.value.action.identifier === 'my-product-transfer' ) {
        const row   = event.value.row;
        Popup.show( MyModulePopup, { row });
    }
});
</script>

A partir de agora, devemos conseguir ver uma janela pop-up aparecendo.