373 lines
9.2 KiB
Markdown
373 lines
9.2 KiB
Markdown
# 🔧 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)**:
|
|
```html
|
|
<app-tab-system></app-tab-system>
|
|
```
|
|
|
|
**Template Correto (Baseado em drivers.component.html)**:
|
|
```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)**:
|
|
```typescript
|
|
sideCard: {
|
|
enabled: true,
|
|
title: "Resumo do ${componentName}",
|
|
position: "right",
|
|
width: "400px",
|
|
component: "summary",
|
|
data: {
|
|
displayFields: [...],
|
|
statusField: "status"
|
|
}
|
|
}
|
|
```
|
|
|
|
**Configuração Correta (Completa)**:
|
|
```typescript
|
|
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)**:
|
|
```typescript
|
|
subTabs: ['dados'${domainConfig.hasPhotos ? ", 'photos'" : ''}],
|
|
```
|
|
|
|
**Correção Necessária**:
|
|
```typescript
|
|
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)**:
|
|
```typescript
|
|
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**:
|
|
```typescript
|
|
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)**:
|
|
```typescript
|
|
// ❌ 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**:
|
|
1. **Perguntar explicitamente** quais campos existem na API
|
|
2. **Consultar documentação Swagger** antes de gerar
|
|
3. **Criar apenas campos confirmados** pela documentação
|
|
4. **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):**
|
|
```typescript
|
|
@Component({
|
|
template: `<div>HTML inline</div>`, // ❌ Ruim para ERP complexo
|
|
styles: [`div { color: blue; }`] // ❌ Difícil manutenção
|
|
})
|
|
```
|
|
|
|
#### **✅ Arquivos Separados (Padrão ERP SaaS):**
|
|
```typescript
|
|
@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:**
|
|
```scss
|
|
// 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:**
|
|
```html
|
|
<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
|
|
|
|
1. **Implementar correções** no `scripts/create-domain.js`
|
|
2. **Testar geração** com um domínio simples
|
|
3. **Validar funcionalidades** geradas
|
|
4. **Atualizar documentação** com correções
|
|
5. **Criar guia de troubleshooting** |