[ACA-3304] FE - Add a drop down to select running application on star…

…t process component (#5702) * [ACA-3304] FE - Add a drop down to select running application on start process component * * Removed unwanted css * * Added unit tests and updated docs * * Fixed comments * * Added way to test application dropdown in start-process * * Fixed failing unit tests * * Removed all option* Fixed failing e2e
Alfresco · May 27, 2020 · 0f5fd35 · 0f5fd35
1 parent 63a9c1a
commit 0f5fd35
Show file tree

Hide file tree

Showing 12 changed files with 335 additions and 81 deletions.
diff --git a/demo-shell/src/app/components/process-service/process-service.component.html b/demo-shell/src/app/components/process-service/process-service.component.html
@@ -217,10 +217,11 @@
                      *ngIf="isStartProcessMode()">
                     <adf-start-process
                         #activitiStartProcess
-                        [appId]="appId"
+                        [appId]="applicationId"
+                        [processDefinitionName]="processDefinitionName"
+                        [showSelectApplicationDropdown]="showApplications"
                         [title]="'ADF_PROCESS_LIST.START_PROCESS.FORM.TITLE'"
                         [name]="defaultProcessName"
-                        [processDefinitionName]="defaultProcessDefinitionName"
                         (formContentClicked)="onContentClick($event)"
                         (start)="onStartProcessInstance($event)"
                         (cancel)="onCancelProcessInstance()">
@@ -291,6 +292,24 @@
                 <div>
                     <mat-slide-toggle id="adf-process-context-menu" [(ngModel)]="processContextMenu" >Show Process list Context menu</mat-slide-toggle>
                 </div>
+                <div>
+                    <mat-slide-toggle id="adf-start-process-app-drop-down" [(ngModel)]="showApplications" >Show Application dropdown on start process</mat-slide-toggle>
+                    <mat-card class="example-card" *ngIf="showApplications">
+                        <mat-card-header >
+                          <mat-card-title>Filter Process definitions</mat-card-title>
+                        </mat-card-header>
+                        <mat-card-content  fxLayout="column" fxLayoutAlign="space-around stretch">
+                            <mat-form-field>
+                                <mat-label>ApplicationId</mat-label>
+                                <input matInput [(ngModel)]="applicationId">
+                              </mat-form-field>
+                              <mat-form-field>
+                                <mat-label>ProcessDefinitionName</mat-label>
+                                <input matInput [(ngModel)]="processDefinitionName">
+                              </mat-form-field>
+                        </mat-card-content>
+                      </mat-card>
+                </div>
                 <br>
                 <mat-radio-group [(ngModel)]="selectionMode">
                     <mat-radio-button value="multiple">multiple</mat-radio-button>

diff --git a/demo-shell/src/app/components/process-service/process-service.component.ts b/demo-shell/src/app/components/process-service/process-service.component.ts
@@ -153,6 +153,9 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
 
     showProcessFilterIcon: boolean;
     showTaskFilterIcon: boolean;
+    showApplications: boolean;
+    applicationId: number;
+    processDefinitionName: string;
 
     fieldValidators = [
         ...FORM_FIELD_VALIDATORS,
@@ -176,7 +179,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
         this.defaultProcessName = this.appConfig.get<string>('adf-start-process.name');
         this.defaultProcessDefinitionName = this.appConfig.get<string>('adf-start-process.processDefinitionName');
         this.defaultTaskName = this.appConfig.get<string>('adf-start-task.name');
-
+        this.processDefinitionName = this.defaultProcessDefinitionName;
         // Uncomment this line to replace all 'text' field editors with custom component
         // formRenderingService.setComponentTypeResolver('text', () => CustomEditorComponent, true);
 
@@ -251,6 +254,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
 
             if (applicationId && applicationId !== '0') {
                 this.appId = params['appId'];
+                this.applicationId = this.appId;
             }
 
             this.taskFilter = null;

diff --git a/docs/docassets/images/start-process-with-selected-application.png b/docs/docassets/images/start-process-with-selected-application.png
diff --git a/docs/process-services/components/start-process.component.md b/docs/process-services/components/start-process.component.md
@@ -43,6 +43,7 @@ Starts a process.
 | processDefinitionName | `string` |  | (optional) Definition name of the process to start. |
 | processFilterSelector | `boolean` | true | (optional) Parameter to enable selection of process when filtering. |
 | showSelectProcessDropdown | `boolean` | true | Hide or show the process selection dropdown. |
+| showSelectApplicationDropdown | `boolean` | false | application selection dropdown. |
 | title | `string` |  | (optional) Define the header of the component. |
 | values | [`FormValues`](../../../lib/core/form/components/widgets/core/form-values.ts) |  | Parameter to pass form field values in the start form if one is associated. |
 | variables | [`ProcessInstanceVariable`](../../../lib/process-services/src/lib/process-list/models/process-instance-variable.model.ts)`[]` |  | Variables in the input to the process [`RestVariable`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/activiti-rest-api/docs/RestVariable.md). |
@@ -175,6 +176,25 @@ The result will be the start form prefilled with the file data:
 
 ![Start process load file](../../docassets/images/start_process.png)
 
+### Starting a process with a selected application
+
+Now you can start process based on selected application from the dropdown. The process definition dropdown will display based on the selected application. The application dropdown will be selected application based on the given `appId` otherwise first application will be selected as default.
+
+```html
+ <adf-start-process 
+      [appId]="YOUR_APP_ID"
+      [title]="'ADF_PROCESS_LIST.START_PROCESS.FORM.TITLE'"
+      [name]="PROCESS_NAME"
+      [showSelectApplicationDropdown]="true"
+      [processDefinitionName]="PROCESS_DEFINITION_NAME">
+ </adf-start-process>		 
+```
+
+You can use the `showSelectApplicationDropdown` property to Hide or show application drop down.
+
+![Start process with selected application](../../docassets/images/start-process-with-selected-application.png)
+
+
 ## See also
 
 -   [Select Apps Dialog component](select-apps-dialog.component.md)
diff --git a/...ervices-cloud/src/lib/process/start-process/components/start-process-cloud.component.scss b/...ervices-cloud/src/lib/process/start-process/components/start-process-cloud.component.scss
@@ -1,19 +1,11 @@
 @mixin adf-cloud-start-service-theme($theme) {
     .adf {
         &-start-process {
-            .mat-select-trigger {
-                font-size: 14px !important;
-            }
 
             mat-form-field {
                 width: 100%;
             }
 
-            mat-select {
-                width: 100%;
-                padding: 16px 0 0;
-            }
-
             .mat-form-field-label {
                 color: mat-color($mat-grey, A400);
             }

diff --git a/lib/process-services/src/lib/form/start-form.component.spec.ts b/lib/process-services/src/lib/form/start-form.component.spec.ts
@@ -88,7 +88,7 @@ describe('StartFormComponent', () => {
     });
 
     it('should not load start form when changes notified but no change to processDefinitionId', () => {
-        component.processDefinitionId = exampleId1;
+        component.processDefinitionId = undefined;
         component.ngOnChanges({ otherProp: new SimpleChange(exampleId1, exampleId2, true) });
         expect(formService.getStartFormDefinition).not.toHaveBeenCalled();
     });

diff --git a/lib/process-services/src/lib/form/start-form.component.ts b/lib/process-services/src/lib/form/start-form.component.ts
@@ -82,8 +82,12 @@ export class StartFormComponent extends FormComponent implements OnChanges, OnIn
     ngOnChanges(changes: SimpleChanges) {
         const processDefinitionId = changes['processDefinitionId'];
         if (processDefinitionId && processDefinitionId.currentValue) {
+            this.processDefinitionId = processDefinitionId.currentValue;
+        }
+
+        if (this.processDefinitionId) {
             this.visibilityService.cleanProcessVariable();
-            this.getStartFormDefinition(processDefinitionId.currentValue);
+            this.getStartFormDefinition(this.processDefinitionId);
             return;
         }
 

diff --git a/lib/process-services/src/lib/i18n/en.json b/lib/process-services/src/lib/i18n/en.json
@@ -276,6 +276,7 @@
       "FORM": {
         "TITLE": "Start Process",
         "LABEL": {
+          "SELECT_APPLICATION": "Select Application",
           "TYPE": "Select Process",
           "NAME": "Process Name"
         },

diff --git a/lib/process-services/src/lib/process-list/components/start-process.component.html b/lib/process-services/src/lib/process-list/components/start-process.component.html
@@ -4,35 +4,50 @@
         <div class="subtitle" id="error-message" *ngIf="errorMessageId">
             {{errorMessageId|translate}}
         </div>
-        <mat-form-field class="adf-process-input-container" [floatLabel]="'always'">
-            <mat-label>{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.TYPE' | translate}}</mat-label>
-            <input
-                type="text"
-                matInput
-                [formControl]="processDefinitionInput"
-                [matAutocomplete]="auto"
-                id="processDefinitionName"
-                #inputAutocomplete>
-            <div class="adf-process-input-autocomplete">
-                <mat-autocomplete
-                    #auto="matAutocomplete"
-                    id="processDefinitionOptions"
-                    [displayWith]="displayFn">
-                    <mat-option *ngFor="let processDef of filteredProcesses | async" [value]="processDef.name"
-                    (click)="processDefinitionSelectionChanged(processDef)">
-                        {{ processDef.name }}
+        <div class="adf-start-process-definition-container">
+            <mat-form-field *ngIf="showSelectApplicationDropdown" [floatLabel]="'always'" class="adf-start-process-app-list">
+                <mat-select
+                    placeholder="{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.SELECT_APPLICATION' | translate}}"
+                    (selectionChange)="onAppSelectionChange($event)"
+                    [(ngModel)]="selectedApplication"
+                    data-automation-id="adf-start-process-apps-drop-down">
+                    <mat-option 
+                        *ngFor="let application of applications"
+                        [value]="application"
+                        [attr.data-automation-id]="'adf-start-process-apps-option' + application.name">
+                        {{ application.name }}
                     </mat-option>
-                </mat-autocomplete>
-                <button
-                    id="adf-select-process-dropdown"
-                    *ngIf="showSelectProcessDropdown"
-                    mat-icon-button
-                    (click)="displayDropdown($event)">
-                    <mat-icon>arrow_drop_down</mat-icon>
-                </button>
-            </div>
-        </mat-form-field>
-
+                </mat-select>
+            </mat-form-field>
+            <mat-form-field class="adf-process-input-container" [floatLabel]="'always'">
+                <mat-label>{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.TYPE' | translate}}</mat-label>
+                <input
+                    type="text"
+                    matInput
+                    [formControl]="processDefinitionInput"
+                    [matAutocomplete]="auto"
+                    id="processDefinitionName"
+                    #inputAutocomplete>
+                <div class="adf-process-input-autocomplete">
+                    <mat-autocomplete
+                        #auto="matAutocomplete"
+                        id="processDefinitionOptions"
+                        [displayWith]="displayFn">
+                        <mat-option *ngFor="let processDef of filteredProcessesDefinitions$ | async" [value]="processDef.name"
+                        (click)="processDefinitionSelectionChanged(processDef)">
+                            {{ processDef.name }}
+                        </mat-option>
+                    </mat-autocomplete>
+                    <button
+                        id="adf-select-process-dropdown"
+                        *ngIf="showSelectProcessDropdown"
+                        mat-icon-button
+                        (click)="displayDropdown($event)">
+                        <mat-icon>arrow_drop_down</mat-icon>
+                    </button>
+                </div>
+            </mat-form-field>
+        </div>
         <mat-form-field class="adf-process-input-container" [floatLabel]="'always'">
             <mat-label>{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.NAME' | translate}}</mat-label>
             <input

diff --git a/lib/process-services/src/lib/process-list/components/start-process.component.scss b/lib/process-services/src/lib/process-list/components/start-process.component.scss
@@ -5,16 +5,9 @@
             margin-left: auto;
             margin-right: auto;
             margin-top: 10px;
-            .mat-select-trigger {
-                font-size: 14px !important;
-            }
             mat-form-field {
                 width: 100%;
             }
-            mat-select {
-                width: 100%;
-                padding: 16px 0 0;
-            }
             .mat-form-field-label {
                 color: mat-color($mat-grey, A400);
             }
@@ -50,6 +43,15 @@
         &-start-form-actions {
             text-align: right !important;
         }
+        &-start-process-definition-container {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-around;
+            align-items: baseline;
+        }
+        &-start-process-app-list {
+            margin-right: 10px;
+        }
     }
     @media (max-width: 600px) {
         .adf-start-process {