[ADF-2211] added configuration filter for task header properties (#2914)

* [ADF-2211] added configuration filter for task header properties

* [ADF-2211] removed added configuration

* [ADF-2211] updated schema.json with the new attribute

* [ADF-2211] added schema check on build step of demo shell

demo-shell/package.json

@@ -9,9 +9,9 @@
     "start": "npm run server-versions && rimraf dist && ng serve --host 0.0.0.0 --app dist --open --aot=false",
     "start:dev": " npm run lint && npm run server-versions && rimraf dist && npm run clean-lib-angular && concurrently \"ng serve --host 0.0.0.0 --disable-host-check --app dev pp-dev --proxy-config proxy.conf.js --open\" \"npm run style:dev --watch\" \"npm run copy:dev\" ",
     "start:dist": "npm run server-versions && rimraf dist && node --max_old_space_size=30000 node_modules/.bin/ng serve --prod --build-optimizer=false  --aot=false --host 0.0.0.0 --disable-host-check --app dist",
-    "build": "npm run server-versions && rimraf dist && ng build  --app dist",
+    "build": "npm run validate-config && npm run server-versions && rimraf dist && ng build  --app dist",
-    "build:dev": "npm run lint && npm run style:dev && npm run server-versions && rimraf dist && ng build --app dev",
+    "build:dev": "npm run validate-config && npm run lint && npm run style:dev && npm run server-versions && rimraf dist && ng build --app dev",
-    "build:dist": "npm run style:dev && npm run server-versions && rimraf dist && node --max_old_space_size=30000 node_modules/.bin/ng build --prod  --build-optimizer=false  --aot=false --app dist",
+    "build:dist": "npm run validate-config && npm run style:dev && npm run server-versions && rimraf dist && node --max_old_space_size=30000 node_modules/.bin/ng build --prod  --build-optimizer=false  --aot=false --app dist",
     "style:dev": "npm run webpack -- --config  config/webpack.style.js --progress --profile --bail",
     "copy:dev": "node ./config/dev-copy-watch.js",
     "test": "ng test",

docs/task-header.component.md

@@ -30,6 +30,24 @@ Shows all the information related to a task.
 
 The purpose of the component is to populate the local variable called `properties` (array of CardViewModel), with all the information that we want to display.
 
+## Customise the property showed
+By default all the property are showed :
+***assignee***, ***status***, ***priority***, ***dueDate***, ***category***, ***parentName***, ***created-by***, ***created***, ***id***, ***description***, ***formName***. 
+
+It is possible to customise the showed property via the "app.config.json".
+This is how the configuration looks like:
+
+```json
+
+    "adf-task-header": {
+      "presets": {
+          "properties" : [ "assignee", "status", "priority", "parentName"]
+      }
+    },
+
+```
+In this way only the listed property will be showed.
+
 ## See also
 
 -   [Task Details model](task-details.model.md)

lib/core/app-config/schema.json

@@ -248,6 +248,24 @@
                 }
             }
         },
+        "adf-task-header": {
+            "description": "Task header component configuration",
+            "type": "object",
+            "properties": {
+                "presets": {
+                    "description": "Presets for task header component",
+                    "type": "object",
+                    "properties": {
+                        "properties": {
+                              "type": "array",
+                              "items": {
+                                "enum": [ "assignee", "status", "priority", "dueDate", "category", "parentName", "created-by", "created", "id", "description", "formName" ]
+                              }
+                        }
+                    }
+                }
+            }
+        },
         "adf-task-list": {
             "description": "Task list component configuration",
             "type": "object",
@@ -316,4 +334,4 @@
             }
         }
     }
-}
+}

lib/process-services/task-list/components/task-header.component.spec.ts

@@ -17,7 +17,7 @@
 
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { CardViewUpdateService } from '@alfresco/adf-core';
+import { CardViewUpdateService, AppConfigService } from '@alfresco/adf-core';
 import { BpmUserService } from '@alfresco/adf-core';
 import { MaterialModule } from '../../material.module';
 import { Observable } from 'rxjs/Observable';
@@ -39,6 +39,7 @@ describe('TaskHeaderComponent', () => {
     let component: TaskHeaderComponent;
     let fixture: ComponentFixture<TaskHeaderComponent>;
     let userBpmService: BpmUserService;
+    let appConfigService: AppConfigService;
 
     let fakeBpmAssignedUser = {
         id: 1001,
@@ -65,7 +66,8 @@ describe('TaskHeaderComponent', () => {
             providers: [
                 TaskListService,
                 BpmUserService,
-                CardViewUpdateService
+                CardViewUpdateService,
+                AppConfigService
             ]
         }).compileComponents();
     }));
@@ -77,6 +79,7 @@ describe('TaskHeaderComponent', () => {
         userBpmService = TestBed.get(BpmUserService);
         spyOn(userBpmService, 'getCurrentUserInfo').and.returnValue(Observable.of(fakeBpmAssignedUser));
         component.taskDetails = new TaskDetailsModel(taskDetailsMock);
+        appConfigService = TestBed.get(AppConfigService);
     });
 
     it('should render empty component if no task details provided', () => {
@@ -279,4 +282,36 @@ describe('TaskHeaderComponent', () => {
         expect(valueEl.nativeElement.innerText).toBe('ADF_TASK_LIST.PROPERTIES.FORM_NAME_DEFAULT');
     });
 
+    describe('Config Filtering', () => {
+
+        it('should show only the properties from the configuration file', () => {
+            spyOn(appConfigService, 'get').and.returnValue(['assignee', 'status']);
+            component.taskDetails.processInstanceId = '1';
+            component.taskDetails.processDefinitionName = 'Parent Name';
+            component.ngOnChanges({});
+            fixture.detectChanges();
+            let propertyList = fixture.debugElement.queryAll(By.css('.adf-property-list .adf-property'));
+            expect(propertyList).toBeDefined();
+            expect(propertyList).not.toBeNull();
+            expect(propertyList.length).toBe(2);
+            expect(propertyList[0].nativeElement.textContent).toContain('ADF_TASK_LIST.PROPERTIES.ASSIGNEE');
+            expect(propertyList[1].nativeElement.textContent).toContain('ADF_TASK_LIST.PROPERTIES.STATUS');
+        });
+
+        it('should show all the default properties if there is no configuration', () => {
+            spyOn(appConfigService, 'get').and.returnValue(null);
+            component.taskDetails.processInstanceId = '1';
+            component.taskDetails.processDefinitionName = 'Parent Name';
+            component.ngOnChanges({});
+            fixture.detectChanges();
+            let propertyList = fixture.debugElement.queryAll(By.css('.adf-property-list .adf-property'));
+            expect(propertyList).toBeDefined();
+            expect(propertyList).not.toBeNull();
+            expect(propertyList.length).toBe(component.properties.length);
+            expect(propertyList[0].nativeElement.textContent).toContain('ADF_TASK_LIST.PROPERTIES.ASSIGNEE');
+            expect(propertyList[1].nativeElement.textContent).toContain('ADF_TASK_LIST.PROPERTIES.STATUS');
+        });
+
+    });
+
 });

lib/process-services/task-list/components/task-header.component.ts

@@ -16,9 +16,15 @@
  */
 
 import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
-
+import { BpmUserService,
-import { BpmUserService, CardViewDateItemModel, CardViewItem, CardViewMapItemModel, CardViewTextItemModel, LogService, TranslationService } from '@alfresco/adf-core';
+         CardViewDateItemModel,
-
+         CardViewItem,
+         CardViewMapItemModel,
+         CardViewTextItemModel,
+         CardViewBaseItemModel,
+         LogService,
+         TranslationService,
+         AppConfigService } from '@alfresco/adf-core';
 import { TaskDetailsModel } from '../models/task-details.model';
 import { TaskListService } from './../services/tasklist.service';
 
@@ -53,7 +59,8 @@ export class TaskHeaderComponent implements OnChanges, OnInit {
     constructor(private activitiTaskService: TaskListService,
                 private bpmUserService: BpmUserService,
                 private translationService: TranslationService,
-                private logService: LogService) {
+                private logService: LogService,
+                private appConfig: AppConfigService) {
     }
 
     ngOnInit() {
@@ -64,105 +71,116 @@ export class TaskHeaderComponent implements OnChanges, OnInit {
         this.refreshData();
     }
 
+    private initDefaultProperties(parentInfoMap) {
+        return [
+            new CardViewTextItemModel(
+                {
+                 label: 'ADF_TASK_LIST.PROPERTIES.ASSIGNEE',
+                 value: this.taskDetails.getFullName(),
+                 key: 'assignee',
+                 default: this.translationService.instant('ADF_TASK_LIST.PROPERTIES.ASSIGNEE_DEFAULT'),
+                 clickable: !this.isCompleted()
+                }
+            ),
+            new CardViewTextItemModel(
+                {
+                    label: 'ADF_TASK_LIST.PROPERTIES.STATUS',
+                    value: this.getTaskStatus(),
+                    key: 'status'
+                }
+            ),
+            new CardViewTextItemModel(
+                {
+                    label: 'ADF_TASK_LIST.PROPERTIES.PRIORITY',
+                    value: this.taskDetails.priority,
+                    key: 'priority',
+                    editable: true
+                }
+            ),
+            new CardViewDateItemModel(
+                {
+                    label: 'ADF_TASK_LIST.PROPERTIES.DUE_DATE',
+                    value: this.taskDetails.dueDate,
+                    key: 'dueDate',
+                    default: this.translationService.instant('ADF_TASK_LIST.PROPERTIES.DUE_DATE_DEFAULT'),
+                    editable: true
+                }
+            ),
+            new CardViewTextItemModel(
+                {
+                    label: 'ADF_TASK_LIST.PROPERTIES.CATEGORY',
+                    value: this.taskDetails.category,
+                    key: 'category',
+                    default: this.translationService.instant('ADF_TASK_LIST.PROPERTIES.CATEGORY_DEFAULT')
+                }
+            ),
+            new CardViewMapItemModel(
+                {
+                    label: 'ADF_TASK_LIST.PROPERTIES.PARENT_NAME',
+                    value: parentInfoMap,
+                    key: 'parentName',
+                    default: this.translationService.instant('ADF_TASK_LIST.PROPERTIES.PARENT_NAME_DEFAULT'),
+                    clickable: true
+                }
+            ),
+            new CardViewTextItemModel(
+                {
+                    label: 'ADF_TASK_LIST.PROPERTIES.CREATED_BY',
+                    value: this.taskDetails.getFullName(),
+                    key: 'created-by'
+                }
+            ),
+            new CardViewDateItemModel(
+                {
+                    label: 'ADF_TASK_LIST.PROPERTIES.CREATED',
+                    value: this.taskDetails.created,
+                    key: 'created'
+                }
+            ),
+            new CardViewTextItemModel(
+                {
+                    label: 'ADF_TASK_LIST.PROPERTIES.ID',
+                    value: this.taskDetails.id,
+                    key: 'id'
+                }
+            ),
+            new CardViewTextItemModel(
+                {
+                    label: 'ADF_TASK_LIST.PROPERTIES.DESCRIPTION',
+                    value: this.taskDetails.description,
+                    key: 'description',
+                    default: this.translationService.instant('ADF_TASK_LIST.PROPERTIES.DESCRIPTION_DEFAULT'),
+                    multiline: true,
+                    editable: true
+                }
+            ),
+            new CardViewTextItemModel(
+                {
+                    label: 'ADF_TASK_LIST.PROPERTIES.FORM_NAME',
+                    value: this.formName,
+                    key: 'formName',
+                    default: this.translationService.instant('ADF_TASK_LIST.PROPERTIES.FORM_NAME_DEFAULT')
+                }
+            )
+        ];
+    }
+
     /**
      * Refresh the card data
      */
     refreshData() {
         if (this.taskDetails) {
             const parentInfoMap = this.getParentInfo();
-            this.properties = [
+            const defaultProperties = this.initDefaultProperties(parentInfoMap);
-                new CardViewTextItemModel(
+            const filteredProperties: string[] = this.appConfig.get('adf-task-header.presets.properties');
-                    {
+            this.properties = defaultProperties.filter((cardItem) => this.isValidSelection(filteredProperties, cardItem));
-                     label: 'ADF_TASK_LIST.PROPERTIES.ASSIGNEE',
-                     value: this.taskDetails.getFullName(),
-                     key: 'assignee',
-                     default: this.translationService.instant('ADF_TASK_LIST.PROPERTIES.ASSIGNEE_DEFAULT'),
-                     clickable: !this.isCompleted()
-                    }
-                ),
-                new CardViewTextItemModel(
-                    {
-                        label: 'ADF_TASK_LIST.PROPERTIES.STATUS',
-                        value: this.getTaskStatus(),
-                        key: 'status'
-                    }
-                ),
-                new CardViewTextItemModel(
-                    {
-                        label: 'ADF_TASK_LIST.PROPERTIES.PRIORITY',
-                        value: this.taskDetails.priority,
-                        key: 'priority',
-                        editable: true
-                    }
-                ),
-                new CardViewDateItemModel(
-                    {
-                        label: 'ADF_TASK_LIST.PROPERTIES.DUE_DATE',
-                        value: this.taskDetails.dueDate,
-                        key: 'dueDate',
-                        default: this.translationService.instant('ADF_TASK_LIST.PROPERTIES.DUE_DATE_DEFAULT'),
-                        editable: true
-                    }
-                ),
-                new CardViewTextItemModel(
-                    {
-                        label: 'ADF_TASK_LIST.PROPERTIES.CATEGORY',
-                        value: this.taskDetails.category,
-                        key: 'category',
-                        default: this.translationService.instant('ADF_TASK_LIST.PROPERTIES.CATEGORY_DEFAULT')
-                    }
-                ),
-                new CardViewMapItemModel(
-                    {
-                        label: 'ADF_TASK_LIST.PROPERTIES.PARENT_NAME',
-                        value: parentInfoMap, key: 'parentName',
-                        default: this.translationService.instant('ADF_TASK_LIST.PROPERTIES.PARENT_NAME_DEFAULT'),
-                        clickable: true
-                    }
-                ),
-                new CardViewTextItemModel(
-                    {
-                        label: 'ADF_TASK_LIST.PROPERTIES.CREATED_BY',
-                        value: this.taskDetails.getFullName(),
-                        key: 'created-by'
-                    }
-                ),
-                new CardViewDateItemModel(
-                    {
-                        label: 'ADF_TASK_LIST.PROPERTIES.CREATED',
-                        value: this.taskDetails.created,
-                        key: 'created'
-                    }
-                ),
-                new CardViewTextItemModel(
-                    {
-                        label: 'ADF_TASK_LIST.PROPERTIES.ID',
-                        value: this.taskDetails.id,
-                        key: 'id'
-                    }
-                ),
-                new CardViewTextItemModel(
-                    {
-                        label: 'ADF_TASK_LIST.PROPERTIES.DESCRIPTION',
-                        value: this.taskDetails.description,
-                        key: 'description',
-                        default: this.translationService.instant('ADF_TASK_LIST.PROPERTIES.DESCRIPTION_DEFAULT'),
-                        multiline: true,
-                        editable: true
-                    }
-                ),
-                new CardViewTextItemModel(
-                    {
-                        label: 'ADF_TASK_LIST.PROPERTIES.FORM_NAME',
-                        value: this.formName,
-                        key: 'formName',
-                        default: this.translationService.instant('ADF_TASK_LIST.PROPERTIES.FORM_NAME_DEFAULT')
-                    }
-                )
-            ];
         }
     }
 
+    private isValidSelection(filteredProperties: string[], cardItem: CardViewBaseItemModel): boolean {
+        return filteredProperties ? filteredProperties.indexOf(cardItem.key) >= 0 : true;
+    }
+
     /**
      * Loads current bpm userId
      */