Skip to content

Commit cd1fc89

Browse files
Alvaro Camillo Netojhosefmarks
Alvaro Camillo Neto
authored and
jhosefmarks
committed
feat(page-dynamic-table): adiciona propriedade serviceMetadataApi
Criação da propriedade `serviceLoadApi` para poder buscar as customizações das página por uma rota.
1 parent 43cd0e1 commit cd1fc89

File tree

6 files changed

+123
-57
lines changed

6 files changed

+123
-57
lines changed

‎projects/templates/src/lib/components/po-page-dynamic-detail/interfaces/po-page-dynamic-detail-metadata.interface.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { PoPageDynamicDetailOptions } from './po-page-dynamic-detail-options.interface';
22

3-
/**./po-page-dynamic-detail-options.interface
3+
/**
44
* @docsExtends PoPageDynamicDetailOptions
55
*
66
* @usedBy PoPageDynamicDetailComponent

‎projects/templates/src/lib/components/po-page-dynamic-detail/interfaces/po-page-dynamic-detail-options.interface.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,16 @@ import { PoPageDynamicDetailField } from './po-page-dynamic-detail-field.interfa
1313
export interface PoPageDynamicDetailOptions {
1414

1515
/**
16-
* Lista dos campos usados na tabela e busca avançada.
16+
* Lista dos campos usados no formulário de detalhe.
1717
*
18-
* Caso precise alterar um field que já exista deve ser passado o atributo `property` com o mesmo conteúdo do original.
18+
* Caso precise alterar um campo que já exista deve ser passado o atributo `property` com o mesmo conteúdo do original.
1919
*/
2020
fields?: Array<PoPageDynamicDetailField>;
2121

2222
/**
2323
* Ações que o usuário poderá executar na página através de botões.
24+
*
25+
* Caso precise alterar uma ação informe a propriedade que deve ser alterada segundo a interface `PoPageDynamicDetailActions`
2426
*/
2527
actions?: PoPageDynamicDetailActions;
2628

‎projects/templates/src/lib/components/po-page-dynamic-detail/po-page-dynamic-detail.component.spec.ts

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -275,7 +275,6 @@ describe('PoPageDynamicDetailComponent:', () => {
275275
};
276276

277277
spyOn(component, <any>'loadData').and.returnValue(of({}));
278-
spyOn(component, <any>'getMetadata').and.returnValue(of({}));
279278

280279
component.ngOnInit();
281280

@@ -305,6 +304,12 @@ describe('PoPageDynamicDetailComponent:', () => {
305304

306305
it('should configure properties based on the return of onload route', fakeAsync(() => {
307306

307+
component.autoRouter = false;
308+
component.actions = <any>{};
309+
component.breadcrumb = <any>{};
310+
component.fields = [];
311+
component.title = '';
312+
308313
const activatedRoute: any = {
309314
snapshot: {
310315
data: {
@@ -316,28 +321,21 @@ describe('PoPageDynamicDetailComponent:', () => {
316321
}
317322
};
318323

319-
component.breadcrumb = {
324+
const metadata = {
325+
breadcrumb : {
320326
items: [
321327
{ label: 'Home' },
322328
{ label: 'Hiring processes' }
323329
]
324-
};
330+
},
331+
title: 'Original Title'
332+
};
325333

326-
component.title = 'Original Title';
327-
328-
const custom = {
329-
title: 'New Title',
330-
breadcrumb: {
331-
items: [
332-
{ label: 'Test' },
333-
{ label: 'Test2' }
334-
]
335-
}
336-
};
334+
const custom = {title: 'New Title'};
337335

338336
spyOn(component, <any>'loadData').and.returnValue(of({}));
339-
spyOn(component, <any>'getMetadata').and.returnValue(of({}));
340-
spyOn(component['poPageCustomizationService'], 'getCustomOptions').and.returnValue(of(custom));
337+
spyOn(component['poPageDynamicService'], 'getMetadata').and.returnValue(of(metadata));
338+
spyOn(<any>component['poPageCustomizationService'], 'createObservable').and.returnValue(of(custom));
341339

342340
component['activatedRoute'] = activatedRoute;
343341

@@ -348,8 +346,8 @@ describe('PoPageDynamicDetailComponent:', () => {
348346
expect(component.title).toBe('New Title');
349347
expect(component.breadcrumb).toEqual({
350348
items: [
351-
{ label: 'Test' },
352-
{ label: 'Test2' }
349+
{ label: 'Home' },
350+
{ label: 'Hiring processes' }
353351
]
354352
});
355353
}));

‎projects/templates/src/lib/components/po-page-dynamic-detail/po-page-dynamic-detail.component.ts

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Component, Input, OnInit, OnDestroy } from '@angular/core';
22
import { Route, Router, ActivatedRoute } from '@angular/router';
33

44
import { Subscription, concat, EMPTY, Observable, throwError } from 'rxjs';
5-
import { tap, catchError } from 'rxjs/operators';
5+
import { tap, catchError, switchMap } from 'rxjs/operators';
66

77
import * as util from '../../utils/util';
88
import { PoBreadcrumb, PoPageAction, PoDialogService, PoDialogConfirmOptions, PoNotificationService } from '@portinari/portinari-ui';
@@ -53,20 +53,23 @@ export const poPageDynamicDetailLiteralsDefault = {
5353
* O `po-page-dynamic-detail` é uma página que serve para exibir registros em detalhes,
5454
* o mesmo também suporta metadados conforme especificado na documentação.
5555
*
56-
* *
56+
*
5757
* ### Utilização via rota
5858
*
5959
* Ao utilizar as rotas para carregar o template, o `page-dynamic-detail` disponibiliza propriedades para
6060
* poder especificar o endpoint dos dados e dos metadados. Exemplo de utilização:
6161
*
62+
* O componente primeiro irá carregar o metadado da rota definida na propriedade serviceMetadataApi
63+
* e depois irá buscar da rota definida na propriedade serviceLoadApi
64+
*
6265
* ```
6366
* {
6467
* path: 'people',
6568
* component: PoPageDynamicDetailComponent,
6669
* data: {
6770
* serviceApi: 'http://localhost:3000/v1/people', // endpoint dos dados
68-
* serviceMetadataApi: 'http://localhost:3000/v1/metadata', // endpoint dos metadados
69-
* serviceLoadApi: 'http://localhost:3000/load-metadata' // endpoint de customizações dos metadados
71+
* serviceMetadataApi: 'http://localhost:3000/v1/metadata', // endpoint dos metadados utilizando o método HTTP Get
72+
* serviceLoadApi: 'http://localhost:3000/load-metadata' // endpoint de customizações dos metadados utilizando o método HTTP Post
7073
* }
7174
* }
7275
* ```
@@ -330,20 +333,21 @@ export class PoPageDynamicDetailComponent implements OnInit, OnDestroy {
330333
);
331334
}
332335

333-
private getMetadata(serviceApi: string): Observable<PoPageDynamicDetailMetaData> {
334-
if (serviceApi) {
336+
private getMetadata(serviceApiFromRoute: string, onLoad: UrlOrPoCustomizationFunction): Observable<PoPageDynamicDetailMetaData> {
337+
if (serviceApiFromRoute) {
335338
return this.poPageDynamicService.getMetadata<PoPageDynamicDetailMetaData>('detail').pipe(
336339
tap(response => {
337340
this.autoRouter = response.autoRouter || this.autoRouter;
338341
this.actions = response.actions || this.actions;
339342
this.breadcrumb = response.breadcrumb || this.breadcrumb;
340343
this.fields = response.fields || this.fields;
341344
this.title = response.title || this.title;
342-
})
345+
}),
346+
switchMap(() => this.loadOptionsOnInitialize(onLoad) )
343347
);
344348
}
345349

346-
return EMPTY;
350+
return this.loadOptionsOnInitialize(onLoad);
347351
}
348352

349353
// @todo Validar rotas na mão pois se existir uma rota '**' o catch do navigation não funciona.
@@ -370,10 +374,10 @@ export class PoPageDynamicDetailComponent implements OnInit, OnDestroy {
370374
private remove(path) {
371375
const uniqueKey = this.formatUniqueKey(this.model);
372376

373-
this.poPageDynamicService.deleteResource(uniqueKey).subscribe(() => {
377+
this.subscriptions.push(this.poPageDynamicService.deleteResource(uniqueKey).subscribe(() => {
374378
this.poNotification.success(this.literals.removeNotificationSuccess);
375379
this.navigateTo({ path: path });
376-
});
380+
}));
377381
}
378382

379383
private resolveUrl(item: any, path: string) {
@@ -413,15 +417,18 @@ export class PoPageDynamicDetailComponent implements OnInit, OnDestroy {
413417
}
414418

415419
private loadDataFromAPI() {
416-
const { serviceApi, serviceMetadataApi, serviceLoadApi } = this.activatedRoute.snapshot.data;
420+
const { serviceApi: serviceApiFromRoute, serviceLoadApi } = this.activatedRoute.snapshot.data;
417421
const { id } = this.activatedRoute.snapshot.params;
422+
418423
const onLoad = serviceLoadApi || this.onLoad;
419-
this.serviceApi = serviceApi || this.serviceApi;
420-
this.poPageDynamicService.configServiceApi({ endpoint: this.serviceApi, metadata: serviceMetadataApi });
421-
const metadata$ = this.getMetadata(serviceApi);
424+
this.serviceApi = serviceApiFromRoute || this.serviceApi;
425+
426+
this.poPageDynamicService.configServiceApi({ endpoint: this.serviceApi });
427+
428+
const metadata$ = this.getMetadata(serviceApiFromRoute, onLoad);
422429
const data$ = this.loadData(id);
423-
const customOption$ = this.loadOptionsOnInitialize(onLoad);
424-
this.subscriptions.push(concat(metadata$, data$, customOption$).subscribe());
430+
431+
this.subscriptions.push(concat(metadata$, data$).subscribe());
425432
}
426433

427434
private loadOptionsOnInitialize(onLoad: UrlOrPoCustomizationFunction) {

‎projects/templates/src/lib/components/po-page-dynamic-table/po-page-dynamic-table.component.spec.ts

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,6 @@ describe('PoPageDynamicTableComponent:', () => {
163163
};
164164

165165
spyOn(component, <any>'loadData').and.returnValue(of({}));
166-
spyOn(component, <any>'getMetadata').and.returnValue(of({}));
167166

168167
component.ngOnInit();
169168

@@ -190,6 +189,56 @@ describe('PoPageDynamicTableComponent:', () => {
190189
component['subscriptions'] = null;
191190
component.ngOnDestroy();
192191
}));
192+
193+
it('should configure properties based on the return of onload route', fakeAsync(() => {
194+
195+
component.autoRouter = false;
196+
component.actions = <any>{};
197+
component.breadcrumb = <any>{};
198+
component.fields = [];
199+
component.title = '';
200+
201+
const activatedRoute: any = {
202+
snapshot: {
203+
data: {
204+
serviceApi: 'localhost:4300/api/people',
205+
serviceMetadataApi: 'localhost:4300/api/people/metadata',
206+
serviceLoadApi: 'localhost:4300/api/people/metadata'
207+
},
208+
params: { id: 1 }
209+
}
210+
};
211+
212+
const metadata = {
213+
breadcrumb : {
214+
items: [
215+
{ label: 'Home' },
216+
{ label: 'Hiring processes' }
217+
]
218+
},
219+
title: 'Original Title'
220+
};
221+
222+
const custom = {title: 'New Title'};
223+
224+
spyOn(component, <any>'loadData').and.returnValue(of({}));
225+
spyOn(component['poPageDynamicService'], 'getMetadata').and.returnValue(of(metadata));
226+
spyOn(<any>component['poPageCustomizationService'], 'createObservable').and.returnValue(of(custom));
227+
228+
component['activatedRoute'] = activatedRoute;
229+
230+
component.ngOnInit();
231+
232+
tick();
233+
234+
expect(component.title).toBe('New Title');
235+
expect(component.breadcrumb).toEqual({
236+
items: [
237+
{ label: 'Home' },
238+
{ label: 'Hiring processes' }
239+
]
240+
});
241+
}));
193242
});
194243

195244
it('onAdvancedSearch: should call `loadData` with filter parameter and set `params`', () => {

‎projects/templates/src/lib/components/po-page-dynamic-table/po-page-dynamic-table.component.ts

Lines changed: 29 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { ActivatedRoute, Route, Router } from '@angular/router';
22
import { Component, Input, OnInit, OnDestroy } from '@angular/core';
33

44
import { Subscription, Observable, EMPTY, throwError, concat } from 'rxjs';
5-
import { tap } from 'rxjs/operators';
5+
import { tap, switchMap } from 'rxjs/operators';
66

77
import {
88
PoDialogConfirmOptions,
@@ -89,13 +89,17 @@ export const poPageDynamicTableLiteralsDefault = {
8989
* Ao utilizar as rotas para carregar o template, o `page-dynamic-table` disponibiliza propriedades para
9090
* poder especificar o endpoint dos dados e dos metadados. Exemplo de utilização:
9191
*
92+
* O componente primeiro irá carregar o metadado da rota definida na propriedade serviceMetadataApi
93+
* e depois irá buscar da rota definida na propriedade serviceLoadApi
94+
*
9295
* ```
9396
* {
9497
* path: 'people',
9598
* component: PoPageDynamicTableComponent,
9699
* data: {
97100
* serviceApi: 'http://localhost:3000/v1/people', // endpoint dos dados
98-
* serviceMetadataApi: 'http://localhost:3000/v1/metadata' // endpoint dos metadados
101+
* serviceMetadataApi: 'http://localhost:3000/v1/metadata', // endpoint dos metadados utilizando o método HTTP Get
102+
* serviceLoadApi: 'http://localhost:3000/load-metadata' // endpoint de customizações dos metadados utilizando o método HTTP Post
99103
* }
100104
* }
101105
* ```
@@ -108,7 +112,8 @@ export const poPageDynamicTableLiteralsDefault = {
108112
* component: PoPageDynamicTableComponent,
109113
* data: {
110114
* serviceApi: 'http://localhost:3000/v1/people', // endpoint dos dados
111-
* serviceMetadataApi: 'http://localhost:3000/v1/metadata' // endpoint dos metadados
115+
* serviceMetadataApi: 'http://localhost:3000/v1/metadata', // endpoint dos metadados
116+
* serviceLoadApi: 'http://localhost:3000/load-metadata' // endpoint de customizações dos metadados
112117
* }
113118
* }
114119
* ```
@@ -347,20 +352,21 @@ export class PoPageDynamicTableComponent extends PoPageDynamicListBaseComponent
347352
);
348353
}
349354

350-
private getMetadata(serviceApi: string): Observable<PoPageDynamicTableMetaData> {
351-
if (serviceApi) {
355+
private getMetadata(serviceApiFromRoute: string, onLoad: UrlOrPoCustomizationFunction): Observable<PoPageDynamicTableMetaData> {
356+
if (serviceApiFromRoute) {
352357
return this.poPageDynamicService.getMetadata<PoPageDynamicTableMetaData>().pipe(
353-
tap(response => {
354-
this.autoRouter = response.autoRouter || this.autoRouter;
355-
this.actions = response.actions || this.actions;
356-
this.breadcrumb = response.breadcrumb || this.breadcrumb;
357-
this.fields = response.fields || this.fields;
358-
this.title = response.title || this.title;
359-
})
360-
);
358+
tap(response => {
359+
this.autoRouter = response.autoRouter || this.autoRouter;
360+
this.actions = response.actions || this.actions;
361+
this.breadcrumb = response.breadcrumb || this.breadcrumb;
362+
this.fields = response.fields || this.fields;
363+
this.title = response.title || this.title;
364+
}),
365+
switchMap(() => this.loadOptionsOnInitialize(onLoad) )
366+
);
361367
}
362368

363-
return EMPTY;
369+
return this.loadOptionsOnInitialize(onLoad);
364370
}
365371

366372
// @todo Validar rotas na mão pois se existir uma rota '**' o catch do navigation não funciona.
@@ -483,13 +489,17 @@ export class PoPageDynamicTableComponent extends PoPageDynamicListBaseComponent
483489
}
484490

485491
private loadDataFromAPI() {
486-
const { serviceApi, serviceMetadataApi } = this.activatedRoute.snapshot.data;
487-
this.serviceApi = serviceApi || this.serviceApi;
492+
const { serviceApi: serviceApiFromRoute, serviceMetadataApi, serviceLoadApi } = this.activatedRoute.snapshot.data;
493+
494+
const onLoad = serviceLoadApi || this.onLoad;
495+
this.serviceApi = serviceApiFromRoute || this.serviceApi;
496+
488497
this.poPageDynamicService.configServiceApi({ endpoint: this.serviceApi, metadata: serviceMetadataApi });
489-
const metadata$ = this.getMetadata(serviceApi);
498+
499+
const metadata$ = this.getMetadata(serviceApiFromRoute, onLoad);
490500
const data$ = this.loadData();
491-
const customOption$ = this.loadOptionsOnInitialize(this.onLoad);
492-
this.subscriptions.push(concat(metadata$, data$, customOption$).subscribe());
501+
502+
this.subscriptions.push(concat(metadata$, data$).subscribe());
493503
}
494504

495505
private loadOptionsOnInitialize(onLoad: UrlOrPoCustomizationFunction) {

0 commit comments

Comments
 (0)