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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | { "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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 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
1 2 3 4 5 6 7 8 | export class City { cityCode: string ; cityInternalId: string ; cityDescription: string ; constructor(obj = {}) { Object.assign(this, obj); } } |
stateModel.ts
1 2 3 4 5 6 7 8 9 | 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | 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 fornecedoresimport { 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):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 | 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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!
0 comentário