Kopfzeilen-Schaltflächen hinzufügen

Auf jeder CRUD-Tabelleninstanz können Sie Kopfzeilen-Schaltflächen einfügen. Diese Kopfzeilen-Schaltflächen sind Vue-3-Komponenten, die benutzerdefinierte Funktionen für die aktuelle CRUD-Tabelle bereitstellen. Sie werden sie verwenden, um asynchrone Anfragen für die ausgewählten Einträge oder mehr auszuführen.

So definierst du deine Schaltflächen.

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

use App\Services\CrudService;

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

Du musst eine Methode „getHeaderButtons“ auf deiner CRUD-Komponente definieren, die ein Array von Strings zurückgibt. Diese Strings sind als Eigenschaften gedacht, die auf „nsExtraComponents“ definiert sind – einer globalen Variable, die alle benutzerdefinierten Vue-Komponenten enthält, die entweder von NexoPOS oder von benutzerdefinierten Modulen bereitgestellt wurden.

Sobald sie injiziert wurden, sind die Komponenten dafür verantwortlich, den Button selbst sowie die gesamte Logik dahinter zu rendern. Unter der Annahme dessen, was zuvor definiert wurde, so erstellen wir unsere Button-Komponente:

@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

Dies wird die folgende Ausgabe erzeugen.

Erweitert andere CRUD-Header-Schaltflächen

Sie können auch eine benutzerdefinierte Header-Schaltfläche in anderen CRUD-Tabellen einfügen. Dabei kann es sich um ein CRUD handeln, das von NexoPOS definiert wurde, oder um ein CRUD aus einem anderen Modul. In Ihrem Modul-Service-Provider fügen Sie zuerst die Schaltfläche Ihres Kundenmoduls ein.

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

Dann fügst du so eine Ansicht in die Fußzeile der CRUD-Tabelle ein:

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

Die Inline-Funktion, die als Callback für die Aktion „ProductCrud::method( 'getTableFooter' )“ verwendet wird, lädt eine View „footer.blade.php“, die im Verzeichnis „Resources“ innerhalb des Moduls „YourModule“ definiert ist.