From 9c5be3eb279bc9a2184ee2e0bd2d369cd609d669 Mon Sep 17 00:00:00 2001 From: siva kumar Date: Thu, 22 Feb 2018 15:03:45 +0530 Subject: [PATCH] [ADF-2326] Process List - Provide a way to support custom html template and static columns at same time. (#2975) * [ADF-2326] Process List - Provide a way to support custom html template and static columns at same time. * Fixed support custom html template and static columns at same time * Updated process list documentation with recent changes. * * Added testcases for recent changes . --- docs/process-list.component.md | 37 +++++++++++ .../components/process-list.component.spec.ts | 61 ++++++++++++++++++- .../components/process-list.component.ts | 50 ++++++++------- .../components/task-list.component.spec.ts | 59 +++++++++++++++++- 4 files changed, 181 insertions(+), 26 deletions(-) diff --git a/docs/process-list.component.md b/docs/process-list.component.md index 16e4df37e7..728f9a0745 100644 --- a/docs/process-list.component.md +++ b/docs/process-list.component.md @@ -46,6 +46,43 @@ define custom schema in the app.config.json as shown below json format. ``` +You can also use both HTML-based and app.config.json custom schema declaration at same time like shown below: + +```json +"adf-process-list": { + "presets": { + "customSchema": [ + { + "key": "id", + "type": "text", + "title": "Id", + "sortable": true + }], + "default": [ + { + "key": "name", + "type": "text", + "title": "name", + "sortable": true + }], + } +} +``` + +```html + + + + +
{{getFullName(entry.row.obj.assignee)}}
+ + + + +``` + ### Pagination strategy adf-process-instance-list also supports pagination and the same can be used as shown below. diff --git a/lib/process-services/process-list/components/process-list.component.spec.ts b/lib/process-services/process-list/components/process-list.component.spec.ts index 7679e6b5f2..09273a39ac 100644 --- a/lib/process-services/process-list/components/process-list.component.spec.ts +++ b/lib/process-services/process-list/components/process-list.component.spec.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { SimpleChange } from '@angular/core'; +import { Component, SimpleChange, ViewChild } from '@angular/core'; import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; import { MatProgressSpinnerModule } from '@angular/material'; import { Observable } from 'rxjs/Observable'; @@ -135,7 +135,7 @@ describe('ProcessInstanceListComponent', () => { }); it('should fetch custom schemaColumn when the input presetColumn is defined', () => { - component.presetColumn = 'fakeCutomColumns'; + component.presetColumn = 'fakeCutomSchema'; component.ngAfterContentInit(); fixture.detectChanges(); expect(component.data.getColumns()).toBeDefined(); @@ -483,3 +483,60 @@ describe('ProcessInstanceListComponent', () => { }); }); }); + +@Component({ + template: ` + + + + + + +
{{getFullName(entry.row.obj.startedBy)}}
+ + + + ` +}) + +class CustomProcessListComponent { + + @ViewChild(ProcessInstanceListComponent) + processList: ProcessInstanceListComponent; +} + +describe('CustomProcessListComponent', () => { + let fixture: ComponentFixture; + let component: CustomProcessListComponent; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ + ProcessInstanceListComponent, + CustomProcessListComponent + ], + providers: [ + ProcessService + ], + imports: [] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CustomProcessListComponent); + fixture.detectChanges(); + component = fixture.componentInstance; + }); + + it('should create instance of CustomProcessListComponent', () => { + expect(component instanceof CustomProcessListComponent).toBe(true, 'should create CustomProcessListComponent'); + }); + + it('should fetch custom schemaColumn from html', () => { + fixture.detectChanges(); + expect(component.processList.data.getColumns()).toBeDefined(); + expect(component.processList.data.getColumns()[1].title).toEqual('ADF_PROCESS_LIST.PROPERTIES.END_DATE'); + expect(component.processList.data.getColumns()[2].title).toEqual('ADF_PROCESS_LIST.PROPERTIES.CREATED'); + expect(component.processList.data.getColumns().length).toEqual(3); + }); +}); diff --git a/lib/process-services/process-list/components/process-list.component.ts b/lib/process-services/process-list/components/process-list.component.ts index faf5aec008..64cc7d31c6 100644 --- a/lib/process-services/process-list/components/process-list.component.ts +++ b/lib/process-services/process-list/components/process-list.component.ts @@ -141,20 +141,11 @@ export class ProcessInstanceListComponent implements OnChanges, AfterContentInit * If component is assigned with an empty data adater the default schema settings applied. */ setupSchema() { - let schema: DataColumn[] = []; - - if (this.columnList && this.columnList.columns && this.columnList.columns.length > 0) { - schema = this.columnList.columns.map(c => c); - } - + let schema = this.getSchema(); if (!this.data) { - this.data = new ObjectDataTableAdapter([], schema.length > 0 ? schema : this.getLayoutPreset(this.presetColumn)); - } else { - if (schema && schema.length > 0) { - this.data.setColumns(schema); - } else if (this.data.getColumns().length === 0) { - this.presetColumn ? this.setupDefaultColumns(this.presetColumn) : this.setupDefaultColumns(); - } + this.data = new ObjectDataTableAdapter([], schema); + } else if (this.data.getColumns().length === 0) { + this.data.setColumns(schema); } } @@ -355,13 +346,6 @@ export class ProcessInstanceListComponent implements OnChanges, AfterContentInit return new ProcessFilterParamRepresentationModel(requestNode); } - setupDefaultColumns(preset: string = 'default'): void { - if (this.data) { - const columns = this.getLayoutPreset(preset); - this.data.setColumns(columns); - } - } - private loadLayoutPresets(): void { const externalSettings = this.appConfig.get('adf-process-list.presets', null); @@ -370,11 +354,31 @@ export class ProcessInstanceListComponent implements OnChanges, AfterContentInit } else { this.layoutPresets = processPresetsDefaultModel; } - } - private getLayoutPreset(name: string = 'default'): DataColumn[] { - return (this.layoutPresets[name] || this.layoutPresets['default']).map(col => new ObjectDataColumn(col)); + getSchema(): any { + let customSchemaColumns = []; + customSchemaColumns = this.getSchemaFromConfig(this.presetColumn).concat(this.getSchemaFromHtml()); + if (customSchemaColumns.length === 0) { + customSchemaColumns = this.getDefaultLayoutPreset(); + } + return customSchemaColumns; + } + + getSchemaFromHtml(): any { + let schema = []; + if (this.columnList && this.columnList.columns && this.columnList.columns.length > 0) { + schema = this.columnList.columns.map(c => c); + } + return schema; + } + + private getSchemaFromConfig(name: string): DataColumn[] { + return name ? (this.layoutPresets[name]).map(col => new ObjectDataColumn(col)) : []; + } + + private getDefaultLayoutPreset(): DataColumn[] { + return (this.layoutPresets['default']).map(col => new ObjectDataColumn(col)); } updatePagination(params: PaginationQueryParams) { diff --git a/lib/process-services/task-list/components/task-list.component.spec.ts b/lib/process-services/task-list/components/task-list.component.spec.ts index f74c495752..e4f2a5fb77 100644 --- a/lib/process-services/task-list/components/task-list.component.spec.ts +++ b/lib/process-services/task-list/components/task-list.component.spec.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { SimpleChange } from '@angular/core'; +import { Component, SimpleChange, ViewChild } from '@angular/core'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { MaterialModule } from '../../material.module'; import { AppConfigService } from '@alfresco/adf-core'; @@ -628,3 +628,60 @@ describe('TaskListComponent', () => { }); }); }); + +@Component({ + template: ` + + + + + + +
{{getFullName(entry.row.obj.startedBy)}}
+ + + + ` +}) + +class CustomTaskListComponent { + + @ViewChild(TaskListComponent) + taskList: TaskListComponent; +} + +describe('CustomTaskListComponent', () => { + let fixture: ComponentFixture; + let component: CustomTaskListComponent; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ + TaskListComponent, + CustomTaskListComponent + ], + providers: [ + TaskListService + ], + imports: [] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CustomTaskListComponent); + fixture.detectChanges(); + component = fixture.componentInstance; + }); + + it('should create instance of CustomTaskListComponent', () => { + expect(component instanceof CustomTaskListComponent).toBe(true, 'should create CustomTaskListComponent'); + }); + + it('should fetch custom schemaColumn from html', () => { + fixture.detectChanges(); + expect(component.taskList.data.getColumns()).toBeDefined(); + expect(component.taskList.data.getColumns()[0].title).toEqual('ADF_TASK_LIST.PROPERTIES.NAME'); + expect(component.taskList.data.getColumns()[2].title).toEqual('ADF_TASK_LIST.PROPERTIES.CREATED'); + expect(component.taskList.data.getColumns().length).toEqual(3); + }); +});