mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-2298] Process Header - Make it customizable from config file (#2944)
* [ADF-2298] Process Header - Make it customizable from config file * Added customization to process instance header through config file * [ADF-2298] Process Header - Make it customizable from config file * Fixed tests * Added documentation
This commit is contained in:
Deepak Paul
committed by
Maurizio Vitale
Maurizio Vitale
parent
b08e2eced7
commit
c51d76f5a2
@@ -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.
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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<ProcessInstanceHeaderComponent>;
|
||||
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');
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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';
|
||||
|
||||
Reference in New Issue
Block a user