Dashboard-Seite erstellen

Eine Seite ist eines der Dinge, die Sie mit einem Modul erstellen möchten. Mit einer Seite können Sie jede Art von Oberfläche erstellen, mit der Sie mit NexoPOS interagieren. Sie können integrierte Vue-Komponenten verwenden, Ihre eigenen erstellen oder sogar ReactJS laden. Diese Anleitung gibt Ihnen einen Überblick über die Erstellung von Seiten in NexoPOS.

Anforderungen

Bevor Sie wissen, wie man eine benutzerdefinierte Seite erstellt, müssen Sie wissen, wie man ein Modul erstellt auf NexoPOS. Sie müssen außerdem verstehen, wie man ein Menü erstellt und Routen registriert.

Laden der Ansichtsdatei für die Seite

Bevor Sie beginnen, können Sie mit dem Befehl: einen Controller für Ihr Modul generieren:

php artisan modules:controller [moduleNamespace] [controllerName]

Ein konkretes Beispiel würde die folgende Ausgabe erzeugen, wenn wir einen Controller „MainController“ für unser Modul namens „MyModule“ erstellen möchten.

php artisan modules:controller MyModule MainController

Sobald Sie Ihren Controller erstellt haben, sollten Sie die View-Datei laden, die gerendert werden soll. Da nun alle Blade-Dateien innerhalb von „/resources/Views“ gespeichert werden müssen (relativer Pfad vom Modul-Root).

Der Pfad „/dashboard/mymodule“ zeigt auf die Controller-Methode „mysettings“. So sollte unser Controller aussehen.

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

Hier verwendet die Methode „mysettings“ die interne Methode „view“, um Modul-Views zu laden. Der als Ansichts-Pfad bereitgestellte Parameter nutzt den Modul-Namespace als View-Namespace. Zusätzlich können wir als zweiten Parameter ein Array übergeben, mit den folgenden unterstützten Indizes:

• Titel: Wird für den Seitentitel verwendet
• Beschreibung: Wird für die Seitenbeschreibung verwendet.

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

Der Grund, warum wir die Methode „view“ verwenden, ist, dass sie das Dashboard-Menü in unsere Ansicht einfügt. Daher ist sie nur dann sinnvoll, wenn wir das Dashboard-Seitenmenü anzeigen möchten. Wenn Sie hingegen eine Seite erstellen möchten, die die gesamte Bildschirmbreite nutzt und kein Dashboard-Seitenmenü benötigt, können Sie direkt die Fassade „View“ verwenden.

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

Das Dashboard erstellen

Dieser Abschnitt zeigt, wie Sie das Dashboard-Layout erweitern und Ihren Inhalt einfügen können. Hier möchten wir die Dashboard-Seitenleiste und den Header verwenden, aber den Inhalt darin ändern. Wir beginnen damit, das Layout zu definieren, das wir erweitern möchten:

@extends( 'layout.dashboard' )

Das Dashboard-Layout hat 3 Abschnitte:

• Überschrift
• Körper
• Fußzeile

Sie können außerdem alle diese Abschnitte nach Wunsch anpassen, zum Beispiel so:

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

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

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

Ab hier müssen Sie mehr darüber lesen, wie Sie die Blade-Engine von Laravel verwenden.

Angenommen, Sie möchten das Kopfbereichs-Panel anzeigen, das den Menü-Umschalter, den Benachrichtigungsbereich und den Benutzerbereich enthält.

@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

Das wird gerendert:

Wie Sie jedoch sehen, enthält dies nicht den Seitentitel und die Beschreibung. Wenn wir dies zusammen mit dem Seitentitel und der Beschreibung laden möchten, ändern wir unseren Code in der settings.blade.php wie folgt.

@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

Um die folgende Ausgabe zu erhalten.