Menus do Painel

Usando a Menu API, você poderá adicionar novos menus ao painel do NexoPOS, mas também editar esses menus. Os menus do NexoPOS aceitam filhos (que não podem suportar filhos de nível inferior). Apenas filhos no nível 1 e abaixo são suportados. Antes de detalhar como criar um menu, vamos falar sobre os requisitos.

Princípios de Funcionamento do Menu

O NexoPOS usa hooks internos que permitem injetar ou modificar arrays existentes de menus. Sim, você também pode usar essa técnica para editar um menu existente ou para ocultá-los. Os menus do NexoPOS são armazenados como um par chave-valor, o que garante que ele possa ser identificado rapidamente, mas também buscado e modificado por um desenvolvedor. Veja como fica um par chave-valor de um menu:

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

Como Registrar um Gancho de Filtro

A partir do arquivo principal, que é o arquivo PHP localizado na raiz e que tem como nome o namespace do módulo + o teclado “Module”. No nosso exemplo, o arquivo principal é “FooBarModule.php”, pois o nosso namespace do módulo é “FooBar”. A partir desse arquivo, vamos usar um filtro no identificador “ns-dashboard-menus”, assim:

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

Note que aqui criámos um menu simples sem filhos. Se quisermos criar filhos para esse menu, precisamos fornecer o índice “childrens”, que é um array de menus (que não podem ter o índice “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;
        });
    }
}

Quando você proceder assim, seu menu será adicionado bem no final do menu.

O Hook System usa o mesmo princípio do WordPress Hook System. Isso significa que você pode alterar a prioridade da execução do seu callback. Por padrão, todas as funções têm prioridade 10. Quanto maior a prioridade, mais a função será executada no final e terá melhores capacidades de sobrescrita.

Inserir menu em uma posição específica

Agora, se você quiser adicionar o menu em uma posição específica, primeiro você precisa identificar o menu próximo ao qual gostaria de adicionar esse menu. Observe que você pode inserir um menu antes ou depois do menu de referência, usando as funções “array_insert_before” e “array_insert_after”.

Antes de fazer isso, você precisa identificar qual é o menu que deseja usar como referência. Para isso, você precisará abrir as ferramentas de desenvolvimento no menu e ver a marcação HTML.

Cada menu tem um id que começa com “menu-” e depois com o identificador do menu. Por exemplo, o menu “Dashboard” tem como identificador “menu-dashboard”, portanto o identificador do menu de dashboard é “dashboard”. Ao criar seu menu, tente garantir que use um “identificador” exclusivo para evitar colisões com menus existentes.

Para inserir um menu logo após o menu do painel, vamos usar a função “array_insert_after”, assim:

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

Você também pode verificar se um menu existe antes de inserir seu menu usando a função "array_key_exists" em uma instrução "if-else".

Definindo um ícone para um menu

Os ícones funcionam apenas para o menu pai. Se você quiser definir um ícone, será necessário adicionar um novo atributo “icon” ao seu menu. Ícones compatíveis podem ser encontrados no site do Line Awesome. É necessário apenas o nome do ícone.

Normalmente, o seu menu deve ficar assim (no código).

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

Ocultar/Mostrar Menu Conforme as Permissões

É comum exibir o menu à pessoa certa. Para conseguir isso, você precisará definir um conjunto de permissões necessárias em uma matriz para ver o menu. Para isso, você precisará de um novo atributo “permissions” que aceita uma matriz, na qual você pode passar todas as permissões necessárias (pode ser apenas uma permissão ou mais).

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

Antes disso, provavelmente você precisará criar algumas permissões.