Startseite
NexoPOS

Widget-Deklaration

Ein Widget ist eine neue Funktion, die in NexoPOS 5x hinzugefügt wurde und die das Erstellen isolierter Funktionsbausteine ermöglicht, die über das Dashboard zugänglich sind.

Bisher hatten wir viele Dashboards pro Rolle. Ab dieser Veröffentlichung ist das Dashboard für alle gleich, der einzige Unterschied besteht darin, dass Widgets den Berechtigungen unterliegen.

Wenn wir erwähnen, dass Widgets Berechtigungen unterliegen, meinen wir, dass einige Widgets möglicherweise Berechtigungen benötigen, um sichtbar zu sein, wenn dies eindeutig angegeben ist.

Dieser Leitfaden führt durch die vollständige Erstellung eines Widgets in NexoPOS v5.x.

Das Widget deklarieren

Alle Widgets werden im Ordner „app/Widgets“ deklariert. Jede Widget-Klasse muss „WidgetService“ erweitern. Eine typische Deklaration eines Widgets lautet wie folgt:

<?php
namespace App\Widgets;

use App\Services\WidgetService;

class ProfileWidget extends WidgetService
{
    public function __construct()
    {
        // ...
    }
}

Nachdem das Widget definiert wurde, müssen Sie einige nützliche Eigenschaften definieren, nämlich:

  • name: Dies definiert, wie das Widget identifiziert und benannt wird.
  • vueComponent: Die meisten Widgets basieren auf einer Vue-Komponente. Der Name des global auf dem „window“-Objekt deklarierten Objekts muss hier definiert werden.
  • Beschreibung: Um zu beschreiben, was das Widget macht.
  • Berechtigung: Macht das Widget verfügbar, wenn der angemeldete Benutzer über die angegebene Berechtigung verfügt.

Beachten Sie, dass durch das Definieren der Berechtigung in einer Widget-Klasse diese weder automatisch erstellt noch Benutzern zugewiesen wird. Sie müssen diese Berechtigung manuell erstellen und mithilfe einer speziellen Migrationsdatei zuweisen.

Hier ist ein vollständiges Beispiel für ein deklariertes Widget:

<?php
namespace App\Widgets;

use App\Services\WidgetService;

class ProfileWidget extends WidgetService
{
    protected $vueComponent     =   'nsProfileWidget';

    public function __construct()
    {
        $this->name     =   __( 'Profile' );
        $this->description  =   __( 'Will display a profile widget with user stats.' );
        $this->permission   =   'nexopos.see.profile-widget';
    }
}

Nachdem ein Widget deklariert wurde, müssen wir es mithilfe eines Service Providers registrieren.

Registriertes deklariertes Widget

Ein Widget, das nicht registriert ist, wird von NexoPOS nicht erkannt. Dies ist ein erforderlicher Schritt, damit das Widget für alle Benutzer zugänglich ist. Zuerst werden wir die WidgetService-Klasse in einer Boot-Methode unseres Service-Providers auflösen.

<?php
namespace App\Providers;

use App\Services\WidgetService;
use App\Widgets\ProfileWidget;
use Illuminate\Support\ServiceProvider;

class WidgetsServiceProvider extends ServiceProvider
{
    public function boot()
    {
        /**
         * @var WidgetService $widgetService
         */
        $widgetService  = app()->make( WidgetService::class );

        $widgetService->registerWidgets([
            ProfileWidget::class,
        ]);
    }
}

Sobald das Widget registriert ist, kann es von jedem Benutzer verwaltet werden, der die Berechtigung hat, es zu sehen. Wenn ein Widget keine Berechtigungen bereitstellt, ist es für alle sichtbar.

Die Vue-Komponente deklarieren

Derzeit hat unser Widget weder Personen- noch Vue-Komponenten. Wie zuvor gesagt, müssen wir auf dem „window“-Objekt (oder im Kontext) unsere Vue-3-Komponente deklarieren.

Um fortzufahren, registrieren wir unsere Komponente wie folgt:

import { defineAsyncComponent } from 'vue';

window[ 'nsProfileWidget' ]                 =   defineAsyncComponent( () => import( './widgets/ns-profile-widget.vue' ) );

Beachten Sie, dass „nsProfileWidget“ dem Wert der Eigenschaft „vueComponent“ entspricht, die in der Klasse „ProfileWidget“ definiert ist. In Ihrem Fall sollte es dem Wert entsprechen, den Sie in der Eigenschaft „vueComponent“ definiert haben.

Die Verwendung von „nsProfileWidget“ sollte als Wert ein Objekt haben, das Komponenten asynchron auflöst. Während die Verhaltensweisen des Widgets dem Entwickler obliegen, ist es daher dringend empfohlen, dass jedes Widget eine Schaltfläche zum Schließen enthält. Die Schaltfläche zum Schließen stellt sicher, dass ein Widget vom Benutzer gelöscht werden kann.

Schließen-Button

Jede Schaltfläche zum Schließen muss ein eindeutiges Ereignis auslösen, das vom Widget-Bereich abgehört wird. Hier ist ein Beispiel:

<template>
    <div id="ns-best-cashiers" class="flex flex-auto flex-col shadow rounded-lg overflow-hidden">
        <div class="flex-auto">
            <div class="head text-center border-b w-full flex justify-between items-center p-2">
                <h5>Profile</h5>
                <div class="flex -mx-1">
                    <div class="px-1">
                        <ns-close-button @click="$emit( 'onRemove' )"></ns-close-button>
                    </div>
                </div>
            </div>
            <div class="body">
                <!-- put the body here -->
            </div>
        </div>
    </div>
</template>

Wir müssen auf „ns-close-button“ klicken, um das Ereignis „onRemove“ auszulösen. Dadurch wird sichergestellt, dass das Widget sicher vom Benutzer entfernt werden kann.

Schaltfläche „Bearbeiten“

Dieser Button wird verwendet, um das Widget im Dropzone-Bereich herumzuziehen. Dafür müssen wir die Klasse „widget-handle“ in ein Element aufnehmen, das zum Ziehen des Widgets verwendet werden soll. Vermeiden Sie es, diese Klasse auf das gesamte Widget anzuwenden, insbesondere wenn Ihr Widget Bedienelemente enthält.

<template>
    <div id="ns-best-cashiers" class="flex flex-auto flex-col shadow rounded-lg overflow-hidden">
        <div class="flex-auto">
            <div class="head text-center border-b w-full flex justify-between items-center p-2">
                <h5>Profile</h5>
                <div class="flex -mx-1">
                    <div class="px-1">
                        <ns-close-button @click="$emit( 'onRemove' )"></ns-close-button>
                    </div>
                    <!-- Start Widget Handle -->
                    <div class="px-1">
                        <ns-icon-button class="widget-handle" className="la-expand-arrows-alt"></ns-icon-button>
                    </div>
                    <!-- End Widget Handle -->
                </div>
            </div>
            <div class="body">
                <!-- put the body here -->
            </div>
        </div>
    </div>
</template>