9.2 KiB

Raw Blame History

🔧 CORREÇÕES PARA GERAÇÃO AUTOMÁTICA DE DOMÍNIOS

📋 PROBLEMAS IDENTIFICADOS E SOLUÇÕES

❌ ERRO 1: HTML Template Incorreto

Problema: O HTML gerado não segue o padrão do drivers.component.html

Template Atual (Incorreto):

<app-tab-system></app-tab-system>

Template Correto (Baseado em drivers.component.html):

<div class="domain-container">
  <div class="main-content">
    <app-tab-system
      #tabSystem
      [config]="tabConfig"
      [events]="tabEvents"
      [showDebugInfo]="false"
      (tabSelected)="onTabSelected($event)"
      (tabClosed)="onTabClosed($event)"
      (tabAdded)="onTabAdded($event)"
      (tableEvent)="onTableEvent($event)">
    </app-tab-system>
  </div>
</div>

Correção no arquivo: scripts/create-domain.js → função generateTemplate()

❌ ERRO 2: SideCard Não Sendo Criado

Problema: Mesmo informando que quer sideCard, a configuração não é gerada corretamente.

Configuração Atual (Incompleta):

sideCard: {
  enabled: true,
  title: "Resumo do ${componentName}",
  position: "right",
  width: "400px",
  component: "summary",
  data: {
    displayFields: [...],
    statusField: "status"
  }
}

Configuração Correta (Completa):

sideCard: {
  enabled: true,
  title: "Resumo do ${componentName}",
  position: "right",
  width: "400px",
  component: "summary",
  data: {
    imageField: "photoIds",
    displayFields: [
      {
        key: "name",
        label: "Nome",
        type: "text"
      },
      ${domainConfig.hasStatus ? `{
        key: "status",
        label: "Status", 
        type: "status"
      },` : ''}
      {
        key: "created_at",
        label: "Criado em",
        type: "date"
      }
    ],
    statusField: "status",
    statusConfig: {
      "active": {
        label: "Ativo",
        color: "#d4edda",
        textColor: "#155724",
        icon: "fa-check-circle"
      },
      "inactive": {
        label: "Inativo", 
        color: "#f8d7da",
        textColor: "#721c24",
        icon: "fa-times-circle"
      }
    }
  }
}

❌ ERRO 3: Múltiplas Sub-abas Não Solicitadas

Problema: Mesmo informando apenas "photos", são criadas múltiplas sub-abas.

Código Atual (Incorreto):

subTabs: ['dados'${domainConfig.hasPhotos ? ", 'photos'" : ''}],

Correção Necessária:

subTabs: ['dados'${domainConfig.hasPhotos ? ", 'photos'" : ''}],

Problema na configuração de sub-abas:

O script sempre cria a sub-aba "dados"
Adiciona "photos" se solicitado
NÃO deve criar outras sub-abas automaticamente

❌ ERRO 4: Estrutura de Campos Incorreta

Problema: Campos são criados na estrutura antiga em vez de dentro da sub-aba "dados".

Estrutura Atual (Incorreta):

getFormConfig(): TabFormConfig {
  return {
    title: 'Dados do ${componentName}',
    entityType: '${domainConfig.name}',
    fields: [ // ❌ ERRO: Campos aqui em vez de dentro da sub-aba
      {
        key: 'name',
        label: 'Nome',
        type: 'text',
        required: true
      }
    ],
    subTabs: [...]
  };
}

Estrutura Correta:

getFormConfig(): TabFormConfig {
  return {
    title: 'Dados do ${componentName}',
    entityType: '${domainConfig.name}',
    fields: [],
    submitLabel: 'Salvar ${componentName}',
    showCancelButton: true,
    subTabs: [
      {
        id: 'dados',
        label: 'Dados Básicos',
        icon: 'fa-info-circle',
        enabled: true,
        order: 1,
        templateType: 'fields',
        requiredFields: ['name'],
        fields: [
          {
            key: 'name',
            label: 'Nome',
            type: 'text',
            required: true,
            placeholder: 'Digite o nome'
          }
        ]
      }
    ]
  };
}

❌ ERRO 5: Campos de API Swagger Não Documentados

Problema: Script cria campos que não estão na documentação Swagger.

Campos Gerados Automaticamente (Problemático):

// ❌ Estes campos são criados sempre, mas podem não existir na API
{
  key: 'status',
  label: 'Status',
  type: 'select'
},
{
  key: 'created_at', 
  label: 'Criado em',
  type: 'date'
}

Solução:

Perguntar explicitamente quais campos existem na API
Consultar documentação Swagger antes de gerar
Criar apenas campos confirmados pela documentação
Adicionar comentário para campos opcionais

❌ ERRO 6: Service com HttpClient Direto

Problema: Service gerado com HttpClient e BaseDomainService (padrão antigo)

Solução: Service usando ApiClientService e implementando DomainService<T>

7. Templates Inline vs Arquivos Separados ✅ CORRIGIDO

Problema: Possibilidade de usar templates e styles inline (padrão para apps simples) Solução: SEMPRE usar arquivos separados para HTML e SCSS (padrão ERP SaaS)

🎯 PADRÃO ERP SAAS - ARQUIVOS SEPARADOS

🏢 Por que Arquivos Separados para ERP SaaS?

❌ Templates Inline (Não adequado para ERP):

@Component({
  template: `<div>HTML inline</div>`, // ❌ Ruim para ERP complexo
  styles: [`div { color: blue; }`]     // ❌ Difícil manutenção
})

✅ Arquivos Separados (Padrão ERP SaaS):

@Component({
  templateUrl: './example.component.html', // ✅ Arquivo separado
  styleUrl: './example.component.scss'     // ✅ SCSS com recursos avançados
})

📁 Estrutura Gerada Correta:

domain/[nome]/
├── [nome].component.ts       # ✅ TypeScript com templateUrl/styleUrl
├── [nome].component.html     # ✅ HTML dedicado e estruturado
├── [nome].component.scss     # ✅ SCSS com variáveis, mixins, responsivo
├── [nome].service.ts         # ✅ Service com ApiClientService
├── [nome].interface.ts       # ✅ Interface TypeScript forte
└── README.md                 # ✅ Documentação específica

🎨 SCSS Avançado para ERP:

// CSS Variables para temas
:host {
  --primary-color: #007bff;
  --success-color: #28a745;
}

// Responsividade para dispositivos ERP
@media (max-width: 768px) {
  .domain-container {
    padding: 0.5rem;
  }
}

// Status badges profissionais
.status-badge {
  &.status-active::before {
    content: '●';
    color: #28a745;
  }
}

// Print styles para relatórios
@media print {
  .domain-container {
    background: white !important;
  }
}

📱 Template HTML Estruturado:

<div class="domain-container">
  <div class="main-content">
    <app-tab-system
      #tabSystem
      [config]="tabConfig"
      [events]="tabEvents"
      (tableEvent)="onTableEvent($event)">
    </app-tab-system>
  </div>
</div>

🎯 Benefícios para ERP SaaS:

Manutenibilidade:

✅ HTML: Estrutura clara e organizlada
✅ SCSS: Variáveis, mixins, aninhamento
✅ Separação: Responsabilidades bem definidas
✅ Debugging: Mais fácil localizar problemas

Escalabilidade:

✅ Reutilização: Styles compartilhados entre componentes
✅ Temas: CSS Variables para múltiplos temas
✅ Responsividade: Media queries organizadas
✅ Performance: Lazy loading de estilos

Colaboração em Equipe:

✅ Front-end: Desenvolvedores focam no HTML/CSS
✅ Back-end: Desenvolvedores focam no TypeScript
✅ Designers: Podem trabalhar diretamente no SCSS
✅ Code Review: Mais fácil revisar mudanças específicas

Funcionalidades ERP:

✅ Print Styles: Relatórios e documentos
✅ Responsividade: Tablets e mobile para campo
✅ Acessibilidade: WCAG compliance
✅ Temas: Light/Dark mode corporativo

🎯 CHECKLIST DE VALIDAÇÃO

Antes da Geração

Template HTML segue padrão do drivers.component.html
SideCard tem configuração completa com statusConfig
Sub-abas criadas apenas as solicitadas
Campos dentro das sub-abas, não no fields principal
Campos baseados na documentação Swagger

Após a Geração

HTML renderiza corretamente
SideCard aparece ao clicar em registros
Apenas sub-abas solicitadas estão presentes
Campos aparecem na sub-aba "dados"
Não há campos inexistentes na API

Testes de Funcionalidade

Tabela carrega dados
Botão editar abre formulário
SideCard exibe informações
Formulário salva corretamente
Componentes especializados funcionam

📝 DOCUMENTAÇÃO ATUALIZADA

Atualizar ONBOARDING_NEW_DOMAIN.md

Adicionar seção sobre consulta à documentação Swagger
Explicar estrutura correta de campos em sub-abas
Documentar configuração completa do SideCard
Adicionar checklist de validação pós-geração

Atualizar scripts/README.md

Documentar correções implementadas
Adicionar troubleshooting para problemas comuns
Incluir exemplos de uso correto

🚀 PRÓXIMOS PASSOS

Implementar correções no scripts/create-domain.js
Testar geração com um domínio simples
Validar funcionalidades geradas
Atualizar documentação com correções
Criar guia de troubleshooting

9.2 KiB Raw Blame History