Olá Pessoal!!

Nessa segunda parte do tutorial, ire mostrar como exibir os dados cadastrados no tutorial anterior no admin. Esse será um tutorial um pouco menor...hehehehehe....eu prometo :)

Para fazer a listagem no Admin, o Bagisto utiliza o DataGrid. A documentação sita o DataGrid como:

"Um conceito para exibir registros da base de dados em formato tabular."

Uma parte a se destacar, é que o DataGrid já implementa algumas funcionalidades, que são muito bem vindas, algumas funcionalidades implementadas pelo DataGrid são: filtragem, ordenação e ações em massa.

Agora que fiz uma breve introdução ao DataGrid, vamos ao que interessa, a implementação.

Criando o arquivo do DataGrid

Crie uma pasta chamada DataGrid na raíz do módulo (dentro da pasta src), dentro da pasta, crie um arquivo com o nome MinhasLojasDataGrid, com o seguinte conteúdo:

<?php
namespace LuanCS\MinhasLojas\DataGrid;

use Webkul\Ui\DataGrid\DataGrid;
use DB;

class MinhasLojasDataGrid extends DataGrid
{
    protected $index = 'id';

    protected $sortOrder = 'desc';

    public function prepareQueryBuilder()
    {
        $queryBuilder = DB::table('lojas')
            ->select('id','nome', 'endereco');

        $this->setQueryBuilder($queryBuilder);
    }

    public function addColumns()
    {
        $this->addColumn([
            'index' => 'id',
            'label' => 'ID',
            'type' => 'number',
            'searchable' => false,
            'sortable' => true,
            'filterable' => true
        ]);

        $this->addColumn([
            'index' => 'nome',
            'label' => 'Nome da Loja',
            'type' => 'string',
            'searchable' => true,
            'sortable' => true,
            'filterable' => true
        ]);

        $this->addColumn([
            'index' => 'endereco',
            'label' => 'Endereço da Loja',
            'type' => 'string',
            'searchable' => true,
            'sortable' => true,
            'filterable' => true
        ]);
    }

    public function prepareActions()
    {
        $this->addAction([
            'type' => 'Edit',
            'method' => 'GET',
            'route' => 'minhaslojas.admin.edit',
            'icon' => 'icon pencil-lg-icon'
        ]);

        $this->addAction([
            'type' => 'Delete',
            'method' => 'GET',
            'route' => 'minhaslojas.admin.destroy',
            'icon' => 'icon trash-icon'
        ]);
    }
}

Conforme demonstrado no código acima, existem algumas propriedades e métodos para o datagrid, são elas:

  • propriedade index = ela é usada para referenciar a primary key da tabela
  • propriedade sortOrder = está relacionada a ordenação que a tabela terá. Será asc para ordem ascendente (do menor para o maior) e desc para ordem descendente (do maior para o menor).
  • método prepareQueryBuilder: esse método é responsável por montar a query para pegar os dados da tabela.
  • método addColumns: nesse método será montada a tabela com as colunas.
  • método prepareActions: será usado para exibir a opção de edição e exclusão de registros na tabela.

Após fazer isso, abra o arquivo src/Resources/views/admin/index.blade.php e adicione o seguinte código dentro da div content:

{!! app(LuanCS\MinhasLojas\DataGrid\MinhasLojasDataGrid::class)->render() !!}

Deixando o arquivo index.blade.php assim:

@extends('admin::layouts.content')

@section('page_title')
    Minhas Lojas
@stop

@section('content')
    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h1>Minhas Lojas</h1>
            </div>
            <div class="page-action">
                <a href="{{route('minhaslojas.admin.create')}}" class="btn btn-lg btn-primary">Nova Loja</a>
            </div>
        </div>
        {!! app(LuanCS\MinhasLojas\DataGrid\MinhasLojasDataGrid::class)->render() !!}
    </div>
@endsection

Agora ao acessar o menu Minhas Lojas no admin, a seguinte tela será exibida, já com a tabela exibindo os dados:

Caso queira baixar o código exibido nesse tutorial, acesse o seguinte link na tag 2.0

https://github.com/luancschmitz/modulo-bagisto-minhas-lojas/tree/2.0

Com isso encerro esse tutorial ;)

No próximo tutorial, irei exibir como editar e excluir algum registro.

Até a próxima :)