Créer une page de tableau de bord

Une page fait partie des éléments que vous souhaiterez créer avec un module. Avec une page, vous pouvez créer n’importe quel type d’interface avec laquelle interagir avec NexoPOS. Vous pouvez utiliser des composants Vue intégrés, ou simplement créer les vôtres, voire charger ReactJS. Ce guide vous donne un aperçu de la création de pages dans NexoPOS.

Exigences

Avant de savoir comment créer une page personnalisée, vous devez savoir comment créer un module sur NexoPOS. Vous devez également comprendre comment créer un menu et enregistrer des routes.

Chargement du fichier de vue pour la page

Avant de commencer, vous pouvez générer un contrôleur pour votre module à l’aide de la commande :

php artisan modules:controller [moduleNamespace] [controllerName]

Un exemple concret produira la sortie suivante si nous souhaitons créer un contrôleur « MainController » pour notre module nommé « MyModule »

php artisan modules:controller MyModule MainController

Une fois votre contrôleur créé, vous devez charger le fichier de vue qui sera rendu. Maintenant que tous les fichiers Blade doivent être enregistrés dans /resources/Views (chemin relatif à partir de la racine du module).

Le chemin /dashboard/mymodule renvoie vers la méthode du contrôleur « mysettings ». Voici à quoi devrait ressembler notre contrôleur.

<?php
namespace Modules\MyNexoPOS\Http\Controllers;

use App\Http\Controllers\DashboardController;
use Illuminate\Support\Facades\View;

class MyNexoPOSController extends DashboardController
{
    public function __construct()
    {
        parent::__construct();
    }
  
    public function mysettings()
    {
        /**
         * MyModule is the namespace of our module
         * settings is the file that we would like to load, located at /Resources/Views/settings.blade.php
        **/
        return View::make( 'MyModule::settings' );
    }
}

Ici, la méthode « mysettings » utilise la méthode interne « view » pour charger les vues des modules. Le paramètre fourni comme chemin de vue utilise l’espace de noms du module comme namespace de vue. Nous pouvons également transmettre un tableau en tant que deuxième paramètre avec les index pris en charge suivants :

• titre : utilisé pour le titre de la page
• description : utilisé pour la description de la page.

<?php
namespace Modules\MyNexoPOS\Http\Controllers;

use App\Http\Controllers\DashboardController;
use Illuminate\Support\Facades\View;

class MyNexoPOSController extends DashboardController
{
    public function __construct()
    {
        parent::__construct();
    }
  
    public function mysettings()
    {
        /**
         * MyModule is the namespace of our module
         * settings is the file that we would like to load, located at /Resources/Views/settings.blade.php
        **/
        return View::make( 'MyModule::settings', [
          'title' =>  'Page title',
          'description' =>  'page description',
        ]);
    }
}

La raison pour laquelle nous utilisons la méthode « view » est qu’elle injecte le menu du tableau de bord dans notre vue. Elle n’est donc utile que si nous voulons afficher le menu latéral du tableau de bord. En revanche, cela signifie que si vous souhaitez créer une page qui utilise toute la largeur de l’écran et n’a pas besoin du menu latéral du tableau de bord, vous pouvez directement utiliser la façade « View ».

View::make( 'MyModule::settings', ... );

Créer le tableau de bord

Cette section montre comment vous pouvez étendre la mise en page du tableau de bord et y injecter votre contenu. Ici, nous souhaitons utiliser le menu latéral et l’en-tête du tableau de bord, mais modifier le contenu à l’intérieur. Nous commencerons par définir la mise en page que nous souhaitons étendre :

@extends( 'layout.dashboard' )

La mise en page du tableau de bord comporte 3 sections :

• en-tête
• corps
• pied de page

Vous pouvez également personnaliser toutes ces sections comme ceci :

@section( 'layout.dashboard.header' )
<!-- Your Content Here -->
@endsection

@section( 'layout.dashboard.body' )
<!-- Your Content Here -->
@endsection

@section( 'layout.dashboard.footer' )
<!-- Your Content Here -->
@endsection

À partir d’ici, vous devrez en savoir plus sur l’utilisation du moteur Blade de Laravel.

Supposons que vous souhaitiez afficher le panneau d’en-tête qui inclut le bouton de basculement du menu, la section des notifications et la section utilisateur.

@section( 'layout.dashboard.body' )
<div class="h-full overflow-hidden flex flex-col">
    @include( Hook::filter( 'ns-dashboard-header', '../common/dashboard-header' ) )
    <!-- your content here -->
</div>
@endsection

Voici ce qui sera rendu :

Cependant, comme vous pouvez le voir, cela n’inclut pas le titre de la page et la description. Si nous souhaitons les charger en même temps que le titre de la page et la description, nous modifierons notre code dans le fichier settings.blade.php comme suit.

@extends( 'layout.dashboard' )

@section( 'layout.dashboard.body.with-header' )
    <div class="page-inner-header mb-4">
        <h3 class="text-3xl text-primary font-bold">{{ $title ?? __( 'Unamed Page' ) }}</h3>
        <p class="text-secondary">{{ $description ?? __( 'No description' ) }}</p>
    </div>
    <!-- your content here -->
@endsection

Pour obtenir la sortie suivante.