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

[ADF-1684] [object Object] appears in People control when selecting the same name (#2472)

Browse Source 
* object people component bug

* fix test people widget
This commit is contained in:
Eugenio Romano 2017-10-14 08:35:53 +01:00 committed by Denys Vuika
parent d6c5c7707f
commit a102a7ffb2
3 changed files with 91 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.html
View File

@ -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">
<md-autocomplete #auto="mdAutocomplete" (optionSelected)="onItemSelect($event.option.value)">
<md-autocomplete #auto="mdAutocomplete" (optionSelected)="onItemSelect($event.option.value)" [displayWith]="getDisplayName">
<md-option *ngFor="let user of users; let i = index" [value]="user">
<div class="adf-people-widget-row" id="adf-people-widget-user-{{i}}">
<div class="adf-people-widget-pic">

80
ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.spec.ts
View File

@ -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 = <HTMLInputElement> element.querySelector('#people-id');
let peopleHTMLElement: HTMLInputElement = <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 = <HTMLInputElement> element.querySelector('#people-id');
let peopleHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('input');
peopleHTMLElement.focus();
widget.value = 'T';
peopleHTMLElement.value = 'T';
peopleHTMLElement.dispatchEvent(new Event('keyup'));
peopleHTMLElement.dispatchEvent(new Event('input'));

74
ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.ts
View File

@ -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 = <GroupModel> params['restrictWithGroup'];
if (params && params.restrictWithGroup) {
let restrictWithGroup = <GroupModel> 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);
}
}