Dashboard-Menüs

Mit der Menu-API können Sie neue Menüs zum NexoPOS-Dashboard hinzufügen, aber auch diese Menüs bearbeiten. NexoPOS-Menüs akzeptieren Child-Elemente (die keine Sub-Children unterstützen). Es werden nur Child-Elemente auf Ebene 1 und darunter unterstützt. Bevor wir näher darauf eingehen, wie man ein Menü erstellt, sprechen wir über die Anforderungen.

Menü-Betriebsprinzipien

NexoPOS verwendet interne Hooks, mit denen Sie vorhandene Arrays von Menüs einfügen oder ändern können. Ja, Sie können diese Technik auch verwenden, um ein bestehendes Menü zu bearbeiten oder es auszublenden. Die NexoPOS-Menüs werden als Schlüssel-Wert-Paar gespeichert, wodurch sichergestellt wird, dass sie schnell identifiziert, aber auch vom Entwickler abgerufen und geändert werden können. So sieht ein Schlüssel-Wert-Paar eines Menüs aus:

[
    'label'  =>  __( 'FooBar Menu' ),
    'href'   =>  '#',
    'childrens' => [
        [
            'label'   => __( 'Sub menu' ),
            'href'    => url( '/dashboard/foobar/submenu' )
        ]
    ]
]

So registrieren Sie einen Filter-Hook

Direkt aus der Hauptdatei, also der PHP-Datei im Root-Verzeichnis, die als Namen den Modulnamenamespace + die Zeichenkette „Module“ trägt. In unserem Beispiel ist die Hauptdatei „FooBarModule.php“, da unser Modulnamespace „FooBar“ ist. Aus dieser Datei heraus verwenden wir einen Filter auf den Bezeichner „ns-dashboard-menus“ wie folgt:

<?php
namespace Modules\FooBar;

use Illuminate\Support\Facades\Event;
use App\Services\Module;
use App\Classes\Hook; // <= must be imported

class FooBarModule extends Module
{
    public function __construct()
    {
        parent::__construct( __FILE__ );    
      
        Hook::addFilter( 'ns-dashboard-menus', function( $menus ) {
            $menus[ 'foobar' ]  =   [
                'label'   =>  __( 'Foobar' ),
                'href'    =>  url( '/url/to/ui' ),
            ];
            
            return $menus; // <= do not forget
        });
    }
}

Beachten Sie, dass wir hier ein einfaches Menü ohne Untermenüs erstellt haben. Wenn wir für dieses Menü Untermenüs erstellen möchten, müssen wir den Index „childrens“ angeben, der ein Array von Menüs ist (die keinen Index „childrens“ haben dürfen).

<?php
namespace Modules\FooBar;

use Illuminate\Support\Facades\Event;
use App\Services\Module;
use App\Classes\Hook; // <= must be imported

class FooBarModule extends Module
{
    public function __construct()
    {
        parent::__construct( __FILE__ );    
      
        Hook::addFilter( 'ns-dashboard-menus', function( $menus ) {
            $menus[ 'foobar' ]  =   [
                'label'   =>  __( 'Foobar' ),
                'href'    =>  '#',
                'childrens' =>  [
                    [
                        'label' =>  __( 'Sub Menu' ),
                        'href'  =>  url( '/url/to/ui' )
                    ]
                ]
            ];
            
            return $menus;
        });
    }
}

Wenn Sie so vorgehen, wird Ihr Menü ganz unten im Menü hinzugefügt.

Das Hook-System verwendet das gleiche Prinzip wie das WordPress-Hook-System. Das bedeutet, dass Sie die Priorität der Ausführung Ihres Callbacks ändern können. Standardmäßig haben alle Funktionen eine Priorität von 10. Je höher die Priorität ist, desto später wird die Funktion ausgeführt und desto bessere Überschreibungsmöglichkeiten hat sie.

Menü an einer bestimmten Position einfügen

Wenn Sie das Menü an einer bestimmten Position hinzufügen möchten, müssen Sie zunächst das Menü identifizieren, das sich in der Nähe befindet, zu der Sie dieses Menü hinzufügen möchten. Beachten Sie, dass Sie ein Menü vor oder nach dem Referenzmenü einfügen können, indem Sie die Funktionen „array_insert_before“ und „array_insert_after“ verwenden.

Bevor Sie dies tun, müssen Sie identifizieren, welches Menü Sie als Referenz verwenden möchten. Dazu müssen Sie die Entwicklertools im Menü öffnen und sich das HTML-Markup ansehen.

Jedes Menü hat eine ID, die mit „menu-“ beginnt und dann mit dem Bezeichner des Menüs. Beispielsweise hat das „Dashboard“-Menü als Bezeichner „menu-dashboard“, sodass der Bezeichner des Dashboard-Menüs „dashboard“ ist. Versuchen Sie beim Erstellen Ihres Menüs, eine eindeutige „identifier“ zu verwenden, um Kollisionen mit vorhandenen Menüs zu vermeiden.

Um ein Menü direkt nach dem Dashboard-Menü einzufügen, verwenden wir die Funktion „array_insert_after“ wie folgt:

<?php
namespace Modules\FooBar;

use Illuminate\Support\Facades\Event;
use App\Services\Module;
use App\Classes\Hook; // <= must be imported

class FooBarModule extends Module
{
    public function __construct()
    {
        parent::__construct( __FILE__ );    
      
        Hook::addFilter( 'ns-dashboard-menus', function( $menus ) {
            $menus    =   array_insert_after( $menus, 'dashboard', [
                'foobar'    =>    [
                    'label'   =>    __( 'Foobar' ),
                    'href'    =>    url( '/url/to/ui' )
                ]
            ]);
            
            return $menus; // <= do not forget
        });
    }
}

Du kannst auch prüfen, ob ein Menü existiert, bevor du dein Menü einfügst, indem du die Funktion „array_key_exists“ in einer „if-else“-Anweisung verwendest.

Ein Symbol für ein Menü definieren

Symbole funktionieren nur für das übergeordnete Menü. Wenn Sie ein Symbol definieren möchten, müssen Sie Ihrem Menü ein neues Attribut „icon“ hinzufügen. Kompatible Symbole finden Sie auf der Website Line Awesome. Es wird nur der Name des Symbols benötigt.

Typischerweise sollte dein Menü so aussehen (im Code).

[
    'label'  => __( 'Your Menu' ),
    'icon'   => 'la-glass-cheers',
    ...
]

Menü je nach Berechtigungen ein-/ausblenden (Berechtigung)

Es ist üblich, das rechte Menü der richtigen Person anzuzeigen. Um das zu erreichen, müssen Sie eine Reihe von Berechtigungen definieren, die erforderlich sind, um das Menü zu sehen. Dafür benötigen Sie ein neues Attribut „permissions“, das ein Array akzeptiert, in das Sie alle erforderlichen Berechtigungen übergeben können (es kann nur eine Berechtigung oder auch mehrere sein).

[
    'label'   => __( 'Your Menu' ),
    'permissions' => [ 'can.fly', 'can.run-fast' ],
    ...
]

Bevor du das tust, musst du wahrscheinlich erst einige Berechtigungen erstellen.