fix(dynamic-view): corrigido problema de ordenação dos campos

[bruno-severino]

Corrigido problema de ordenação dos campos do PageDynamicDetail quando passado com um delay de serviço.

< po-dynamic-view >

< DTHFUI-8299 >

---

PR Checklist [Revisor]

• [ ] Padrão de Commit (Coeso, de acordo com o que está sendo realizado)
• [ ] Código (Boas práticas, nome de variavéis/métodos, etc.)
• [ ] Testes unitários (Cobre a situação implementada e coverage está mantido)
• [ ] Documentação (Clara, objetiva e com exemplos caso necessário)
• [ ] Samples (A implementação possui exemplo no Labs/Caso de uso)
• [ ] Rodado em navegadores suportados (Chrome, FireFox, Edge)

Qual o comportamento atual? Quando enviado os campos no po-page-dynamic-detail, sendo alguns via serviço e esse está com delay, a ordenação não esta ocorrendo da forma correta

Qual o novo comportamento? é criado o campo na tela somente com a label e preenchido o valor apos a busca dos dados via serviço, desta forma existe um melhor feedback para o usuário e não quebra a ordenação

Simulação

Código para teste no app de exemplo:

PRECISA BUILDAR ANTES DE TESTAR

app.component.htm

<po-page-default p-title="PO UI">
  <po-page-dynamic-detail
    [p-auto-router]="false"
    [p-fields]="fields"
    [p-service-api]="apiService"
    [p-title]="'Ordenação incorreta dos campos'"
  >
  </po-page-dynamic-detail>
</po-page-default>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  apiService = 'https://run.mocky.io/v3/99d8822e-a486-42a4-bbe0-f24b818c5b8a';

  fields = [
    {
      columns: [
        {
          fieldLabel: false,
          label: 'Cód. Filial',
          property: 'Code'
        },
        {
          fieldLabel: false,
          label: 'Descrição',
          property: 'Description'
        }
      ],
      required: true,
      searchService: 'https://run.mocky.io/v3/14458442-c910-4e61-99e2-3ecb69c7102b',
      format: ['Code', 'Description'],
      fieldValue: 'BranchInternalId',
      property: 'contractorInternalId',
      label: '(1) Contratante'
    },
    {
      quickFilter: true,
      columns: [
        {
          fieldLabel: false,
          label: 'Nome Fantasia/Social',
          property: 'name'
        }
      ],
      required: true,
      searchService: 'https://run.mocky.io/v3/a13e2aea-b367-46fd-a116-97aabbd32469',
      format: ['code', 'name'],
      fieldValue: 'companyInternalId',
      property: 'customerVendorInternalId',
      label: '(2) Contratado',
      componentType: 'Lookup',
      order:2,
      allowColumnsManager: false
    },
    {
      property: 'customerVendorCompanyId',
      label: '(3) Código da Coligada do Cli/For',
      type: 'string',
      componentType: 'Input',
      order:1,
      allowColumnsManager: false,
    },
    {
      required: true,
      format: 'dd/MM/yyyy',
      placeholder: 'dd/mm/yyyy',
      property: 'contractDate',
      label: '(4) Data do Contrato',
      type: 'date',
      componentType: 'DatePicker',
      allowColumnsManager: false,
    }
  ];
}

app.module.ts

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { PoModule } from '../../../ui/src/lib';
import { PoStorageModule } from '../../../storage/src/lib';
import { PoSyncModule } from '../../../sync/src/lib';
import { PoTemplatesModule } from '../../../templates/src/lib';
import { PoCodeEditorModule } from '../../../code-editor/src/lib';
import { InterceptorHttp } from './interceptor';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    RouterModule.forRoot([], {}),

    PoModule,
    PoTemplatesModule,
    PoCodeEditorModule,
    PoStorageModule.forRoot(),
    PoSyncModule
  ],
  bootstrap: [AppComponent],
  providers: [InterceptorHttp]
})
export class AppModule {}

interceptor.ts

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HTTP_INTERCEPTORS } from '@angular/common/http';
import { Observable, timer } from 'rxjs';
import { mergeMap } from 'rxjs/operators';

@Injectable()
export class DelayInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (request.url.includes('https://run.mocky.io/v3/14458442-c910-4e61-99e2-3ecb69c7102b')) {
      return timer(2000).pipe(mergeMap(() => next.handle(request)));
    }
    return next.handle(request);
  }
}

export const InterceptorHttp = [
  {
    provide: HTTP_INTERCEPTORS,
    useClass: DelayInterceptor,
    multi: true
  }
];