diff --git a/docs/process-instance-header.component.md b/docs/process-instance-header.component.md index 971f20aec8..c51a1b3f8b 100644 --- a/docs/process-instance-header.component.md +++ b/docs/process-instance-header.component.md @@ -17,3 +17,21 @@ Sub-component of the process details component, which renders some general infor | Name | Type | Default value | Description | | ---- | ---- | ------------- | ----------- | | processInstance | `ProcessInstance` | | (**required**) Full details of the process instance to display information about. | + +## Customise the properties showed +By default all the properties are showed : +***status***, ***ended***, ***category***, ***businessKey***, ***assignee***, ***created***,***id***, ***description***. + +It is possible to customise the showed properties via "app.config.json". +This is how the configuration looks like: + +```json + + "adf-process-instance-header": { + "presets": { + "properties" : [ "status", "ended", "created", "id"] + } + } + +``` +In this way only the listed properties will be showed. diff --git a/lib/core/app-config/schema.json b/lib/core/app-config/schema.json index 8165f7e54e..0924b83a72 100644 --- a/lib/core/app-config/schema.json +++ b/lib/core/app-config/schema.json @@ -388,6 +388,24 @@ } } }, + "adf-process-instance-header": { + "description": "Process instance header component configuration", + "type": "object", + "properties": { + "presets": { + "description": "Presets for process instance header component", + "type": "object", + "properties": { + "properties": { + "type": "array", + "items": { + "enum": [ "status", "ended", "category", "businessKey", "assignee", "created", "id", "description" ] + } + } + } + } + } + }, "adf-process-list": { "description": "Process list component configuration", "type": "object", diff --git a/lib/process-services/process-list/components/process-instance-header.component.spec.ts b/lib/process-services/process-list/components/process-instance-header.component.spec.ts index 9eaf241428..44be45c2a8 100644 --- a/lib/process-services/process-list/components/process-instance-header.component.spec.ts +++ b/lib/process-services/process-list/components/process-instance-header.component.spec.ts @@ -16,7 +16,7 @@ */ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { CardViewUpdateService } from '@alfresco/adf-core'; +import { AppConfigService, CardViewUpdateService } from '@alfresco/adf-core'; import { MaterialModule } from '../../material.module'; import { ProcessInstance } from '../models/process-instance.model'; @@ -28,6 +28,7 @@ describe('ProcessInstanceHeaderComponent', () => { let component: ProcessInstanceHeaderComponent; let fixture: ComponentFixture; + let appConfigService: AppConfigService; beforeEach(async(() => { TestBed.configureTestingModule({ @@ -39,7 +40,8 @@ describe('ProcessInstanceHeaderComponent', () => { ], providers: [ ProcessService, - CardViewUpdateService + CardViewUpdateService, + AppConfigService ] }).compileComponents(); })); @@ -49,6 +51,7 @@ describe('ProcessInstanceHeaderComponent', () => { component = fixture.componentInstance; component.processInstance = new ProcessInstance(exampleProcess); + appConfigService = TestBed.get(AppConfigService); }); it('should render empty component if no process details provided', () => { @@ -160,4 +163,38 @@ describe('ProcessInstanceHeaderComponent', () => { let valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-textitem-value-businessKey"]'); expect(valueEl.innerText).toBe('ADF_PROCESS_LIST.PROPERTIES.BUSINESS_KEY_DEFAULT'); }); + + describe('Config Filtering', () => { + + it('should show only the properties from the configuration file', () => { + appConfigService.config = Object.assign(appConfigService.config, { + 'adf-process-instance-header': { + 'presets': { + 'properties': ['status', 'ended'] + } + } + }); + component.ngOnChanges({}); + fixture.detectChanges(); + const propertyList = fixture.nativeElement.querySelectorAll('.adf-property-list .adf-property'); + expect(propertyList).toBeDefined(); + expect(propertyList).not.toBeNull(); + expect(propertyList.length).toBe(2); + expect(propertyList[0].innerText).toContain('ADF_PROCESS_LIST.PROPERTIES.STATUS'); + expect(propertyList[1].innerText).toContain('ADF_PROCESS_LIST.PROPERTIES.END_DATE'); + }); + + it('should show all the default properties if there is no configuration', () => { + appConfigService.config = Object.assign(appConfigService.config, {}); + component.ngOnChanges({}); + fixture.detectChanges(); + const propertyList = fixture.nativeElement.querySelectorAll('.adf-property-list .adf-property'); + expect(propertyList).toBeDefined(); + expect(propertyList).not.toBeNull(); + expect(propertyList.length).toBe(component.properties.length); + expect(propertyList[0].innerText).toContain('ADF_PROCESS_LIST.PROPERTIES.STATUS'); + expect(propertyList[2].innerText).toContain('ADF_PROCESS_LIST.PROPERTIES.CATEGORY'); + }); + + }); }); diff --git a/lib/process-services/process-list/components/process-instance-header.component.ts b/lib/process-services/process-list/components/process-instance-header.component.ts index 56cc6bb10d..327f31be8f 100644 --- a/lib/process-services/process-list/components/process-instance-header.component.ts +++ b/lib/process-services/process-list/components/process-instance-header.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { CardViewDateItemModel, CardViewItem, CardViewTextItemModel, TranslationService } from '@alfresco/adf-core'; +import { AppConfigService, CardViewDateItemModel, CardViewItem, CardViewBaseItemModel, CardViewTextItemModel, TranslationService } from '@alfresco/adf-core'; import { Component, Input, OnChanges, SimpleChanges } from '@angular/core'; import { ProcessInstance } from '../models/process-instance.model'; @@ -32,73 +32,84 @@ export class ProcessInstanceHeaderComponent implements OnChanges { properties: CardViewItem []; - constructor(private translationService: TranslationService) { + constructor(private translationService: TranslationService, + private appConfig: AppConfigService) { } ngOnChanges(changes: SimpleChanges) { this.refreshData(); } - refreshData() { + refreshData(): void { if (this.processInstance) { - this.properties = [ - new CardViewTextItemModel( - { - label: 'ADF_PROCESS_LIST.PROPERTIES.STATUS', - value: this.getProcessStatus(), - key: 'status' - }), - new CardViewDateItemModel( - { - label: 'ADF_PROCESS_LIST.PROPERTIES.END_DATE', - value: this.processInstance.ended, - format: 'MMM DD YYYY', - key: 'ended', - default: this.translationService.instant('ADF_PROCESS_LIST.PROPERTIES.END_DATE_DEFAULT') - }), - new CardViewTextItemModel( - { - label: 'ADF_PROCESS_LIST.PROPERTIES.CATEGORY', - value: this.processInstance.processDefinitionCategory, - key: 'category', - default: this.translationService.instant('ADF_PROCESS_LIST.PROPERTIES.CATEGORY_DEFAULT') - }), - new CardViewTextItemModel( - { - label: 'ADF_PROCESS_LIST.PROPERTIES.BUSINESS_KEY', - value: this.processInstance.businessKey, - key: 'businessKey', - default: this.translationService.instant('ADF_PROCESS_LIST.PROPERTIES.BUSINESS_KEY_DEFAULT') - }), - new CardViewTextItemModel( - { - label: 'ADF_PROCESS_LIST.PROPERTIES.CREATED_BY', - value: this.getStartedByFullName(), - key: 'assignee', - default: this.translationService.instant('ADF_PROCESS_LIST.PROPERTIES.CREATED_BY_DEFAULT') - }), - new CardViewDateItemModel( - { - label: 'ADF_PROCESS_LIST.PROPERTIES.CREATED', - value: this.processInstance.started, - format: 'MMM DD YYYY', - key: 'created' - }), - new CardViewTextItemModel( - {label: 'ADF_PROCESS_LIST.PROPERTIES.ID', - value: this.processInstance.id, - key: 'id' - }), - new CardViewTextItemModel( - {label: 'ADF_PROCESS_LIST.PROPERTIES.DESCRIPTION', - value: this.processInstance.processDefinitionDescription, - key: 'description', - default: this.translationService.instant('ADF_PROCESS_LIST.PROPERTIES.DESCRIPTION_DEFAULT') - }) - ]; + const defaultProperties = this.initDefaultProperties(); + const filteredProperties: string[] = this.appConfig.get('adf-process-instance-header.presets.properties'); + this.properties = defaultProperties.filter((cardItem) => this.isValidSelection(filteredProperties, cardItem)); } } + private initDefaultProperties(): any[] { + return [ + new CardViewTextItemModel( + { + label: 'ADF_PROCESS_LIST.PROPERTIES.STATUS', + value: this.getProcessStatus(), + key: 'status' + }), + new CardViewDateItemModel( + { + label: 'ADF_PROCESS_LIST.PROPERTIES.END_DATE', + value: this.processInstance.ended, + format: 'MMM DD YYYY', + key: 'ended', + default: this.translationService.instant('ADF_PROCESS_LIST.PROPERTIES.END_DATE_DEFAULT') + }), + new CardViewTextItemModel( + { + label: 'ADF_PROCESS_LIST.PROPERTIES.CATEGORY', + value: this.processInstance.processDefinitionCategory, + key: 'category', + default: this.translationService.instant('ADF_PROCESS_LIST.PROPERTIES.CATEGORY_DEFAULT') + }), + new CardViewTextItemModel( + { + label: 'ADF_PROCESS_LIST.PROPERTIES.BUSINESS_KEY', + value: this.processInstance.businessKey, + key: 'businessKey', + default: this.translationService.instant('ADF_PROCESS_LIST.PROPERTIES.BUSINESS_KEY_DEFAULT') + }), + new CardViewTextItemModel( + { + label: 'ADF_PROCESS_LIST.PROPERTIES.CREATED_BY', + value: this.getStartedByFullName(), + key: 'assignee', + default: this.translationService.instant('ADF_PROCESS_LIST.PROPERTIES.CREATED_BY_DEFAULT') + }), + new CardViewDateItemModel( + { + label: 'ADF_PROCESS_LIST.PROPERTIES.CREATED', + value: this.processInstance.started, + format: 'MMM DD YYYY', + key: 'created' + }), + new CardViewTextItemModel( + {label: 'ADF_PROCESS_LIST.PROPERTIES.ID', + value: this.processInstance.id, + key: 'id' + }), + new CardViewTextItemModel( + {label: 'ADF_PROCESS_LIST.PROPERTIES.DESCRIPTION', + value: this.processInstance.processDefinitionDescription, + key: 'description', + default: this.translationService.instant('ADF_PROCESS_LIST.PROPERTIES.DESCRIPTION_DEFAULT') + }) + ]; + } + + private isValidSelection(filteredProperties: string[], cardItem: CardViewBaseItemModel): boolean { + return filteredProperties ? filteredProperties.indexOf(cardItem.key) >= 0 : true; + } + getProcessStatus(): string { if (this.processInstance) { return this.isRunning() ? 'Running' : 'Completed';