3.1 KiB

Raw Blame History

🎯 Sistema de Grupos para Formulários - Guia de Uso

✅ IMPLEMENTAÇÃO CONCLUÍDA

O sistema de grupos foi implementado com sucesso no generic-tab-form.component e está pronto para uso.

🚀 Como Usar

1. Configuração Básica

{
  key: 'group_habilitacao',
  type: 'group',
  label: 'Dados da Habilitação',
  groupConfig: {
    title: 'Carteira Nacional de Habilitação',
    subtitle: 'Informações sobre CNH e categorias autorizadas',
    icon: 'fa-id-card',
    collapsible: true,
    expanded: true,
    style: 'bordered',
    color: 'primary',
    fields: [
      {
        key: 'cnh_number',
        label: 'Número da CNH',
        type: 'text',
        placeholder: 'Número da habilitação',
        required: true
      },
      {
        key: 'cnh_category',
        label: 'Categoria',
        type: 'select',
        required: true,
        options: [
          { value: 'A', label: 'A - Motocicletas' },
          { value: 'B', label: 'B - Carros' },
          { value: 'C', label: 'C - Caminhões' },
          { value: 'D', label: 'D - Ônibus' },
          { value: 'E', label: 'E - Carreta' }
        ]
      },
      {
        key: 'cnh_expiry_date',
        label: 'Data de Vencimento',
        type: 'date',
        required: true
      }
    ]
  }
}

2. Estilos Disponíveis

Style	Descrição	Visual
`simple`	Apenas borda inferior	Minimalista
`bordered`	Borda completa	Definido
`card`	Fundo, borda e sombra	Destacado

3. Cores Temáticas

Color	Uso Recomendado
`primary`	Seções principais
`secondary`	Seções secundárias
`success`	Dados confirmados
`warning`	Dados que precisam atenção
`danger`	Dados críticos ou problemas

4. Exemplo Prático Implementado

O sistema já está funcionando no componente DriversComponent com um grupo de exemplo para habilitação:

✅ Grupo Collapsible: Pode ser expandido/recolhido
✅ Validação: Campos obrigatórios funcionam normalmente
✅ Estilo Bordered: Com cor primary
✅ Ícone FontAwesome: fa-id-card
✅ Responsivo: Adaptação automática para mobile

🎯 Vantagens

📱 Organização Visual: Agrupa campos relacionados
🔽 Collapsible: Economiza espaço na tela
🎨 Customizável: 3 estilos × 5 cores = 15 combinações
♻️ Reutilizável: Funciona em qualquer formulário genérico
📐 Responsivo: Adapta automaticamente para diferentes tamanhos

🧪 Como Testar

Acesse a aplicação em desenvolvimento
Vá para "Motoristas"
Clique em "Novo motorista" ou edite um existente
Veja o grupo "Carteira Nacional de Habilitação" na aba "Dados"
Teste expandir/recolher clicando no header do grupo

🎉 Status: PRONTO PARA PRODUÇÃO

✅ Interface atualizada
✅ TypeScript compilando sem erros
✅ CSS responsivo implementado
✅ Exemplo funcional no DriversComponent
✅ Validação de formulário funcionando
✅ Compatível com todos os tipos de campo existentes

3.1 KiB Raw Blame History Unescape Escape