Fork: Código fonte extraído de @senior-hcm-service-tower/hst-dados e mantido independentemente para o contexto ERP.

ERP Service Tower Senior - Dados

Componente desenvolvido para uso em telas customizadas e BPMs pelo time de serviços customizados ERP da Senior Sistemas.

Requisitos

• Angular: 18.0.1
• primeflex: 3.3.1
• primeng: 17.18.9

Instalação

npm install @senior-erp-service-tower/hst-dados

Visão Geral

O componente hst-dados disponibiliza um card com dados mapeados por um array, com utilização tanto em BPMs quanto em telas customizadas. Esse componente tem como premissa demonstrar dados de colaborador (solicitante, subordinado, etc.), mas também pode ser utilizado apenas para exibir dados dentro de um array seguindo o modelo CampoModel.

O componente possui dois setores:

• Esquerda: Foto, matrícula e nome do colaborador (se não enviado, busca automaticamente pelo usuário logado no Senior X)
• Direita: Dados contidos no array de campos

Em dispositivos móveis, os dados são unificados em uma única coluna.

Parâmetros de Entrada (@Input)

| Input | Tipo | Valor Padrão | Descrição | | --- | --- | --- | --- | | campos | CampoModel[] | [] | Array de campos que será demonstrado | | nomeCompleto | string | '' | Nome do solicitante (se diferente do usuário logado no Senior X) | | matricula | number | undefined | Matrícula do colaborador | | photoUrl | string | '' | URL da foto (se diferente da foto do Senior X) | | labelMobile | string | 'Dados do solicitante' | Label exibida em dispositivos mobile (quando apenasCampos é false) | | escondeFoto | boolean | false | Esconde a foto do colaborador (quando apenasCampos é false) | | apenasCampos | boolean | false | Exibe apenas os campos do array, sem a área de foto/nome | | noBorder | boolean | false | Remove as bordas do card |

Modelos Exportados

CampoModel

Interface que define a estrutura de cada campo exibido.

export interface CampoModel {
  label: string;    // Rótulo do campo
  valor: string;    // Valor exibido
  tamanho?: string; // Tamanho da coluna: 'P', 'M' ou 'G'
}

| Campo | Tipo | Obrigatório | Valores possíveis | | --- | --- | --- | --- | | label | string | Sim | Texto livre | | valor | string | Sim | Texto livre | | tamanho | string | Não | 'P' (col-3), 'M' (col-6), 'G' (col-12). Padrão: col-4 |

UsuarioModel

Interface que representa o usuário logado retornado pela API Senior X.

export interface UsuarioModel {
  email: string;
  fullName: string;
  photoUrl?: string;
  campos?: CampoModel[];
}

| Campo | Tipo | Obrigatório | Descrição | | --- | --- | --- | --- | | email | string | Sim | E-mail do usuário | | fullName | string | Sim | Nome completo do usuário | | photoUrl | string | Não | URL da foto do usuário | | campos | CampoModel[] | Não | Campos adicionais |

Serviço DadosService

O componente utiliza internamente o DadosService para buscar dados do usuário logado na plataforma Senior X.

Endpoint utilizado:

• GET https://platform.senior.com.br/t/senior.com.br/bridge/1.0/rest/platform/user/queries/getUser

Nota: A busca automática ocorre apenas quando apenasCampos é false e não foram informados nomeCompleto ou photoUrl.

Exemplos de Uso

1. Uso em BPM (usuário logado)

Exibe dados do solicitante com busca automática do usuário logado:

<hst-dados
  [campos]="camposSolicitante"
  [matricula]="12345">
</hst-dados>

import { Component } from '@angular/core';
import { DadosComponent, CampoModel } from '@senior-erp-service-tower/hst-dados';

@Component({
  selector: 'app-solicitacao',
  standalone: true,
  imports: [DadosComponent],
  template: `
    <hst-dados
      [campos]="camposSolicitante"
      [matricula]="12345">
    </hst-dados>
  `
})
export class SolicitacaoComponent {
  camposSolicitante: CampoModel[] = [
    { label: 'Centro de Custo', valor: '001 - Administrativo', tamanho: 'M' },
    { label: 'Cargo', valor: 'Analista de Sistemas', tamanho: 'M' },
    { label: 'Filial', valor: '01 - Matriz', tamanho: 'P' },
    { label: 'Departamento', valor: 'TI', tamanho: 'P' }
  ];
}

2. Uso com dados explícitos (sem busca automática)

Quando o colaborador exibido é diferente do usuário logado:

<hst-dados
  [campos]="camposSubordinado"
  nomeCompleto="Maria da Silva"
  [matricula]="67890"
  photoUrl="https://exemplo.com/foto-maria.jpg">
</hst-dados>

camposSubordinado: CampoModel[] = [
  { label: 'Centro de Custo', valor: '002 - Comercial', tamanho: 'M' },
  { label: 'Cargo', valor: 'Vendedora', tamanho: 'M' },
  { label: 'Admissão', valor: '01/03/2020', tamanho: 'P' },
  { label: 'Situação', valor: 'Ativa', tamanho: 'P' }
];

3. Apenas campos (sem foto e nome)

Quando deseja exibir apenas os dados do array sem a área de identificação:

<hst-dados
  [campos]="camposResumo"
  apenasCampos>
</hst-dados>

camposResumo: CampoModel[] = [
  { label: 'Data Início', valor: '01/01/2024', tamanho: 'P' },
  { label: 'Data Fim', valor: '31/01/2024', tamanho: 'P' },
  { label: 'Motivo', valor: 'Férias regulamentares', tamanho: 'M' },
  { label: 'Observação', valor: 'Aprovado pelo gestor', tamanho: 'G' }
];

4. Card sem bordas e label mobile customizada

<hst-dados
  [campos]="campos"
  [matricula]="12345"
  labelMobile="Dados do subordinado"
  noBorder
  escondeFoto>
</hst-dados>

5. Tamanhos dos campos

Os tamanhos definem a largura da coluna no grid responsivo:

| Tamanho | Classes CSS | Descrição | | --- | --- | --- | | 'P' | col-6 md:col-3 | Pequeno (1/4 da linha em desktop) | | 'M' | col-6 md:col-6 | Médio (1/2 da linha em desktop) | | 'G' | col-12 | Grande (linha inteira) | | Padrão | col-12 md:col-4 | 1/3 da linha em desktop |