Docs›Componentes (Admin)›mad-sort-list-field
Componentes (Admin)

mad-sort-list-field

Lista ordenável via drag-and-drop.

Lista ordenavel via drag-and-drop. O usuario reordena (e opcionalmente seleciona) itens, e a ordem e persistida via inputs hidden name[].

Props

Prop Tipo Default Descricao
name string '' Nome do campo (obrigatorio). Inputs gerados como name[]
label string '' Label do campo
items array [] Mapa chave => label dos itens disponiveis
selected array/string [] Chaves pre-selecionadas/ordenadas (array ou CSV). Aparecem primeiro na ordem informada
orientation string 'vertical' vertical ou horizontal
limit int -1 Maximo de itens (-1 = sem limite)
hint string '' Texto de ajuda
error string '' Mensagem de erro
required bool false Campo obrigatorio
disabled bool false Campo desabilitado (aplica pointer-events:none)
width string '' Largura do .mad-field (numero puro = px)
max-width string '' Largura maxima do .mad-field

Itens manuais

@php
    $colunas = [
        'id'    => 'Codigo',
        'nome'  => 'Nome',
        'email' => 'Email',
        'fone'  => 'Telefone',
    ];
@endphp

<mad-sort-list-field name="ordem_colunas" label="Ordem das colunas" :items="$colunas" />

Com ordem persistida (selected)

A prop selected define quais itens aparecem primeiro e em que ordem. Os demais entram no fim.

<mad-sort-list-field name="ordem_colunas" label="Ordem das colunas"
    :items="$colunas" :selected="['nome', 'email', 'id']" />

Aceita CSV tambem:

<mad-sort-list-field name="ordem" :items="$colunas" selected="nome,email,id" />

Via model (auto-query) — <mad-dbsort-list-field>

Quando os itens vem do banco, use a variante DB em vez de montar o mapa na mao. Ela carrega os itens no render (Eloquent/QuerySource) e renderiza o mesmo visual.

Prop DB Default Descricao
model '' Classe do model Eloquent (obrigatorio sem :query)
database MAIN_DATABASE Conexao
key 'id' Campo da PK
display 'nome' Campo exibido; aceita template {nome} ({codigo})
order-by display Campo de ordenacao
order '' Direcao (asc/desc; valor fora do par cai em asc)
filters [] Atalho [['campo','op','val'], ...]
query null Eloquent/Query Builder pronto (alternativa a model + filters)

As props de lista (name, label, selected, orientation, limit, hint, error, required, disabled) sao as mesmas do <mad-sort-list-field>.

<mad-dbsort-list-field name="categorias" label="Ordem das categorias"
    model="Categoria" display="nome" order-by="ordem"
    :filters="[['ativo', '=', '1']]"
    :selected="$registro->categorias_ordem ?? []" />

Com itens ja em memoria, o caminho manual continua valendo:

@php
    $itens = Categoria::where('ativo', '1')->orderBy('ordem')->get();
    $opcoes = [];
    foreach ($itens as $c) {
        $opcoes[(string) $c->id] = $c->nome;
    }
@endphp

<mad-sort-list-field name="categorias" label="Ordem das categorias"
    :items="$opcoes" :selected="$registro->categorias_ordem ?? []" />

Horizontal

<mad-sort-list-field name="etapas" label="Etapas do fluxo"
    :items="$etapas" orientation="horizontal" />

Com limite

<mad-sort-list-field name="top3" label="Top 3 favoritos"
    :items="$opcoes" :limit="3" />

Dentro de formulario

<mad-form submit="onSave">
    <mad-sort-list-field name="ordem_campos" label="Ordem dos campos"
        :items="$campos" :selected="$config->ordem_campos ?? []" required />

    <mad-btn type="submit" variant="primary" icon="save">Salvar</mad-btn>
</mad-form>

public function onSave(): MadResponse
{
    $data = $this->form->getData();
    // $data->ordem_campos === ['nome', 'email', 'id']  (na ordem do drag)

    $config = Config::findOrNew($this->registroId);
    $config->ordem_campos = implode(',', (array) $data->ordem_campos);
    $config->save();

    return (new MadResponse())->toast('Salvo!', 'success')->closeDrawer();
}

NUNCA fazer

{{-- ERRADO: montar lista drag-and-drop manualmente com Sortable.js --}}
<ul id="lista">
    @foreach($items as $k => $v)
    <li data-key="{{ $k }}">{{ $v }}</li>
    @endforeach
</ul>
<script>new Sortable(document.getElementById('lista'), {...});</script>

{{-- CERTO --}}
<mad-sort-list-field name="ordem" :items="$items" />

{{-- ERRADO: usar checkboxes + numero de ordem --}}
@foreach($items as $k => $v)
    <input type="checkbox" name="sel[]" value="{{ $k }}">
    <input type="number" name="ordem[{{ $k }}]">
@endforeach

{{-- CERTO --}}
<mad-sort-list-field name="ordem" :items="$items" :selected="$selecionados" />

{{-- ERRADO: passar items como lista indexada (perde a chave) --}}
<mad-sort-list-field name="x" :items="['Nome', 'Email']" />

{{-- CERTO: mapa chave => label --}}
<mad-sort-list-field name="x" :items="['nome' => 'Nome', 'email' => 'Email']" />