[ADF-3422] Process Services - Create settings tab (#3702)

* settings tab added

* fix icon

* fix e2e

demo-shell/resources/i18n/en.json

@@ -174,6 +174,7 @@
     "TASKS-TAB": "Tasks",
     "PROCESSES-TAB": "Process",
     "REPORTS-TAB": "Reports",
+    "SETTINGS-TAB": "Settings",
     "START-TASK": "Start task",
     "START-PROCESS": "Start process",
     "PROCESS-AUDIT-LOG": "Process Audit log",

demo-shell/src/app/components/process-service/process-service.component.html

@@ -1,17 +1,19 @@
-<mat-tab-group [(selectedIndex)]="activeTab" (selectedTabChange)="onTabChange($event)" data-automation-id="navigation-bar">
+<mat-tab-group [(selectedIndex)]="activeTab" (selectedTabChange)="onTabChange($event)"
+               data-automation-id="navigation-bar">
     <mat-tab id="tasks-header" href="#tasks" label="{{'PS-TAB.TASKS-TAB' | translate}}">
         <div class="page-content" *ngIf="showTaskTab">
             <div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
                 <div class="adf-grid-item adf-tasks-menu" fxFlex.gt-md="225px">
                     <div class="adf-list-buttons">
-                        <adf-sidebar-action-menu [expanded]="true" [width]="205" title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
+                        <adf-sidebar-action-menu [expanded]="true" [width]="205"
-                            <mat-icon sidebar-menu-title-icon >arrow_drop_down</mat-icon>
+                                                 title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
-                                <div sidebar-menu-options>
+                            <mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
-                                    <button mat-menu-item data-automation-id="btn-start-task" (click)="navigateStartTask()">
+                            <div sidebar-menu-options>
-                                        <mat-icon>assessment</mat-icon>
+                                <button mat-menu-item data-automation-id="btn-start-task" (click)="navigateStartTask()">
-                                        <span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_TASK' | translate}}</span>
+                                    <mat-icon>assessment</mat-icon>
-                                    </button>
+                                    <span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_TASK' | translate}}</span>
-                                </div>
+                                </button>
+                            </div>
                         </adf-sidebar-action-menu>
                     </div>
                     <adf-accordion>
@@ -20,7 +22,7 @@
                             <adf-task-filters
                                 [filterParam]="filterSelected"
                                 [appId]="appId"
-                                [hasIcon]="false"
+                                [hasIcon]="showTaskFilterIcon"
                                 (filterClick)="onTaskFilterClick($event)"
                                 (success)="onSuccessTaskFilterList($event)"
                                 #activitifilter>
@@ -28,16 +30,9 @@
                         </adf-accordion-group>
                     </adf-accordion>
                 </div>
-                <div class="adf-grid-item adf-tasks-list" fxFlex.gt-md="380px" [ngClass.gt-md]="{'small-pagination': true}"
+                <div class="adf-grid-item adf-tasks-list" fxFlex.gt-md="380px"
+                     [ngClass.gt-md]="{'small-pagination': true}"
                      *ngIf="taskFilter && !isStartTaskMode()">
-                     <mat-slide-toggle
-                        class="adf-task-details-toggle"
-                        id="showHeaderToggle"
-                        [color]="'primary'"
-                        (change)="toggleHeaderContent()"
-                        [checked]="showHeaderContent">
-                        {{ 'PS-TAB.TASK-SHOW-HEADER'| translate }}
-                    </mat-slide-toggle>
                     <adf-tasklist
                         [appId]="taskFilter?.appId"
                         [presetColumn]="presetColumn"
@@ -70,17 +65,18 @@
                         #taskListPagination>
                     </adf-pagination>
                 </div>
-                <div class="adf-grid-item adf-tasks-details" *ngIf="!isStartTaskMode()" fxFlex.gt-md="1 1 auto" data-automation-id="adf-tasks-details">
+                <div class="adf-grid-item adf-tasks-details" *ngIf="!isStartTaskMode()" fxFlex.gt-md="1 1 auto"
+                     data-automation-id="adf-tasks-details">
                     <adf-task-details #activitidetails
-                                           [debugMode]="true"
+                                      [debugMode]="true"
-                                           [taskId]="currentTaskId"
+                                      [taskId]="currentTaskId"
-                                           [fieldValidators]="fieldValidators"
+                                      [fieldValidators]="fieldValidators"
-                                           [showHeaderContent]="showHeaderContent"
+                                      [showHeaderContent]="showHeaderContent"
-                                           (formCompleted)="onFormCompleted($event)"
+                                      (formCompleted)="onFormCompleted($event)"
-                                           (formContentClicked)="onContentClick($event)"
+                                      (formContentClicked)="onContentClick($event)"
-                                           (taskCreated)="onTaskCreated($event)"
+                                      (taskCreated)="onTaskCreated($event)"
-                                           (assignTask)="onAssignTask()"
+                                      (assignTask)="onAssignTask()"
-                                           (taskDeleted)="onTaskDeleted($event)">
+                                      (taskDeleted)="onTaskDeleted($event)">
                     </adf-task-details>
                     <mat-divider></mat-divider>
                     <div *ngIf="currentTaskId">
@@ -96,7 +92,7 @@
                     </div>
                     <mat-card>
                         <mat-card-content>
-                            <app-task-attachments [taskId]="currentTaskId" ></app-task-attachments>
+                            <app-task-attachments [taskId]="currentTaskId"></app-task-attachments>
                         </mat-card-content>
                     </mat-card>
                 </div>
@@ -111,15 +107,17 @@
         </div>
     </mat-tab>
     <mat-tab id="processes-header" href="#processes"
-            label="{{'PS-TAB.PROCESSES-TAB' | translate}}">
+             label="{{'PS-TAB.PROCESSES-TAB' | translate}}">
         <div class="page-content" *ngIf="showProcessTab">
             <div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
                 <div class="adf-grid-item adf-processes-menu" fxFlex.gt-md="225px">
                     <div class="adf-list-buttons">
-                        <adf-sidebar-action-menu [expanded]="true" [width]="205" title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
+                        <adf-sidebar-action-menu [expanded]="true" [width]="205"
-                            <mat-icon sidebar-menu-title-icon >arrow_drop_down</mat-icon>
+                                                 title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
+                            <mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
                             <div sidebar-menu-options>
-                                <button mat-menu-item data-automation-id="btn-start-process" (click)="navigateStartProcess()">
+                                <button mat-menu-item data-automation-id="btn-start-process"
+                                        (click)="navigateStartProcess()">
                                     <mat-icon>assessment</mat-icon>
                                     <span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_PROCESS' | translate}}</span>
                                 </button>
@@ -133,7 +131,7 @@
                                 #activitiprocessfilter
                                 [appId]="appId"
                                 [filterParam]="filterSelected"
-                                [showIcon]="false"
+                                [showIcon]="showProcessFilterIcon"
                                 (filterClick)="onProcessFilterChange($event)"
                                 (filterSelected)="onProcessFilterChange($event)"
                                 (success)="onSuccessProcessFilterList($event)">
@@ -141,7 +139,8 @@
                         </adf-accordion-group>
                     </adf-accordion>
                 </div>
-                <div class="adf-grid-item adf-processes-list adf-list" fxFlex.gt-md="380px" [ngClass.gt-md]="{'small-pagination': true}"
+                <div class="adf-grid-item adf-processes-list adf-list" fxFlex.gt-md="380px"
+                     [ngClass.gt-md]="{'small-pagination': true}"
                      *ngIf="processFilter && !isStartProcessMode()">
                     <adf-process-instance-list
                         #processList
@@ -193,7 +192,8 @@
                     </div>
                     <mat-card>
                         <mat-card-content>
-                            <app-process-attachments [processInstanceId]="currentProcessInstanceId" ></app-process-attachments>
+                            <app-process-attachments
+                                [processInstanceId]="currentProcessInstanceId"></app-process-attachments>
                         </mat-card-content>
                     </mat-card>
                 </div>
@@ -213,7 +213,7 @@
         </div>
     </mat-tab>
     <mat-tab id="report-header" href="#report"
-            label="{{'PS-TAB.REPORTS-TAB' | translate}}">
+             label="{{'PS-TAB.REPORTS-TAB' | translate}}">
         <div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
             <div class="adf-grid-item adf-reports-menu" fxFlex.gt-md="300px">
                 <span><h5>Report List</h5></span>
@@ -241,4 +241,23 @@
             </div>
         </div>
     </mat-tab>
+    <mat-tab id="settings-header" href="#settings"
+             label="{{'PS-TAB.SETTINGS-TAB' | translate}}">
+        <div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
+            <div class="adf-grid-item adf-settings-menu" fxFlex.gt-md="300px">
+                <span><h3>Settings Menu</h3></span>
+            </div>
+            <div class="adf-grid-item adf-settings-details" fxFlex.gt-md="1 1 auto">
+                <div>
+                    <mat-slide-toggle id="adf-show-task-filter-icon" (change)="changeTaskFilterIcon()" [checked]="showTaskFilterIcon">Show task filters icons</mat-slide-toggle>
+                </div>
+                <div>
+                    <mat-slide-toggle id="adf-show-process-filter-icon" (change)="changeProcessFilterIcon()" [checked]="showProcessFilterIcon">Show process filters icons</mat-slide-toggle>
+                </div>
+                <div>
+                    <mat-slide-toggle id="adf-show-header" (change)="toggleHeaderContent()" [checked]="showHeaderContent">{{ 'PS-TAB.TASK-SHOW-HEADER'| translate }}</mat-slide-toggle>
+                </div>
+            </div>
+        </div>
+    </mat-tab>
 </mat-tab-group>

demo-shell/src/app/components/process-service/process-service.component.scss

@@ -94,6 +94,10 @@
             }
         }
 
+        mat-slide-toggle {
+            margin: 10px;
+        }
+
         @media screen and ($mat-small) {
             container-widget .grid-list {
                 flex-direction: column;

demo-shell/src/app/components/process-service/process-service.component.ts

@@ -144,6 +144,9 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
     showTaskTab: boolean;
     showProcessTab: boolean;
 
+    showProcessFilterIcon: boolean;
+    showTaskFilterIcon: boolean;
+
     fieldValidators = [
         ...FORM_FIELD_VALIDATORS,
         new DemoFieldValidator()
@@ -491,4 +494,10 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
         this.currentTaskId = null;
     }
 
+    changeTaskFilterIcon() {
+        this.showTaskFilterIcon = !this.showTaskFilterIcon;
+    }
+    changeProcessFilterIcon() {
+        this.showProcessFilterIcon = !this.showProcessFilterIcon;
+    }
 }

e2e/pages/adf/process_services/appNavigationBarPage.js

@@ -22,6 +22,7 @@ var AppNavigationBarPage = function () {
     var tasksButton = element.all(by.cssContainingText("div[class*='mat-tab-label'] .mat-tab-labels div", "Tasks")).first();
     var processButton = element.all(by.cssContainingText("div[class*='mat-tab-label'] .mat-tab-labels div", "Process")).first();
     var reportsButton = element.all(by.cssContainingText("div[class*='mat-tab-label'] .mat-tab-labels div", "Reports")).first();
+    var settingsButton = element.all(by.cssContainingText("div[class*='mat-tab-label'] .mat-tab-labels div", "Settings")).first();
     var reportsButtonSelected = element.all(by.cssContainingText("div[class*='mat-tab-label'] .mat-tab-labels div[aria-selected='true']", "Reports")).first();
 
     this.clickTasksButton = function () {
@@ -33,6 +34,10 @@ var AppNavigationBarPage = function () {
         return processButton.click();
     };
 
+    this.clickSettingsButton = function () {
+        return settingsButton.click();
+    };
+
     this.clickReportsButton = function () {
         Util.waitUntilElementIsVisible(reportsButton);
         reportsButton.click();

e2e/pages/adf/process_services/dialog/taskDetailsToggles.js

@@ -20,8 +20,8 @@ var ToggleState = require('../../core/toggleState');
 var TaskDetailsToggles = function () {
 
     var toggleState = new ToggleState();
-    
+
-    var showDetailsHeaderToggle = element(by.id("showHeaderToggle-input"));
+    var showDetailsHeaderToggle = element(by.id('adf-show-header-input'));
 
     this.enableShowHeader = function () {
         toggleState.enableToggle(showDetailsHeaderToggle);

e2e/process-services/start_task_custom_app.e2e.ts

@@ -21,7 +21,7 @@ import LoginPage = require('../pages/adf/loginPage');
 import ProcessServicesPage = require('../pages/adf/process_services/processServicesPage');
 import TasksPage = require('../pages/adf/process_services/tasksPage');
 import { AttachmentListPage } from '../pages/adf/process_services/attachmentListPage';
-import CONSTANTS = require('../util/constants');
+import AppNavigationBarPage = require('../pages/adf/process_services/appNavigationBarPage');
 
 import Task = require('../models/APS/Task');
 import Tenant = require('../models/APS/Tenant');
@@ -39,12 +39,18 @@ import AlfrescoApi = require('alfresco-js-api-node');
 import { AppsActions } from '../actions/APS/apps.actions';
 import { UsersActions } from '../actions/users.actions';
 
+import CONSTANTS = require('../util/constants');
+
 describe('Start Task - Custom App', () => {
 
     let TASKDATAFORMAT = 'mmm dd yyyy';
+
     let loginPage = new LoginPage();
     let processServicesPage = new ProcessServicesPage();
     let attachmentListPage = new AttachmentListPage();
+    let appNavigationBarPage = new AppNavigationBarPage();
+
+
     let processUserModel, assigneeUserModel;
     let app = resources.Files.SIMPLE_APP_WITH_USER_FORM;
     let formTextField = app.form_fields.form_fieldId;
@@ -212,10 +218,16 @@ describe('Start Task - Custom App', () => {
         taskPage.createNewTask().addName(showHeaderTask).clickStartButton();
         taskPage.usingTasksListPage().checkTaskIsDisplayedInTasksList(showHeaderTask).selectTaskFromTasksList(showHeaderTask);
 
+        appNavigationBarPage.clickSettingsButton();
         taskPage.usingTaskDetails().usingTaskDetailsToggles().disableShowHeader();
+        appNavigationBarPage.clickTasksButton();
+
         taskPage.usingTaskDetails().taskInfoDrawerIsNotDisplayed();
 
+        appNavigationBarPage.clickSettingsButton();
         taskPage.usingTaskDetails().usingTaskDetailsToggles().enableShowHeader();
+        appNavigationBarPage.clickTasksButton();
+
         taskPage.usingTaskDetails().taskInfoDrawerIsDisplayed();
     });
 

e2e/process-services/start_task_task_app.e2e.ts

@@ -21,6 +21,7 @@ import LoginPage = require('../pages/adf/loginPage');
 import ProcessServicesPage = require('../pages/adf/process_services/processServicesPage');
 import TasksPage = require('../pages/adf/process_services/tasksPage');
 import { AttachmentListPage } from '../pages/adf/process_services/attachmentListPage';
+import AppNavigationBarPage = require('../pages/adf/process_services/appNavigationBarPage');
 
 import CONSTANTS = require('../util/constants');
 
@@ -43,9 +44,12 @@ import path = require('path');
 describe('Start Task - Task App', () => {
 
     let TASKDATAFORMAT = 'mmm dd yyyy';
+
     let loginPage = new LoginPage();
     let processServicesPage = new ProcessServicesPage();
     let attachmentListPage = new AttachmentListPage();
+    let appNavigationBarPage = new AppNavigationBarPage();
+
     let processUserModel, assigneeUserModel;
     let app = resources.Files.SIMPLE_APP_WITH_USER_FORM;
     let formTextField = app.form_fields.form_fieldId;
@@ -215,10 +219,16 @@ describe('Start Task - Task App', () => {
         taskPage.usingFiltersPage().goToFilter(CONSTANTS.TASKFILTERS.MY_TASKS);
         taskPage.usingTasksListPage().checkTaskIsDisplayedInTasksList(showHeaderTask).selectTaskFromTasksList(showHeaderTask);
 
+        appNavigationBarPage.clickSettingsButton();
         taskPage.usingTaskDetails().usingTaskDetailsToggles().disableShowHeader();
+        appNavigationBarPage.clickTasksButton();
+
         taskPage.usingTaskDetails().taskInfoDrawerIsNotDisplayed();
 
+        appNavigationBarPage.clickSettingsButton();
         taskPage.usingTaskDetails().usingTaskDetailsToggles().enableShowHeader();
+        appNavigationBarPage.clickTasksButton();
+
         taskPage.usingTaskDetails().taskInfoDrawerIsDisplayed();
     });
 

lib/process-services/process-list/components/process-filters.component.spec.ts

@@ -77,6 +77,7 @@ describe('ProcessFiltersComponent', () => {
 
         processFilterService = TestBed.get(ProcessFilterService);
         appsProcessService = TestBed.get(AppsProcessService);
+        filterList = new ProcessFiltersComponent(processFilterService, appsProcessService);
     });
 
     afterEach(() => {