Creando la página del panel

Una página es una de las cosas que querrías crear con un módulo. Con una página, puedes crear cualquier tipo de interfaz que quieras para interactuar con NexoPOS. Puedes usar componentes Vue integrados, o simplemente crear los tuyos, o incluso cargar ReactJS. Esta guía te ofrece una visión general sobre la creación de páginas en NexoPOS.

Requisitos

Antes de saber cómo crear una página personalizada, debes saber cómo crear un módulo en NexoPOS. También debes entender cómo crear un menú y registrar rutas.

Cargando el archivo de vista para la página

Antes de comenzar, puede generar un controlador para su módulo usando el comando:

php artisan modules:controller [moduleNamespace] [controllerName]

Un ejemplo concreto producirá la siguiente salida si quisiéramos crear un controlador «MainController» para nuestro módulo llamado «MyModule».

php artisan modules:controller MyModule MainController

Una vez que haya creado su controlador, debe cargar el archivo de vista que se renderizará. Ahora que todos los archivos blade deben guardarse en /resources/Views (ruta relativa desde la raíz del módulo).

La ruta /dashboard/mymodule apunta al método del controlador «mysettings». Así es como debería verse nuestro 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' );
    }
}

Aquí, el método «mysettings» utiliza el método interno «view» para cargar las vistas del módulo. El parámetro proporcionado como ruta de vista usa el espacio de nombres del módulo como el espacio de nombres de la vista. Además, podemos pasar un array como segundo parámetro con los siguientes índices admitidos:

• título: se usa para el título de la página
• descripción: se usa para la descripción de la página.

<?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 razón por la que usamos el método «view» es que inserta el menú del panel en nuestra vista. Por lo tanto, solo es útil si queremos mostrar el menú lateral del panel. Por otro lado, esto significa que si deseas crear una página que use todo el ancho de la pantalla y no necesite el menú lateral del panel, puedes usar directamente la fachada «View».

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

Creando el panel de control

Esta sección muestra cómo puedes ampliar el diseño del panel e insertar tu contenido. Aquí nos gustaría usar el menú lateral y el encabezado del panel, pero cambiar el contenido. Comenzaremos definiendo el diseño que queremos ampliar:

@extends( 'layout.dashboard' )

El diseño del panel tiene 3 secciones:

• encabezado
• cuerpo
• pie de página

También puedes personalizar todas estas secciones así:

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

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

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

A partir de aquí, necesitarás leer más sobre el uso del motor Blade de Laravel.

Supongamos que desea mostrar el panel de encabezado que incluye el conmutador del menú, la sección de notificaciones y la sección de usuario.

@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

Esto es lo que se renderizará:

Sin embargo, como puedes ver, esto no incluye el título y la descripción de la página. Si quisiéramos cargar esto junto con el título y la descripción de la página, cambiaremos nuestro código en settings.blade.php de la siguiente manera.

@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

Para tener la siguiente salida.