Criando a Página do Painel

Uma página é uma das coisas que você gostaria de criar com um módulo. Com uma página, você pode criar qualquer tipo de interface que queira para interagir com o NexoPOS. Você pode usar componentes Vue integrados, ou simplesmente criar os seus próprios, ou até mesmo carregar o ReactJS. Este guia oferece uma visão geral da criação de páginas no NexoPOS.

Requisitos

Antes de saber como criar uma página personalizada, você deve saber como criar um módulo no NexoPOS. Você também deve entender como criar um menu e registrar rotas.

Carregando o arquivo de visualização da página

Antes de começar, você pode gerar um controlador para o seu módulo usando o comando:

php artisan modules:controller [moduleNamespace] [controllerName]

Um exemplo concreto produzirá a seguinte saída se quisermos criar um controlador "MainController" para nosso módulo chamado "MyModule"

php artisan modules:controller MyModule MainController

Depois de criar o seu controller, você deve carregar o arquivo de view que será renderizado. Agora, todos os arquivos blade devem ser salvos em /resources/Views (caminho relativo a partir da raiz do módulo).

O caminho /dashboard/mymodule está apontando para o método do controlador "mysettings". Veja como nosso controlador deve ficar.

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

Aqui, o método “mysettings” usa o método interno “view” para carregar as views do módulo. O parâmetro fornecido como caminho de view utiliza o namespace do módulo como o namespace de view. Podemos, adicionalmente, passar um array como segundo parâmetro com os seguintes índices suportados:

• título: usado para o título da página
• descrição: usada para a descrição da 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',
        ]);
    }
}

A razão pela qual estamos usando o método “view” é que ele injeta o menu do painel na nossa view. Portanto, isso é útil apenas se quisermos exibir o menu lateral do painel. Por outro lado, isso significa que, se você quiser criar uma página que use toda a largura da tela e não precise do menu lateral do painel, você pode usar diretamente a fachada “View”.

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

Criando o painel

Esta seção mostra como você pode estender o layout do painel e inserir seu conteúdo. Aqui gostaríamos de usar o menu lateral e o cabeçalho do painel, mas alterar o conteúdo dentro deles. Vamos começar definindo o layout que gostaríamos de estender:

@extends( 'layout.dashboard' )

O layout do painel tem 3 seções:

• cabeçalho
• corpo
• rodapé

Você também pode personalizar todas estas seções assim:

@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 daqui, você precisará ler mais sobre como usar o motor Blade do Laravel.

Vamos supor que você queira exibir o painel de cabeçalho que inclui o alternador de menu, a seção de notificações e a seção do usuário.

@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

Isto é o que será renderizado:

No entanto, como você pode ver, isso não inclui o título e a descrição da página. Se quisermos carregar isso junto com o título e a descrição da página, vamos alterar nosso código no settings.blade.php assim.

@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 obter a seguinte saída.