[ACA-2956] Add event emitter when processDefinition selection changes (for both APS and CLOUD) (#5579)

docs/process-services-cloud/components/start-process-cloud.component.md

@@ -52,6 +52,7 @@ Starts a process.
 | error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ProcessInstanceCloud`](../../../lib/process-services-cloud/src/lib/process/start-process/models/process-instance-cloud.model.ts)`>` | Emitted when an error occurs. |
 | formContentClicked | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ContentLinkModel`](../../../lib/core/form/components/widgets/core/content-link.model.ts)`>` | Emitted when form content is clicked. |
 | success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ProcessInstanceCloud`](../../../lib/process-services-cloud/src/lib/process/start-process/models/process-instance-cloud.model.ts)`>` | Emitted when the process is successfully started. |
+| processDefinitionSelection | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ProcessDefinitionCloud`](../../../lib/process-services-cloud/src/lib/process/start-process/models/process-definition-cloud.model.ts)`>` |  Emitted when process definition selection changes. |
 
 ## Details
 

docs/process-services/components/start-process.component.md

@@ -54,6 +54,7 @@ Starts a process.
 | cancel | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ProcessInstance`](../../../lib/process-services/src/lib/process-list/models/process-instance.model.ts)`>` | Emitted when the process is canceled. |
 | error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ProcessInstance`](../../../lib/process-services/src/lib/process-list/models/process-instance.model.ts)`>` | Emitted when an error occurs. |
 | start | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ProcessInstance`](../../../lib/process-services/src/lib/process-list/models/process-instance.model.ts)`>` | Emitted when the process starts. |
+| processDefinitionSelection | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ProcessDefinitionRepresentation`](../../../lib/process-services/src/lib/process-list/models/process-definition.model.ts)`>` |  Emitted when process definition selection changes. |
 
 ## Details
 

lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.html

@@ -33,7 +33,8 @@
                     id="processDefinitionName">
                 <div class="adf-process-input-autocomplete">
                     <mat-autocomplete #auto="matAutocomplete" id="processDefinitionOptions" [displayWith]="displayProcessNameOnDropdown" (optionSelected)="setProcessDefinitionOnForm($event.option.value)">
-                        <mat-option *ngFor="let processDef of filteredProcesses" [value]="getProcessDefinitionValue(processDef)">
+                        <mat-option *ngFor="let processDef of filteredProcesses" [value]="getProcessDefinitionValue(processDef)"
+                                    (click)="processDefinitionSelectionChanged(processDef)">
                             {{ getProcessDefinitionValue(processDef) }}
                         </mat-option>
                     </mat-autocomplete>

lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.spec.ts

@@ -534,5 +534,14 @@ describe('StartProcessCloudComponent', () => {
             fixture.detectChanges();
             expect(processInstanceName.valid).toBeTruthy();
         });
+
+        it('should emit processDefinitionSelection event when a process definition is selected', (done) => {
+            component.processDefinitionSelection.subscribe((processDefinition) => {
+                expect(processDefinition).toEqual(fakeProcessDefinitions[0]);
+                done();
+            });
+            fixture.detectChanges();
+            selectOptionByName(fakeProcessDefinitions[0].name);
+        });
     });
 });

lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.ts

@@ -88,6 +88,10 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
     @Output()
     formContentClicked: EventEmitter<ContentLinkModel> = new EventEmitter();
 
+    /** Emitted when process definition selection changes. */
+    @Output()
+    processDefinitionSelection: EventEmitter<ProcessDefinitionCloud> = new EventEmitter<ProcessDefinitionCloud>();
+
     processDefinitionList: ProcessDefinitionCloud[] = [];
     processDefinitionCurrent: ProcessDefinitionCloud;
     errorMessageId: string = '';
@@ -312,6 +316,10 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
         this.formContentClicked.emit(content);
     }
 
+    processDefinitionSelectionChanged(processDefinition) {
+        this.processDefinitionSelection.emit(processDefinition);
+    }
+
     ngOnDestroy() {
         this.onDestroy$.next(true);
         this.onDestroy$.complete();

lib/process-services/src/lib/process-list/components/start-process.component.html

@@ -29,7 +29,8 @@
                     #auto="matAutocomplete"
                     id="processDefinitionOptions"
                     [displayWith]="displayFn">
-                    <mat-option *ngFor="let processDef of filteredProcesses | async" [value]="processDef.name">
+                    <mat-option *ngFor="let processDef of filteredProcesses | async" [value]="processDef.name"
+                    (click)="processDefinitionSelectionChanged(processDef)">
                         {{ processDef.name }}
                     </mat-option>
                 </mat-autocomplete>

lib/process-services/src/lib/process-list/components/start-process.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { SimpleChange } from '@angular/core';
+import { DebugElement, SimpleChange } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ActivitiContentService, AppConfigService, FormService, setupTestBed } from '@alfresco/adf-core';
 import { of, throwError } from 'rxjs';
@@ -32,6 +32,7 @@ import {
 } from '../../mock';
 import { StartProcessInstanceComponent } from './start-process.component';
 import { ProcessTestingModule } from '../../testing/process.testing.module';
+import { By } from '@angular/platform-browser';
 
 describe('StartFormComponent', () => {
 
@@ -52,6 +53,19 @@ describe('StartFormComponent', () => {
         ]
     });
 
+    const selectOptionByName = (name: string) => {
+
+        const selectElement = fixture.nativeElement.querySelector('button#adf-select-process-dropdown');
+        selectElement.click();
+        fixture.detectChanges();
+        const options: any = fixture.debugElement.queryAll(By.css('.mat-option-text'));
+        const currentOption = options.find( (option: DebugElement) => option.nativeElement.innerHTML.trim() === name );
+
+        if (currentOption) {
+            currentOption.nativeElement.click();
+        }
+    };
+
     beforeEach(() => {
         appConfig = TestBed.get(AppConfigService);
         activitiContentService = TestBed.get(ActivitiContentService);
@@ -490,6 +504,15 @@ describe('StartFormComponent', () => {
             fixture.detectChanges();
         });
 
+        it('should emit processDefinitionSelection event when a process definition is selected', (done) => {
+            component.processDefinitionSelection.subscribe((processDefinition) => {
+                expect(processDefinition).toEqual(testProcessDef);
+                done();
+            });
+            fixture.detectChanges();
+            selectOptionByName(testProcessDef.name);
+        });
+
         it('should not emit start event when start the process without select a process and name', () => {
             component.name = null;
             component.selectedProcessDef = null;

lib/process-services/src/lib/process-list/components/start-process.component.ts

@@ -91,6 +91,10 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr
     @Output()
     error: EventEmitter<ProcessInstance> = new EventEmitter<ProcessInstance>();
 
+    /** Emitted when process definition selection changes. */
+    @Output()
+    processDefinitionSelection: EventEmitter<ProcessDefinitionRepresentation> = new EventEmitter<ProcessDefinitionRepresentation>();
+
     @ViewChild('startForm')
     startForm: StartFormComponent;
 
@@ -320,4 +324,8 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr
     get nameController(): AbstractControl {
         return this.processNameInput;
     }
+
+    processDefinitionSelectionChanged(processDefinition) {
+        this.processDefinitionSelection.emit(processDefinition);
+    }
 }