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.

Essa dica vai para quem está iniciando no desenvolvimento Angular e quer realizar o login usando o protheus como backEnd!

Nesse exemplo vamos usar a autenticação via JWT (usando os serviçoes já existentes no protheus), para saber mais sobre JWT no protheus, acesse a documentação aqui.

A documentação oficial da rotina pode ser encontrada aqui.

O exemplo funcional pode ser baixado em nosso git, clique aqui para ser direcionado.

Para executar esse projeto, temos que executar os passos abaixos:

1-Configurar o serviço REST no protheus, aqui tem um exemlo de como fazer isso.

2-Com o nosso serviço REST configurado e validado, conseguimos realizar a autentição de nosso usuário, então agora passamos para o angula, não itemos entrar em detalhes como criar um projeto angular com JWT, pois não é o foco desse post, mas um bom exemplo pode ser encontrado aqui. Nesse post vamos baixar o nosso projeto disponivel no GIT.

3-Assumiremos aqui que você tem o Angular e Angular.Cli ja instalado em seu computador.

4-Após baixar o projeto, no diretório raiz vamos instalar as dependencias com o comando:

npm install

5-Após a conclusão, vamos iniciar nosso projeto com o comando:

ng serve

6-Se tudo ocorreu bem até aqui, ao acessar a URL localhost:4200, você se deparará com a tela abaixo para realizar o login usando usuario e senha do protheus.

7-Insira um usuário e senha e aguarde o carregamento, uma lista com todos os clientes do seu ERP protheus deverá ser exibida como o print abaixo.

Nesse etapa o que conseguimos realizar:

-Autenticação de usuário usando o Protheus como BackEnd

-Usar JWT para verificar se nosso usuário ainda é válido na seção

-Consumir WebService REST para retornar a lista de clientes do ERP Protheus.

-Integrar Angular + Protheus

Assim finalizamos nosso objetivo desse post, se você quiser mais conteudos de ADVPL + REST + Angular deixe nos comentários sugestões!

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

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 Autenticação com JWT + Protheus + Angular apareceu primeiro em Sem Preju.