From a102a7ffb2ce484a8ddaa79f6a0e71bbc60efcd7 Mon Sep 17 00:00:00 2001 From: Eugenio Romano Date: Sat, 14 Oct 2017 08:35:53 +0100 Subject: [PATCH] [ADF-1684] [object Object] appears in People control when selecting the same name (#2472) * object people component bug * fix test people widget --- .../widgets/people/people.widget.html | 4 +- .../widgets/people/people.widget.spec.ts | 80 +++++++++++++------ .../widgets/people/people.widget.ts | 74 ++++++++--------- 3 files changed, 91 insertions(+), 67 deletions(-) diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.html index 2aa228c4cf..61ab5d51eb 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.html +++ b/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.html @@ -11,12 +11,12 @@ class="adf-input" type="text" [id]="field.id" - [(ngModel)]="value" + [value]="getDisplayName(field.value)" (keyup)="onKeyUp($event)" [disabled]="field.readOnly" placeholder="{{field.placeholder}}" [mdAutocomplete]="auto"> - +
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.spec.ts index ee6c9f2797..4d34da9113 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.spec.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.spec.ts @@ -52,7 +52,8 @@ describe('PeopleWidgetComponent', () => { FormService, EcmModelService, ActivitiAlfrescoContentService, - {provide: OverlayContainer, useFactory: () => { + { + provide: OverlayContainer, useFactory: () => { overlayContainerElement = document.createElement('div'); overlayContainerElement.classList.add('cdk-overlay-container'); @@ -63,7 +64,8 @@ describe('PeopleWidgetComponent', () => { document.body.style.margin = '0'; return {getContainerElement: () => overlayContainerElement}; - }} + } + } ] }).compileComponents(); })); @@ -102,6 +104,7 @@ describe('PeopleWidgetComponent', () => { it('should init value from the field', () => { widget.field.value = new LightUserRepresentation({ + id: 'people-id', firstName: 'John', lastName: 'Doe' }); @@ -114,14 +117,17 @@ describe('PeopleWidgetComponent', () => { ); widget.ngOnInit(); - expect(widget.value).toBe('John Doe'); + fixture.detectChanges(); + + expect((element.querySelector('input') as HTMLInputElement).value).toBe('John Doe'); }); it('should require form field to setup values on init', () => { - widget.field = null; + widget.field.value = null; widget.ngOnInit(); - - expect(widget.value).toBeUndefined(); + fixture.detectChanges(); + let input = widget.input; + expect(input.nativeElement.value).toBe(''); expect(widget.groupId).toBeUndefined(); }); @@ -135,37 +141,59 @@ describe('PeopleWidgetComponent', () => { }); it('should fetch users by search term', () => { - let users = [{}, {}]; + let users = [{ + id: 'people-id', + firstName: 'John', + lastName: 'Doe' + }, { + id: 'people-id2', + firstName: 'John', + lastName: 'Ping' + }]; + spyOn(formService, 'getWorkflowUsers').and.returnValue( Observable.create(observer => { observer.next(users); observer.complete(); }) ); + fixture.detectChanges(); let keyboardEvent = new KeyboardEvent('keypress'); - widget.value = 'user1'; + let input = widget.input; + input.nativeElement.value = 'John'; widget.onKeyUp(keyboardEvent); - expect(formService.getWorkflowUsers).toHaveBeenCalledWith(widget.value, widget.groupId); + expect(formService.getWorkflowUsers).toHaveBeenCalledWith('John', widget.groupId); expect(widget.users).toBe(users); }); it('should fetch users by search term and group id', () => { - let users = [{}, {}]; + let users = [{ + id: 'people-id', + firstName: 'John', + lastName: 'Doe' + }, { + id: 'people-id2', + firstName: 'John', + lastName: 'Ping' + }]; + spyOn(formService, 'getWorkflowUsers').and.returnValue( Observable.create(observer => { observer.next(users); observer.complete(); }) ); + fixture.detectChanges(); let keyboardEvent = new KeyboardEvent('keypress'); - widget.value = 'user1'; + let input = widget.input; + input.nativeElement.value = 'John'; widget.groupId = '1001'; widget.onKeyUp(keyboardEvent); - expect(formService.getWorkflowUsers).toHaveBeenCalledWith(widget.value, widget.groupId); + expect(formService.getWorkflowUsers).toHaveBeenCalledWith('John', widget.groupId); expect(widget.users).toBe(users); }); @@ -176,12 +204,14 @@ describe('PeopleWidgetComponent', () => { observer.complete(); }) ); + fixture.detectChanges(); let keyboardEvent = new KeyboardEvent('keypress'); - widget.value = 'user1'; + let input = widget.input; + input.nativeElement.value = 'user1'; widget.onKeyUp(keyboardEvent); - expect(formService.getWorkflowUsers).toHaveBeenCalledWith(widget.value, widget.groupId); + expect(formService.getWorkflowUsers).toHaveBeenCalledWith('user1', widget.groupId); expect(widget.users).toEqual([]); }); @@ -189,7 +219,8 @@ describe('PeopleWidgetComponent', () => { spyOn(formService, 'getWorkflowUsers').and.stub(); let keyboardEvent = new KeyboardEvent('keypress'); - widget.value = null; + let input = widget.input; + input.nativeElement.value = null; widget.onKeyUp(keyboardEvent); expect(formService.getWorkflowUsers).not.toHaveBeenCalled(); @@ -199,7 +230,7 @@ describe('PeopleWidgetComponent', () => { spyOn(formService, 'getWorkflowUsers').and.stub(); let keyboardEvent = new KeyboardEvent('keypress'); - widget.value = '123'; + (element.querySelector('input') as HTMLInputElement).value = '123'; widget.minTermLength = 4; widget.onKeyUp(keyboardEvent); @@ -209,9 +240,10 @@ describe('PeopleWidgetComponent', () => { it('should reset users when the input field is blank string', () => { let fakeUser = new LightUserRepresentation({id: '1', email: 'ffff@fff'}); widget.users.push(fakeUser); + fixture.detectChanges(); let keyboardEvent = new KeyboardEvent('keypress'); - widget.value = ''; + (element.querySelector('input') as HTMLInputElement).value = ''; widget.onKeyUp(keyboardEvent); expect(widget.users).toEqual([]); @@ -220,15 +252,15 @@ describe('PeopleWidgetComponent', () => { describe('when template is ready', () => { let fakeUserResult = [ - { id: 1001, firstName: 'Test01', lastName: 'Test01', email: 'test' }, - { id: 1002, firstName: 'Test02', lastName: 'Test02', email: 'test2' }]; + {id: 1001, firstName: 'Test01', lastName: 'Test01', email: 'test'}, + {id: 1002, firstName: 'Test02', lastName: 'Test02', email: 'test2'}]; beforeEach(async(() => { spyOn(formService, 'getWorkflowUsers').and.returnValue(Observable.create(observer => { observer.next(fakeUserResult); observer.complete(); })); - widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), { + widget.field = new FormFieldModel(new FormModel({taskId: 'fake-task-id'}), { id: 'people-id', name: 'people-name', type: FormFieldTypes.PEOPLE, @@ -248,23 +280,21 @@ describe('PeopleWidgetComponent', () => { }); it('should show an error message if the user is invalid', async(() => { - let peopleHTMLElement: HTMLInputElement = element.querySelector('#people-id'); + let peopleHTMLElement: HTMLInputElement = element.querySelector('input'); peopleHTMLElement.focus(); - widget.value = 'K'; peopleHTMLElement.value = 'K'; peopleHTMLElement.dispatchEvent(new Event('keyup')); peopleHTMLElement.dispatchEvent(new Event('input')); fixture.detectChanges(); fixture.whenStable().then(() => { expect(element.querySelector('.adf-error-text')).not.toBeNull(); - expect(element.querySelector('.adf-error-text').textContent).toContain('Invalid value provided'); + expect(element.querySelector('.adf-error-text').textContent).toContain('FORM.FIELD.VALIDATOR.INVALID_VALUE'); }); })); it('should show the people if the typed result match', async(() => { - let peopleHTMLElement: HTMLInputElement = element.querySelector('#people-id'); + let peopleHTMLElement: HTMLInputElement = element.querySelector('input'); peopleHTMLElement.focus(); - widget.value = 'T'; peopleHTMLElement.value = 'T'; peopleHTMLElement.dispatchEvent(new Event('keyup')); peopleHTMLElement.dispatchEvent(new Event('input')); diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.ts index 89ca390ab2..217adb1a0e 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.ts @@ -18,12 +18,11 @@ /* tslint:disable:component-selector */ import { ENTER, ESCAPE } from '@angular/cdk/keycodes'; -import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; -import { MdAutocompleteTrigger } from '@angular/material'; +import { Component, ElementRef, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; import { LightUserRepresentation, PeopleProcessService } from 'ng2-alfresco-core'; import { FormService } from '../../../services/form.service'; import { GroupModel } from '../core/group.model'; -import { baseHost , WidgetComponent } from './../widget.component'; +import { baseHost, WidgetComponent } from './../widget.component'; @Component({ selector: 'people-widget', @@ -34,11 +33,10 @@ import { baseHost , WidgetComponent } from './../widget.component'; }) export class PeopleWidgetComponent extends WidgetComponent implements OnInit { - @ViewChild(MdAutocompleteTrigger) - input: MdAutocompleteTrigger; + @ViewChild('inputValue') + input: ElementRef; minTermLength: number = 1; - value: string; oldValue: string; users: LightUserRepresentation[] = []; groupId: string; @@ -49,63 +47,60 @@ export class PeopleWidgetComponent extends WidgetComponent implements OnInit { ngOnInit() { if (this.field) { - let user: LightUserRepresentation = this.field.value; - if (user) { - this.value = this.getDisplayName(user); - } - let params = this.field.params; - if (params && params['restrictWithGroup']) { - let restrictWithGroup = params['restrictWithGroup']; + if (params && params.restrictWithGroup) { + let restrictWithGroup = params.restrictWithGroup; this.groupId = restrictWithGroup.id; } } } onKeyUp(event: KeyboardEvent) { - if (this.value && this.value.length >= this.minTermLength && this.oldValue !== this.value) { + let value = (this.input.nativeElement as HTMLInputElement).value; + if (value && value.length >= this.minTermLength && this.oldValue !== value) { if (event.keyCode !== ESCAPE && event.keyCode !== ENTER) { - if (this.value.length >= this.minTermLength) { - this.oldValue = this.value; - this.searchUsers(); + if (value.length >= this.minTermLength) { + this.oldValue = value; + this.searchUsers(value); } } - } - if (this.isValueDefined() && this.value.trim().length === 0) { - this.oldValue = this.value; - this.field.value = this.value; - this.users = []; + } else { + this.validateValue(value); } } - isValueDefined() { - return this.value !== null && this.value !== undefined; - } - - searchUsers() { - this.formService.getWorkflowUsers(this.value, this.groupId) + searchUsers(userName: string) { + this.formService.getWorkflowUsers(userName, this.groupId) .subscribe((result: LightUserRepresentation[]) => { this.users = result || []; - this.validateValue(); + this.validateValue(userName); }); } - validateValue() { - let validUserName = this.getUserFromValue(); - if (validUserName) { + validateValue(userName: string) { + if (this.isValidUser(userName)) { this.field.validationSummary.message = ''; - this.field.value = validUserName; - this.value = this.getDisplayName(validUserName); + } else if (!userName) { + this.field.value = null; + this.users = []; } else { - this.field.value = ''; - this.field.validationSummary.message = 'Invalid value provided'; + this.field.validationSummary.message = 'FORM.FIELD.VALIDATOR.INVALID_VALUE'; this.field.markAsInvalid(); this.field.form.markAsInvalid(); - } + } } - getUserFromValue() { - return this.users.find((user) => this.getDisplayName(user).toLocaleLowerCase() === this.value.toLocaleLowerCase()); + isValidUser(value: string): boolean { + let isValid = false; + if (value) { + let resultUser: LightUserRepresentation = this.users.find((user) => this.getDisplayName(user).toLocaleLowerCase() === value.toLocaleLowerCase()); + + if (resultUser) { + isValid = true; + } + } + + return isValid; } getDisplayName(model: LightUserRepresentation) { @@ -119,7 +114,6 @@ export class PeopleWidgetComponent extends WidgetComponent implements OnInit { onItemSelect(item: LightUserRepresentation) { if (item) { this.field.value = item; - this.value = this.getDisplayName(item); } }