+
+
+
+ ![]()
+
+ {{getDisplayName(user)}}
+
-
-
-
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.scss b/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.scss
index cd7803f9ee..b0afdff6fd 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.scss
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.scss
@@ -1,69 +1,52 @@
-@import '~ng2-alfresco-core/styles/theming';
-@import '../form';
+@import '~@angular/material/theming';
-.adf {
+@mixin mat-people-widget-theme($theme) {
+ $primary: map-get($theme, primary);
+ $background: map-get($theme, background);
+ $foreground: map-get($theme, foreground);
- &-people-widget {
- width: 100%;
- }
+ .adf {
- &-people-autocomplete {
- background-color: #fff;
- position:inherit;
- max-height: 200px;
- width: 100%;
- overflow-y: auto;
- z-index: 5;
- border-radius: 3%;
- color: #555;
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
- > md-option {
- list-style-type: none;
- position: static;
- height: auto;
- width: auto;
- min-width: 124px;
- padding: 8px 0 0 20px;
- margin: 0;
- border-radius: 2px;
- > span {
- opacity: 1;
- }
+ &-people-widget {
+ width: 100%;
+ }
+
+ &-people-widget-pic {
+ background: mat-color($primary);
+ display: inline-block;
+ width: 40px;
+ height: 40px;
+ border-radius: 100px;
+ color: mat-color($foreground, text);
+ text-align: center;
+ font-weight: bolder;
+ font-size: 18px;
+ text-transform: uppercase;
+ vertical-align: middle;
+ }
+
+ &-people-widget-row {
+ padding-bottom: 10px;
+ }
+
+ &-people-widget-image {
+ margin-left: -45px;
+ left: 21px;
+ background: mat-color($background, dialog);
+ border-radius: 100px;
+ width: 40px;
+ height: 40px;
+ vertical-align: middle;
+ display: inline-block;
+ padding: 0;
+ }
+
+ &-people-widget-image-row {
+ display: inline-block;
+ }
+
+ &-people-label-name {
+ padding-left: 10px;
}
}
-
- &-people-widget-pic {
- background: #ff9800;
- display: inline-block;
- width: 30px;
- padding: 0 9px;
- border-radius: 100px;
- color: #fff;
- text-align: center;
- font-weight: bolder;
- font-size: 18px;
- text-transform: uppercase;
- vertical-align: middle;
- }
-
- &-people-widget-row {
- padding-bottom: 10px;
- }
-
- &-people-widget-image {
- border-radius: 100px;
- width: 50px;
- height: 50px;
- vertical-align: middle;
- display: inline-block;
- padding: 0 0;
- }
-
- &-people-widget-image-row {
- display: inline-block;
- }
-
- &-people-label-name {
- padding-left: 10px;
- }
}
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 e30bdddd67..1cb4ba3146 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
@@ -142,12 +142,12 @@ describe('PeopleWidgetComponent', () => {
})
);
+ let keyboardEvent = new KeyboardEvent('keypress');
widget.value = 'user1';
- widget.onKeyUp(null);
+ widget.onKeyUp(keyboardEvent);
expect(formService.getWorkflowUsers).toHaveBeenCalledWith(widget.value, widget.groupId);
expect(widget.users).toBe(users);
- expect(widget.popupVisible).toBeTruthy();
});
it('should fetch users by search term and group id', () => {
@@ -159,13 +159,13 @@ describe('PeopleWidgetComponent', () => {
})
);
+ let keyboardEvent = new KeyboardEvent('keypress');
widget.value = 'user1';
widget.groupId = '1001';
- widget.onKeyUp(null);
+ widget.onKeyUp(keyboardEvent);
expect(formService.getWorkflowUsers).toHaveBeenCalledWith(widget.value, widget.groupId);
expect(widget.users).toBe(users);
- expect(widget.popupVisible).toBeTruthy();
});
it('should fetch users and show no popup', () => {
@@ -176,19 +176,20 @@ describe('PeopleWidgetComponent', () => {
})
);
+ let keyboardEvent = new KeyboardEvent('keypress');
widget.value = 'user1';
- widget.onKeyUp(null);
+ widget.onKeyUp(keyboardEvent);
expect(formService.getWorkflowUsers).toHaveBeenCalledWith(widget.value, widget.groupId);
expect(widget.users).toEqual([]);
- expect(widget.popupVisible).toBeFalsy();
});
it('should require search term to fetch users', () => {
spyOn(formService, 'getWorkflowUsers').and.stub();
+ let keyboardEvent = new KeyboardEvent('keypress');
widget.value = null;
- widget.onKeyUp(null);
+ widget.onKeyUp(keyboardEvent);
expect(formService.getWorkflowUsers).not.toHaveBeenCalled();
});
@@ -196,19 +197,14 @@ describe('PeopleWidgetComponent', () => {
it('should not fetch users due to constraint violation', () => {
spyOn(formService, 'getWorkflowUsers').and.stub();
+ let keyboardEvent = new KeyboardEvent('keypress');
widget.value = '123';
widget.minTermLength = 4;
- widget.onKeyUp(null);
+ widget.onKeyUp(keyboardEvent);
expect(formService.getWorkflowUsers).not.toHaveBeenCalled();
});
- it('should hide popup on value flush', () => {
- widget.popupVisible = true;
- widget.flushValue();
- expect(widget.popupVisible).toBeFalsy();
- });
-
it('should update form on value flush', () => {
spyOn(widget.field, 'updateForm').and.callThrough();
widget.flushValue();
@@ -247,31 +243,4 @@ describe('PeopleWidgetComponent', () => {
expect(widget.value).toBeNull();
expect(widget.field.value).toBeNull();
});
-
- describe('Image', () => {
-
- it('should show the initial in the image', () => {
- widget.users = [
- new GroupUserModel({firstName: 'Tony', lastName: 'Stark'}),
- new GroupUserModel({firstName: 'John', lastName: 'Doe'})
- ];
-
- fixture.detectChanges();
-
- expect(element.querySelector('#adf-people-widget-initial-0').innerHTML.trim()).toBe('TS');
- expect(element.querySelector('#adf-people-widget-initial-1').innerHTML.trim()).toBe('JD');
- });
-
- it('should show the the image if user has an image', () => {
- widget.users = [
- new GroupUserModel({firstName: 'Tony', lastName: 'Stark', userImage: 'testUrl0'}),
- new GroupUserModel({firstName: 'John', lastName: 'Doe', userImage: 'testUrl1'})
- ];
-
- fixture.detectChanges();
-
- expect((element.querySelector('#adf-people-widget-pic-0') as any).src).toContain('testUrl0');
- expect((element.querySelector('#adf-people-widget-pic-1') as any).src).toContain('testUrl1');
- });
- });
});
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 f9acf53b42..9c8dba1550 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
@@ -15,10 +15,11 @@
* limitations under the License.
*/
- /* tslint:disable:component-selector */
+/* tslint:disable:component-selector */
-import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { ENTER, ESCAPE } from '@angular/cdk/keycodes';
+import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { MdAutocompleteTrigger } from '@angular/material';
import { FormService } from '../../../services/form.service';
import { GroupUserModel } from '../core/group-user.model';
import { GroupModel } from '../core/group.model';
@@ -31,24 +32,21 @@ import { baseHost , WidgetComponent } from './../widget.component';
host: baseHost,
encapsulation: ViewEncapsulation.None
})
-export class PeopleWidgetComponent extends WidgetComponent implements OnInit, AfterViewInit {
+export class PeopleWidgetComponent extends WidgetComponent implements OnInit {
- @ViewChild('inputValue')
- input: ElementRef;
+ @ViewChild(MdAutocompleteTrigger)
+ input: MdAutocompleteTrigger;
- popupVisible: boolean = false;
minTermLength: number = 1;
value: string;
+ oldValue: string;
users: GroupUserModel[] = [];
groupId: string;
- constructor(public formService: FormService,
- public elementRef: ElementRef) {
- super(formService);
+ constructor(public formService: FormService) {
+ super(formService);
}
- // TODO: investigate, called 2 times
- // https://github.com/angular/angular/issues/6782
ngOnInit() {
if (this.field) {
let user: GroupUserModel = this.field.value;
@@ -61,37 +59,27 @@ export class PeopleWidgetComponent extends WidgetComponent implements OnInit, Af
let restrictWithGroup =
-
-
-
- ![]()
-
- {{getDisplayName(user)}}
-
-
- {{item.name}}
-
-
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.scss b/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.scss
index 923e12e047..7e25125d3b 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.scss
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.scss
@@ -11,30 +11,4 @@
&-typeahead-widget {
width: 100%;
}
-
- &-typeahead-autocomplete {
- background-color: #fff;
- position:absolute;
- max-height: 200px;
- width: 100%;
- overflow-y: auto;
- z-index: 5;
- color: #555;
- margin: -10px 0 0 0;
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
- > md-option {
- list-style-type: none;
- position: static;
- height: auto;
- width: auto;
- min-width: 124px;
- padding: 8px 0;
- margin: 0;
- border-radius: 2px;
- > span {
- opacity: 1;
- padding-left: 23px;
- }
- }
- }
}
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.spec.ts
index 0abc4336cf..728207d258 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.spec.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.spec.ts
@@ -108,68 +108,6 @@ describe('TypeaheadWidgetComponent', () => {
expect(widget.handleError).toHaveBeenCalledWith(err);
});
- it('should show popup on key up', () => {
-
- spyOn(widget, 'getOptions').and.returnValue([{}, {}]);
-
- widget.minTermLength = 1;
- widget.value = 'some value';
-
- widget.popupVisible = false;
- widget.onKeyUp(null);
- expect(widget.popupVisible).toBeTruthy();
- });
-
- it('should require items to show popup', () => {
- widget.minTermLength = 1;
- widget.value = 'some value';
-
- widget.popupVisible = false;
- widget.onKeyUp(null);
- expect(widget.popupVisible).toBeFalsy();
- });
-
- it('should require value to show popup', () => {
- widget.minTermLength = 1;
- widget.value = '';
-
- widget.popupVisible = false;
- widget.onKeyUp(null);
- expect(widget.popupVisible).toBeFalsy();
- });
-
- it('should require value to be of min length to show popup', () => {
- spyOn(widget, 'getOptions').and.returnValue([{}, {}]);
-
- widget.minTermLength = 3;
- widget.value = 'v';
-
- // value less than constraint
- widget.popupVisible = false;
- widget.onKeyUp(null);
- expect(widget.popupVisible).toBeFalsy();
-
- // value satisfies constraint
- widget.value = 'value';
- widget.onKeyUp(null);
- expect(widget.popupVisible).toBeTruthy();
-
- // value gets less than allowed again
- widget.value = 'va';
- widget.onKeyUp(null);
- expect(widget.popupVisible).toBeFalsy();
- });
-
- it('should flush value on blur', (done) => {
- spyOn(widget, 'flushValue').and.stub();
- widget.onBlur();
-
- setTimeout(() => {
- expect(widget.flushValue).toHaveBeenCalled();
- done();
- }, 200);
- });
-
it('should prevent default behaviour on option item click', () => {
let event = jasmine.createSpyObj('event', ['preventDefault']);
widget.onItemClick(null, event);
@@ -270,12 +208,6 @@ describe('TypeaheadWidgetComponent', () => {
expect(filtered[0]).toEqual(options[1]);
});
- it('should hide popup on flush', () => {
- widget.popupVisible = true;
- widget.flushValue();
- expect(widget.popupVisible).toBeFalsy();
- });
-
it('should update form on value flush', () => {
spyOn(widget.field, 'updateForm').and.callThrough();
widget.flushValue();
@@ -359,22 +291,6 @@ describe('TypeaheadWidgetComponent', () => {
});
});
- it('should emit field change event on blur', (done) => {
- spyOn(widget, 'flushValue').and.stub();
- let fakeField = new FormFieldModel(new FormModel(), { id: 'fakeField', value: 'fakeValue' });
- widget.field = fakeField;
- widget.onBlur();
-
- setTimeout(() => {
- widget.fieldChanged.subscribe((field) => {
- expect(field).toBeDefined();
- expect(field.id).toEqual('field-id');
- expect(field.value).toEqual('field-value');
- });
- done();
- }, 200);
- });
-
describe('when template is ready', () => {
let typeaheadWidgetComponent: TypeaheadWidgetComponent;
let fixture: ComponentFixture