Action Dialog

DyonaActionDialog captura os parâmetros de uma ação com um DyonaForm antes que o Action Engine a execute. É a camada de captura de parâmetros sobre o Action Engine.

Fluxo

DyonaAction
requiresParameters: true
        ↓
DyonaActionDialog
        ↓
DyonaForm
        ↓
submit válido
        ↓
context.parameters
        ↓
executeDyonaAction()
        ↓
executor consumidor

Rejeitar pedido com motivo

Esta ação de record precisa de um motivo de rejeição antes de poder ser executada.

const rejectAction: DyonaAction = {
  id: 'reject-order',
  label: 'Reject order',
  scope: 'record',
  requiresParameters: true,
};

const context: DyonaActionContext = {
  sourceId: 'orders',
  record: {
    id: 1024,
    customer: 'Acme Corp',
    status: 'pending',
  },
};

O formulário do diálogo solicita um select obrigatório rejectionReason e um textarea opcional comments. Depois de um submit válido, seus valores normalizados são atribuídos a context.parameters no contexto de execução recebido pelo executor.

DyonaActionDialogConfig

• schema: o DyonaFormSchema renderizado dentro do diálogo.
• initialValues: valores opcionais de DyonaForm para preencher previamente o formulário.
• maxWidth: largura opcional do diálogo: xs, sm, md, lg, xl ou false.
• fullWidth: permite que o diálogo use a largura disponível até maxWidth.

Props principais

• open controla se o diálogo está visível.
• action é a DyonaAction a ser executada.
• context é o contexto da ação; os valores do formulário são adicionados como context.parameters no contexto de execução.
• config fornece o formulário e a configuração de layout do diálogo.
• executor executa a ação por meio do Action Engine.
• dataSourceExecutor resolve dados do formulário quando um field precisa de dados de autocomplete remoto.
• onClose fecha o diálogo no componente consumidor.
• onResult recebe um resultado da ação.
• onExecutionError recebe uma exceção produzida durante a execução da ação.

executor e dataSourceExecutor têm responsabilidades diferentes: o primeiro executa a ação de negócio; o segundo resolve dados requeridos pelo formulário, como opções de autocomplete remoto.

Comportamento

• O componente só é renderizado quando action.requiresParameters é true.
• Um submit inválido não executa a ação.
• Um submit válido atribui valores normalizados do formulário a context.parameters no contexto de execução.
• Evita uma segunda execução enquanto outra estiver em andamento.
• Durante a execução, Cancelar, Escape e o fechamento pelo backdrop ficam bloqueados.
• Um resultado com success: true é informado por onResult e fecha o diálogo.
• Um resultado com success: false é informado por onResult e mantém o diálogo aberto.
• Uma exceção do executor chama onExecutionError e mantém o diálogo aberto.

Exemplo completo

import {useState} from 'react';
import {
  DyonaActionDialog,
  type DyonaAction,
  type DyonaActionContext,
  type DyonaActionExecutor,
  type DyonaActionResult,
} from '@typhonsoftware/dyona-form';

const rejectAction: DyonaAction = {
  id: 'reject-order',
  label: 'Rejeitar pedido',
  scope: 'record',
  requiresParameters: true,
};

const context: DyonaActionContext = {
  sourceId: 'orders',
  record: {
    id: 1024,
    customer: 'Acme Corp',
    status: 'pending',
  },
};

const dialogConfig = {
  schema: {
    title: 'Rejeitar pedido',
    hideSingleTab: true,
    tabs: [
      {
        id: 'rejection',
        title: 'Detalhes da rejeição',
        rows: [
          {
            columns: [
              {
                name: 'rejectionReason',
                label: 'Motivo da rejeição',
                type: 'select' as const,
                required: true,
                options: [
                  {value: 'out-of-stock', label: 'Sem estoque'},
                  {value: 'pricing-error', label: 'Erro de preço'},
                  {value: 'customer-request', label: 'Solicitação do cliente'},
                ],
                fullWidth: true,
              },
            ],
          },
          {
            columns: [
              {
                name: 'comments',
                label: 'Comentários',
                type: 'textarea' as const,
                fullWidth: true,
              },
            ],
          },
        ],
      },
    ],
  },
  initialValues: {comments: ''},
  maxWidth: 'sm' as const,
  fullWidth: true,
};

const rejectOrder: DyonaActionExecutor = async ({context}) => {
  const result: DyonaActionResult = {
    success: true,
    message: `Pedido ${context.record?.id} rejeitado`,
    data: {
      rejectionReason: context.parameters?.rejectionReason,
      comments: context.parameters?.comments,
    },
    refresh: [{sourceId: 'orders'}],
  };

  return result;
};

export function RejectOrderAction() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Rejeitar pedido</button>

      <DyonaActionDialog
        locale="pt"
        open={open}
        action={rejectAction}
        context={context}
        config={dialogConfig}
        executor={rejectOrder}
        onClose={() => setOpen(false)}
        onResult={(result) => console.log(result.message)}
        onExecutionError={(error) => console.error(error)}
      />
    </>
  );
}

Testar Action Dialog no Lab