Intercepter l’action de suppression avec JavaScript

Lorsqu’on étend un CRUD avec des actions personnalisées, la logique ne relève pas toujours du backend : parfois, il vaut mieux la gérer côté frontend, notamment pour les interactions avec l’interface utilisateur.

Par exemple, imaginez ajouter une action « Transférer le stock » pour déplacer des unités spécifiques d’un produit vers un entrepôt. Au lieu de traiter cela directement, vous pouvez déclencher une fenêtre contextuelle lorsque l’action est cliquée, ce qui vous permet de charger et d’afficher un composant Vue personnalisé pour gérer le transfert.

Injecter un pied de page sur une instance CRUD

Désormais, nous devons injecter conditionnellement un pied de page personnalisé sur une instance de Crud que nous souhaitons étendre. Cela signifie que, lorsqu’une seule instance de ProductCrud est utilisée, par exemple. Pour cela, nous devons d’abord enregistrer un filtre.

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

Ici, nous avons injecté une vue dans le pied de page de l’instance CRUD qui traitera « produits ».

Notez que « ns-products » désigne ici un identifiant (anciennement un espace de noms) du composant CRUD ProductCrud (disponible sur App\Crud\ProductCrud). Cela signifie que pour injecter une Vue dans un composant CRUD spécifique, il faut d’abord disposer de l’identifiant.

Enregistrer une action de ligne personnalisée

Maintenant, nous devons enregistrer une action personnalisée sur une ligne avec l’identifiant « 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;
        });
    }
}

Capturer l’action depuis JavaScript

Maintenant, nous devons capturer cette action, car nous n’avons défini aucun type connu spécifique.

<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>

Tout d’abord, nous vérifions si l’événement est « ns-table-row-action », puis nous vérifions si l’espace de noms de l’action est « my-product-transfer ». Ensuite, nous pouvons exécuter notre composant. Nous devrons ensuite utiliser un objet « Popup » pour créer une fenêtre contextuelle pour notre composant spécifique. Nous supposerons que vous avez correctement enregistré votre composant Vue et que vous souhaitez l’ouvrir lorsqu’une action est cliquée. Nous utiliserons l’exemple précédent ici.

<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>

À partir de maintenant, nous devrions pouvoir voir une fenêtre contextuelle apparaître.