inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACA-3304] FE - Add a drop down to select running application on start process component (#5702)

Browse Source 
* [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
This commit is contained in:
siva kumar
2020-05-27 16:53:36 +05:30
committed by GitHub
parent 63a9c1a5be
commit 0f5fd3574b
12 changed files with 337 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/process-services/src/lib/form/start-form.component.spec.ts
View File

@@ -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();
});

6
lib/process-services/src/lib/form/start-form.component.ts
View File

@@ -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;
}

1
lib/process-services/src/lib/i18n/en.json
View File

@@ -276,6 +276,7 @@
"FORM": {
"TITLE": "Start Process",
"LABEL": {
"SELECT_APPLICATION": "Select Application",
"TYPE": "Select Process",
"NAME": "Process Name"
},

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

@@ -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

16
lib/process-services/src/lib/process-list/components/start-process.component.scss
View File

@@ -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 {

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

@@ -17,7 +17,7 @@
import { DebugElement, SimpleChange } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ActivitiContentService, AppConfigService, FormService, setupTestBed } from '@alfresco/adf-core';
import { ActivitiContentService, AppConfigService, FormService, setupTestBed, AppsProcessService } from '@alfresco/adf-core';
import { of, throwError } from 'rxjs';
import { ProcessInstanceVariable } from '../models/process-instance-variable.model';
@@ -34,6 +34,7 @@ import { StartProcessInstanceComponent } from './start-process.component';
import { ProcessTestingModule } from '../../testing/process.testing.module';
import { By } from '@angular/platform-browser';
import { TranslateModule } from '@ngx-translate/core';
import { deployedApps } from '../../mock/apps-list.mock';
describe('StartFormComponent', () => {
@@ -43,10 +44,12 @@ describe('StartFormComponent', () => {
let fixture: ComponentFixture<StartProcessInstanceComponent>;
let processService: ProcessService;
let formService: FormService;
let appsProcessService: AppsProcessService;
let getDefinitionsSpy: jasmine.Spy;
let getStartFormDefinitionSpy: jasmine.Spy;
let startProcessSpy: jasmine.Spy;
let applyAlfrescoNodeSpy: jasmine.Spy;
let getDeployedApplicationsSpy: jasmine.Spy;
setupTestBed({
imports: [
@@ -74,6 +77,7 @@ describe('StartFormComponent', () => {
component = fixture.componentInstance;
processService = TestBed.get(ProcessService);
formService = TestBed.get(FormService);
appsProcessService = TestBed.get(AppsProcessService);
getDefinitionsSpy = spyOn(processService, 'getProcessDefinitions').and.returnValue(of(testMultipleProcessDefs));
startProcessSpy = spyOn(processService, 'startProcess').and.returnValue(of(newProcess));
@@ -100,7 +104,7 @@ describe('StartFormComponent', () => {
});
it('should enable start button when name and process filled out', async(() => {
spyOn(component, 'loadStartProcess').and.callThrough();
spyOn(component, 'loadProcessDefinitions').and.callThrough();
component.processNameInput.setValue('My Process');
component.processDefinitionInput.setValue(testProcessDef.name);
@@ -113,7 +117,7 @@ describe('StartFormComponent', () => {
}));
it('should have start button disabled when name not filled out', async(() => {
spyOn(component, 'loadStartProcess').and.callThrough();
spyOn(component, 'loadProcessDefinitions').and.callThrough();
component.processNameInput.setValue('');
component.processDefinitionInput.setValue(testProcessDef.name);
fixture.detectChanges();
@@ -305,7 +309,8 @@ describe('StartFormComponent', () => {
it('should indicate an error to the user if process defs cannot be loaded', async(() => {
getDefinitionsSpy = getDefinitionsSpy.and.returnValue(throwError({}));
component.appId = 123;
component.ngOnChanges({});
const change = new SimpleChange(null, 123, true);
component.ngOnChanges({ 'appId': change });
fixture.detectChanges();
fixture.whenStable().then(() => {
@@ -318,7 +323,8 @@ describe('StartFormComponent', () => {
it('should show no process available message when no process definition is loaded', async(() => {
getDefinitionsSpy = getDefinitionsSpy.and.returnValue(of([]));
component.appId = 123;
component.ngOnChanges({});
const change = new SimpleChange(null, 123, true);
component.ngOnChanges({ 'appId': change });
fixture.detectChanges();
fixture.whenStable().then(() => {
@@ -342,7 +348,8 @@ describe('StartFormComponent', () => {
it('should select automatically the processDefinition if the app contain only one', async(() => {
getDefinitionsSpy = getDefinitionsSpy.and.returnValue(of(testProcessDefinitions));
component.appId = 123;
component.ngOnChanges({});
const change = new SimpleChange(null, 123, true);
component.ngOnChanges({ 'appId': change });
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(component.selectedProcessDef.name).toBe(JSON.parse(JSON.stringify(testProcessDefinitions[0])).name);
@@ -352,7 +359,8 @@ describe('StartFormComponent', () => {
it('should not select automatically any processDefinition if the app contain multiple process and does not have any processDefinition as input', async(() => {
getDefinitionsSpy = getDefinitionsSpy.and.returnValue(of(testMultipleProcessDefs));
component.appId = 123;
component.ngOnChanges({});
const change = new SimpleChange(null, 123, true);
component.ngOnChanges({ 'appId': change });
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(component.selectedProcessDef.name).toBeNull();
@@ -585,4 +593,98 @@ describe('StartFormComponent', () => {
});
}));
});
describe('Select applications', () => {
const mockAppId = 3;
beforeEach(() => {
fixture.detectChanges();
component.name = 'My new process';
component.showSelectApplicationDropdown = true;
getDefinitionsSpy.and.returnValue(of(testMultipleProcessDefs));
getDeployedApplicationsSpy = spyOn(appsProcessService, 'getDeployedApplications').and.returnValue(of(deployedApps));
});
it('Should be able to show application drop-down and respective process definitions if showSelectApplicationDropdown set to true', () => {
const change = new SimpleChange(null, 3, true);
component.ngOnChanges({ 'appId': change });
fixture.detectChanges();
const appsSelector = fixture.nativeElement.querySelector('[data-automation-id="adf-start-process-apps-drop-down"]');
const lableElement = fixture.nativeElement.querySelector('.adf-start-process-app-list .mat-form-field-label');
expect(appsSelector).not.toBeNull();
expect(lableElement.innerText).toEqual('ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.SELECT_APPLICATION');
expect(getDeployedApplicationsSpy).toHaveBeenCalled();
expect(component.applications.length).toBe(6);
expect(component.selectedApplication).toEqual(deployedApps[2]);
expect(component.selectedApplication.id).toEqual(component.appId);
expect(component.selectedApplication.name).toEqual('App3');
expect(getDefinitionsSpy).toHaveBeenCalledWith(mockAppId);
expect(component.processDefinitions.length).toEqual(2);
expect(component.processDefinitions[0].name).toEqual('My Process 1');
expect(component.processDefinitions[1].name).toEqual('My Process 2');
});
it('Should be able to list process-definition based on selected application', () => {
const change = new SimpleChange(null, 3, true);
component.ngOnChanges({ 'appId': change });
fixture.detectChanges();
expect(component.appId).toBe(component.selectedApplication.id);
expect(component.selectedApplication).toEqual(deployedApps[2]);
expect(component.selectedApplication.name).toEqual('App3');
expect(getDefinitionsSpy).toHaveBeenCalledWith(mockAppId);
expect(component.processDefinitions.length).toEqual(2);
expect(component.processDefinitions[0].name).toEqual('My Process 1');
expect(component.processDefinitions[1].name).toEqual('My Process 2');
const changedAppId = 2;
getDefinitionsSpy.and.returnValue(of([ { id: 'my:process 3', name: 'My Process 3', hasStartForm: true } ]));
fixture.detectChanges();
const newApplication = {value: deployedApps[1]};
component.onAppSelectionChange(newApplication);
fixture.detectChanges();
expect(component.selectedApplication).toEqual(deployedApps[1]);
expect(component.selectedApplication.name).toEqual('App2');
expect(getDefinitionsSpy).toHaveBeenCalledWith(changedAppId);
expect(component.processDefinitions.length).toEqual(1);
expect(component.processDefinitions[0].name).toEqual('My Process 3');
});
it('Should be able to select an application if the list has one application', () => {
getDeployedApplicationsSpy.and.returnValues(of([deployedApps[0]]));
const change = new SimpleChange(null, 123, true);
component.ngOnChanges({ 'appId': change });
fixture.detectChanges();
expect(getDeployedApplicationsSpy).toHaveBeenCalled();
expect(component.applications.length).toEqual(1);
expect(component.selectedApplication.name).toEqual('App1');
});
it('Should be able to select an application from the apps as default application when given appId is defined', () => {
component.appId = 2;
const change = new SimpleChange(null, 2, true);
component.ngOnChanges({ 'appId': change });
fixture.detectChanges();
expect(getDeployedApplicationsSpy).toHaveBeenCalled();
expect(component.applications.length).toEqual(6);
expect(component.selectedApplication.id).toEqual(component.appId);
expect(component.selectedApplication.id).toEqual(2);
expect(component.selectedApplication.name).toEqual('App2');
});
it('Should not be able to show application drop-down if showSelectApplicationDropdown set to false', () => {
component.showSelectApplicationDropdown = false;
fixture.detectChanges();
const appsSelector = fixture.nativeElement.querySelector('[data-automation-id="adf-start-process-apps-drop-down"]');
expect(appsSelector).toBeNull();
});
});
});

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

@@ -23,6 +23,7 @@ import {
ActivitiContentService,
AppConfigService,
AppConfigValues,
AppsProcessService,
FormValues
} from '@alfresco/adf-core';
import { ProcessInstanceVariable } from '../models/process-instance-variable.model';
@@ -35,6 +36,7 @@ import { map, takeUntil } from 'rxjs/operators';
import { MatAutocompleteTrigger } from '@angular/material';
import { StartFormComponent } from '../../form';
import { MinimalNode, RelatedContentRepresentation } from '@alfresco/js-api';
import { AppDefinitionRepresentationModel } from '../../task-list';
@Component({
selector: 'adf-start-process',
@@ -77,6 +79,10 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr
@Input()
showSelectProcessDropdown: boolean = true;
/** (optional) Hide or show application selection dropdown. */
@Input()
showSelectApplicationDropdown: boolean = false;
/** (optional) Parameter to enable selection of process when filtering. */
@Input()
processFilterSelector: boolean = true;
@@ -97,6 +103,10 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr
@Output()
processDefinitionSelection: EventEmitter<ProcessDefinitionRepresentation> = new EventEmitter<ProcessDefinitionRepresentation>();
/** Emitted when application selection changes. */
@Output()
applicationSelection: EventEmitter<AppDefinitionRepresentationModel> = new EventEmitter<AppDefinitionRepresentationModel>();
@ViewChild('startForm')
startForm: StartFormComponent;
@@ -104,18 +114,20 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr
inputAutocomplete: MatAutocompleteTrigger;
processDefinitions: ProcessDefinitionRepresentation[] = [];
selectedProcessDef: ProcessDefinitionRepresentation = new ProcessDefinitionRepresentation();
selectedProcessDef: ProcessDefinitionRepresentation;
errorMessageId: string = '';
processNameInput: FormControl;
processDefinitionInput: FormControl;
filteredProcesses: Observable<ProcessDefinitionRepresentation[]>;
filteredProcessesDefinitions$: Observable<ProcessDefinitionRepresentation[]>;
maxProcessNameLength: number = this.MAX_LENGTH;
alfrescoRepositoryName: string;
applications: AppDefinitionRepresentationModel[] = [];
selectedApplication: AppDefinitionRepresentationModel;
private onDestroy$ = new Subject<boolean>();
constructor(private activitiProcess: ProcessService,
private activitiContentService: ActivitiContentService,
private appsProcessService: AppsProcessService,
private appConfig: AppConfigService) {
}
@@ -123,13 +135,13 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr
this.processNameInput = new FormControl(this.name, [Validators.required, Validators.maxLength(this.maxProcessNameLength), Validators.pattern('^[^\\s]+(\\s+[^\\s]+)*$')]);
this.processDefinitionInput = new FormControl();
this.loadStartProcess();
this.load();
this.processNameInput.valueChanges
.pipe(takeUntil(this.onDestroy$))
.subscribe(name => this.name = name);
this.filteredProcesses = this.processDefinitionInput.valueChanges
this.filteredProcessesDefinitions$ = this.processDefinitionInput.valueChanges
.pipe(
map((value) => this._filter(value)),
takeUntil(this.onDestroy$)
@@ -153,11 +165,24 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr
this.moveNodeFromCStoPS();
}
if (changes['appId'] && changes['appId'].currentValue) {
if (this.isAppIdChanged(changes)) {
this.appId = changes['appId'].currentValue;
this.load();
}
this.loadStartProcess();
if (this.isProcessDefinitionChanged(changes)) {
this.processDefinitionName = changes['processDefinitionName'].currentValue;
this.filterProcessDefinitionByName();
}
}
private isAppIdChanged(changes: SimpleChanges) {
return changes['appId'] && changes['appId'].currentValue && changes['appId'].currentValue !== changes['appId'].previousValue;
}
private isProcessDefinitionChanged(changes: SimpleChanges) {
return changes['processDefinitionName'] && changes['processDefinitionName'].currentValue &&
changes['processDefinitionName'].currentValue !== changes['processDefinitionName'].previousValue;
}
private _filter(value: string): ProcessDefinitionRepresentation[] {
@@ -183,37 +208,106 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr
return processSelected;
}
loadStartProcess(): void {
load() {
if (this.showSelectApplicationDropdown) {
this.loadApps();
} else {
this.loadProcessDefinitions(this.appId);
}
}
loadProcessDefinitions(appId: any): void {
this.resetSelectedProcessDefinition();
this.resetErrorMessage();
this.activitiProcess.getProcessDefinitions(this.appId).subscribe(
(processDefinitionRepresentations: ProcessDefinitionRepresentation[]) => {
this.processDefinitions = processDefinitionRepresentations;
this.activitiProcess.getProcessDefinitions(appId).pipe(
map((processDefinitionRepresentations: ProcessDefinitionRepresentation[]) => {
let currentProcessDef: ProcessDefinitionRepresentation;
if (!this.isProcessDefinitionsEmpty()) {
if (this.processDefinitions.length === 1) {
this.selectedProcessDef = this.processDefinitions[0];
}
if (this.processDefinitionName) {
const selectedProcess = this.processDefinitions.find((currentProcessDefinition) => {
return currentProcessDefinition.name === this.processDefinitionName;
});
if (selectedProcess) {
this.selectedProcessDef = selectedProcess;
}
}
this.processDefinitionInput.setValue(this.selectedProcessDef.name);
if (processDefinitionRepresentations.length === 1) {
currentProcessDef = processDefinitionRepresentations[0];
}
if (this.processDefinitionName) {
const filteredProcessDefinition = processDefinitionRepresentations.find((processDefinition) => {
return processDefinition.name === this.processDefinitionName;
});
if (filteredProcessDefinition) {
currentProcessDef = filteredProcessDefinition;
}
}
return { currentProcessDef, processDefinitionRepresentations };
})
).subscribe(
(filteredProcessDefinitions) => {
this.processDefinitions = filteredProcessDefinitions.processDefinitionRepresentations;
this.selectedProcessDef = filteredProcessDefinitions.currentProcessDef;
this.processDefinitionInput.setValue(this.selectedProcessDef ? this.selectedProcessDef.name : '');
this.processDefinitionSelection.emit(this.selectedProcessDef);
},
() => {
this.errorMessageId = 'ADF_PROCESS_LIST.START_PROCESS.ERROR.LOAD_PROCESS_DEFS';
});
}
filterProcessDefinitionByName() {
if (this.processDefinitionName) {
const filteredProcessDef = this.processDefinitions.find((processDefinition) => {
return processDefinition.name === this.processDefinitionName;
});
if (filteredProcessDef) {
this.selectedProcessDef = filteredProcessDef;
this.processDefinitionInput.setValue(this.selectedProcessDef ? this.selectedProcessDef.name : '');
}
}
}
loadApps() {
this.appsProcessService
.getDeployedApplications()
.pipe(map((response: AppDefinitionRepresentationModel[]) => {
const applications = this.removeDefaultApps(response);
let currentApplication: AppDefinitionRepresentationModel;
if (applications && applications.length === 1) {
currentApplication = applications[0];
}
const filteredApp = applications.find( app => app.id === +this.appId );
if (filteredApp) {
currentApplication = filteredApp;
}
return { currentApplication, applications };
})
)
.subscribe((filteredApps) => {
this.applications = filteredApps.applications;
this.selectedApplication = filteredApps.currentApplication;
this.applicationSelection.emit(this.selectedApplication);
this.loadProcessDefinitions(this.selectedApplication ? this.selectedApplication.id : null);
},
err => {
this.error.emit(err);
}
);
}
onAppSelectionChange(selectedApplication: any) {
this.selectedApplication = selectedApplication.value;
this.applicationSelection.emit(this.selectedApplication);
this.loadProcessDefinitions(this.selectedApplication.id);
}
private removeDefaultApps(apps: AppDefinitionRepresentationModel []): AppDefinitionRepresentationModel[] {
return apps.filter((app) => app.id);
}
isProcessDefinitionsEmpty(): boolean {
return this.processDefinitions.length === 0;
}
@@ -332,6 +426,7 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr
}
processDefinitionSelectionChanged(processDefinition) {
this.processDefinitionSelection.emit(processDefinition);
this.selectedProcessDef = processDefinition;
this.processDefinitionSelection.emit(this.selectedProcessDef);
}
}