MAD Lab
/
Tutor > Listagens e tabelas > Edição inline

Edição inline

Listagens e tabelas

mad-col-edit mad-data-grid-edit-cell mad-data-grid-edit-inline
mad-data-grid-edit-cell / mad-data-grid-edit-inline não são tags
Não existem componentes com esse nome — são os modos "click" e "inline" da prop edit-mode de <mad-col>. O terceiro modo, "dblclick", é o padrão quando edit-mode é omitido. Toda edição abaixo grava de verdade em tutor_pedidos (tabela sandbox do MAD Lab) via MadDataGrid::onInlineSave, que já vem pronto em qualquer <mad-grid model="...">.
Clique para editar (edit-mode=click)

Ícone de lápis abre o editor na célula. Texto (descrição) e dinheiro (valor) — persistência real via onInlineSave.

Visible columns
Cód.
Cliente
Descrição
Valor
1
Pedido #1
R$ 2.358,46
2
Pedido #2
R$ 747,15
3
Pedido #3
R$ 7.424,20
4
Pedido #4
R$ 8.578,21
5
Pedido #5
R$ 4.406,22
6
Pedido #6
R$ 2.329,41
resources/views/tutor/examples/grids-inline-avancado/clique.blade.php
<mad-grid model="TutorDemoPedido" database="business" per-page="6" no-export>
    <mad-columns>
        <mad-col field="id" label="Cód." width="70" right />
        <mad-col field="{cliente->nome}" label="Cliente" />
        <mad-col field="descricao" label="Descrição" edit edit-type="text" edit-mode="click" />
        <mad-col field="valor_total" label="Valor" right money="R$"
            edit edit-type="money" edit-mode="click" />
    </mad-columns>
</mad-grid>
Sempre editável (edit-mode=inline)

Editor de data sempre visível na célula, sem precisar clicar.

Visible columns
Cód.
Cliente
Data do pedido
1
DSTQQSS
2
DSTQQSS
3
DSTQQSS
4
DSTQQSS
5
DSTQQSS
6
DSTQQSS
resources/views/tutor/examples/grids-inline-avancado/inline.blade.php
<mad-grid model="TutorDemoPedido" database="business" per-page="6" no-export>
    <mad-columns>
        <mad-col field="id" label="Cód." width="70" right />
        <mad-col field="{cliente->nome}" label="Cliente" />
        <mad-col field="dt_pedido" label="Data do pedido" date="d/m/Y"
            edit edit-type="date" edit-mode="inline" />
    </mad-columns>
</mad-grid>
Duplo-clique (padrão) + mad-col-edit type=select

edit-mode omitido cai no padrão dblclick. Opções vêm de TutorGridsInlineAvancado::estadoOptions().

Visible columns
Cód.
Cliente
Estado (duplo-clique)
1
Enviado
2
Cancelado
3
Entregue
4
Entregue
5
Em separação
6
Enviado
resources/views/tutor/examples/grids-inline-avancado/select.blade.php
@php
    // Partial de <x-tutor-demo> = escopo Blade isolado — `$that` não chega
    // sozinho; reobtido via o stack estático do MadRenderContext.
    $that = \Mad\Component\MadRenderContext::getComponent();
@endphp
<mad-grid model="TutorDemoPedido" database="business" per-page="6" no-export>
    <mad-columns>
        <mad-col field="id" label="Cód." width="70" right />
        <mad-col field="{cliente->nome}" label="Cliente" />
        <mad-col field="estado_id" label="Estado (duplo-clique)"
            badge="1:info:Novo|2:warning:Em separação|3:primary:Enviado|4:success:Entregue|5:danger:Cancelado">
            <mad-col-edit type="select" :opts="$that->estadoOptions()" />
        </mad-col>
    </mad-columns>
</mad-grid>
app/control/Tutor/TutorGridsInlineAvancado.php
/** Opções do editor <mad-col-edit type="select"> (estado do pedido). */
public function estadoOptions(): array
{
    return TutorDemoEstadoPedido::query()->orderBy('ordem')->pluck('nome', 'id')->all();
}
Editor ligado a banco (mad-col-edit type=dbcombo)

Dropdown com busca carregado de TutorDemoCategoria; transform mostra o nome quando a célula não está em edição.

Visible columns
Cód.
Cliente
Categoria (clique)
1
Papelaria
2
Alimentos
3
Eletrônicos
4
Brinquedos
5
Vestuário
6
Livros
resources/views/tutor/examples/grids-inline-avancado/dbcombo.blade.php
<mad-grid model="TutorDemoPedido" database="business" per-page="6" no-export>
    <mad-columns>
        <mad-col field="id" label="Cód." width="70" right />
        <mad-col field="{cliente->nome}" label="Cliente" />
        <mad-col field="categoria_id" label="Categoria (clique)" transform="TutorGridsInlineAvancado::categoriaNome">
            <mad-col-edit type="dbcombo" model="TutorDemoCategoria" display="nome" database="business" mode="click" />
        </mad-col>
    </mad-columns>
</mad-grid>
app/control/Tutor/TutorGridsInlineAvancado.php
/** Transform de leitura da coluna categoria_id — nome em vez do id cru. */
public static function categoriaNome(mixed $value, object $row): string
{
    return TutorDemoCategoria::query()->find($value)?->nome ?? '—';
}
Código-fonte completo da página
app/control/Tutor/TutorGridsInlineAvancado.php
<?php

namespace App\Control\Tutor;

use App\Models\TutorDemo\TutorDemoCategoria;
use App\Models\TutorDemo\TutorDemoEstadoPedido;
use App\Support\Tutor\TutorDemoSeed;
use App\Support\Tutor\TutorPage;

/**
 * TutorGridsInlineAvancado — catálogo grids_inline_avancado.
 *
 * Os "componentes" citados no catálogo (mad-data-grid-edit-cell,
 * mad-data-grid-edit-inline) NÃO existem como tags autônomas — confirmado
 * via mad_props (ambos retornam "não encontrado") e mad_search_rules (zero
 * ocorrência no framework). São os dois modos de `edit-mode` do <mad-col>:
 * "click" (ícone lápis, abre o editor ao clicar na célula) e "inline"
 * (editor sempre visível, sem clique). O terceiro modo, "dblclick", é o
 * default quando `edit-mode` é omitido. O terceiro tag do catálogo,
 * <mad-col-edit>, é o filho tipado de <mad-col> que declara o widget do
 * editor (texto/número/data/select/dbcombo/...).
 *
 * A edição AQUI PERSISTE DE VERDADE: <mad-grid model="TutorDemoPedido">
 * (sem `self`) compila para \Mad\Grid\MadGrid::_renderFromConfig(), que
 * instancia um Mad\Grid\MadGrid próprio — e MadGrid extends MadDataGrid.
 * Ou seja, cada grid embutido nesta página já carrega
 * MadDataGrid::onInlineSave($id, $field, $value) pronto: clique/duplo-clique/
 * inline grava direto via `$modelClass::find($id)->$field = $value; ->save();`
 * — sem a página precisar herdar de MadDataGrid nem escrever handler algum.
 * tutor_pedidos é tabela sandbox do MAD Lab: seguro editar de verdade.
 */
class TutorGridsInlineAvancado extends TutorPage
{
    protected string $catalogKey = 'grids_inline_avancado';

    public function mount(array $params = []): void
    {
        TutorDemoSeed::ensure();
    }

    /** Opções do editor <mad-col-edit type="select"> (estado do pedido). */
    public function estadoOptions(): array
    {
        return TutorDemoEstadoPedido::query()->orderBy('ordem')->pluck('nome', 'id')->all();
    }

    /** Transform de leitura da coluna categoria_id — nome em vez do id cru. */
    public static function categoriaNome(mixed $value, object $row): string
    {
        return TutorDemoCategoria::query()->find($value)?->nome ?? '—';
    }
}
resources/views/tutor/grids/inline-avancado.blade.php
<x-tutor-page page="grids_inline_avancado">
    <mad-callout type="info" title="mad-data-grid-edit-cell / mad-data-grid-edit-inline não são tags" icon="info">
        Não existem componentes com esse nome — são os modos "click" e "inline" da prop
        <code>edit-mode</code> de <code>&lt;mad-col&gt;</code>. O terceiro modo, "dblclick", é o
        padrão quando <code>edit-mode</code> é omitido. Toda edição abaixo grava de verdade em
        <code>tutor_pedidos</code> (tabela sandbox do MAD Lab) via
        <code>MadDataGrid::onInlineSave</code>, que já vem pronto em qualquer
        <code>&lt;mad-grid model="..."&gt;</code>.
    </mad-callout>

    <x-tutor-demo demo="tutor.examples.grids-inline-avancado.clique"
        title="Clique para editar (edit-mode=click)"
        desc="Ícone de lápis abre o editor na célula. Texto (descrição) e dinheiro (valor) — persistência real via onInlineSave." />

    <x-tutor-demo demo="tutor.examples.grids-inline-avancado.inline"
        title="Sempre editável (edit-mode=inline)"
        desc="Editor de data sempre visível na célula, sem precisar clicar." />

    <x-tutor-demo demo="tutor.examples.grids-inline-avancado.select"
        title="Duplo-clique (padrão) + mad-col-edit type=select"
        desc="edit-mode omitido cai no padrão dblclick. Opções vêm de TutorGridsInlineAvancado::estadoOptions()."
        php="TutorGridsInlineAvancado::estadoOptions" />

    <x-tutor-demo demo="tutor.examples.grids-inline-avancado.dbcombo"
        title="Editor ligado a banco (mad-col-edit type=dbcombo)"
        desc="Dropdown com busca carregado de TutorDemoCategoria; transform mostra o nome quando a célula não está em edição."
        php="TutorGridsInlineAvancado::categoriaNome" />
</x-tutor-page>