From 7a3b3583f88a68d0be3b2c8cf3ebabe3cd4c0fa2 Mon Sep 17 00:00:00 2001 From: Silviu Popa Date: Wed, 22 May 2019 17:57:39 +0300 Subject: [PATCH] [ADF-4530] StartProcessCloud - fix show process definition dropdown (#4723) * [ADF-4530] - reset filtered process when value it's empty or invalid * [ADF-4530] - lint * [ADF-4530] - fix unit test * [ADF-4530] - PR changes * [ADF-4530] - PR changes --- .../start-process-cloud.component.spec.ts | 18 +++++++++++++++- .../start-process-cloud.component.ts | 21 ++++++++++++++----- 2 files changed, 33 insertions(+), 6 deletions(-) diff --git a/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.spec.ts index af61c75319..ef56efc68a 100755 --- a/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.spec.ts +++ b/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.spec.ts @@ -16,7 +16,7 @@ */ import { SimpleChange } from '@angular/core'; -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing'; import { setupTestBed } from '@alfresco/adf-core'; import { of, throwError } from 'rxjs'; import { StartProcessCloudService } from '../services/start-process-cloud.service'; @@ -271,6 +271,22 @@ describe('StartProcessCloudComponent', () => { expect(getDefinitionsSpy).toHaveBeenCalled(); expect(component.processDefinitionList).toBe(fakeProcessDefinitions); }); + + it('should filter processes in the select list if input is empty', fakeAsync(() => { + component.processDefinitionList = fakeProcessDefinitions; + component.ngOnInit(); + component.ngOnChanges({ appName: change }); + fixture.detectChanges(); + + const el = fixture.nativeElement.querySelector('#processDefinitionName'); + el.value = ''; + el.dispatchEvent(new Event('keyup')); + el.dispatchEvent(new Event('input')); + fixture.detectChanges(); + + tick(3000); + expect(component.filteredProcesses.length).toEqual(1); + })); }); describe('start process', () => { diff --git a/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.ts b/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.ts index 02b0123bde..904c113131 100755 --- a/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.ts @@ -17,7 +17,7 @@ import { Component, EventEmitter, Input, OnChanges, OnInit, - Output, SimpleChanges, ViewChild, ViewEncapsulation + Output, SimpleChanges, ViewChild, ViewEncapsulation, OnDestroy } from '@angular/core'; import { ProcessInstanceCloud } from '../models/process-instance-cloud.model'; @@ -25,8 +25,9 @@ import { StartProcessCloudService } from '../services/start-process-cloud.servic import { FormControl, Validators, FormGroup, AbstractControl, FormBuilder, ValidatorFn } from '@angular/forms'; import { MatAutocompleteTrigger } from '@angular/material'; import { ProcessPayloadCloud } from '../models/process-payload-cloud.model'; -import { debounceTime } from 'rxjs/operators'; +import { debounceTime, takeUntil } from 'rxjs/operators'; import { ProcessDefinitionCloud } from '../models/process-definition-cloud.model'; +import { Subject } from 'rxjs'; @Component({ selector: 'adf-cloud-start-process', @@ -34,7 +35,7 @@ import { ProcessDefinitionCloud } from '../models/process-definition-cloud.model styleUrls: ['./start-process-cloud.component.scss'], encapsulation: ViewEncapsulation.None }) -export class StartProcessCloudComponent implements OnChanges, OnInit { +export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy { static MAX_NAME_LENGTH: number = 255; @@ -83,6 +84,7 @@ export class StartProcessCloudComponent implements OnChanges, OnInit { processPayloadCloud = new ProcessPayloadCloud(); filteredProcesses: ProcessDefinitionCloud[] = []; isLoading = false; + protected onDestroy$ = new Subject(); constructor(private startProcessCloudService: StartProcessCloudService, private formBuilder: FormBuilder) { } @@ -95,10 +97,13 @@ export class StartProcessCloudComponent implements OnChanges, OnInit { this.processDefinition.valueChanges .pipe(debounceTime(300)) + .pipe(takeUntil(this.onDestroy$)) .subscribe((processDefinitionName) => { this.processPayloadCloud.processDefinitionKey = null; if (this.processDefinition.valid) { this.setProcessDefinitionOnForm(processDefinitionName); + } else { + this.filteredProcesses = this.getProcessDefinitionList(processDefinitionName); } }); } @@ -150,8 +155,9 @@ export class StartProcessCloudComponent implements OnChanges, OnInit { public loadProcessDefinitions() { this.resetErrorMessage(); - this.startProcessCloudService.getProcessDefinitions(this.appName).subscribe( - (processDefinitionRepresentations: ProcessDefinitionCloud[]) => { + this.startProcessCloudService.getProcessDefinitions(this.appName) + .pipe(takeUntil(this.onDestroy$)) + .subscribe((processDefinitionRepresentations: ProcessDefinitionCloud[]) => { this.processDefinitionList = processDefinitionRepresentations; if (processDefinitionRepresentations.length > 0) { this.selectDefaultProcessDefinition(); @@ -253,4 +259,9 @@ export class StartProcessCloudComponent implements OnChanges, OnInit { get processDefinition(): AbstractControl { return this.processForm.get('processDefinition'); } + + ngOnDestroy() { + this.onDestroy$.next(true); + this.onDestroy$.complete(); + } }