Histórico da Página

...

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

> Buttons

...

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)

Image Added

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:

Info (https://po-ui.io/documentation/po-info)
Divider (https://po-ui.io/documentation/po-divider)

Image Added

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.

Image Added

03

> Pipe

> Disclaimer

> Table

Image Removed

Nesta tela será apresentado as informações principais do registro do totalizador e as ações que serão possíveis executar para cada registro:

...

. 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.

...

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 responsável por retornar os parâmetros informados na requisição via URI (query param) que serão utilizados na query principal retornando os valores filtros.

Painel

borderColor	white
bgColor	black
titleColor	white
borderWidth	0
borderStyle	solid

MethodtotalizadorS5503() ClassTotalizador5503

LocaloJson := JsonObject():New()
LocaloJsonAux
LocalnPage asnumeric
LocalnPageSizeasnumeric
LocalnRegIni asnumeric
LocalnRegFim asnumeric
LocalcPerRef ascharacter
LocalcCPF ascharacter
LocalcQry ascharacter
LocalcNome ascharacter
LocalcSearch ascharacter
LocaljQuery := oRest:getQueryRequest()

T2M->(DbSetOrder(1))
T2M->(DbGoTop())

oJson['items'] := {}
cPerRef := IIF(jQuery['perRef'] <> Nil,jQuery['perRef'], '')
cCPF := IIF(jQuery['cpf'] <> Nil,jQuery['cpf'], '')
cSearch := IIF(jQuery['search'] <> Nil,jQuery['search'], '')
nPage := IIF(jQuery['page'] <> Nil,Val(jQuery['page']), 1 )
nPageSize := IIF(jQuery['pageSize'] <> Nil,Val(jQuery['pageSize']), 15)

nRegIni := ( ( nPage - 1 ) * nPageSize ) + 1
nRegFim := nPage * nPageSize

cQry += " SELECT * FROM ( "
cQry += " SELECT ROW_NUMBER() OVER( ORDER BY T2M.R_E_C_N_O_ ) LINE_NUMBER, "
cQry += " T2M.R_E_C_N_O_ RECNO, T2M_PERAPU PERIODO, T2M_CPFTRB CPF, T2M_NRRECI RECIBO "
cQry += " FROM " + RetSqlName("T2M") + " T2M "
cQry += " WHERE T2M_PERAPU = ? "

If !Empty(cCPF) .or. !Empty(cSearch)
cQry += " AND T2M_CPFTRB = ? "
EndIf

cQry += " AND D_E_L_E_T_ = '' "
cQry += " ) TAB "
cQry += " WHERE LINE_NUMBER BETWEEN "+ cValTochar(nRegIni) + "AND " + cValTochar(nRegFim) + " "

oStatement := FWPreparedStatement():New( ChangeQuery(cQry) )

oStatement:setString(1,cPerRef)

If !Empty(cCPF)
oStatement:setString(2,cCPF)
EndIf

If !Empty(cSearch)
oStatement:setString(2,cSearch)
EndIf

cQry := oStatement:getFixQuery()

cAliasProd := MPSysOpenQuery(cQry)

While (cAliasProd)->(!EoF())

cNome := TAFGetNT1U((cAliasProd)->CPF)

IfEmpty(cNome)
C9V->(DbSetOrder(3))

IfC9V->(MsSeek(xFilial("C9V") + (cAliasProd)->CPF + "1"))
cNome := C9V->C9V_NOME
Else
cNome := TAFGetNT3A((cAliasProd)->CPF)
EndIf

EndIf

oJsonAux := JsonObject():New()
oJsonAux['period'] := Transform((cAliasProd)->PERIODO,"@R 9999-99")
oJsonAux['cpf'] := AllTrim(Transform((cAliasProd)->CPF,"@R 999.999.999-99"))
oJsonAux['name'] := cNome
oJsonAux['receipt'] := AllTrim((cAliasProd)->RECIBO)
oJsonAux['processNumber'] := '1234556'
oJsonAux['RECNO'] := (cAliasProd)->RECNO

Aadd(oJson['items'],oJsonAux)
FreeObj(oJsonAux)

(cAliasProd)->(DbSkip())

End

oJson["hasNext"] := HasNext( nRegFim,cPerRef )

(cAliasProd)->(DbCloseArea())
T2M->(DbCloseArea())
FreeObj(oStatement)

ReturnoRest:SetResponse(oJson)

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:

Image Added

Painel

borderColor	white
bgColor	black
titleColor	white
borderWidth	0
borderStyle	solid

MethodtotalizadorDetails() ClassTotalizador5503

LocaloJson)

...

:= JsonObject():New()
LocaloJsonAux
LocaljQuery := JsonObject():New()
LocalcRecno := ""
LocalcQry := ""
LocalcAliasProd := ""
LocalcCodCat := ""

jQuery := oRest:getQueryRequest()
cRecno := jQuery['RECNO']

T2M->(DbSetOrder(1))
T2Q->(DbSetOrder(1))
T2R->(DbSetOrder(1))

oJson['items'] := {}

cQry += " SELECT T2M_FILIAL, "
cQry += " T2M_ID, "
cQry += " T2M_VERSAO, "
cQry += " T2M_CPFTRB, "
cQry += " T2M_PERAPU, "
cQry += " T2Q_MATRIC, "
cQry += " T2Q_CODCAT, "
cQry += " T2Q_ESTABE, "
cQry += " T2R_TPVLR, "
cQry += " T2R_VALOR "
cQry += " FROM " + RetSqlName("T2M") + " T2M "
cQry += " LEFT JOIN " + RetSqlName("T2Q") + " T2Q "
cQry += " ON T2M_FILIAL = T2Q_FILIAL "
cQry += " AND T2M_ID = T2Q_ID "
cQry += " AND T2M_VERSAO = T2Q_VERSAO "
cQry += " LEFT JOIN " + RetSqlName("T2R") + " T2R "
cQry += " ON T2Q_FILIAL = T2R_FILIAL "
cQry += " AND T2Q_ID = T2R_ID "
cQry += " AND T2Q_VERSAO = T2R_VERSAO "
cQry += " WHERE T2M.R_E_C_N_O_ = ? "

oStatement := FWPreparedStatement():New( ChangeQuery(cQry) )
oStatement:setString(1,cRecno)

cQry := oStatement:getFixQuery()

cAliasProd := MPSysOpenQuery(cQry)

While (cAliasProd)->(!EoF())
oJsonAux := JsonObject():New()

C87->(DbSetOrder(1))
C87->(MsSeek(xFilial("C87") + (cAliasProd)->T2Q_CODCAT))

cCodCat := C87->C87_CODIGO

oJsonAux['registration'] := AllTrim((cAliasProd)->T2Q_MATRIC)
oJsonAux['category'] := cCodCat
oJsonAux['originCategory'] := cCodCat
oJsonAux['fgtsTot'] := (cAliasProd)->T2R_VALOR
oJsonAux['perRef'] := '2023-12'
oJsonAux['codCateg'] := '101'
oJsonAux['tpValorProcTrab'] := '71'
oJsonAux['dpsFgtsProcTrab'] := 100.00
oJsonAux['remFgtsSefip'] := 100.00
oJsonAux['dpsFgtsSefip'] := 100.00
oJsonAux['remFgtsDecAnt'] := 100.00
oJsonAux['dpsFgtsDecAnt'] := 100.00
oJsonAux['nrInsc'] := '53113791000122'
oJsonAux['tpInsc'] := 'CNPJ'

Aadd(oJson['items'],oJsonAux)
FreeObj(oJsonAux)

(cAliasProd)->(DbSkip())
End

(cAliasProd)->(DbCloseArea())
T2M->(DbCloseArea())
T2Q->(DbCloseArea())
T2R->(DbCloseArea())
FreeObj(oStatement)

ReturnoRest:SetResponse(oJson)

04. Links de consulta:

https://po-ui.io/documentation

...

Padronização para nomenclaturas no uso do TLPP

TLPP

TLPP x AdvPL

Árvore de páginas

Versões comparadas

Versão antiga 10

Nova versão Atual

Chave

03

. Back-end para o painel

04. Links de consulta: