Fang die CRUD-Aktion mit JavaScript ab

Wenn man ein CRUD um benutzerdefinierte Aktionen erweitert, gehört die Logik nicht immer auf den Backend—manchmal ist es besser, sie im Frontend zu behandeln, insbesondere bei UI-Interaktionen.

Stellen Sie sich zum Beispiel vor, Sie fügen eine Aktion „Bestand übertragen“ hinzu, um bestimmte Einheiten eines Produkts in ein Lager zu verschieben. Anstatt diese direkt zu verarbeiten, können Sie beim Klicken auf die Aktion ein Pop-up auslösen, mit dem Sie eine benutzerdefinierte Vue-Komponente laden und anzeigen können, um die Übertragung zu handhaben.

Footer auf einer CRUD-Instanz einfügen

Jetzt müssen wir einen benutzerdefinierten Footer bedingt in eine Crud-Instanz einfügen, die wir erweitern möchten. Das bedeutet: Wenn beispielsweise nur eine ProductCrud-Instanz verwendet wird. Dafür müssen wir zunächst einen Filter registrieren.

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

Hier haben wir eine Ansicht in den Footer der CRUD-Instanz eingefügt, die „products“ verarbeitet.

Beachten Sie, dass sich „ns-products“ hier auf einen Bezeichner (früher Namespace) der CRUD-Komponente „ProductCrud“ bezieht (verfügbar unter „App\Crud\ProductCrud“). Das bedeutet, dass wir, um eine Vue in eine bestimmte CRUD-Komponente einzuspeisen, zuerst den Bezeichner benötigen.

Registrieren Sie eine benutzerdefinierte Zeilenaktion

Jetzt müssen wir eine benutzerdefinierte Zeilenaktion mit der Kennung „my-product-transfer“ registrieren.

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

Das Geschehen aus JavaScript einfangen

Jetzt müssen wir diese Aktion erfassen, da wir keinen bestimmten bekannten Typ definiert haben.

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

Zuerst prüfen wir, ob das Ereignis „ns-table-row-action“ ist, dann prüfen wir, ob der Aktions-namespace „my-product-transfer“ lautet. Anschließend können wir unsere Komponente ausführen. Danach müssen wir ein „Popup“-Objekt verwenden, um ein Pop-up für unsere spezifische Komponente zu erstellen. Wir gehen davon aus, dass Sie Ihre Vue-Komponente korrekt registriert haben und sie öffnen möchten, wenn auf eine Aktion geklickt wird. Wir verwenden hier das vorherige Beispiel.

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

Ab jetzt sollten wir in der Lage sein, ein Popup zu sehen, das angezeigt wird.