Menús del panel

Usando la API de Menú, podrás agregar menús nuevos al panel de NexoPOS, pero también editar esos menús. Los menús de NexoPOS aceptan elementos secundarios (que no pueden admitir subelementos). Solo se admiten elementos secundarios en el nivel 1 y por debajo. Antes de explicar cómo crear un menú, hablemos sobre los requisitos.

Principios de funcionamiento del menú

NexoPOS utiliza hooks internos que te permiten inyectar o modificar arreglos de menús existentes. Sí, también puedes usar esta técnica para editar un menú existente o para ocultarlo. Los menús de NexoPOS se almacenan como un par clave-valor, lo que garantiza que pueda identificarse rápidamente, pero también que un desarrollador pueda recuperarlo y modificarlo. Así es como se ve un par clave-valor de un menú:

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

Cómo registrar el gancho de filtro

Directamente desde el archivo principal, que es el archivo PHP ubicado en la raíz y que tiene como nombre el espacio de nombres del módulo + la palabra «Module» del teclado. En nuestro ejemplo, el archivo principal es «FooBarModule.php», ya que nuestro espacio de nombres del módulo es «FooBar». A partir de ese archivo, usaremos un filtro sobre el identificador «ns-dashboard-menus» de la siguiente manera:

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

Ten en cuenta que aquí hemos creado un menú simple sin elementos secundarios. Si queremos crear elementos secundarios para ese menú, debemos proporcionar el índice «childrens», que es un array de menús (que no pueden tener el í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;
        });
    }
}

Cuando procedas de esta manera, tu menú se añadirá en la parte más baja del menú.

El sistema de Hooks utiliza el mismo principio que el sistema de Hooks de WordPress. Esto significa que puedes cambiar la prioridad de la ejecución de tu callback. De forma predeterminada, todas las funciones tienen una prioridad de 10. Cuanto mayor sea la prioridad, más se ejecutará la función al final y tendrá mejores capacidades de sobrescritura.

Insertar menú en una posición específica

Ahora, si quieres agregar el menú en una posición específica, primero debes identificar el menú más cercano al cual te gustaría agregar ese menú. Ten en cuenta que puedes insertar un menú antes o después del menú de referencia, usando las funciones «array_insert_before» y «array_insert_after».

Antes de hacerlo, necesitas identificar qué menú quieres usar como referencia. Para ello, tendrás que abrir las herramientas de desarrollo en el menú y ver el marcado HTML.

Cada menú tiene un id que comienza con «menu-» y luego con el identificador del menú. Por ejemplo, el menú «Dashboard» tiene como identificador «menu-dashboard», por lo que el identificador del menú de dashboard es «dashboard». Al crear tu menú, intenta asegurarte de usar un «identifier» único para evitar colisiones con menús existentes.

Entonces, para insertar un menú justo después del menú del panel, usaremos la función «array_insert_after» de la siguiente manera:

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

También puedes comprobar si existe un menú antes de insertarlo usando la función «array_key_exists» en una sentencia «if-else».

Definir un icono para un menú

Los iconos solo funcionan para el menú principal. Si deseas definir un icono, tendrás que agregar un nuevo atributo «icon» a tu menú. Los iconos compatibles se pueden encontrar en el sitio web de Line Awesome. Solo se necesita el nombre del icono.

Normalmente, tu menú debería verse así (en el código).

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

Ocultar/Mostrar Menú según privilegios (permiso)

Es común mostrar el menú correcto a la persona adecuada. Para lograrlo, necesitarás definir un conjunto de permisos requeridos en una matriz para ver el menú. Para ello, necesitarás un nuevo atributo «permissions» que acepte una matriz en la que puedas pasar todos los permisos necesarios (puede ser solo un permiso o varios).

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

Antes de esto, probablemente necesitarás crear algunos permisos.