119 lines
2.5 KiB
Markdown
119 lines
2.5 KiB
Markdown
# 🔧 Side Card Interfaces
|
|
|
|
## Localização das Interfaces
|
|
|
|
As interfaces do Side Card estão definidas em:
|
|
```
|
|
projects/idt_app/src/app/shared/interfaces/base-domain.interface.ts
|
|
```
|
|
|
|
## 📋 Interfaces Principais
|
|
|
|
### SideCardConfig
|
|
|
|
```typescript
|
|
interface SideCardConfig {
|
|
enabled: boolean;
|
|
title: string;
|
|
position: 'left' | 'right';
|
|
width: string;
|
|
componentType: 'summary' | 'detail' | 'custom';
|
|
displayFields: SideCardField[];
|
|
imageConfig?: SideCardImageConfig;
|
|
statusConfig?: SideCardStatusConfig;
|
|
}
|
|
```
|
|
|
|
### SideCardField
|
|
|
|
```typescript
|
|
interface SideCardField {
|
|
key: string;
|
|
label: string;
|
|
type: 'text' | 'currency' | 'status' | 'badge' | 'image';
|
|
format?: 'date' | 'currency' | 'number';
|
|
prefix?: string;
|
|
suffix?: string;
|
|
}
|
|
```
|
|
|
|
### SideCardImageConfig
|
|
|
|
```typescript
|
|
interface SideCardImageConfig {
|
|
defaultImage: string;
|
|
fallbackImage: string;
|
|
altText: string;
|
|
width: string;
|
|
height: string;
|
|
}
|
|
```
|
|
|
|
### SideCardStatusConfig
|
|
|
|
```typescript
|
|
interface SideCardStatusConfig {
|
|
[key: string]: {
|
|
color: string;
|
|
backgroundColor: string;
|
|
label: string;
|
|
};
|
|
}
|
|
```
|
|
|
|
## 🔗 Integração com Tab System
|
|
|
|
O side card é integrado ao sistema de tabs através da extensão da interface `TabFormConfig`:
|
|
|
|
```typescript
|
|
interface TabFormConfig {
|
|
// ... propriedades existentes
|
|
sideCard?: SideCardConfig;
|
|
}
|
|
```
|
|
|
|
## 📍 Uso nas Implementações
|
|
|
|
### Drivers Domain
|
|
```typescript
|
|
// projects/idt_app/src/app/domain/drivers/drivers.component.ts
|
|
sideCard: {
|
|
enabled: true,
|
|
title: 'Resumo do Motorista',
|
|
position: 'right',
|
|
width: '350px',
|
|
componentType: 'summary',
|
|
displayFields: [
|
|
{ key: 'vencimento_carteira', label: 'Vencimento CNH', type: 'text', format: 'date' },
|
|
{ key: 'nome', label: 'Nome', type: 'text' },
|
|
// ... outros campos
|
|
]
|
|
}
|
|
```
|
|
|
|
## 🎯 Tipos Suportados
|
|
|
|
### Field Types
|
|
- **text**: Texto simples
|
|
- **currency**: Valores monetários (formatação automática)
|
|
- **status**: Status com cores e badges
|
|
- **badge**: Badges coloridos
|
|
- **image**: Imagens inline
|
|
|
|
### Format Types
|
|
- **date**: Formatação de datas (DD/MM/YYYY)
|
|
- **currency**: Formatação monetária (R$ 1.234,56)
|
|
- **number**: Formatação numérica
|
|
|
|
## 🔄 Extensibilidade
|
|
|
|
Para adicionar novos tipos ou formatos:
|
|
|
|
1. Estenda as interfaces em `base-domain.interface.ts`
|
|
2. Implemente a lógica em `formatFieldValue()` no generic-tab-form
|
|
3. Adicione estilos CSS correspondentes
|
|
4. Atualize esta documentação
|
|
|
|
---
|
|
|
|
**Referência Técnica** | Side Card Component v1.2.0 |