# 📞 PhoneFormatter - Exemplos de Uso

## 🎯 Como usar o PhoneFormatter em diferentes partes do sistema

### 1. Em Colunas de Tabela (DataTable)

```typescript
// Em qualquer component que use tabelas
import { PhoneFormatter } from '../../shared/utils/phone-formatter.util';

columns: [
  {
    field: "phone",
    header: "Telefone",
    sortable: true,
    filterable: true,
    label: (phone: any) => PhoneFormatter.format(phone), // ✅ Uso direto
    format: "phone"
  },
  {
    field: "emergency_contact",
    header: "Contato de Emergência",
    label: (phone: any) => PhoneFormatter.format(phone) // ✅ Reutilização
  }
]
```

### 2. Em Templates HTML

```typescript
// No component
import { PhoneFormatter } from '../../shared/utils/phone-formatter.util';

export class MyComponent {
  // Expor o formatter para o template
  formatPhone = PhoneFormatter.format;
  
  // Ou criar método próprio
  getFormattedPhone(phone: any): string {
    return PhoneFormatter.format(phone);
  }
}
```

```html
<!-- No template -->
<div class="contact-info">
  <span>Telefone: {{ formatPhone(user.phone) }}</span>
  <span>Celular: {{ getFormattedPhone(user.mobile) }}</span>
</div>
```

### 3. Em Formulários (Validação)

```typescript
import { PhoneFormatter } from '../../shared/utils/phone-formatter.util';

// Validação customizada
phoneValidator(control: AbstractControl): ValidationErrors | null {
  const phone = control.value;
  
  if (!phone) return null; // Campo opcional
  
  if (!PhoneFormatter.isValid(phone)) {
    return { invalidPhone: true };
  }
  
  return null;
}

// No FormBuilder
this.form = this.fb.group({
  phone: ['', [this.phoneValidator]], // ✅ Validação reutilizável
  emergency_contact: ['', [this.phoneValidator]] // ✅ Mesma validação
});
```

### 4. Em Services (Processamento de Dados)

```typescript
import { PhoneFormatter } from '../../shared/utils/phone-formatter.util';

@Injectable()
export class ContactService {
  
  processContacts(contacts: any[]): any[] {
    return contacts.map(contact => ({
      ...contact,
      phone_formatted: PhoneFormatter.format(contact.phone), // ✅ Formatação em lote
      phone_type: PhoneFormatter.getType(contact.phone), // ✅ Detecção de tipo
      phone_digits: PhoneFormatter.unformat(contact.phone) // ✅ Apenas números
    }));
  }
  
  validateContactData(data: any): boolean {
    return PhoneFormatter.isValid(data.phone) && 
           PhoneFormatter.isValid(data.emergency_contact);
  }
}
```

### 5. Em Pipes Customizados

```typescript
import { Pipe, PipeTransform } from '@angular/core';
import { PhoneFormatter } from '../utils/phone-formatter.util';

@Pipe({
  name: 'phone',
  standalone: true
})
export class PhonePipe implements PipeTransform {
  transform(value: any): string {
    return PhoneFormatter.format(value); // ✅ Pipe reutilizável
  }
}
```

```html
<!-- Uso do pipe -->
<span>{{ user.phone | phone }}</span>
<span>{{ contact.mobile | phone }}</span>
```

### 6. Em Side Cards e Resumos

```typescript
// Configuração de side card
sideCard: {
  data: {
    displayFields: [
      {
        key: "phone",
        label: "Telefone",
        type: "text",
        format: "phone", // ✅ Sistema detecta automaticamente
        formatter: PhoneFormatter.format // ✅ Ou especifica diretamente
      },
      {
        key: "emergency_contact",
        label: "Contato de Emergência", 
        type: "text",
        formatter: PhoneFormatter.format // ✅ Reutilização
      }
    ]
  }
}
```

### 7. Em Outros Domínios (Exemplo: Clientes)

```typescript
// clients.component.ts
import { PhoneFormatter } from '../../shared/utils/phone-formatter.util';

export class ClientsComponent extends BaseDomainComponent<Client> {
  
  protected override getDomainConfig(): DomainConfig {
    return {
      domain: 'client',
      title: 'Clientes',
      columns: [
        {
          field: "phone",
          header: "Telefone",
          label: (phone: any) => PhoneFormatter.format(phone) // ✅ Mesmo padrão
        },
        {
          field: "whatsapp",
          header: "WhatsApp",
          label: (phone: any) => PhoneFormatter.format(phone) // ✅ Reutilização
        }
      ]
    };
  }
}
```

### 8. Em Relatórios e Exports

```typescript
import { PhoneFormatter } from '../../shared/utils/phone-formatter.util';

@Injectable()
export class ReportService {
  
  generateContactReport(data: any[]): any[] {
    return data.map(item => ({
      name: item.name,
      phone: PhoneFormatter.format(item.phone), // ✅ Formatação para relatório
      phone_type: PhoneFormatter.getType(item.phone), // ✅ Classificação
      is_mobile: PhoneFormatter.getType(item.phone) === 'mobile'
    }));
  }
}
```

## 🎯 Vantagens da Centralização

### ✅ Consistência
- Todos os telefones formatados da mesma forma
- Padrão único em todo o sistema
- Fácil manutenção e atualização

### ✅ Reutilização
- Uma única implementação para todo o sistema
- Reduz duplicação de código
- Facilita testes unitários

### ✅ Flexibilidade
- Métodos para diferentes necessidades:
  - `format()` - Formatação visual
  - `unformat()` - Apenas números
  - `isValid()` - Validação
  - `getType()` - Classificação

### ✅ Manutenibilidade
- Mudanças de regra em um só lugar
- Fácil adicionar novos formatos
- Logs centralizados se necessário

## 🚀 Próximos Passos

1. **Migrar outros components** para usar `PhoneFormatter`
2. **Criar pipes similares** para CPF, CNPJ, CEP
3. **Adicionar testes unitários** para o formatter
4. **Documentar padrões** de formatação da empresa

---

**💡 Dica**: Use sempre `PhoneFormatter.format()` para exibição e `PhoneFormatter.unformat()` antes de enviar para APIs! 