Histórico da Página
Dados Gerais | |
---|---|
Módulo: | TOTVS Automação Fiscal (SIGATAF) |
Issue: | DSERTAF1-34795 |
Descrição: | Criação do evento S-5503 |
Data | 28/02/2024 |
Analistas | Fabio Mendonça / Lucas Passos |
Descrição Funcional
Realizar o estudo das necessidade para realizar a criação deste cadastro utilizando o POUI.
Analisar também as possíveis melhorias que podem ser realizadas no back-end.
Estudo:
Realizado estudo do evento conforme layout do esocial considerando os recursos disponíveis no produto e recursos disponíveis na biblioteca do PO-UI e foi desenvolvido esboço das telas no figma:
Conector de Widget url https://www.figma.com/file/dRlPqjW9HHaIxIZ2kHhkbq/Untitled?type=design&node-id=0%3A1&mode=dev&t=imaBPSHyEtBD6mJ0-1
Com base no layout proposto no Figma foi criada a branc esocial/sprint-meninosDoEvandro/DSERTAF1-34795 no Gitea onde a proposta das telas ficou da seguinte maneira.
01. ADAPTAÇÕES
Existe um leiaute de componentes pré-definidos para a inclusão de painéis no projeto taf-thf que deve ser seguido, composto pelos componentes: div com a class "po-wrapper", app-menu, po-page-default, app-header. Logo em seguida ao app-header, abaixo dos componentes mencionados anteriormente, é colocado o(s) componente(s) do novo painel.
Ao usarmos o componente po-page-dynamic-table, contudo, houve conflito com os componentes po-page-default e com a visualização do título do app-header. Em vista disso, foi necessário eliminar o po-page-default para correto dimensionamento do po-page-dynamic-table, e ocultar o título do app-header e utilizar o título do próprio componente po-page-dynamic-trable, ficando conforme abaixo:
02. PRINCIPAIS VANTAGENS
02.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.
Painel | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
ClassTotalizador5503 publicMethodNew() asobject //Browser |
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.
Painel | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
MethodtotalizadorS5503() ClassTotalizador5503 LocaloJson := JsonObject():New() |
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:
Painel | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
MethodtotalizadorDetails() ClassTotalizador5503 LocaloJson := JsonObject():New() |
04. Links de consulta:
https://po-ui.io/documentation
Padronização para nomenclaturas no uso do TLPP
CONTEÚDO
- Visão Geral
- Exemplo de utilização
- Tela XXX
- Outras Ações / Ações relacionadas
- Outras Ações / Ações relacionadas
- Tela XXX
- Principais Campos e Parâmetros
- Principais Campos e Parâmetros
- Tabelas utilizadas
01. VISÃO GERAL
02. EXEMPLO DE UTILIZAÇÃO
03. TELA XXXXX
Outras Ações / Ações relacionadas
...
04. TELA XXXXX
Principais Campos e Parâmetros
...
Card documentos | ||||
---|---|---|---|---|
|
...