Pular para o conteúdo principal

Actions

As actions definem os endpoints e botões de ação da interface. São declaradas no model usando a DSL do Nerdify e controlam navegação, formulários e operações CRUD.

Sintaxe Básica​

class Customer
  include Nerdify::Model
  orm :mongoid

  # Actions REST padrão
  action :index
  action :show
  action :new
  action :edit

  # Action customizada
  action :approve, only: %w[show], on: :member, click: { put: ":resource.id/approve" }
end

Opções Principais​

on​

Define o escopo da action:

ValorDescrição
:collectionAção na coleção (index) - ex: "Novo"
:memberAção em um item específico - ex: "Editar", "Excluir"
action :new, on: :collection      # Botão "Novo" na listagem
action :edit, on: :member         # Botão "Editar" no item

only​

Define em quais views a action aparece:

action :edit, only: %w[show]           # Só aparece na view show
action :destroy, only: %w[show edit]   # Aparece em show e edit
action :new, only: %w[index]           # Só aparece na listagem

position​

Define onde o botão aparece:

ValorDescrição
:headerNo cabeçalho da página/lista
:footerNo rodapé da página/modal
:inlineInline na linha da tabela
action :new, position: :header
action :save, position: :footer
action :edit, position: :inline

layout​

Define o layout da página de destino:

action :show, layout: :default    # Página completa
action :edit, layout: :modal      # Abre em modal
action :index, layout: :embed     # Incorporado

Click Actions​

O parâmetro click define o que acontece ao clicar:

# Redireciona para outra página
action :show, click: { redirect_to: ":resource.id" }

# Abre em modal
action :edit, click: { redirect_to: "edit", open_in: :dialog }

# Link externo
action :whatsapp, click: { redirect_to: ":resource.whatsapp_link", target: "_blank" }

Fechar Modal​

action :cancel, click: { close: :dialog }

Submit de Formulário​

action :save, click: { submit: "customer_form" }

Requisições HTTP​

# PUT
action :approve, click: {
  put: ":resource.id/approve",
  success: { toast: :success, redirect_to: ".." },
  error: { toast: :error }
}

# DELETE com confirmação
action :destroy, click: {
  delete: ".",
  confirm: true,
  success: { close: :dialog, toast: :success },
  error: { toast: :error }
}

# POST com dados
action :duplicate, click: {
  post: ":resource.id/duplicate",
  data: { customer: { name: ":resource.name (Cópia)" } },
  success: { toast: :success, redirect_to: ":response.id" }
}

Submit Configuration​

Para actions de formulário, use submit:

action :new,
       layout: :modal,
       click: { redirect_to: "new", open_in: :dialog },
       submit: {
         post: "..",
         data: { customer: ":resource" },
         success: {
           close: :dialog,
           toast: :success,
           update: "refresh",
           path: ".."
         },
         error: {
           toast: :error,
           update: "components"
         }
       }

Opções de Success​

OpçãoDescrição
close: :dialogFecha o modal
toast: :successExibe mensagem de sucesso
toast_message: :createMensagem específica do toast
redirect_to: "..."Redireciona para URL
update: "refresh"Atualiza a lista
update: "resource"Atualiza o recurso
update: "components"Atualiza componentes
path: "..."Path para refresh

Opções de Error​

OpçãoDescrição
toast: :errorExibe mensagem de erro
toast: ":response.toast_error"Mensagem customizada do backend
update: "components"Atualiza para mostrar erros

Estilos​

action :destroy, styles: {
  background: "danger",
  color: "white",
  margin: { left: 1 }
}

action :cancel, styles: {
  background: "transparent",
  color: "primary"
}

Cores Disponíveis​

primary, secondary, success, danger, warning, info, light, dark, white, transparent

Condicionais​

backend_if​

Condição avaliada no servidor (Ruby):

action :approve, backend_if: "object.status == 'pending'"
action :edit, backend_if: "current_ability.can?(:edit, object)"

render_if​

Condição avaliada no frontend (JavaScript):

action :pay, render_if: "resource.status == 'approved'"
action :cancel, render_if: "resource.can_cancel"

Outras Opções​

icon​

Ícone Material Design:

action :new, icon: :add
action :edit, icon: :edit
action :delete, icon: :delete

no_print​

Oculta na impressão:

action :edit, no_print: true

tooltip​

Exibe tooltip:

action :info, tooltip: true        # Usa tradução
action :help, tooltip: "Ajuda"     # Texto fixo

as​

Tipo de renderização:

action :view, as: :link      # Renderiza como link
action :save, as: :button    # Renderiza como botão (padrão)

Padrão CRUD Completo​

class Customer
  include Nerdify::Model
  orm :mongoid

  # INDEX - Listagem
  action :index, layout: :default

  # NEW - Criar (botão na listagem)
  action :new,
         only: %w[index],
         on: :collection,
         position: :header,
         layout: :modal,
         click: { redirect_to: "new", open_in: :dialog },
         submit: {
           post: "..",
           data: { customer: ":resource" },
           success: { close: :dialog, toast: :success, update: "refresh", path: ".." },
           error: { toast: :error, update: "components" }
         }

  # CREATE - Botão salvar no modal de criação
  action :create,
         only: %w[new],
         on: :member,
         position: :footer,
         click: { submit: "customer_form" }

  # CANCEL - Botão cancelar no modal de criação
  action :cancel,
         only: %w[new],
         on: :member,
         position: :footer,
         click: { close: :dialog },
         styles: { background: "transparent", color: "primary" }

  # SHOW - Visualização
  action :show, layout: :default

  # EDIT - Editar (botão na visualização)
  action :edit,
         only: %w[show],
         on: :member,
         position: :header,
         layout: :modal,
         click: { redirect_to: "edit", open_in: :dialog },
         submit: {
           put: "..",
           data: { customer: ":resource" },
           success: { close: :dialog, toast: :success, update: "refresh", path: ".." },
           error: { toast: :error, update: "components" }
         }

  # UPDATE - Botão salvar no modal de edição
  action :update,
         only: %w[edit],
         on: :member,
         position: :footer,
         click: { submit: "customer_form" }

  # CANCEL - Botão cancelar no modal de edição
  action :cancel,
         only: %w[edit],
         on: :member,
         position: :footer,
         click: { close: :dialog },
         styles: { background: "transparent", color: "primary" }

  # DESTROY - Excluir
  action :destroy,
         only: %w[show],
         on: :member,
         position: :footer,
         click: {
           delete: ".",
           confirm: true,
           success: { close: :dialog, toast: :success, redirect_to: ".." },
           error: { toast: :error }
         },
         styles: { background: "danger" }
end

Boas Práticas​

Faça​

  • Use backend_if para segurança (verificar permissões)
  • Use render_if para UX (ocultar botões desabilitados)
  • Defina success e error para feedback ao usuário
  • Use confirm: true para ações destrutivas

Evite​

  • Actions sem feedback visual (toast)
  • Múltiplas actions com o mesmo nome sem condições
  • Lógica complexa em render_if
  • Esquecer de definir cancel em modais