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

[ADF-3555] [ADF-3382] Start Process component refactored ()

Browse Source 
* [ADF-3555] [ADF-3382] Start Process component refactored

* [ADF-3555] [ADF-3382] Start Process component unit tests fix
This commit is contained in:
davidcanonieto 2018-09-24 15:21:35 +01:00 committed by Eugenio Romano
parent 559dbc7f40
commit d186e4e6f6
10 changed files with 197 additions and 58 deletions

3
demo-shell/src/app.config.json

@ -494,7 +494,8 @@
},
"adf-start-process": {
"name": "My Default Name",
"processDefinitionName": "My default process def name"
"processDefinitionName": "My default process def name",
"defaultProcessSelected": true
},
"adf-process-list": {
"presets": {

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

@ -204,6 +204,7 @@
[appId]="appId"
[name]="defaultProcessName"
[processDefinitionName]="defaultProcessDefinitionName"
[defaultProcessSelected]="defaultProcessSelected"
(formContentClicked)="onContentClick($event)"
(start)="onStartProcessInstance($event)"
(cancel)="onCancelProcessInstance()">

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

@ -134,6 +134,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
defaultProcessDefinitionName: string;
defaultProcessName: string;
defaultProcessSelected: boolean;
activeTab: number = this.tabs.tasks; // tasks|processes|reports
@ -172,6 +173,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.defaultProcessSelected = this.appConfig.get<boolean>('adf-start-process.defaultProcessSelected');
// Uncomment this line to replace all 'text' field editors with custom component
// formRenderingService.setComponentTypeResolver('text', () => CustomEditorComponent, true);

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

@ -40,6 +40,8 @@ Starts a process.
| appId | `number` | (optional): Limit the list of processes which can be started to those contained in the specified app |
| name | `string` | (optional) name to assign to the current process |
| processDefinitionName | `string` | (optional) definition name of the process to start |
| defaultProcessSelected | `boolean` | (optional) make selected process the default one in process fields, true by default |
| processFilterSelector | `boolean` | (optional) Enables automatic selection of process when typing dowm in process field, true by default |
| variables | [`ProcessInstanceVariable[]`](../../lib/process-services/process-list/models/process-instance-variable.model.ts) | Variables in input to the process [RestVariable](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-activiti-rest-api/docs/RestVariable.md) |
| values | [`FormValues`](../../lib/core/form/components/widgets/core/form-values.ts) | Parameter to pass form field values in the start form if is associated |
| showSelectProcessDropdown | `boolean` | hide or show the process selection drodown, true by default |

2
e2e/pages/adf/process_services/startProcessPage.js

@ -21,7 +21,7 @@ var StartProcessPage = function () {
var defaultProcessName = element(by.css("input[id='processName']"));
var processNameInput = element(by.id('processName'));
var selectProcessDropdownArrow = element(by.css("div[class='mat-select-arrow-wrapper'] div"));
var selectProcessDropdownArrow = element(by.css("button[id='adf-select-process-dropdown']"));
var cancelProcessButton = element(by.id('cancel_process'));
var formStartProcessButton = element(by.css('button[data-automation-id="adf-form-start process"]'));
var startProcessButton = element(by.css("button[data-automation-id='btn-start']"));

2
e2e/process-services/start_process_component.e2e.ts

@ -148,7 +148,7 @@ describe('Start Process Component', () => {
appNavigationBarPage.clickProcessButton();
processFiltersPage.clickCreateProcessButton();
processFiltersPage.clickNewProcessDropdown();
startProcessPage.selectFromProcessDropdown('Choose one...');
startProcessPage.enterProcessName('');
startProcessPage.checkStartProcessButtonIsDisabled();
startProcessPage.clickCancelProcessButton();
processFiltersPage.checkNoContentMessage();

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

@ -6,19 +6,39 @@
{{errorMessageId|translate}}
</mat-card-subtitle>
<mat-form-field class="adf-process-input-container">
<input matInput placeholder="{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.NAME'|translate}}" [(ngModel)]="name" id="processName" required />
<input
matInput
placeholder="{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.NAME' | translate}}"
[formControl]="processNameInput"
id="processName"
required/>
</mat-form-field>
<div *ngIf="showSelectProcessDropdown">
<mat-form-field>
<mat-select [(value)]="selectedProcessDef" placeholder="{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.TYPE'|translate}}" required>
<mat-option *ngIf="!hasSingleProcessDefinition()">{{'ADF_PROCESS_LIST.START_PROCESS.FORM.TYPE_PLACEHOLDER' | translate}}</mat-option>
<mat-option *ngFor="let processDef of processDefinitions" [value]="processDef">
<mat-form-field class="adf-process-input-container">
<input
type="text"
placeholder="{{'ADF_PROCESS_LIST.START_PROCESS.FORM.TYPE_PLACEHOLDER' | translate}}"
aria-label="Number"
matInput
[formControl]="processDefinitionInput"
[matAutocomplete]="auto"
#inputAutocomplete>
<div class="adf-process-input-autocomplete">
<mat-autocomplete
#auto="matAutocomplete"
[displayWith]="displayFn">
<mat-option *ngFor="let processDef of filteredProcesses | async" [value]="processDef.name">
{{ processDef.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</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>
<adf-start-form
#startForm
@ -28,7 +48,13 @@
[processDefinitionId]="selectedProcessDef.id"
(outcomeClick)="onOutcomeClick($event)"
[showRefreshButton]="false">
<button form-custom-button mat-button (click)="cancelStartProcess()" id="cancel_process" class=""> {{'ADF_PROCESS_LIST.START_PROCESS.FORM.ACTION.CANCEL'| translate}} </button>
<button
form-custom-button
mat-button
(click)="cancelStartProcess()"
id="cancel_process">
{{'ADF_PROCESS_LIST.START_PROCESS.FORM.ACTION.CANCEL'| translate}}
</button>
</adf-start-form>
</mat-card-content>
<mat-card-content *ngIf="hasErrorMessage()">
@ -37,7 +63,23 @@
</mat-card-subtitle>
</mat-card-content>
<mat-card-actions *ngIf="!hasStartForm()">
<button mat-button *ngIf="!hasStartForm()" (click)="cancelStartProcess()" id="cancel_process" class=""> {{'ADF_PROCESS_LIST.START_PROCESS.FORM.ACTION.CANCEL'| translate}} </button>
<button color="primary" mat-button *ngIf="!hasStartForm()" [disabled]="!validateForm()" (click)="startProcess()" data-automation-id="btn-start" id="button-start" class="btn-start"> {{'ADF_PROCESS_LIST.START_PROCESS.FORM.ACTION.START' | translate}} </button>
<button
mat-button
*ngIf="!hasStartForm()"
(click)="cancelStartProcess()"
id="cancel_process">
{{'ADF_PROCESS_LIST.START_PROCESS.FORM.ACTION.CANCEL'| translate}}
</button>
<button
color="primary"
mat-button
*ngIf="!hasStartForm()"
[disabled]="!validateForm()"
(click)="startProcess()"
data-automation-id="btn-start"
id="button-start"
class="btn-start">
{{'ADF_PROCESS_LIST.START_PROCESS.FORM.ACTION.START' | translate}}
</button>
</mat-card-actions>
</mat-card>

8
lib/process-services/process-list/components/start-process.component.scss

@ -26,6 +26,14 @@
width: 100%;
}
}
&-process-input-autocomplete {
display: flex;
button {
position: absolute;
right: 0;
top: 0;
}
}
&-start-form-container {
.mat-card {
box-shadow: none !important;

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

@ -79,18 +79,17 @@ describe('StartFormComponent', () => {
describe('without start form', () => {
beforeEach(() => {
fixture.detectChanges();
component.name = 'My new process';
let change = new SimpleChange(null, 123, true);
component.ngOnChanges({ 'appId': change });
fixture.detectChanges();
});
it('should enable start button when name and process filled out', async(() => {
spyOn(component, 'loadStartProcess').and.callThrough();
component.processDefinitionName = 'My Process 1';
let change = new SimpleChange(null, 123, true);
component.ngOnChanges({ 'appId': change });
component.processNameInput.setValue('My Process');
component.processDefinitionInput.setValue(testProcessDefRepr.name);
fixture.detectChanges();
@ -101,7 +100,9 @@ describe('StartFormComponent', () => {
}));
it('should have start button disabled when name not filled out', async(() => {
component.name = '';
spyOn(component, 'loadStartProcess').and.callThrough();
component.processNameInput.setValue('');
component.processDefinitionInput.setValue(testProcessDefRepr.name);
fixture.detectChanges();
fixture.whenStable().then(() => {
let startBtn = fixture.nativeElement.querySelector('#button-start');
@ -122,6 +123,7 @@ describe('StartFormComponent', () => {
describe('with start form', () => {
beforeEach(() => {
fixture.detectChanges();
getDefinitionsSpy.and.returnValue(of(testProcessDefWithForm));
let change = new SimpleChange(null, 123, true);
component.ngOnChanges({ 'appId': change });
@ -143,7 +145,7 @@ describe('StartFormComponent', () => {
});
}));
it('should have start button disabled if the process is not seleted', async(() => {
it('should have start button disabled if the process is not selected', async(() => {
component.name = 'My new process';
fixture.detectChanges();
fixture.whenStable().then(() => {
@ -205,25 +207,19 @@ describe('StartFormComponent', () => {
component.appId = 123;
component.ngOnChanges({});
fixture.detectChanges();
expect(getDefinitionsSpy).toHaveBeenCalledWith(123);
});
it('should call service to fetch process definitions with appId when provided', () => {
component.appId = 123;
component.ngOnChanges({});
fixture.detectChanges();
expect(getDefinitionsSpy).toHaveBeenCalledWith(123);
fixture.whenStable().then(() => {
expect(getDefinitionsSpy).toHaveBeenCalledWith(123);
});
});
it('should display the correct number of processes in the select list', () => {
component.appId = 123;
component.ngOnChanges({});
fixture.detectChanges();
let selectElement = fixture.nativeElement.querySelector('mat-select');
expect(selectElement.children.length).toBe(1);
fixture.whenStable().then(() => {
let selectElement = fixture.nativeElement.querySelector('mat-select');
expect(selectElement.children.length).toBe(1);
});
});
it('should display the option def details', () => {
@ -269,17 +265,19 @@ describe('StartFormComponent', () => {
}));
it('should select processDefinition based on processDefinition input', async(() => {
fixture.detectChanges();
getDefinitionsSpy = getDefinitionsSpy.and.returnValue(of(testMultipleProcessDefs));
component.appId = 123;
component.processDefinitionName = 'My Process 2';
component.ngOnChanges({});
component.processNameInput.setValue('My Process 2');
component.processDefinitionInput.setValue('My Process 2');
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(component.selectedProcessDef.name).toBe(JSON.parse(JSON.stringify(testMultipleProcessDefs[1])).name);
});
}));
it('should select automatically the processDefinition if the app contain oly one', async(() => {
it('should select automatically the processDefinition if the app contain only one', async(() => {
fixture.detectChanges();
getDefinitionsSpy = getDefinitionsSpy.and.returnValue(of(testProcessDefinitions));
component.appId = 123;
component.ngOnChanges({});
@ -291,19 +289,20 @@ describe('StartFormComponent', () => {
describe('dropdown', () => {
it('should hide the process dropdown if showSelectProcessDropdown is false', async(() => {
it('should hide the process dropdown button if showSelectProcessDropdown is false', async(() => {
fixture.detectChanges();
getDefinitionsSpy = getDefinitionsSpy.and.returnValue(of([testProcessDefRepr]));
component.appId = 123;
component.showSelectProcessDropdown = false;
component.ngOnChanges({});
fixture.detectChanges();
fixture.whenStable().then(() => {
let selectElement = fixture.nativeElement.querySelector('mat-select > .mat-select-trigger');
let selectElement = fixture.nativeElement.querySelector('button#adf-select-process-dropdown');
expect(selectElement).toBeNull();
});
}));
it('should show the process dropdown if showSelectProcessDropdown is false', async(() => {
it('should show the process dropdown button if showSelectProcessDropdown is false', async(() => {
getDefinitionsSpy = getDefinitionsSpy.and.returnValue(of(testMultipleProcessDefs));
component.appId = 123;
component.processDefinitionName = 'My Process 2';
@ -311,19 +310,19 @@ describe('StartFormComponent', () => {
component.ngOnChanges({});
fixture.detectChanges();
fixture.whenStable().then(() => {
let selectElement = fixture.nativeElement.querySelector('mat-select > .mat-select-trigger');
let selectElement = fixture.nativeElement.querySelector('button#adf-select-process-dropdown');
expect(selectElement).not.toBeNull();
});
}));
it('should show the process dropdown by default', async(() => {
it('should show the process dropdown button by default', async(() => {
getDefinitionsSpy = getDefinitionsSpy.and.returnValue(of(testMultipleProcessDefs));
component.appId = 123;
component.processDefinitionName = 'My Process 2';
component.ngOnChanges({});
fixture.detectChanges();
fixture.whenStable().then(() => {
let selectElement = fixture.nativeElement.querySelector('mat-select > .mat-select-trigger');
let selectElement = fixture.nativeElement.querySelector('button#adf-select-process-dropdown');
expect(selectElement).not.toBeNull();
});
}));
@ -346,12 +345,13 @@ describe('StartFormComponent', () => {
it('should reload processes when appId input changed', async(() => {
component.appId = 456;
component.ngOnChanges({ appId: change });
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(getDefinitionsSpy).toHaveBeenCalledWith(456);
});
}));
it('should get current processDeff', () => {
it('should get current processDef', () => {
component.appId = 456;
component.ngOnChanges({ appId: change });
fixture.detectChanges();
@ -430,11 +430,12 @@ describe('StartFormComponent', () => {
}));
it('should indicate an error to the user if process cannot be started', async(() => {
fixture.detectChanges();
startProcessSpy = startProcessSpy.and.returnValue(throwError({}));
component.selectedProcessDef = testProcessDefRepr;
component.startProcess();
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
let errorEl = fixture.nativeElement.querySelector('#error-message');
expect(errorEl).not.toBeNull();
expect(errorEl.innerText.trim()).toBe('ADF_PROCESS_LIST.START_PROCESS.ERROR.START');

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

@ -15,10 +15,12 @@
* limitations under the License.
*/
import { Component, EventEmitter, Input, OnChanges,
import {
Component, EventEmitter, Input, OnChanges, OnInit,
Output, SimpleChanges, ViewChild, ViewEncapsulation
} from '@angular/core';
import { ActivitiContentService, AppConfigService, AppConfigValues,
import {
ActivitiContentService, AppConfigService, AppConfigValues,
StartFormComponent, FormRenderingService, FormValues
} from '@alfresco/adf-core';
import { ProcessInstanceVariable } from '../models/process-instance-variable.model';
@ -26,6 +28,10 @@ import { ProcessDefinitionRepresentation } from './../models/process-definition.
import { ProcessInstance } from './../models/process-instance.model';
import { ProcessService } from './../services/process.service';
import { AttachFileWidgetComponent, AttachFolderWidgetComponent } from '../../content-widget';
import { FormControl, Validators } from '@angular/forms';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { MatAutocompleteTrigger } from '@angular/material';
@Component({
selector: 'adf-start-process',
@ -33,7 +39,7 @@ import { AttachFileWidgetComponent, AttachFolderWidgetComponent } from '../../co
styleUrls: ['./start-process.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class StartProcessInstanceComponent implements OnChanges {
export class StartProcessInstanceComponent implements OnChanges, OnInit {
/** (optional) Limit the list of processes that can be started to those
* contained in the specified app.
@ -45,6 +51,10 @@ export class StartProcessInstanceComponent implements OnChanges {
@Input()
processDefinitionName: string;
/** (optional) Definition name of the process to start. */
@Input()
defaultProcessSelected: boolean;
/** Variables in input to the process
* [RestVariable](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-activiti-rest-api/docs/RestVariable.md).
*/
@ -57,12 +67,16 @@ export class StartProcessInstanceComponent implements OnChanges {
/** (optional) Name to assign to the current process. */
@Input()
name: string;
name: string = '';
/** Hide or show the process selection drodown. */
/** Hide or show the process selection dropdown. */
@Input()
showSelectProcessDropdown: boolean = true;
/** (optional) Parameter to enable selection of process when filtering. */
@Input()
processFilterSelector: boolean = true;
/** Emitted when the process starts. */
@Output()
start: EventEmitter<ProcessInstance> = new EventEmitter<ProcessInstance>();
@ -78,12 +92,19 @@ export class StartProcessInstanceComponent implements OnChanges {
@ViewChild('startForm')
startForm: StartFormComponent;
@ViewChild(MatAutocompleteTrigger)
inputAutocomplete: MatAutocompleteTrigger;
processDefinitions: ProcessDefinitionRepresentation[] = [];
selectedProcessDef: ProcessDefinitionRepresentation = new ProcessDefinitionRepresentation();
errorMessageId: string = '';
processNameInput: FormControl;
processDefinitionInput: FormControl;
filteredProcesses: Observable<ProcessDefinitionRepresentation[]>;
constructor(private activitiProcess: ProcessService,
private formRenderingService: FormRenderingService,
private activitiContentService: ActivitiContentService,
@ -92,14 +113,50 @@ export class StartProcessInstanceComponent implements OnChanges {
this.formRenderingService.setComponentTypeResolver('select-folder', () => AttachFolderWidgetComponent, true);
}
ngOnInit() {
this.processNameInput = new FormControl(this.name, Validators.required);
this.processDefinitionInput = new FormControl();
this.loadStartProcess();
this.processNameInput.valueChanges.subscribe(name => this.name = name);
this.filteredProcesses = this.processDefinitionInput.valueChanges
.pipe(
map(value => this._filter(value))
);
}
ngOnChanges(changes: SimpleChanges) {
if (changes['values'] && changes['values'].currentValue) {
this.moveNodeFromCStoPS();
}
if (changes['appId'] && changes['appId'].currentValue) {
this.appId = changes['appId'].currentValue;
}
this.loadStartProcess();
}
private _filter(value: string): ProcessDefinitionRepresentation[] {
const filterValue = value.toLowerCase();
let filteredProcess = this.processDefinitions.filter(option => option.name.toLowerCase().includes(filterValue));
if (this.processFilterSelector) {
this.selectedProcessDef = this.getSelectedProcess(filterValue);
}
return filteredProcess;
}
getSelectedProcess(selectedProcess) {
let processSelected = this.processDefinitions.find(process => process.name.toLowerCase() === selectedProcess);
if (!processSelected) {
processSelected = new ProcessDefinitionRepresentation();
}
return processSelected;
}
public loadStartProcess() {
this.resetSelectedProcessDefinition();
this.resetErrorMessage();
@ -109,17 +166,22 @@ export class StartProcessInstanceComponent implements OnChanges {
this.processDefinitions = processDefinitionRepresentations;
if (this.hasSingleProcessDefinition()) {
this.selectedProcessDef = this.processDefinitions[0];
} else {
this.selectedProcessDef = this.processDefinitions.find((currentProcessDefinition) => {
return currentProcessDefinition.name === this.processDefinitionName;
});
if (this.processDefinitionName && this.defaultProcessSelected) {
this.selectedProcessDef = this.getSelectedProcess(this.processDefinitionName);
if (!this.selectedProcessDef.id) {
this.selectedProcessDef = this.processDefinitions[0];
}
} else {
this.selectedProcessDef = this.processDefinitions[0];
}
this.processDefinitionInput.setValue(this.selectedProcessDef.name);
}
},
() => {
this.errorMessageId = 'ADF_PROCESS_LIST.START_PROCESS.ERROR.LOAD_PROCESS_DEFS';
});
}
hasSingleProcessDefinition(): boolean {
@ -219,4 +281,24 @@ export class StartProcessInstanceComponent implements OnChanges {
hasProcessName(): boolean {
return this.name ? true : false;
}
displayFn(process: any) {
if (process) {
let processName = process;
if (typeof process !== 'string') {
processName = process.name;
}
return processName;
}
}
displayDropdown(event) {
event.stopPropagation();
if (!this.inputAutocomplete.panelOpen) {
this.processDefinitionInput.setValue('');
this.inputAutocomplete.openPanel();
} else {
this.inputAutocomplete.closePanel();
}
}
}