Creazione della pagina della dashboard

Una pagina è una delle cose che potresti voler creare con un modulo. Con una pagina, puoi creare qualsiasi tipo di interfaccia con cui interagire con NexoPOS. Puoi utilizzare componenti Vue integrati, oppure crearne di tuoi o persino caricare ReactJS. Questa guida ti offre una panoramica sulla creazione delle pagine in NexoPOS.

Requisiti

Prima di sapere come creare una pagina personalizzata, devi sapere come creare un modulo su NexoPOS. Devi anche capire come creare un menu e registrare le route.

Caricamento del file di visualizzazione della pagina

Prima di iniziare, puoi generare un controller per il tuo modulo usando il comando:

php artisan modules:controller [moduleNamespace] [controllerName]

Un esempio concreto produrrà il seguente output se desideriamo creare un controller "MainController" per il nostro modulo denominato "MyModule"

php artisan modules:controller MyModule MainController

Una volta creato il controller, dovresti caricare il file di vista che verrà renderizzato. Ora che tutti i file blade devono essere salvati in /resources/Views (percorso relativo dalla root del modulo).

Caminho /dashboard/mymodule apontando para o método do controlador “mysettings”. Veja como deve ser o nosso controlador.

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

Qui, le 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 espace de noms de vue. Nous pouvons également transmettre un tableau en tant que deuxième paramètre avec les index pris en charge suivants :

• titolo: utilizzato per il titolo della pagina
• descrizione: utilizzata per la descrizione della pagina.

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

Motivo per cui utilizziamo il metodo “view” è che inserisce il menu della dashboard nella nostra vista. È quindi utile solo se desideriamo visualizzare il menu laterale della dashboard. D’altra parte, questo significa che, se desideri creare una pagina che utilizzi tutta la larghezza dello schermo e che non richieda il menu laterale della dashboard, puoi utilizzare direttamente la facciata “View”.

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

Creazione della dashboard

Questa sezione mostra come puoi estendere il layout della dashboard e inserire il tuo contenuto. Qui vorremmo utilizzare il menu laterale e l’intestazione della dashboard, ma modificare il contenuto al loro interno. Inizieremo definendo il layout che desideriamo estendere:

@extends( 'layout.dashboard' )

Il layout della dashboard ha 3 sezioni:

• intestazione
• corpo
• piè di pagina

Puoi anche personalizzare tutte queste sezioni in questo modo:

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

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

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

Da qui in poi, dovrai leggere di più su come usare il motore Blade di Laravel.

Supponiamo che tu voglia visualizzare il pannello di intestazione che include il pulsante di attivazione del menu, la sezione delle notifiche e la sezione dell’utente.

@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

Questo è ciò che verrà visualizzato:

Tuttavia, come vedi, questo non include il titolo della pagina e la descrizione. Se desideriamo caricare anche questi insieme al titolo e alla descrizione della pagina, modificheremo il nostro codice in settings.blade.php in questo modo.

@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

Per ottenere l’output seguente.