Menu della dashboard

Utilizzando l’API Menu, potrai aggiungere nuovi menu alla dashboard di NexoPOS, ma anche modificarli. I menu di NexoPOS accettano elementi figlio (che non possono supportare elementi figlio di livello inferiore). Sono supportati solo i figli di livello 1 e inferiori. Prima di approfondire come creare un menu, parliamo dei requisiti.

Principi di funzionamento del menu

NexoPOS utilizza hook interni che ti consentono di iniettare o modificare array di menu esistenti. Sì, puoi anche usare questa tecnica per modificare un menu esistente o per nasconderlo. I menu di NexoPOS sono memorizzati come coppie chiave-valore, che ne garantiscono un’identificazione rapida ma anche il recupero e la modifica da parte di uno sviluppatore. Ecco come appare una coppia chiave-valore di un menu:

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

Come registrare un hook di filtro

Directly dal file principale, che è il file PHP situato nella root e che ha come nome lo spazio dei nomi del modulo + la dicitura “Module” sulla tastiera. Nel nostro esempio, il file principale è “FooBarModule.php”, poiché il nostro spazio dei nomi del modulo è “FooBar”. Da quel file, useremo un filtro sull’identificatore “ns-dashboard-menus” in questo modo:

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

Nota che qui abbiamo creato un menu semplice senza figli. Se vogliamo creare dei figli per quel menu, dobbiamo fornire l’indice “childrens”, che è un array di menu (che non possono avere l’indice “childrens”).

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

Se procedi in questo modo, il tuo menu verrà aggiunto in fondo al menu.

Il Hook System utilizza lo stesso principio del WordPress Hook System. Ciò significa che puoi modificare la priorità dell’esecuzione della tua callback. Per impostazione predefinita, tutte le funzioni hanno una priorità di 10. Più la priorità è alta, più la funzione verrà eseguita alla fine e avrà migliori capacità di sovrascrittura.

Inserisci il menu in una posizione specifica

Ora, se desideri aggiungere il menu in una posizione specifica, devi prima identificare il menu vicino al quale vuoi aggiungere quel menu. Nota che puoi inserire un menu prima o dopo il menu di riferimento, utilizzando le funzioni "array_insert_before" e "array_insert_after".

Prima di farlo, devi identificare quale menu vuoi usare come riferimento. Per farlo, devi aprire gli strumenti per sviluppatori nel menu e vedere il markup HTML.

Ogni menu ha un ID che inizia con “menu-” e poi con l’identificatore del menu. Ad esempio, il menu “Dashboard” ha come identificatore “menu-dashboard”, quindi l’identificatore del menu dashboard è “dashboard”. Durante la creazione del menu, cerca di utilizzare un “identifier” univoco per evitare collisioni con i menu esistenti.

Quindi, per inserire un menu subito dopo il menu della dashboard, useremo la funzione "array_insert_after" in questo modo:

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

Puoi anche verificare se esiste un menu prima di inserirlo utilizzando la funzione "array_key_exists" in un'istruzione "if-else".

Definire un’icona per un menu

Les icônes ne fonctionnent que pour le menu parent. Si vous souhaitez définir une icône, vous devez ajouter un nouvel attribut « icon » à votre menu. Les icônes compatibles se trouvent sur le site Line Awesome. Seul le nom de l’icône est nécessaire.

In genere, il tuo menu dovrebbe apparire così (nel codice).

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

Nascondi/Mostra menu in base alle autorizzazioni (permessi)

È comune mostrare il menu giusto alla persona giusta. Per ottenere questo, dovrai definire un insieme di permessi necessari su un array per visualizzare il menu. A tal fine, ti serve un nuovo attributo "permissions" che accetta un array in cui puoi inserire tutti i permessi richiesti (potrebbe essercene anche solo uno o più di uno).

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

Prima di questo, probabilmente dovrai creare alcune autorizzazioni.