testes/Modulos Angular/projects/idt_app/docs/domains/README_ADDRESS_INTEGRATION.md

📍 Integração do Formulário de Endereço - Motoristas

✅ IMPLEMENTAÇÃO CONCLUÍDA

🎯 O que foi implementado:

1. Integração Completa de Endereço no Sistema de Abas

   • ✅ Campos de endereço integrados diretamente no formulário principal
   • ✅ Busca automática de CEP com preenchimento automático dos campos
   • ✅ Compatibilidade com modal e sistema de abas
   • ✅ Serviço CepService configurado e funcionando

2. Campos de Endereço Disponíveis

   • ✅ address_cep: CEP com máscara (00000-000)
   • ✅ address_uf: Estado (preenchido automaticamente)
   • ✅ address_city: Cidade (preenchida automaticamente)
   • ✅ address_neighborhood: Bairro (preenchido automaticamente)
   • ✅ address_street: Rua (preenchida automaticamente)
   • ✅ address_number: Número da residência
   • ✅ address_complement: Complemento (opcional)

3. Busca Automática de CEP

   • ✅ Debounce de 500ms para evitar múltiplas requisições
   • ✅ Preenchimento automático de: Estado, Cidade, Bairro, Rua
   • ✅ Funciona tanto no modal quanto no sistema de abas
   • ✅ Tratamento de erros para CEPs inválidos

---

🚀 COMO TESTAR A FUNCIONALIDADE

1. No Sistema de Abas:

1. Abra uma aba de motorista (nova ou edição)
2. Localize o campo "CEP"
3. Digite um CEP válido (ex: 01310-100)
4. Aguarde 500ms - os campos serão preenchidos automaticamente

2. No Modal (se configurado):

1. Use o método openForm() do DriversComponent
2. Digite um CEP válido no campo correspondente
3. Observe o preenchimento automático dos demais campos

3. CEPs para Teste:

• 01310-100 - Av. Paulista, São Paulo/SP
• 20040-020 - Centro, Rio de Janeiro/RJ
• 30112-000 - Centro, Belo Horizonte/MG
• 40070-110 - Pelourinho, Salvador/BA

---

🔧 ARQUIVOS MODIFICADOS

1. DriversComponent (drivers.component.ts)

• ✅ Adicionado CepService como dependência
• ✅ Método getFormConfig() atualizado com campos de endereço
• ✅ Método searchCepAndUpdateForm() implementado
• ✅ Método createNewDriverData() atualizado
• ✅ Documentação completa adicionada

2. TabFormConfigService (tab-form-config.service.ts)

• ✅ Método getDriverFormConfig() atualizado
• ✅ Campos de endereço separados implementados
• ✅ Campo único address removido

3. GenericTabFormComponent (generic-tab-form.component.ts)

• ✅ CepService injetado como dependência
• ✅ Listener para mudanças no campo address_cep
• ✅ Método handleCepChange() implementado
• ✅ Debounce de 500ms configurado

4. Interfaces Atualizadas

• ✅ FormField - Adicionado suporte a onValueChange
• ✅ TabFormField - Adicionado suporte a onValueChange

---

📋 ESTRUTURA DOS DADOS DE ENDEREÇO

interface AddressData {
  address_cep: string;        // '01310-100'
  address_uf: string;         // 'SP'
  address_city: string;       // 'São Paulo'
  address_neighborhood: string; // 'Bela Vista'
  address_street: string;     // 'Avenida Paulista'
  address_number: string;     // '1000'
  address_complement: string; // 'Apto 101'
}

---

🧪 EXEMPLO DE USO EM OUTROS COMPONENTES

// 1. IMPORTAÇÕES NECESSÁRIAS
import { CepService } from '../../shared/components/address-form/cep.service';

// 2. INJEÇÃO NO CONSTRUCTOR
constructor(
  // ... outros serviços
  private cepService: CepService
) {}

// 3. CONFIGURAÇÃO DOS CAMPOS
getFormConfig(): FormConfig {
  return {
    title: 'Meu Formulário',
    fields: [
      {
        key: 'address_cep',
        label: 'CEP',
        type: 'text',
        mask: '00000-000',
        onValueChange: (value: string, formGroup: any) => {
          const cleanCep = value?.replace(/\D/g, '') || '';
          if (cleanCep.length === 8) {
            this.cepService.search(cleanCep).subscribe({
              next: (data: any) => {
                if (!data.erro && formGroup) {
                  formGroup.patchValue({
                    address_street: data.logradouro || '',
                    address_neighborhood: data.bairro || '',
                    address_city: data.localidade || '',
                    address_uf: data.uf || ''
                  });
                }
              }
            });
          }
        }
      },
      // ... outros campos de endereço
    ]
  };
}

---

⚠️ LIMITAÇÕES E CONSIDERAÇÕES

1. API do ViaCEP: Limitada a CEPs brasileiros
2. Debounce: 500ms para evitar spam de requisições
3. Campos Obrigatórios: Apenas os campos necessários são obrigatórios
4. Compatibilidade: Funciona em todos os navegadores modernos

---

🔍 DEBUGGING

Console Commands para Teste:

// Testar busca de CEP diretamente
component.testCepSearch('01310-100');

// Verificar dados do formulário atual
component.form.value;

// Verificar se o CepService está funcionando
component.cepService.search('01310-100').subscribe(console.log);

Logs Importantes:

• ✅ 🧪 Testando busca de CEP: 01310-100
• ✅ ✅ CEP encontrado: + dados do endereço
• ⚠️ ❌ CEP não encontrado: + erro

---

📝 PRÓXIMOS PASSOS (OPCIONAL)

1. Validação de CEP: Adicionar validação mais robusta
2. Cache: Implementar cache para CEPs já consultados
3. Offline: Adicionar suporte para modo offline
4. Internacionalização: Suporte para outros países

---

👥 SUPORTE

Para dúvidas ou problemas:

1. Verifique os logs do console
2. Teste com CEPs válidos conhecidos
3. Confirme se o CepService está injetado corretamente
4. Verifique se todos os campos de endereço estão na configuração

---

Status: ✅ TOTALMENTE IMPLEMENTADO E TESTADO Data: Janeiro 2024 Compatibilidade: Angular 17+, Sistema de Abas v2.0+