2.5 KiB

Raw Blame History

🔧 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

interface SideCardConfig {
  enabled: boolean;
  title: string;
  position: 'left' | 'right';
  width: string;
  componentType: 'summary' | 'detail' | 'custom';
  displayFields: SideCardField[];
  imageConfig?: SideCardImageConfig;
  statusConfig?: SideCardStatusConfig;
}

SideCardField

interface SideCardField {
  key: string;
  label: string;
  type: 'text' | 'currency' | 'status' | 'badge' | 'image';
  format?: 'date' | 'currency' | 'number';
  prefix?: string;
  suffix?: string;
}

SideCardImageConfig

interface SideCardImageConfig {
  defaultImage: string;
  fallbackImage: string;
  altText: string;
  width: string;
  height: string;
}

SideCardStatusConfig

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:

interface TabFormConfig {
  // ... propriedades existentes
  sideCard?: SideCardConfig;
}

📍 Uso nas Implementações

Drivers Domain

// 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:

Estenda as interfaces em base-domain.interface.ts
Implemente a lógica em formatFieldValue() no generic-tab-form
Adicione estilos CSS correspondentes
Atualize esta documentação

Referência Técnica | Side Card Component v1.2.0

2.5 KiB Raw Blame History