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

autocomplete component added (#3701)

Browse Source
This commit is contained in:
bbcodrin
2018-09-12 16:21:44 +03:00
committed by Eugenio Romano
parent 978d4153ed
commit 21d7a8aec2
6 changed files with 81 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,27 +9,25 @@
<input matInput placeholder="{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.NAME'|translate}}" [(ngModel)]="name" 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">
{{ processDef.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<mat-form-field *ngIf="showSelectProcessDropdown">
<input type="text" placeholder="{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.TYPE'|translate}}" required aria-label="Number" matInput [formControl]="processControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)="onItemSelect($event.option.value)">
<mat-option *ngIf="!hasSingleProcessDefinition()">{{'ADF_PROCESS_LIST.START_PROCESS.FORM.TYPE_PLACEHOLDER' | translate}}</mat-option>
<mat-option *ngFor="let processDef of filteredOptions | async" [value]="processDef">
{{ processDef.name }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<adf-start-form
#startForm
*ngIf="hasStartForm()"
[data]="values"
[data]="values"
[disableStartProcessButton]="!hasProcessName()"
[processDefinitionId]="selectedProcessDef.id"
(outcomeClick)="onOutcomeClick($event)"
[showRefreshButton]="false">
<button form-custom-button mat-button (click)="cancelStartProcess()" id="cancle_process" class=""> {{'ADF_PROCESS_LIST.START_PROCESS.FORM.ACTION.CANCEL'| translate}} </button>
</adf-start-form>
<button form-custom-button mat-button (click)="cancelStartProcess()" id="cancel_process" class=""> {{'ADF_PROCESS_LIST.START_PROCESS.FORM.ACTION.CANCEL'| translate}} </button> </adf-start-form>
</mat-card-content>
<mat-card-content *ngIf="hasErrorMessage()">
<mat-card-subtitle class="error-message" id="no-process-message">
@@ -37,7 +35,7 @@
</mat-card-subtitle>
</mat-card-content>
<mat-card-actions *ngIf="!hasStartForm()">
<button mat-button *ngIf="!hasStartForm()" (click)="cancelStartProcess()" id="cancle_process" class=""> {{'ADF_PROCESS_LIST.START_PROCESS.FORM.ACTION.CANCEL'| translate}} </button>
<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>
</mat-card-actions>
</mat-card>

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

@@ -143,7 +143,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(() => {
@@ -154,7 +154,7 @@ describe('StartFormComponent', () => {
it('should emit cancel event on cancel Button', async(() => {
fixture.detectChanges();
let cancelButton = fixture.nativeElement.querySelector('#cancle_process');
let cancelButton = fixture.nativeElement.querySelector('#cancel_process');
let cancelSpy: jasmine.Spy = spyOn(component.cancel, 'emit');
cancelButton.click();
fixture.detectChanges();
@@ -222,8 +222,7 @@ describe('StartFormComponent', () => {
component.ngOnChanges({});
fixture.detectChanges();
let selectElement = fixture.nativeElement.querySelector('mat-select');
expect(selectElement.children.length).toBe(1);
expect(component.processDefinitions.length).toBe(2);
});
it('should display the option def details', () => {
@@ -232,7 +231,7 @@ describe('StartFormComponent', () => {
component.processDefinitions = testMultipleProcessDefs;
fixture.detectChanges();
fixture.whenStable().then(() => {
let selectElement = fixture.nativeElement.querySelector('mat-select > .mat-select-trigger');
let selectElement = fixture.nativeElement.querySelector('mat-autocomplete');
let optionElement = fixture.nativeElement.querySelectorAll('mat-option');
selectElement.click();
expect(selectElement).not.toBeNull();
@@ -242,7 +241,7 @@ describe('StartFormComponent', () => {
});
});
it('should indicate an error to the user if process defs cannot be loaded', async(() => {
it('should indicate an error to the user if process definitions cannot be loaded', async(() => {
getDefinitionsSpy = getDefinitionsSpy.and.returnValue(throwError({}));
component.appId = 123;
component.ngOnChanges({});
@@ -279,7 +278,7 @@ describe('StartFormComponent', () => {
});
}));
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(() => {
getDefinitionsSpy = getDefinitionsSpy.and.returnValue(of(testProcessDefinitions));
component.appId = 123;
component.ngOnChanges({});
@@ -289,6 +288,17 @@ describe('StartFormComponent', () => {
});
}));
it('should have start button enabled when process is selected', async(() => {
component.selectedProcessDef = testProcessDefRepr;
component.name = 'My process';
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
let startBtn = fixture.nativeElement.querySelector('#button-start');
expect(startBtn.disabled).toBe(false);
});
}));
describe('dropdown', () => {
it('should hide the process dropdown if showSelectProcessDropdown is false', async(() => {
@@ -298,12 +308,12 @@ describe('StartFormComponent', () => {
component.ngOnChanges({});
fixture.detectChanges();
fixture.whenStable().then(() => {
let selectElement = fixture.nativeElement.querySelector('mat-select > .mat-select-trigger');
let selectElement = fixture.nativeElement.querySelector('mat-autocomplete');
expect(selectElement).toBeNull();
});
}));
it('should show the process dropdown if showSelectProcessDropdown is false', async(() => {
it('should show the process dropdown if showSelectProcessDropdown is true', async(() => {
getDefinitionsSpy = getDefinitionsSpy.and.returnValue(of(testMultipleProcessDefs));
component.appId = 123;
component.processDefinitionName = 'My Process 2';
@@ -311,7 +321,7 @@ describe('StartFormComponent', () => {
component.ngOnChanges({});
fixture.detectChanges();
fixture.whenStable().then(() => {
let selectElement = fixture.nativeElement.querySelector('mat-select > .mat-select-trigger');
let selectElement = fixture.nativeElement.querySelector('mat-autocomplete');
expect(selectElement).not.toBeNull();
});
}));
@@ -323,7 +333,7 @@ describe('StartFormComponent', () => {
component.ngOnChanges({});
fixture.detectChanges();
fixture.whenStable().then(() => {
let selectElement = fixture.nativeElement.querySelector('mat-select > .mat-select-trigger');
let selectElement = fixture.nativeElement.querySelector('mat-autocomplete');
expect(selectElement).not.toBeNull();
});
}));
@@ -351,7 +361,7 @@ describe('StartFormComponent', () => {
});
}));
it('should get current processDeff', () => {
it('should get current processDef', () => {
component.appId = 456;
component.ngOnChanges({ appId: change });
fixture.detectChanges();
@@ -392,7 +402,7 @@ describe('StartFormComponent', () => {
});
}));
it('should call service to start process with the variables setted', async(() => {
it('should call service to start process with the variables set up', async(() => {
let inputProcessVariable: ProcessInstanceVariable[] = [];
let variable: ProcessInstanceVariable = {};

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

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { Component, EventEmitter, Input, OnChanges,
import { Component, EventEmitter, Input, AfterViewInit, OnChanges,
Output, SimpleChanges, ViewChild, ViewEncapsulation
} from '@angular/core';
import { ActivitiContentService, AppConfigService, AppConfigValues,
@@ -26,6 +26,9 @@ 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 } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith, delay } from 'rxjs/operators';
@Component({
selector: 'adf-start-process',
@@ -33,7 +36,7 @@ import { AttachFileWidgetComponent, AttachFolderWidgetComponent } from '../../co
styleUrls: ['./start-process.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class StartProcessInstanceComponent implements OnChanges {
export class StartProcessInstanceComponent implements AfterViewInit, OnChanges {
/** (optional) Limit the list of processes that can be started to those
* contained in the specified app.
@@ -84,6 +87,9 @@ export class StartProcessInstanceComponent implements OnChanges {
errorMessageId: string = '';
processControl = new FormControl();
filteredOptions: Observable<any>;
constructor(private activitiProcess: ProcessService,
private formRenderingService: FormRenderingService,
private activitiContentService: ActivitiContentService,
@@ -92,6 +98,17 @@ export class StartProcessInstanceComponent implements OnChanges {
this.formRenderingService.setComponentTypeResolver('select-folder', () => AttachFolderWidgetComponent, true);
}
ngAfterViewInit() {
setTimeout(() => {
this.filteredOptions = this.processControl.valueChanges
.pipe(
startWith(''),
delay(0),
map(value => this._filter(value))
);
});
}
ngOnChanges(changes: SimpleChanges) {
if (changes['values'] && changes['values'].currentValue) {
this.moveNodeFromCStoPS();
@@ -100,6 +117,23 @@ export class StartProcessInstanceComponent implements OnChanges {
this.loadStartProcess();
}
private _filter(value) {
let filterValue = '';
if (value && value.name) {
filterValue = value.name.toLowerCase();
} else if (value) {
filterValue = value.toLowerCase();
}
let processDefArray = this.processDefinitions.filter(option => option.name.toLowerCase() === filterValue);
this.selectedProcessDef = processDefArray.length ? processDefArray[0] : null;
return this.processDefinitions.filter(option => option.name.toLowerCase().includes(filterValue));
}
displayFn(processDef): string {
return processDef ? processDef.name : '';
}
public loadStartProcess() {
this.resetSelectedProcessDefinition();
this.resetErrorMessage();
@@ -217,6 +251,10 @@ export class StartProcessInstanceComponent implements OnChanges {
}
hasProcessName(): boolean {
return this.name ? true : false;
return !!this.name;
}
onItemSelect(item) {
this.selectedProcessDef = item;
}
}