Hoje vou postar uma rotina para que possamos criar facilmente um markbrowse editável, assim o usuário pode selecionar os registros e tambem editar as informações.

Abaixo o código fonte, a rotina é bem simples basta compilar e executar para ver um exemplo.

#Include "Protheus.ch"

/*/{Protheus.doc} SPMarkTe
Função SPMarkTe, cria um markbrowse editavel.
@param Não recebe parâmetros
@return Não retorna nada
@author Rafael Goncalves
@owner sempreju.com.br
@version Protheus 12
@since Out|2020
/*/

User Function SPMarkTe()
Private lMarker     := .T.
Private aDespes := {}

//Alimenta o array
BUSDATA()


DEFINE MsDIALOG o3Dlg TITLE 'Clientes' From 0, 4 To 650, 1180 Pixel
    
    oPnMaster := tPanel():New(0,0,,o3Dlg,,,,,,0,0)
    oPnMaster:Align := CONTROL_ALIGN_ALLCLIENT

    oDespesBrw := fwBrowse():New()
    oDespesBrw:setOwner( oPnMaster )

    oDespesBrw:setDataArray()
    oDespesBrw:setArray( aDespes )
    oDespesBrw:disableConfig()
    oDespesBrw:disableReport()

    oDespesBrw:SetLocate() // Habilita a Localização de registros

    //Create Mark Column
    oDespesBrw:AddMarkColumns({|| IIf(aDespes[oDespesBrw:nAt,01], "LBOK", "LBNO")},; //Code-Block image
        {|| SelectOne(oDespesBrw, aDespes)},; //Code-Block Double Click
        {|| SelectAll(oDespesBrw, 01, aDespes) }) //Code-Block Header Click

    oDespesBrw:addColumn({"Codigo"              , {||aDespes[oDespesBrw:nAt,02]}, "C", "@!"    , 1,  20    ,                            , .T. , , .F.,, "aDespes[oDespesBrw:nAt,02]",, .F., .T.,                                    , "ETDESPES1"    })
    oDespesBrw:addColumn({"Nome"                , {||aDespes[oDespesBrw:nAt,03]}, "C", "@!"    , 1, 100    ,                            , .T. , , .F.,, "aDespes[oDespesBrw:nAt,03]",, .F., .T.,                                    , "ETDESPES2"    })
    oDespesBrw:addColumn({"End"                 , {||aDespes[oDespesBrw:nAt,04]}, "C", "@!"    , 1, 100    ,                            , .T. , , .F.,, "aDespes[oDespesBrw:nAt,04]",, .F., .T.,                                    , "ETDESPES3"    })
    oDespesBrw:addColumn({"Cidade"              , {||aDespes[oDespesBrw:nAt,05]}, "C", "@!"    , 1, 100    ,                            , .T. , , .F.,, "aDespes[oDespesBrw:nAt,05]",, .F., .T.,                                    , "ETDESPES4"    })

    oDespesBrw:setEditCell( .T. , { || .T. } ) //activa edit and code block for validation

    /*
    oDespesBrw:acolumns[2]:ledit     := .T.
    oDespesBrw:acolumns[2]:cReadVar:= 'aDespes[oBrowse:nAt,2]'*/

    oDespesBrw:Activate(.T.)

Activate MsDialog o3Dlg

return .t.



Static Function SelectOne(oBrowse, aArquivo)
aArquivo[oDespesBrw:nAt,1] := !aArquivo[oDespesBrw:nAt,1]
oBrowse:Refresh()
Return .T.



Static Function SelectAll(oBrowse, nCol, aArquivo)
Local _ni := 1
For _ni := 1 to len(aArquivo)
    aArquivo[_ni,1] := lMarker
Next
oBrowse:Refresh()
lMarker:=!lMarker
Return .T.





//Alimenta a tabela temporaria
Static Function BUSDATA()
Local cQuery    as Character
Local cQryT3    as Character

cQuery      := ""
cQryT3      := GetNextAlias()
aDespes := {}

cQuery+="SELECT * FROM " + RetSqlName("SA1")
cQuery+=" WHERE D_E_L_E_T_=''"
cQuery:=ChangeQuery(cQuery)
dbUseArea( .T., "TOPCONN", TcGenQry( ,, cQuery ) , cQryT3, .T., .F. )

(cQryT3)->(DbGoTop())
While (cQryT3)->(!EOF())

    aadd(aDespes,{.f.,alltrim((cQryT3)->A1_COD+(cQryT3)->A1_LOJA),alltrim((cQryT3)->A1_NOME),alltrim((cQryT3)->A1_END),alltrim((cQryT3)->A1_MUN)    })

    (cQryT3)->(dbSkip())
EndDo
(cQryT3)->(dbCloseArea())
DbSelectArea('SA1')

Return .t.

O código fonte desse e outros exemplos podem ser encontrados em nosso git.

Post interessantes:

Ponto de entrada ao acessar o sistema aqui.

Aprenda a instalar o Protheus no Windows aqui.

Aprenda a instalar o Protheus no Linux aqui.

Retornar datas por extenso aqui.

Barras de progresso aqui.

Dúvidas e sugestões, entre em contato.

Obrigado e até a próxima!

O post Criar MarkBrowse editável em advpl apareceu primeiro em Sem Preju.

Hoje vamos aprender os atalhos mais importantes do wondows.

Microsoft Word

Windows

(os atalhos abaixo podem executar funções diferentes das descritas abaixo, dependendo da versão do seu Windows)

O código fonte de diversos exemplos podem ser encontrados em nosso git oficial.

Post interessantes:

Aprenda a instalar o Protheus no Windows aqui.

Aprenda a instalar o Protheus no Linux aqui.

configurar serviço rest aqui.

Retornar datas por extenso aqui.

Barras de progresso aqui.

Dúvidas e sugestões, entre em contato.

Obrigado e até a próxima!

O post Atalhos úteis do windows apareceu primeiro em Sem Preju.

Hoje vamos aprender como usar cadastrar um feriado e como verificar se uma data é válida.

1- Cadastro de feriados

Para que o sistema consiga considerar uma data como feriado é necessário que cadastre esta data na tabela genérica(SX5) –  63.

Acesse: Configurador (SIGACFG) > Base de Dados > Dicionário > Base de Dados > Selecione a Empresa (Grupo) e clique em “Tabelas Genéricas”.

Importante: A data deve ser cadastrada em Dia/Mês/Ano (01/01/99). Caso a data deva ser considerada todo ano, informe três espaços em branco após o mês (01/01 ) e depois insira a descrição.

2-Verificando de uma data é dia útil, para isso vamos usar a função datavalida()

Essa função recebe dois parametros, são eles!

1-Data para iniciar o cálculo da função

2-Se .T. posterga a data recebida para o próximo dia útil – Se .F. retrocede a data recebida para o dia útil anterior

Abaixo o código fonte onde exemplificamos o seu uso.

#Include "Protheus.ch"
#Include "TopConn.ch"
  

/*/{Protheus.doc} SPDTVAL
Função SPDTVAL, exemplo de uso de data valida
@return Não retorna nada
@author Rafael Goncalves
@owner sempreju.com.br
@version Protheus 12
@since Abr|2021
/*/
User Function SPDTVAL()  

    /*
    Parametros
        1-Data para iniciar o cálculo da função
        2-Se .T. posterga a data recebida para o próximo dia útil – Se .F. retrocede a data recebida para o dia útil anterior (default .f.)
    Retorno
    	Data válida do sistema

    Obs.: Para cadastrar um feriado use a tabela genérica 63
    */
    MsgInfo(    'DataValida ou próxima: '  + cValtoChar( DataValida( Date(), .T. ) ) + CRLF + ;
                'DataValida ou anterior: ' + cValtoChar( DataValida( Date(), .F. ) ) ;
 , 'Sempreju =)' )


Return .t.

Agor

O código fonte desse e de outros exemplos podem ser encontrados em nosso git oficial.

Post interessantes:

Aprenda a instalar o Protheus no Windows aqui.

Aprenda a instalar o Protheus no Linux aqui.

configurar serviço rest aqui.

Retornar datas por extenso aqui.

Barras de progresso aqui.

Dúvidas e sugestões, entre em contato.

Obrigado e até a próxima!

O post Como cadastrar feriado e verificar se uma data é valida! apareceu primeiro em Sem Preju.

Hoje vamos aprender como usar a função cGetFile através do F3 de um campo ou pergunte, isso pode ser util especialmente quando precisarmos selecionar um arquivo e não queremos digitar todo o caminho, mas sim apenas selecionar.

Abaixo o código fonte onde criamos a função que será utilizada no cadastro da consulta padrão (SXB).

#INCLUDE "TOTVS.CH"
#INCLUDE "RWMAKE.CH"
#INCLUDE "TOPCONN.CH"

#Define ENTER Chr(13)+Chr(10)

/*/{Protheus.doc} SPSF3DIA
Função SPSF3DIA, para exemplificar como selecionar o diretório de um arquivo no SF3.
@param Não recebe parâmetros
@return Patch do arquivo selecionado
@author Rafael Goncalves
@owner sempreju.com.br
@version Protheus 12
@since Mar|2021
/*/

User Function SPSF3DIA(cCampo)
Local cRet := ""

cRet := cGetFile(,"Selecione o diretorio",,"",.T.,GETF_NETWORKDRIVE+GETF_RETDIRECTORY+128)

//Atualiza o campo com o caminho selecionado
&(cCPO)	:= cRet

Return (!Empty(cRet))

Agora que temos a função responsável por tratar e retornar o arquivo, vamos criar uma consulta padrão que utilizará essa função (tipo da consulta padrão será “especifica”) ao invés de uma tabela. Para isso no configurador, vamos criar o seguinte SXB.

Avançando vamos configurar  a nossa função, enviando como parametro a função readvar(), e retornando o valor M->(readvar()).

Agora onde for necessário selecionar um arquivo (campo ou pergunte) através do SF3, vamos usar a nossa nova consulta, para demonstrar adicionei no campo A1_END, e o resultado foi o print abaixo

O código fonte desse e de outros exemplos podem ser encontrados em nosso git oficial.

Post interessantes:

Aprenda a instalar o Protheus no Windows aqui.

Aprenda a instalar o Protheus no Linux aqui.

configurar serviço rest aqui.

Retornar datas por extenso aqui.

Barras de progresso aqui.

Dúvidas e sugestões, entre em contato.

Obrigado e até a próxima!

O post Como selecionar arquivo através do F3 apareceu primeiro em Sem Preju.

Neste artigo iremos demonstrar como bloquear opções nas perguntes,  se está tendo problemas com alterações nas configurações pré-definidas do sistema, como contabilização automática ou aglutinação, vamos demonstrar  mostrar como restringir o acesso a alteração pelos usuários.

Nesse exemplo vamos utilizar a rotina FINA040 (possui a pergunta FIN040 para parametrização da contabilização), acessando a rotina e pressionando F12, a pergunte é exibida.

Nesse exemplo vamos bloquear as perguntes MV_PAR01 e MV_PAR02, para isso acesso o configurador,.

O caminho completo da rotina é :  Usuários > Senhas > Config. Perguntas

Clique em Incluir para adicionarmos uma restrição ao pergunte, informe o nome da pergunta, no nosso exemplo será FIN040, as opções serão carregadas. As linhas do pergunte aparecerão como deletadas, recupere a linha que deseja efetuar a manutenção e defina o conteúdo padrão.

Informe o usuário ou grupo de usuário que desejar vincular a essa nova regra e salve.

Ao acessar a rotina novamente e verificar as perguntes estarão bloqueadas!

O código fonte de outros exemplos podem ser encontrados em nosso git oficial.

Post interessantes:

Aprenda a instalar o Protheus no Windows aqui.

Aprenda a instalar o Protheus no Linux aqui.

configurar serviço rest aqui.

Retornar datas por extenso aqui.

Barras de progresso aqui.

Dúvidas e sugestões, entre em contato.

Obrigado e até a próxima!

O post Bloqueando opções na Pergunte apareceu primeiro em Sem Preju.

Um tempo atrás fiz o post para consultar o CEP dos correios usando node, aqui.

Após rodar por alguns dias a rotina(7 dias), consegui baixar todo o range de CEP desde 00000-000 até 99999-999.

Para quem precisar, para usar em algum sistema ou para estudo, estou disponibilizando o arquivo para download, para isso basta entrar em contato.

Obs.: Para restaurar deverá ser usado o SGBD postgres.

O código fonte da aplicação node e de outros exemplos podem ser encontrados em nosso git oficial.

Post interessantes:

Aprenda a instalar o Protheus no Windows aqui.

Aprenda a instalar o Protheus no Linux aqui.

configurar serviço rest aqui.

Retornar datas por extenso aqui.

Barras de progresso aqui.

Dúvidas e sugestões, entre em contato.

Obrigado e até a próxima!

O post Tabela com todos CEP dos correios apareceu primeiro em Sem Preju.

Nos post anterior vimos:

• Parte 1 – Como configurar, testar API no Protheus e listar fornecedores no Angular (PO.UI) aqui.
• Parte 2 – Como criar o formulário para inclusão de fornecedor aqui.

Dando continuidade na nossa série de criar um CRUD em PO.UI, vamos agora criar as ações de editar e excluir um fornecedor.

Vamos começar com a exclusão, para isso vamos usar a mesma API mas o verbo agora será DELETE ao invés de GET ou POST. Vamos primeiro testar nossa API e consultar se nosso backend está funcionando corretamente (essa etapa é opcional), para isso vamos usar novamente o Postman, apontando para nossa API passaremos o código + loja do fornecedor como parâmetro na URL, ficando assim, http://localhost:8084/rest/api/crm/v1/customerVendor/2/A2_COD+A2_LOJA(no lugar de A2_COD+A2_LOJA informe um fornecedor e loja que exista em seu ambiente, e também troque o ip e porta do backend para os seus dados)  como no print abaixo.

A resposta deverá ser um arquivo JSON com a mensagem de registro deletado com sucesso, se tudo ocorreu corretamente aqui, vamos começar a tratar nosso frontend para usar a mesma API.

A Primeira etapa do FrontEnd será ajustar o componente de lista fornecedores para adicionar duas novas ações para cada item na lista(editar e excluir), para isso altere o arquivo supplier-list.component.ts e deixe como o código abaixo:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { PoNotificationService, PoTableAction } from '@po-ui/ng-components';
import { SupplierListService } from './supplier-list.service';

@Component({
  selector: 'app-supplier-list',
  templateUrl: './supplier-list.component.html',
  styleUrls: ['./supplier-list.component.css']
})
export class SupplierListComponent implements OnInit {

  supplierList: Array<any> = new Array();
  colunasTable: Array<any> = new Array();

  //Parte 3 
  //Adicionado ação deleter e editar
  actions: Array<PoTableAction> = [
    { action: this.updateSupplier.bind(this), icon: 'po-icon-edit', label: 'Alterar Fornecedor'},
    { action: this.deleteSupplier.bind(this), icon: 'po-icon-delete', label: 'Excluir Fornecedor' }
  ];

  //Parte 3 
  //método para editar
  updateSupplier(row: any) {
    console.log('Edit');
    const supplierId = row.code + row.storeId;
    this.router.navigate([`/supplierform/${supplierId}/${row.type}`]);
  }
    
  //Parte 3 
  //método para deleter o fornecedor
  deleteSupplier(row: any) {
    console.log('deleteSupplier');
    const supplierId = row.code + row.storeId;
    this.SupplierListService
    .deleteSupplier(supplierId, row.type)
    .subscribe(() => {
      this.updateSupplierList(); //atualiza a lista
      this.poNotification.success('o Fornecedor foi excluido com sucesso');
    }
    , err => this.poNotification.error(err)); //exibe erro 
  }
  constructor(private SupplierListService: SupplierListService,
    private router: Router,
    private poNotification: PoNotificationService) { }

  ngOnInit(): void {
    this.updateSupplierList(); //busca a lista de fornecedores do nosso Api
    this.colunasTable = this.SupplierListService.getColumns(); //atualiza as colunas que queremos ser listadas em nossa tabela.
  }
  //Metódo responsável por se isncrever no serviço e atualizar a lista de fornecedores
  updateSupplierList(): void {
    this.SupplierListService.getSupplierList().subscribe(response => {
      this.supplierList = response.items;
    });
  }
}

Foram incluídos:

• Nova variável chamada actions com as ações que desejamos em nossa lista.
• Novos métodos
  • updateSupplier, será responsável por atualizar um fornecedor (opção de editar).
  • deleteSupplier, será responsável por deletar um fornecedor.

Agora devemos ajustar o arquivo supplier-list.service.ts e incluir o método responsável por enviar para nossa API a requisição de exclusão, o arquivo final deve ficar como o código abaixo:

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { PoTableColumn } from '@po-ui/ng-components';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SupplierListService {

  ApiRest = 'http://localhost:8084/rest/api/crm/v1/customerVendor'; //Endereço da nossa API responsável por lista os fornecedores
  
  constructor(private http: HttpClient) { }

  //Método responsável por buscar e listar nossos fornecedores
  getSupplierList(): Observable<any> {
    return this.http.get(this.ApiRest + `/2`); //supplier
  }

  
  //Método para remover Fornecedor
  deleteSupplier(Id: string, type: string = '2') {
    return this.http.delete(this.ApiRest + `/${type}/${Id}`);
  }


  //Método responsável por converter em nomes mais legiveis para usuário
  getColumns(): Array<PoTableColumn> {
    return [
      { property: 'code', label: 'Código'},
      { property: 'storeId', label: 'Loja' },
      { property: 'name', label: 'Nome' },
      { property: 'strategicCustomerType', label: 'Fisica/Juridica' ,
        type: 'label', //part3 add 
        labels: [
          { value: 'F',color: 'color-08', label: 'Física' },
          { value: 'J', color: 'color-12',label: 'Juridica' }
        ] },
      { property: 'registerSituation', label: 'Situação' ,
      type: 'label', //part3 add 
      labels: [
        { value: '1', color: 'color-07', label: 'Inativo' },
        { value: '2', color: 'color-11', label: 'Ativo' },
        { value: '3', color: 'color-09', label: 'Cancelado' },
        { value: '4', color: 'color-12', label: 'Pendente' },
        { value: '5', color: 'color-08', label: 'Suspenso' }
      ]  },
    ];
  }
}

E para finalizar a opção de excluir, vamos alterar o arquivo supplier-list.component.html e no component po-table adicionar as nossas ações, o arquivo final deve ficar como o código abaixo:

<po-page-default p-title="Lista de Fornecedores">
    <po-table
      p-container="light"
      [p-columns]="colunasTable"
      [p-items]="supplierList"
      [p-actions]="actions"><!--  adicionado part 3 -->
    </po-table>
  </po-page-default>

Para finalizarmos nossa série e fazer a edição de um registro, vamos precisar primeiramente incluir uma nova rota (vamos reutilizar o mesmo form de inclusão mas agora vamos receber na URL o código + loja do fornecedor, para isso no arquivo app-routing.module.ts, vamos criar uma nova rota que receberá 2 parâmetros, um o ID do nosso fornecedor e outro para o tipo (nosso caso será sempre 2 = fornecedor, mas poderíamos editar facilmente um cliente por exemplo), o arquivo final deve ficar como o código abaixo:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SupplierListComponent } from './supplier-list/supplier-list.component';
import { SupplierFormComponent } from './supplier-form/supplier-form.component';
const routes: Routes = [
  { path: '', component: SupplierListComponent },
  { path: 'supplier', component: SupplierListComponent }, //lista de fornecedor
  { path: 'supplierform', component: SupplierFormComponent }, //form do fornecedor - Incluir
  { path: 'supplierform/:id/:type', component: SupplierFormComponent }, //form do fornecedor - Editar
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Alteraremos também o arquivo supplier-form.component.ts, nele vamos precisar:
No ngOninit, vamos verificar se em nossa URL temos os parametros ID e Tipo (criados na nossa rota) se encontrar significa que estamos editando um fornecedor e nesse caso vamos carregar os dados do fornecedor e mudar o titulo da página.
Vamos criar a ação no novo botão “atualizar” para confirmar alterações em um forncedor (esse botão será criado no HTML do form, logo abaixo).

O arquivo supplier-form.component.ts deve ficar como o código abaixo:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { PoDynamicFormField, PoNotificationService } from '@po-ui/ng-components';
import { Supplier } from '../model/supplierModel';
import { SupplierFormService } from './supplier-form.service';
import { first } from 'rxjs/operators';

@Component({
  selector: 'app-supplier-form',
  templateUrl: './supplier-form.component.html',
  styleUrls: ['./supplier-form.component.css']
})
export class SupplierFormComponent implements OnInit {

  //fields: Array<PoDynamicFormField> = []; //campos "dinamicos" para usar no formulário
  supplier: Supplier = new Supplier();//model de um fornecedor
  supplierValues = {    type: 2, code: "", storeId: "", shortName: "", name: "", strategicCustomerType: "J", entityType: "J",
  number: "", address: "", zipCode: "", stateId: "", stateInternalId: "", registerSituation: "1",
  stateDescription: "", complement: "", district: "", cityCode: "", cityDescription: ""}; //array com os valores do fomulário
  supplierType: string | any = '2'; //no nosso exemplo será sempre 2=fornecedor, mas poderia ser 1=cliente
  supplierId: string | any;
  title = 'Inclusão de Fornecedor';

  constructor(private supplierFormService: SupplierFormService, //servico do form
    private poNotification: PoNotificationService, //usar as notificações do PO.UI
    private route: ActivatedRoute,
    private router: Router,
  ) { }

  ngOnInit(): void {
    //define valores padrão para formulário
    this.supplierValues = {
      type: 2, code: "", storeId: "", shortName: "", name: "", strategicCustomerType: "J", entityType: "J",
      number: "", address: "", zipCode: "", stateId: "", stateInternalId: "",registerSituation: "1",
      stateDescription: "", complement: "", district: "", cityCode: "", cityDescription: ""
    }
    this.route.paramMap.subscribe(parameters => {
      this.supplierId = parameters.get('id');
      this.supplierType = parameters.get('type');
    });

    if (this.supplierId) { //se tem o ID na URL, significa alteração
      this.title = 'Alteração de Fornecedor';
      this.setFormValue(); //atribui os valores do API para o formulário
    }
  }

  //Método para inserir um novo fornecedor
  insertSupplier(): void {
    this.getSupplierFromForm();
    this.supplierFormService.postNewSupplier(JSON.stringify(this.supplier)) //grava o novo fornecedor
      .pipe(first())
      .subscribe(() => {
        this.poNotification.success('Fornecedor foi inserido com Sucesso');
        this.router.navigate(['/supplier']); //redireciona para lista de fornecedor
      }, err => {
        //se error devolve o erro do Backend para o usuário
        let messErr = JSON.parse(err.error.errorMessage);
        this.poNotification.error(`Erro código ${messErr.code},  ${decodeURIComponent(escape(messErr.message))}, detalhe: ${decodeURIComponent(escape(messErr.detailedMessage))}.`)
      }
        
        ); //exibe erro ao inserir fornecedor
  }

   //alimenta o modelo de dados
  private getSupplierFromForm(): void {
    // dados pessoais
    this.supplier.code = this.supplierValues.code;
    this.supplier.storeId = this.supplierValues.storeId;
    this.supplier.name = this.supplierValues.name;
    this.supplier.shortName = this.supplierValues.shortName;
    this.supplier.strategicCustomerType = this.supplierValues.strategicCustomerType;
    this.supplier.entityType = this.supplierValues.entityType;
    this.supplier.type = this.supplierValues.type;
    this.supplier.registerSituation = this.supplierValues.registerSituation;

    // Endereço
    this.supplier.address.address = this.supplierValues.address;
    this.supplier.address.city.cityCode = this.supplierValues.cityCode;
    this.supplier.address.city.cityDescription = this.supplierValues.cityCode;
    this.supplier.address.city.cityInternalId = this.supplierValues.cityCode;
    this.supplier.address.state.stateId = this.supplierValues.stateId;
    this.supplier.address.state.stateInternalId = this.supplierValues.stateId;



  }

  //part 3
  //Método para editar um fornecedor
  updateSupplier(): void {
    this.getSupplierFromForm(); //seta no modelo fornecedor os valores do Formulário para então enviar para API
    this.supplierFormService
      .putSupplier(this.supplier.code + this.supplier.storeId, JSON.stringify(this.supplier), this.supplierType)
      .pipe(first())
      .subscribe(() => {
        this.poNotification.success('Fornecedor alterado com Sucesso');
        this.router.navigate(['/supplier']);//redireciona para lista de fornecedor
      }, err => this.poNotification.error(err));//exibe erro ao editar fornecedor
  }


  //part 3
  //Método para atribuir valores aos campos para formulário
  private setFormValue(): void {
    this.supplierFormService
      .getSupplier(this.supplierId, this.supplierType)
      .pipe(first())
      .subscribe((supplier:Supplier) => {
        console.log(supplier);
        this.supplierValues.code = supplier.code;
        this.supplierValues.storeId = supplier.storeId;
        this.supplierValues.name = supplier.name;
        this.supplierValues.shortName = supplier.shortName;
        this.supplierValues.strategicCustomerType = supplier.strategicCustomerType;
        this.supplierValues.entityType = supplier.strategicCustomerType;
        this.supplierValues.type = supplier.type;
        this.supplierValues.registerSituation = supplier.registerSituation;
        // Endereço
        this.supplierValues.address = supplier.address.address;
        this.supplierValues.cityCode = supplier.address.city.cityCode;
        this.supplierValues.cityCode = supplier.address.city.cityDescription;
        this.supplierValues.cityCode = supplier.address.city.cityInternalId;
        this.supplierValues.stateId = supplier.address.state.stateId;
        this.supplierValues.stateId = supplier.address.state.stateInternalId;

      });

  }



  //array para definir os nomes dos campos do formulário
  fields: Array<PoDynamicFormField> = [
    {
      property: 'code',
      label: 'Código',
      divider: 'Dados Pessoais',
      maxLength: 6
    },
    {
      property: 'storeId',
      label: 'Loja',
      maxLength: 2
    },
    {
      property: 'name',
      label: 'Nome',
      maxLength: 40
    },
    {
      property: 'shortName',
      label: 'Nome Reduzido',
      maxLength: 20
    },
    {
      property: 'strategicCustomerType',
      label: 'Tipo do cliente',
      options: [
        { label: 'Cons. Final', value: 'F' },
        { label: 'Produtor Rural', value: 'L' },
        { label: 'Revendedor', value: 'R' },
        { label: 'Solidario', value: 'S' },
        { label: 'Exportação', value: 'X' }
      ]
    },
    {
      property: 'entityType',
      label: 'Tipo da entidade',
      options: [
        { label: 'Juridica', value: 'J' },
        { label: 'Fisica', value: 'F' }
      ]
    },
    {
      property: 'registerSituation', //Campo: A1_MSBLQL / A2_MSBLQL  == Status: 1 - Ativo, 2 - Inativo, 3 - Cancelado, 4 - Pendente, 5 -Suspenso
      label: 'Situação(MSBLQL)',
      options: [
        { label: 'Inativo', value: '1' },
        { label: 'Ativo', value: '2' }
      ]
    },
    {
      property: 'type',
      label: 'Tipo',
      options: [
        { label: 'Cliente', value: 1 },
        { label: 'Fornecedor', value: 2 }
      ]
    },
    {
      property: 'zipCode',
      label: 'CEP',
      divider: 'Endereço',
      maxLength: 9
    },
    {
      property: 'address',
      label: 'Endereço'
    },
    {
      property: 'cityCode',
      label: 'Cidade',
      options: [
        { label: 'Adolfo', value: '00204' },
        { label: 'São José do Rio Preto', value: '49805' },
        { label: 'José Bonifácio', value: '25706' },
        { label: 'Joinville', value: '09102' }
      ]
    },
    {
      property: 'stateId',
      label: 'Estado',
      options: [
        { label: 'Santa Catarina', value: 'SC' },
        { label: 'São Paulo', value: 'SP' },
        { label: 'Rio de Janeiro', value: 'RJ' },
        { label: 'Minas Gerais', value: 'MG' }
      ]
    },
    /*{
      property: 'branchId',
      label: 'Filial',
      divider: 'Sistemico'
    },
    {
      property: 'companyInternalId',
      label: 'Empresa'
    }*/
  ]
}

Agora a ultima etapa é ajustar o html que irá exibir os dados do nosso formulário para o usuário, para isso, edite o arquivo supplier-form.component.html, nele temos dois botões que serão exibidos em momentos diferentes, um para inclusão (action insertSupplier) e outro para alteração(updateSupplier), o que controlará quando cada um deve aparecer é a variavel no *ngIf, e deixe com a seguinte informação:

<po-page-default [p-title]="title">
  <po-dynamic-form #dynamicForm [p-fields]="fields" [p-value]="supplierValues">
  </po-dynamic-form>

  <div class="thf-row">
    <po-button class="thf-md-3" 
    *ngIf="!this.supplierId" 
    p-label="Inserir" 
    (p-click)="insertSupplier()">
    </po-button>
  </div>

  <po-button 
    *ngIf="this.supplierId" 
    class="thf-md-3" 
    p-label="Atualizar Fornecedor" 
    (p-click)="updateSupplier()">
  </po-button>
</po-page-default>

Após todas essas etapas, ao acessar o endereço http://localhost:4200/supplier, deve ser exibida a lista de fornecedores, se clicarmos nas ações e em excluir, o mesmo deve ser removido e a lista carregada, se selecionarmos a opção editar, o formulário deve ser aberto com os dados preenchidos, o resultado final da lista será semelhante ao print abaixo:

O código fonte desse e de outros exemplos podem ser encontrados em nosso git oficial.

Post interessantes:

Aprenda a instalar o Protheus no Windows aqui.

Aprenda a instalar o Protheus no Linux aqui.

configurar serviço rest aqui.

Retornar datas por extenso aqui.

Barras de progresso aqui.

Dúvidas e sugestões, entre em contato.

Obrigado e até a próxima!

O post CRUD Fornecedor usando PO.UI(Angular) e ERP Protheus – part 3 apareceu primeiro em Sem Preju.

No post anterior(veja aqui), configuramos nosso ambiente e criamos a listagem de fornecedores, vamos agora continuar com os próximos passos. Vamos agora criar a rotina para cadastrar um novo fornecedor, para isso vamos usar a mesma API mas o verbo agora será POST ao invés de GET. Vamos primeiro testar nossa API e consultar se nosso backend está funcionando corretamente (essa etapa é opcional), para isso vamos usar novamente o Postman.

Desta vez usaremos o verbo post a url apontando para nossa API e o Body da requisição será um arquivo do tipo JSON com os dados do fornecedor que queremos incluir, como no print abaixo.

 {            
    "type": 2,
    "code": "805539",
    "storeId": "01",    
    "shortName": "FORN 1              ",
    "name": "FORNECEDOR 99                           "   ,
    "strategicCustomerType": "J",
    "entityType":"J",
    "address": {
                "address": "RUA SEMPREJU                            ",
                "state": {
                    "stateId": "SP",
                    "stateInternalId": "SP"
                },
                "city": {
                    "cityCode": "00204"
                }
            }
}       

A resposta deverá ser um arquivo JSON com todos os dados no nosso fornecedor, se tudo ocorreu corretamente aqui, vamos começar a tratar nosso frontend para usar a mesma API.

Criando Formulário para Inclusão do Fornecedor

A Primeira etapa do FrontEnd será criar o módulo, o serviço e o componente que iremos trabalhar, vamos executar os seguintes comandos(um de cada vez):

ng generate module supplier-form

ng generate service supplier-form\supplier-form

ng generate component supplier-form

Após isso deverá ter sido criada em seu projeto uma estrutura parecida com a imagem abaixo.

Antes de iniciarmos a codificação do nosso service e compomente, vamos criar alguns models para refletir o formato da entidade na TOTVS(Entidade Fornecedor retornada pelo WS, criamos somente os campos que vamos usar aqui no WS o correto seria criar a entidade toda). Para isso criamos uma pasta em nosso projeto chama model, e dentro dela os arquivos abaixo:

supplierModel.ts

import { Address } from './addressModel';

export class Supplier {
    companyInternalId: string;
    code: string ;
    name: string;
    storeId: string ;
    shortName: string;
    strategicCustomerType: string;
    registerSituation: string;
    type: number;
    entityType: string;
    address: Address = new Address();
    constructor(obj = {}) {
        Object.assign(this, obj);
    }
}

addressModel.ts

import { State } from './stateModel';
import { City } from './cityModel';

export class Address {
  address: string ;
  number: string ;
  zipCode: string ;
  complement: string ;
  district: string ;
  city: City = new City();
  state: State = new State();
  constructor(obj = {}) {
    Object.assign(this, obj);
}
}
 

cityModel.ts

export class City {
    cityCode: string ;
    cityInternalId: string ;
    cityDescription: string ;
    constructor(obj = {}) {
        Object.assign(this, obj);
    }
  }
 

stateModel.ts

export class State {
    stateId: string ;
    stateInternalId: string ;
    stateDescription: string ;
    constructor(obj = {}) {
        Object.assign(this, obj);
    }
  }
 

O resultado final deverá ser uma para como o print abaixo:

Criaremos a seguir a rota para o nosso novo componente, para isso edite o arquivo app-routing.module.ts e adicione as informações do novo componente, abaixo o resultado deve ser semelhante ao fonte abaixo:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


import { SupplierListComponent } from './supplier-list/supplier-list.component';
import { SupplierFormComponent } from './supplier-form/supplier-form.component';

const routes: Routes = [
  { path: '', component: SupplierListComponent },
  { path: 'supplier', component: SupplierListComponent }, //lista de fornecedor
  { path: 'supplierform', component: SupplierFormComponent }, //form do fornecedor - inlcuir
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Agora só falta incluirmos nosso novo componente dentro do arquivo app.module.ts para podermos iniciar a codificação do formulário, o resultado final será semelhante ao código abaixo:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PoModule } from '@po-ui/ng-components';
import { RouterModule } from '@angular/router';
import { PoNotificationModule  } from '@po-ui/ng-components';
import { PoDynamicModule } from '@po-ui/ng-components';
import { PoButtonModule } from '@po-ui/ng-components';
import {PoTemplatesModule  } from '@po-ui/ng-templates';

//incluir o componente para lista de fornecedores
import { SupplierListComponent } from './supplier-list/supplier-list.component';
import { SupplierFormComponent } from './supplier-form/supplier-form.component'; //formulario de inclusão/alteração

@NgModule({
  declarations: [
    AppComponent,SupplierListComponent,SupplierFormComponent
  ],
  imports: [
    PoNotificationModule,PoDynamicModule,PoButtonModule  ,PoTemplatesModule,
    BrowserModule,
    AppRoutingModule,
    PoModule,
    RouterModule.forRoot([])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

No arquivo supplier-form.service.ts vamos criar o serviço responsável por enviar para nossa API os dados de um novo fornecedor para ser registrado, por agora esse aquivo é bem simples e somente realizar um post na API, abaixo o fonte que usamos(atenção para o endereço do seu backend):

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';

import { Supplier } from '../model/supplierModel';

@Injectable({
  providedIn: 'root'
})
export class SupplierFormService {

 //Endereço de nosso backend
  ApiRest = 'http://localhost:8084/rest/api/crm/v1/customerVendor';
  
  constructor(private http: HttpClient) { }
  
  //Metódo para criar um novo Fornecedor
  postNewSupplier(body: string) {
    return this.http.post(this.ApiRest, body );
  }

}

No arquivo supplier-form.component.ts vamos criar o nosso tratamento do formulário, vamos usar o componente do PO.UI chamado po-dynami-form  que facilita bastante a criação de formulário, no nosso componente vamos definir as colunas do formulário através do array fields , o método getSupplierFromForm, será responsável de pegar as informações no form e incluir no modelo “Supplier” (json esperado pela nossa API), e o método insertSupplier, será o reponsavel de chamar nosso serviço de post na API e apresetar mensagem de sucesso (em caso de sucesso, vamos redirecionar o usuári para nossa lista de fornecedores) ou falha, o código final deverá ser semelhante ao fonte abaixo:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { PoDynamicFormField, PoNotificationService } from '@po-ui/ng-components';
import { Supplier } from '../model/supplierModel';
import { SupplierFormService } from './supplier-form.service';
import { first } from 'rxjs/operators';

@Component({
  selector: 'app-supplier-form',
  templateUrl: './supplier-form.component.html',
  styleUrls: ['./supplier-form.component.css']
})
export class SupplierFormComponent implements OnInit {

  //fields: Array<PoDynamicFormField> = []; //campos "dinamicos" para usar no formulário
  supplier: Supplier = new Supplier();//model de um fornecedor
  supplierValues = {    type: 2, code: "", storeId: "", shortName: "", name: "", strategicCustomerType: "J", entityType: "J",
  number: "", address: "", zipCode: "", stateId: "", stateInternalId: "",
  stateDescription: "", complement: "", district: "", cityCode: "", cityDescription: ""}; //array com os valores do fomulário
  supplierType: string | any = '2'; //no nosso exemplo será sempre 2=fornecedor, mas poderia ser 1=cliente
  supplierId: string | any;
  title = 'Inclusão de Fornecedor';

  constructor(private supplierFormService: SupplierFormService, //servico do form
    private poNotification: PoNotificationService, //usar as notificações do PO.UI
    private route: ActivatedRoute,
    private router: Router,
  ) { }

  ngOnInit(): void {
    //define valores padrão para formulário
    this.supplierValues = {
      type: 2, code: "", storeId: "", shortName: "", name: "", strategicCustomerType: "J", entityType: "J",
      number: "", address: "", zipCode: "", stateId: "", stateInternalId: "",
      stateDescription: "", complement: "", district: "", cityCode: "", cityDescription: ""
    }
  }

  //Método para inserir um novo fornecedor
  insertSupplier(): void {
    this.getSupplierFromForm();
    this.supplierFormService.postNewSupplier(JSON.stringify(this.supplier)) //grava o novo fornecedor
      .pipe(first())
      .subscribe(() => {
        this.poNotification.success('Fornecedor foi inserido com Sucesso');
        this.router.navigate(['/supplier']); //redireciona para lista de fornecedor
      }, err => {
        //se error devolve o erro do Backend para o usuário
        let messErr = JSON.parse(err.error.errorMessage);
        this.poNotification.error(`Erro código ${messErr.code},  ${decodeURIComponent(escape(messErr.message))}, detalhe: ${decodeURIComponent(escape(messErr.detailedMessage))}.`)
      }
        
        ); //exibe erro ao inserir fornecedor
  }
  //alimenta o modelo de dados
  private getSupplierFromForm(): void {
    // dados pessoais
    this.supplier.code = this.supplierValues.code;
    this.supplier.storeId = this.supplierValues.storeId;
    this.supplier.name = this.supplierValues.name;
    this.supplier.shortName = this.supplierValues.shortName;
    this.supplier.strategicCustomerType = this.supplierValues.strategicCustomerType;
    this.supplier.entityType = this.supplierValues.entityType;
    this.supplier.type = this.supplierValues.type;
    // sistemicos
   // this.supplier.branchId = this.supplierValues.branchId;
   // this.supplier.companyInternalId = this.supplierValues.companyInternalId;
    // Endereço
    this.supplier.address.address = this.supplierValues.address;
    this.supplier.address.city.cityCode = this.supplierValues.cityCode;
    this.supplier.address.city.cityDescription = this.supplierValues.cityCode;
    this.supplier.address.city.cityInternalId = this.supplierValues.cityCode;
    this.supplier.address.state.stateId = this.supplierValues.stateId;
    this.supplier.address.state.stateInternalId = this.supplierValues.stateId;
  }

  //array para definir os nomes dos campos do formulário
  fields: Array<PoDynamicFormField> = [
    {
      property: 'code',
      label: 'Código',
      divider: 'Dados Pessoais',
      maxLength: 6
    },
    {
      property: 'storeId',
      label: 'Loja',
      maxLength: 2
    },
    {
      property: 'name',
      label: 'Nome',
      maxLength: 40
    },
    {
      property: 'shortName',
      label: 'Nome Reduzido',
      maxLength: 20
    },
    {
      property: 'strategicCustomerType',
      label: 'Tipo do cliente',
      options: [
        { label: 'Cons. Final', value: 'F' },
        { label: 'Produtor Rural', value: 'L' },
        { label: 'Revendedor', value: 'R' },
        { label: 'Solidario', value: 'S' },
        { label: 'Exportação', value: 'X' }
      ]
    },
    {
      property: 'entityType',
      label: 'Tipo da entidade',
      options: [
        { label: 'Juridica', value: 'J' },
        { label: 'Fisica', value: 'F' }
      ]
    },
    {
      property: 'registerSituation',
      label: 'Situação',
      options: [
        { label: 'Inativo', value: '1' },
        { label: 'Ativo', value: '2' }
      ]
    },
    {
      property: 'type',
      label: 'Tipo',
      options: [
        { label: 'Cliente', value: 1 },
        { label: 'Fornecedor', value: 2 }
      ]
    },
    {
      property: 'zipCode',
      label: 'CEP',
      divider: 'Endereço',
      maxLength: 9
    },
    {
      property: 'address',
      label: 'Endereço'
    },
    {
      property: 'cityCode',
      label: 'Cidade',
      options: [
        { label: 'Adolfo', value: '00204' },
        { label: 'São José do Rio Preto', value: '49805' },
        { label: 'José Bonifácio', value: '25706' },
        { label: 'Joinville', value: '09102' }
      ]
    },
    {
      property: 'stateId',
      label: 'Estado',
      options: [
        { label: 'Santa Catarina', value: 'SC' },
        { label: 'São Paulo', value: 'SP' },
        { label: 'Rio de Janeiro', value: 'RJ' },
        { label: 'Minas Gerais', value: 'MG' }
      ]
    },
    /*{
      property: 'branchId',
      label: 'Filial',
      divider: 'Sistemico'
    },
    {
      property: 'companyInternalId',
      label: 'Empresa'
    }*/
  ]
}

Agora a ultima etapa é ajustar o html que irá exibir os dados do nosso formulário para o usuário, para isso, edite o arquivo supplier-form.component.html, e deixe com a seguinte informação:

<po-page-default [p-title]="title">
    <po-dynamic-form #dynamicForm
    [p-fields]="fields"
    [p-value]="supplierValues">
    </po-dynamic-form>

    <div class="thf-row">
        <po-button
          class="thf-md-3"
          *ngIf="!this.supplierId"
          p-label="Inserir"
          (p-click)="insertSupplier()">
        </po-button>
    </div>
</po-page-default>

Após todas essas etapas, ao acessar o endereço http://localhost:4200/supplierform, deve ser exibida o form permitindo a inclusão em nosso backend e exibindo os erros encontrados se existirem, o resultado final será semelhante ao print abaixo:

O código fonte desse e de outros exemplos podem ser encontrados em nosso git oficial.

Post interessantes:

Aprenda a instalar o Protheus no Windows aqui.

Aprenda a instalar o Protheus no Linux aqui.

configurar serviço rest aqui.

Retornar datas por extenso aqui.

Barras de progresso aqui.

Dúvidas e sugestões, entre em contato.

Obrigado e até a próxima!

O post CRUD Fornecedor usando PO.UI(Angular) e ERP Protheus – part 2 apareceu primeiro em Sem Preju.

Hoje vou iniciar uma série onde vamos demonstrar como realizar manutenção no cadastro de fornecedor (CRUD) usando o REST e a Angular (com PO.UI).

Usamos como referência o seguinte post.

Primeiro vamos realizar as configurações necessárias para nosso projeto, nessa etapa vamos precisar:

1. Serviço REST configurado e rodando, para isso temos um post onde explicamos essa configuração, pode ser encontrado aqui. Caso queira criar um WS (não precisamos para este post) pode ser encontrado aqui.
2. Criar novo projeto angular, para isso precisamos dos seguintes passos:
   1. Node.js – Responsável por administrar os pacotes NPM para a instalação do Angular em batch (linha de comando). Para assegurar que a instalação ocorreu bem, no Prompt de Comando rode o seguinte comando npm -v, deverá aparecer a versão que foi instalada do npm (administrador de pacotes do Node.js).
   2. Instalar Angular CLI – Responsável por nos ajudar a iniciar um projeto ou adicionar novas funcionalidades a projetos existentes. Para isso basta rodar no Prompt de Comando: npm install –g @angular/cli
   3. Projeto Angular – Executar o comando CLI ng new e informar o nome do nosso projeto, no nosso exemplo usaremos o seguinte: ng new CRUD_Cliente
   4. Adicionar o PO.UI (Biblioteca de componentes baseado no Angular, poderiamos utilizar qualquer outra biblioteca como Ant, Material, Bootstrap, entre outras), Utilizando o comando ng add do Angular CLI, vamos adicionar o Po em seu projeto e o mesmo se encarregará de configurar o tema, instalar o pacote e importar o módulo do Po. Execute o comando abaixo na pasta raiz do seu projeto(dentro da pasta do nosso projeto CRUD_CLiente):  ng add @po-ui/ng-components.
   5. Agora podemos testar nosso aplicativo angular para isso no Prompt de Comando, digite: ng serve (pode demorar alguns minutos na primeira execução), após acesso em seu navegador http://localhost:4200/ você deverá ver a página de boas vindas do angular.
   6. Instalar Postman – O postman nos ajuda a realizar a consulta na API do protheus sem necessidade de desenvolver nenhum código.

Agora que temos os requisitos configurados, precisamos encontrar a API que será responsável para este nosso CRUD. No site o api.totvs.com.br, podemos ver todas as API disponíveis e realizar filtros para localizarmos a que nos interessa mais, em nosso caso encontramos a API Cliente/Fornecedor.

Vamos agora começar a nossa aplicação Angular para nosso CRUD, primeiramente vamos listar todos os nossos fornecedores que existe no ERP (usando a API).

Para testar nosso backend antes de usa-lo no angular, vamos abrir o postman e verificar se a API está respondendo corretamente (esse passo é opcional, eu gosto sempre de isolar pois assim tenho certeza que meu backend esta funcionado e se tiver algum problema é em meu frontend). Para isso no postman, informe a URL onde seu serviço REST esta respondendo, para minha configuração é:

http://localhost:8084/rest/api/crm/v1/customerVendor/2

Deverá ser exibido como resposta no formato Json com os dados dos nossos fornecedores, confirme o print abaixo.

O ultimo parâmetro da url significa:

• Valor 2, diz para minha API que eu quero somente os fornecedores,;
• Valor 1, diz para minha API que eu quero somente os clientes; 
• Valor 3 ou vazio, diz para minha API que eu quero todos os clientes e fornecedores.

para isso vamos para o Angular (aqui usaremos o VS Code) e usando as facilidades do angular CLI, vamos criar um novo módulo que será responsável por essa tarefa, para isso dentro no nosso projeto usando o Prompt de Command, vamos executar os seguintes comandos(um de cada vez):

ng generate module supplier-list

ng generate service supplier-list\supplier-list

ng generate component supplier-list

 

Após isso deverá ter sido criada em seu projeto uma estrutura parecida com a imagem abaixo.

Após a criação das rotinas, criaremos o serviço de listagem de fornecedores. Para isso, podemos acessar o arquivo supplier-list.service.ts e vamos criar o método que irá buscar estas informações no backend.

Também criei dentro do service um método para alterar e definir os nomes das colunas, o arquivo supplier-list.service.ts deverá ter o seguinte conteúdo:

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { PoTableColumn } from '@po-ui/ng-components';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SupplierListService {

  ApiRest = 'http://localhost:8084/rest/api/crm/v1/customerVendor/2'; //Endereço da nossa API responsável por lista os fornecedores
  
  constructor(private http: HttpClient) { }

  //Método responsável por buscar e listar nossos fornecedores
  getSupplierList(): Observable<any> {
    return this.http.get(this.ApiRest);
  }

  //Método responsável por converter em nomes mais legiveis para cliente
  getColumns(): Array<PoTableColumn> {
    return [
      { property: 'code', label: 'Código'},
      { property: 'storeId', label: 'Loja' },
      { property: 'name', label: 'Nome' },
      { property: 'strategicCustomerType', label: 'Fisica/Juridica' },
      { property: 'registerSituation', label: 'Situação' },
    ];
  }

}

Agora que temos o serviço responsável por buscar os dados na API, vamos configurar nosso component para pegar utilizar os dados recebidos no servido e disponibilizar para nossa interface, no arquivo suppliur-list.components.ts, deverá ter a seguinte informação:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { PoNotificationService } from '@po-ui/ng-components';
import { SupplierListService } from './supplier-list.service';

@Component({
  selector: 'app-supplier-list',
  templateUrl: './supplier-list.component.html',
  styleUrls: ['./supplier-list.component.css']
})
export class SupplierListComponent implements OnInit {

  supplierList: Array<any> = new Array();
  colunasTable: Array<any> = new Array();

  constructor(private SupplierListService: SupplierListService,
    private router: Router,
    private poNotification: PoNotificationService) { }

  ngOnInit(): void {
    this.updateSupplierList(); //busca a lista de fornecedores do nosso Api
    this.colunasTable = this.SupplierListService.getColumns(); //atualiza as colunas que queremos ser listadas em nossa tabela.
  }
  //Metódo responsável por se isncrever no serviço e atualizar a lista de fornecedores
  updateSupplierList(): void {
    this.SupplierListService.getSupplierList().subscribe(response => {
      this.supplierList = response.items;
    });
  }
}

Agora devemos ajustar o html que irá exibir os dados para o usuário, para isso, edite o arquivo supplier-list.component.html, inclua a deixe com a seguinte informação:

<po-page-default p-title="Lista de Fornecedores">
    <po-table
      p-container="light"
      [p-columns]="colunasTable"
      [p-items]="supplierList">
    </po-table>
  </po-page-default>

Após essas etapas, só precisamos criar a rota no angular responsável por mostrar nosso html, para isso edite o arquivo app-routing.modules.ts e inclua as informações do nosso novo componente, como o código abaixo:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


import { SupplierListComponent } from './supplier-list/supplier-list.component';

const routes: Routes = [
  { path: '', component: SupplierListComponent },
  { path: 'supplier', component: SupplierListComponent }, //lista de fornecedor
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Devemos ainda verificar o arquivo app.component.html para garantir que está exibindo as informações da nossa roda, esse arquivo deve ter o seguinte conteúdo:

<div class="container">
  <router-outlet></router-outlet>
</div>

Agora só falta incluírmos nosso novo componente dentro do arquivo app.module.ts, o resultado final será semelhante ao código abaixo:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PoModule } from '@po-ui/ng-components';
import { RouterModule } from '@angular/router';
import { PoNotificationModule  } from '@po-ui/ng-components';
import { PoDynamicModule } from '@po-ui/ng-components';
import { PoButtonModule } from '@po-ui/ng-components';
import {PoTemplatesModule  } from '@po-ui/ng-templates';

//incluir o componente para lista de fornecedores
import { SupplierListComponent } from './supplier-list/supplier-list.component';

@NgModule({
  declarations: [
    AppComponent,SupplierListComponent
  ],
  imports: [
    PoNotificationModule,PoDynamicModule,PoButtonModule  ,PoTemplatesModule,
    BrowserModule,
    AppRoutingModule,
    PoModule,
    RouterModule.forRoot([])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Após todas essas etapas, ao acessar o endereço http://localhost:4200/, deve ser exibida a lista de Fornecedores que temos em nosso ERP.

*Obs.: caso tenha erro de CORS, veja mais aqui.

O código fonte de outros exemplos podem ser encontrados em nosso git oficial.

Post interessantes:

Aprenda a instalar o Protheus no Windows aqui.

Aprenda a instalar o Protheus no Linux aqui.

configurar serviço rest aqui.

Retornar datas por extenso aqui.

Barras de progresso aqui.

Dúvidas e sugestões, entre em contato.

Obrigado e até a próxima!

O post CRUD Fornecedor usando PO.UI(Angular) e ERP Protheus – part 1 apareceu primeiro em Sem Preju.

O CEP no Brasil é dividido em faixas (aqui tem ais detalhe sobre isso) são elas:

Hoje vou postar uma rotina para consultar o cep nos sites do correios feita em Node.js.

Criamos um repositório no git somente para este projeto, onde você pode encontrar o código fonte e sua utilização é muito simples, descrita no readme  no próprio repositório.

caso encontre melhorias na rotina, nos envie seu merge request!

O código fonte de outros exemplos podem ser encontrados em nosso git oficial.

Post interessantes:

Aprenda a instalar o Protheus no Windows aqui.

Aprenda a instalar o Protheus no Linux aqui.

Retornar datas por extenso aqui.

Barras de progresso aqui.

Dúvidas e sugestões, entre em contato.

Obrigado e até a próxima!

O post Consultar CEP nos correios – Node.js apareceu primeiro em Sem Preju.