Menus du tableau de bord
Grâce à l’API Menu, vous pourrez ajouter de nouveaux menus au tableau de bord NexoPOS, mais aussi modifier ces menus. Les menus NexoPOS acceptent des éléments enfants (qui ne peuvent pas contenir de sous-enfants). Seuls les éléments enfants situés au niveau 1 et en dessous sont pris en charge. Avant d’expliquer comment créer un menu, parlons des prérequis.
Principes de fonctionnement du menu
NexoPOS utilise des hooks internes qui vous permettent d’injecter ou de modifier des tableaux de menus existants. Oui, vous pouvez également utiliser cette technique pour modifier un menu existant ou les masquer. Les menus de NexoPOS sont stockés sous forme de paire clé-valeur, ce qui garantit qu’ils peuvent être identifiés rapidement, mais aussi récupérés et modifiés par un développeur. Voici à quoi ressemble une paire clé-valeur d’un menu :
[
'label' => __( 'FooBar Menu' ),
'href' => '#',
'childrens' => [
[
'label' => __( 'Sub menu' ),
'href' => url( '/dashboard/foobar/submenu' )
]
]
]Comment enregistrer un hook de filtre
Juste à partir du fichier principal, qui est le fichier PHP situé à la racine et dont le nom correspond à l’espace de noms du module + la mention « Module » clavier. Dans notre exemple, le fichier principal est « FooBarModule.php », puisque notre espace de noms de module est « FooBar ». À partir de ce fichier, nous utiliserons un filtre sur l’identifiant « ns-dashboard-menus », comme ceci :
<?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
});
}
}Notez qu’ici, nous avons créé un menu simple sans enfants. Si nous voulons créer des enfants pour ce menu, nous devons fournir l’index « childrens », qui est un tableau de menus (qui ne peuvent pas avoir l’index « 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;
});
}
}Si vous procédez ainsi, votre menu sera ajouté tout en bas du menu.
Le système de hooks utilise le même principe que le système de hooks de WordPress. Cela signifie que vous pouvez modifier la priorité de l’exécution de votre rappel (callback). Par défaut, toutes les fonctions ont une priorité de 10. Plus la priorité est élevée, plus la fonction s’exécutera à la toute fin et disposera de meilleures capacités de remplacement (overwrite).
Insérer le menu à une position spécifique
Maintenant, si vous souhaitez ajouter le menu à une position précise, vous devez d’abord identifier le menu à proximité duquel vous souhaitez l’ajouter. Notez que vous pouvez insérer un menu avant ou après le menu de référence, en utilisant les fonctions « array_insert_before » et « array_insert_after ».
Avant de le faire, vous devez identifier le menu que vous souhaitez utiliser comme référence. Pour cela, vous devrez ouvrir les outils de développement sur le menu et consulter le balisage HTML.
Chaque menu possède un identifiant qui commence par « menu- », puis par l’identifiant du menu. Par exemple, le menu « Tableau de bord » a pour identifiant « menu-dashboard », donc l’identifiant du menu du tableau de bord est « dashboard ». Lors de la création de votre menu, essayez d’utiliser un « identifiant » unique afin d’éviter les collisions avec les menus existants.
Ainsi, pour injecter un menu juste après le menu du tableau de bord, nous utiliserons la fonction « array_insert_after » comme ceci :
<?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
});
}
}Vous pouvez également vérifier si un menu existe avant d’insérer votre menu en utilisant la fonction « array_key_exists » dans une instruction « if-else ».
Définir une icône pour un menu
Les icônes fonctionnent uniquement 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.
En général, votre menu devrait ressembler à ceci (dans le code).
[
'label' => __( 'Your Menu' ),
'icon' => 'la-glass-cheers',
...
]Masquer/Afficher le menu selon les privilèges (autorisations)
Il est courant d’afficher le menu de droite à la bonne personne. Pour y parvenir, vous devrez définir un ensemble d’autorisations nécessaires sur un tableau pour voir le menu. Pour cela, vous aurez besoin d’un nouvel attribut « permissions » qui accepte un tableau dans lequel vous pouvez transmettre toutes les autorisations requises (il peut n’y en avoir qu’une seule ou plusieurs).
[
'label' => __( 'Your Menu' ),
'permissions' => [ 'can.fly', 'can.run-fast' ],
...
]Avant cela, vous devrez probablement créer certaines autorisations.