feat(dynamic-view): ajustes finais de sample e documentação

projects/ui/src/lib/components/po-dynamic/po-dynamic-view/interfaces/po-dynamic-view-request.interface.ts

@@ -1,21 +1,19 @@
 import { Observable } from 'rxjs';
 
 /**
- * @usedBy PoLookupComponent
+ * @usedBy PoDynamicViewComponent
  *
  * @description
  *
- * Define o tipo de busca utilizado no po-lookup.
+ * Define o tipo de busca customizada para um campo em específico.
  */
 export interface PoDynamicViewRequest {
   /**
    * Método responsável por enviar um valor que será buscado no serviço.
    *
-   * Caso a funcionalidade de múltipla seleção estver habilitada, o parametro value será enviado como uma lista de valores
-   * e o observable deve retornar uma lista de objetos.
    *
    * @param {string|Array<any>} value Valor único a ser buscado na fonte de dados.
-   * @param {any} filterParams Valor informado através da propriedade `p-filter-params`.
+   * @param {any} filterParams Valor opcional para informar filtros customizados.
    */
   getObjectByValue(value: string | Array<any>, filterParams?: any): Observable<any>;
 }

projects/ui/src/lib/components/po-dynamic/po-dynamic-view/po-dynamic-view-field.interface.ts

@@ -220,11 +220,13 @@ export interface PoDynamicViewField extends PoDynamicField {
   options?: Array<{ label: string; value: string | number }>;
 
   /**
-   * Define que a propriedade `property` é uma lista ou um objeto.
-   *
-   * > Por padrão, espera-se que a lista ou o objeto esteja com as propriedades `label` e `value`.
-   * Caso estejam com nomes diferentes, deve-se usar as propriedades `fieldLabel` e `fieldValue`.
-   *
+   * Serviço customizado para um campo em específico.
+   * Pode ser ser informada uma URL ou uma instancia do serviço baseado em PoDynamicViewRequest.
+   * **Importante:**
+   * > A propriedade `property` deve receber um valor válido independente de sua utilização para
+   * execução correta.
+   * > Para que funcione corretamente, é importante que o serviço siga o
+   * [guia de API do PO UI](https://po-ui.io/guides/api).
    */
   searchService?: string | PoDynamicViewRequest;
 }

projects/ui/src/lib/components/po-dynamic/po-dynamic-view/po-dynamic-view.component.ts

@@ -25,6 +25,7 @@ import { PoDynamicViewService } from './services/po-dynamic-view.service';
  * <example name="po-dynamic-view-employee-on-load" title="PO Dynamic View - Employee on load">
  *  <file name="sample-po-dynamic-view-employee-on-load/sample-po-dynamic-view-employee-on-load.component.html"> </file>
  *  <file name="sample-po-dynamic-view-employee-on-load/sample-po-dynamic-view-employee-on-load.component.ts"> </file>
+ *  <file name="sample-po-dynamic-view-employee-on-load/sample-po-dynamic-view-employee-on-load.service.ts"> </file>
  * </example>
  */
 @Component({

projects/ui/src/lib/components/po-dynamic/po-dynamic-view/samples/sample-po-dynamic-view-employee-on-load/sample-po-dynamic-view-employee-on-load.component.ts

@@ -1,12 +1,14 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 
 import { PoDynamicViewField } from '@po-ui/ng-components';
+import { SamplePoDynamicViewEmployeeOnLoadService } from './sample-po-dynamic-view-employee-on-load.service';
 
 @Component({
   selector: 'sample-po-dynamic-view-employee-on-load',
-  templateUrl: './sample-po-dynamic-view-employee-on-load.component.html'
+  templateUrl: './sample-po-dynamic-view-employee-on-load.component.html',
+  providers: [SamplePoDynamicViewEmployeeOnLoadService]
 })
-export class SamplePoDynamicViewEmployeeOnLoadComponent {
+export class SamplePoDynamicViewEmployeeOnLoadComponent implements OnInit {
   employee = {
     name: 'Jhon Doe',
     age: '20',
@@ -21,7 +23,7 @@ export class SamplePoDynamicViewEmployeeOnLoadComponent {
     addressStreet: 'Avenida Braz Leme',
     addressNumber: '1000',
     zipCode: '02511-000',
-    city: 'São Paulo',
+    city: 'A',
     wage: 8000.5,
     availability: 'Available',
     cities: [
@@ -65,6 +67,12 @@ export class SamplePoDynamicViewEmployeeOnLoadComponent {
     { property: 'image', divider: 'Image', image: true, alt: 'image', height: '250' }
   ];
 
+  private _newService = inject(SamplePoDynamicViewEmployeeOnLoadService);
+
+  ngOnInit(): void {
+    this._newService.setConfig('https://po-sample-api.fly.dev/v1/hotels', { id: 1485976673002 });
+  }
+
   customEmployeeData() {
     return {
       value: {
@@ -78,7 +86,12 @@ export class SamplePoDynamicViewEmployeeOnLoadComponent {
         { property: 'rg', tag: true, color: 'color-07', order: 3 },
         { property: 'wage', type: 'string', tag: true, color: 'color-07' },
         { property: 'genre', visible: false },
-        { property: 'job', tag: false }
+        { property: 'job', tag: false },
+        {
+          searchService: this._newService,
+          fieldLabel: 'address_city',
+          property: 'city'
+        }
       ]
     };
   }

projects/ui/src/lib/components/po-dynamic/po-dynamic-view/samples/sample-po-dynamic-view-employee-on-load/sample-po-dynamic-view-employee-on-load.service.ts

@@ -0,0 +1,29 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable, map } from 'rxjs';
+
+@Injectable()
+export class SamplePoDynamicViewEmployeeOnLoadService {
+  readonly headers: HttpHeaders = new HttpHeaders({
+    'X-PO-No-Message': 'true'
+  });
+
+  url: string;
+  filterParams;
+
+  constructor(private httpClient: HttpClient) {}
+
+  getObjectByValue(value: string | Array<any>, filterParams?: any): Observable<Array<any> | { [key: string]: any }> {
+    return this.httpClient
+      .get(this.url, {
+        headers: this.headers,
+        params: this.filterParams
+      })
+      .pipe(map((response: any) => ('items' in response ? response.items : response)));
+  }
+
+  setConfig(url: string, filterParams) {
+    this.url = url;
+    this.filterParams = filterParams;
+  }
+}