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 (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)

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:

...

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

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 12

Nova versão Atual

Chave

03. Back-end para o painel

04. Links de consulta: