Histórico da Página
...
"hasNext": false,
"items": [
{
"id": "00010434",
"referencePeriod": "2023-12",
"category": "101",
"typeOfLaborProcessValue": "71",
"remFGTSProcTrab": "59000.99",
"remFGTSSefip": "845.00",
"dpsFGTSSefip": "23500.45",
"remFGTSDecAnt": "5015.19",
"dpsFGTSDecAnt": "23055.45"
}
]
02.
...
01.01. Page Dynamic Table
O componente POUI Page Dynamic Table dispõe de funcionalidades que abrangem outros componentes inteiros, que de outra forma precisariam ser implementados e estilizados individualmente. Sem contar funcionalidades que não são componentes, mas que precisariam ter sua lógica implementada via typescript, como, por exemplo, a funcionalidade do Carregar Mais, sinalizações de carga de tabela, entre outras.
Os elementos próprios de POUI que não foi preciso implementar são mencionados abaixo e nos prints que seguem:
- Services (https://angular.io/guide/architecture-services)
- Buttons (https://po-ui.io/documentation/po-button)
- Input (Para permitir pesquisa rápida) (https://po-ui.io/documentation/po-input)
- Pipe (https://angular.io/guide/pipes)
- Disclaimer (https://po-ui.io/documentation/po-disclaimer-group)
- Table (https://po-ui.io/documentation/po-table)
02.02. Dynamic View
O componente POUI Dynamic View dispõe de propriedades para preenchimento e exibição dos valores padrão label-valor, que eliminam a necessidade de implementação e estilização individual a seguir:
02.03. Tabs
Utilizado o componente POUI Tabs (https://po-ui.io/documentation/po-tabs), que remete a identidade visual que os usuários estão acostumado a ver no ambiente Protheus para os eventos, principalmente para os eventos totalizadores.
03. Back-end para o painel
Exemplo de API feito em TLPP onde foi criada a classe principal e seus métodos para retornar a informação de acordo com end-point requisitado pelo front.
...
borderColor | white |
---|---|
bgColor | black |
titleColor | white |
borderWidth | 0 |
borderStyle | solid |
...
Listagem das api ´s
1- Registros S-5503 | Listagem
Carrega registros do evento S-5503, filtrados ou não, ordenados ou não.
2- Registros S-5503 | Exclusão
Exclui eventos S-5503 conforme coleção de ID's informados.
3- Registros S-5503 | XML
Retorna XML's do evento S-5503 encodados em base64
4- Trabalhador do S-5503 | Informações Relativas a Matrícula e Categoria
Carrega informações relativas a Matrícula e Categoria de trabalhador específico do evento S-5503, ordenadas ou não.
5- Trabalhador do S-5503 | Identificação do estabelecimento responsável pelo pagamento dos valores informados
Carrega informações relativas a Identificação do estabelecimento responsável pelo pagamento a trabalhador específico dos valores informados do evento S-5503, ordenadas ou não.
Para a exibição do browser foi criado o Método totalizadorS5503(), onde será retornado além das informações necessárias para o preenchimento dos campos do componente Page Dynamic Table o RECNO da tabela pai do evento S-5503 que será usado como chave para os demais métodos.
Este mesmo método é utilizado para o retorno do filtro rápido e filtro avançado onde retornamos as informações do cabeçalho para o browser.
Para esta implementação utilizamos o método disponível pelo TLPP oRest:getQueryRequest r(query param que serão utilizados na query principal retornando os valores filtros.
...
borderColor | white |
---|---|
bgColor | black |
titleColor | white |
borderWidth | 0 |
borderStyle | solid |
...
Para a visualização das informações completas do registro, a ação de visualizar ira disparar a requisição para o método totalizadorDetails() passando como parâmetro o RECNO que será utilizado como chave na busca das informações nas tabelas filhas do evento montando um novo objeto Json de retorno para o front no preenchimento dessas tabelas.
Obs: Para este exemplo foi criado apenas um método mas o ideal seria um método para cada tabela retornado as informações distintas facilitando a leitura e tratamento das informações:
...
borderColor | white |
---|---|
bgColor | black |
titleColor | white |
borderWidth | 0 |
borderStyle | solid |
...
04. Links de consulta:
https://po-ui.io/documentation
...