Olá pessoal

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!