feat(page-dynamic-edit): adiciona propriedade serviceMetadataApi

nicoleoliveira · jhosefmarks · commit 246ef134fc8f · 2020-02-14T14:46:01.000-03:00
Criação da propriedade `serviceMetadataApi` para poder buscar os metadados
de uma fonte diferente da fonte original dos dados.

Fixes DTHFUI-2618
diff --git a/projects/templates/src/lib/components/po-page-dynamic-edit/index.ts b/projects/templates/src/lib/components/po-page-dynamic-edit/index.ts
@@ -1,5 +1,5 @@
 export * from './po-page-dynamic-edit.component';
-export * from './po-page-dynamic-edit-actions.interface';
-export * from './po-page-dynamic-edit-field.interface';
+export * from './interfaces/po-page-dynamic-edit-actions.interface';
+export * from './interfaces/po-page-dynamic-edit-field.interface';
 
 export * from './po-page-dynamic-edit.module';
diff --git a/projects/templates/src/lib/components/po-page-dynamic-edit/interfaces/po-page-dynamic-edit-actions.interface.ts b/projects/templates/src/lib/components/po-page-dynamic-edit/interfaces/po-page-dynamic-edit-actions.interface.ts
diff --git a/projects/templates/src/lib/components/po-page-dynamic-edit/interfaces/po-page-dynamic-edit-field.interface.ts b/projects/templates/src/lib/components/po-page-dynamic-edit/interfaces/po-page-dynamic-edit-field.interface.ts
diff --git a/projects/templates/src/lib/components/po-page-dynamic-edit/interfaces/po-page-dynamic-edit-metadata.interface.ts b/projects/templates/src/lib/components/po-page-dynamic-edit/interfaces/po-page-dynamic-edit-metadata.interface.ts
@@ -0,0 +1,30 @@
+import { PoPageDynamicEditOptions } from './po-page-dynamic-edit-options.interface';
+
+/**
+ * @docsExtends PoPageDynamicEditOptions
+ *
+ * @usedBy PoPageDynamicEditComponent
+ *
+ * @description
+ *
+ * <a id="po-page-dynamic-edit-metadata"></a>
+ *
+ * Interface para o metadata de uma página dinâmica.
+ */
+export interface PoPageDynamicEditMetadata extends PoPageDynamicEditOptions {
+
+  /**
+   * Cria automaticamente as rotas de edição (novo/duplicate) e detalhes caso sejam definidas ações na propriedade `p-actions`
+   *
+   * As rotas criadas serão baseadas na propriedade `p-actions`.
+   *
+   * > Para o correto funcionamento não pode haver nenhuma rota coringa (`**`) especificada.
+   *
+   * @default false
+   */
+  autoRouter?: boolean;
+
+  /** Versão do metadado devolvido pelo backend. */
+  version: number;
+
+}
diff --git a/projects/templates/src/lib/components/po-page-dynamic-edit/interfaces/po-page-dynamic-edit-options.interface.ts b/projects/templates/src/lib/components/po-page-dynamic-edit/interfaces/po-page-dynamic-edit-options.interface.ts
@@ -0,0 +1,27 @@
+import { PoBreadcrumb } from '@portinari/portinari-ui';
+
+import { PoPageDynamicEditField } from './po-page-dynamic-edit-field.interface';
+import { PoPageDynamicEditActions } from './po-page-dynamic-edit-actions.interface';
+
+export interface PoPageDynamicEditOptions {
+
+  /**
+   * Lista dos campos usados.
+   */
+  fields?: Array<PoPageDynamicEditField>;
+
+  /**
+   * Ações que o usuário poderá executar na página através de botões.
+   */
+  actions?: PoPageDynamicEditActions;
+
+  /**
+   * Objeto com propriedades do breadcrumb.
+   */
+  breadcrumb?: PoBreadcrumb;
+
+  /**
+   * Título da página.
+   */
+  title?: string;
+}
diff --git a/projects/templates/src/lib/components/po-page-dynamic-edit/po-page-dynamic-edit.component.spec.ts b/projects/templates/src/lib/components/po-page-dynamic-edit/po-page-dynamic-edit.component.spec.ts
@@ -12,7 +12,7 @@ import * as util from './../../utils/util';
 import { configureTestSuite, expectPropertiesValues } from './../../util-test/util-expect.spec';
 
 import { PoPageDynamicEditComponent } from './po-page-dynamic-edit.component';
-import { PoPageDynamicEditActions } from './po-page-dynamic-edit-actions.interface';
+import { PoPageDynamicEditActions } from './interfaces/po-page-dynamic-edit-actions.interface';
 import { PoDynamicFormStubComponent } from './test/po-dynamic-form-stub-component';
 
 describe('PoPageDynamicEditComponent: ', () => {
@@ -274,7 +274,8 @@ describe('PoPageDynamicEditComponent: ', () => {
 
       component.ngOnInit();
 
-      expect(component['poPageDynamicService'].configServiceApi).toHaveBeenCalledWith({ endpoint: component.serviceApi });
+      expect(component['poPageDynamicService'].configServiceApi)
+        .toHaveBeenCalledWith({ endpoint: component.serviceApi, metadata: undefined });
       expect(component['loadData']).toHaveBeenCalledWith(id, duplicate);
 
       expect(component['loadMetadata']).not.toHaveBeenCalled();
@@ -288,7 +289,8 @@ describe('PoPageDynamicEditComponent: ', () => {
         const activatedRoute: any = {
           snapshot: {
             data: {
-              serviceApi: 'localhost:4300/api/people'
+              serviceApi: 'localhost:4300/api/people',
+              serviceMetadataApi: 'metadata'
             },
             params: { id },
             queryParams: { duplicate }
@@ -306,7 +308,8 @@ describe('PoPageDynamicEditComponent: ', () => {
 
         component.ngOnInit();
 
-        expect(component['poPageDynamicService'].configServiceApi).toHaveBeenCalledWith({ endpoint: component.serviceApi });
+        expect(component['poPageDynamicService'].configServiceApi)
+          .toHaveBeenCalledWith({ endpoint: component.serviceApi, metadata: 'metadata' });
         expect(component['loadMetadata']).toHaveBeenCalledWith(id, duplicate);
 
         expect(component['loadData']).not.toHaveBeenCalled();
diff --git a/projects/templates/src/lib/components/po-page-dynamic-edit/po-page-dynamic-edit.component.ts b/projects/templates/src/lib/components/po-page-dynamic-edit/po-page-dynamic-edit.component.ts
@@ -14,8 +14,8 @@ import {
 
 import * as util from './../../utils/util';
 
-import { PoPageDynamicEditActions } from './po-page-dynamic-edit-actions.interface';
-import { PoPageDynamicEditField } from './po-page-dynamic-edit-field.interface';
+import { PoPageDynamicEditActions } from './interfaces/po-page-dynamic-edit-actions.interface';
+import { PoPageDynamicEditField } from './interfaces/po-page-dynamic-edit-field.interface';
 import { PoPageDynamicService } from './po-page-dynamic.service';
 
 export const poPageDynamicEditLiteralsDefault = {
@@ -69,6 +69,63 @@ export const poPageDynamicEditLiteralsDefault = {
  * O `po-page-dynamic-edit` é uma página que pode servir para editar ou criar novos registros,
  * o mesmo também suporta metadados conforme especificado na documentação.
  *
+ * ### Utilização via rota
+ *
+ * Ao utilizar as rotas para carregar o template, o `page-dynamic-edit` disponibiliza propriedades para
+ * poder especificar o endpoint dos dados e dos metadados. Exemplo de utilização:
+ *
+ * ```
+ * {
+ *   path: 'people',
+ *   component: PoPageDynamicEditComponent,
+ *   data: {
+ *     serviceApi: 'http://localhost:3000/v1/people', // endpoint dos dados
+ *     serviceMetadataApi: 'http://localhost:3000/v1/metadata' // endpoint dos metadados
+ *   }
+ * }
+ * ```
+ *
+ * Para carregar com um recurso já existente, deve-se ser incluído um parâmetro na rota chamado `id`:
+ *
+ * ```
+ * {
+ *   path: 'people/:id',
+ *   component: PoPageDynamicEditComponent,
+ *   data: {
+ *     serviceApi: 'http://localhost:3000/v1/people', // endpoint dos dados
+ *     serviceMetadataApi: 'http://localhost:3000/v1/metadata' // endpoint dos metadados
+ *   }
+ * }
+ * ```
+ *
+ * A requisição dos metadados é feita na inicialização do template para buscar os metadados da página passando o
+ * tipo do metadado esperado e a versão cacheada pelo browser.
+ *
+ * O formato esperado na resposta da requisição está especificado na interface
+ * [PoPageDynamicEditMetadata](/documentation/po-page-dynamic-edit#po-page-dynamic-edit-metadata). Por exemplo:
+ *
+ * ```
+ *  {
+ *   version: 1,
+ *   title: 'Person edit',
+ *   fields: [
+ *     { property: 'id', key: true, disabled: true },
+ *     { property: 'status' },
+ *     { property: 'name' },
+ *     { property: 'nickname' },
+ *     { property: 'birthdate', label: 'Birth date' },
+ *     { property: 'genre' },
+ *     { property: 'city' },
+ *     { property: 'country' }
+ *   ]
+ * }
+ * ```
+ *
+ * > Caso o endpoint dos metadados não seja especificado, será feito uma requisição utilizando o `serviceApi` da seguinte forma:
+ * ```
+ * GET {end-point}/metadata?type=edit&version={version}
+ * ```
+ *
  * @example
  *
  * <example name="po-page-dynamic-edit-basic" title="Portinari Page Dynamic Edit Basic">
@@ -171,7 +228,7 @@ export class PoPageDynamicEditComponent implements OnInit {
   /**
    * @description
    *
-   * Endpoint usado pelo template para requisição do recurso que serão exibido para edição.
+   * Endpoint usado pelo template para requisição do recurso que será exibido para edição.
    *
    * Para as ações de `save` e `saveNew`, será feito uma requisição de criação nesse mesmo endpoint passando os valores
    * preenchidos pelo usuário via payload.
@@ -202,10 +259,6 @@ export class PoPageDynamicEditComponent implements OnInit {
    * ```
    * { "name": "Fulano", "city": "Smallville" }
    * ```
-   * > Caso esteja usando metadados com o template, será disparado uma requisição na inicialização do template para buscar
-   * > os metadados da página passando o tipo do metadado esperado e a versão cacheada pelo browser.
-   * >
-   * > `GET {end-point}/metadata?type=create&version={version}`
    *
    * Caso queira que o template carregue um recurso já existente, deve-se ser incluído um parametro na rota chamado `id`.
    *
@@ -240,11 +293,6 @@ export class PoPageDynamicEditComponent implements OnInit {
    * ```
    * { "name": "Fulano", "city": "Metropolis" }
    * ```
-   *
-   * > Caso esteja usando metadados com o template, será disparado uma requisição na inicialização do template para buscar
-   * > os metadados da página passando o tipo do metadado esperado e a versão cacheada pelo browser.
-   * >
-   * > `GET {end-point}/metadata?type=edit&version={version}`
    */
   @Input('p-service-api') serviceApi: string;
 
@@ -266,15 +314,13 @@ export class PoPageDynamicEditComponent implements OnInit {
     const paramId = this.activatedRoute.snapshot.params['id'];
     const duplicate = this.activatedRoute.snapshot.queryParams['duplicate'];
 
-    if (this.activatedRoute.snapshot.data.serviceApi) {
-      this.serviceApi = this.activatedRoute.snapshot.data.serviceApi;
-
-      this.poPageDynamicService.configServiceApi({ endpoint: this.serviceApi });
+    const { serviceApi, serviceMetadataApi } = this.activatedRoute.snapshot.data;
+    this.serviceApi = serviceApi || this.serviceApi;
+    this.poPageDynamicService.configServiceApi({ endpoint: this.serviceApi, metadata: serviceMetadataApi });
 
+    if (serviceApi) {
       this.loadMetadata(paramId, duplicate);
     } else {
-      this.poPageDynamicService.configServiceApi({ endpoint: this.serviceApi });
-
       this.loadData(paramId, duplicate);
     }
   }
diff --git a/projects/templates/src/lib/components/po-page-dynamic-edit/po-page-dynamic.service.ts b/projects/templates/src/lib/components/po-page-dynamic-edit/po-page-dynamic.service.ts
@@ -8,22 +8,25 @@ import { map } from 'rxjs/operators';
 export class PoPageDynamicService {
 
   private endpoint = '/';
+  private metadata: string;
 
   readonly headers: HttpHeaders = new HttpHeaders({
     'X-PORTINARI-SCREEN-LOCK': 'true'
   });
 
   constructor(private http: HttpClient) { }
 
-  configServiceApi(config: { endpoint?: string } = {}) {
+  configServiceApi(config: { endpoint?: string, metadata?: string } = {}) {
     this.endpoint = config.endpoint;
+    this.metadata = config.metadata || this.metadata;
   }
 
   getMetadata(type: string = 'list'): Observable<any> {
     const key = `${this.endpoint}-${type}-metadata`;
     const cache = JSON.parse(localStorage.getItem(key)) || {};
+    const metadataUrlBase = this.metadata || `${this.endpoint}/metadata`;
 
-    const url = `${this.endpoint}/metadata?type=${type}&version=${cache.version || ''}`;
+    const url = `${metadataUrlBase}?type=${type}&version=${cache.version || ''}`;
 
     return this.http.get(url).pipe(map((response: any) => {
       if (response.version === cache.version) {
