From f5d2269c2e44e995ebbfb4798d1c9fe1a2551bde Mon Sep 17 00:00:00 2001 From: Maurizio Vitale Date: Mon, 16 Jan 2017 11:50:14 +0000 Subject: [PATCH] #1112 Use the mdl-chip (#1466) * #1112 Use the mdl-chip * fix unit test --- .../ng2-activiti-tasklist/README.md | 1 + .../src/assets/images/user.jpg | Bin 0 -> 6961 bytes .../activiti-people-search.component.css | 18 ++++++++++++++++++ .../activiti-people-search.component.html | 9 ++++----- .../activiti-people-search.component.spec.ts | 10 ++++++---- .../activiti-people-search.component.ts | 6 ++++++ .../components/activiti-people.component.html | 14 ++++++-------- .../components/activiti-people.component.ts | 5 +++++ .../activiti-task-details.component.html | 2 +- .../activiti-task-details.component.ts | 3 +++ 10 files changed, 50 insertions(+), 18 deletions(-) create mode 100644 ng2-components/ng2-activiti-tasklist/src/assets/images/user.jpg diff --git a/ng2-components/ng2-activiti-tasklist/README.md b/ng2-components/ng2-activiti-tasklist/README.md index 11aacfe5cf..a972fff803 100644 --- a/ng2-components/ng2-activiti-tasklist/README.md +++ b/ng2-components/ng2-activiti-tasklist/README.md @@ -267,6 +267,7 @@ The component shows the details of the task id passed in input | `showFormRefreshButton` | {boolean} | optional | Toggle rendering of the `Refresh` button. | | `showFormSaveButton` | {boolean} | optional | Toggle rendering of the `Save` outcome button. | | `showFormCompleteButton` | {boolean} | optional | Toggle rendering of the Form `Complete` outcome button | +| `peopleIconImageUrl` | {string} | optional | Define a custom people icon image | ### Custom 'empty Activiti Task Details' template diff --git a/ng2-components/ng2-activiti-tasklist/src/assets/images/user.jpg b/ng2-components/ng2-activiti-tasklist/src/assets/images/user.jpg new file mode 100644 index 0000000000000000000000000000000000000000..930ab14f0b20c224bad94fee8df1f9839854c8e9 GIT binary patch literal 6961 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 literal 0 HcmV?d00001 diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.css b/ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.css index 11c70fd077..2bbb854137 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.css +++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.css @@ -16,3 +16,21 @@ padding-bottom: 0px; padding-left: 0px; } + +.mdl-chip-search-people{ + margin: auto; + min-width: 60%; +} + +.mdl-chip-search-people:hover{ + background-color: #c1c1c1; + cursor: pointer; +} + +.mdl-chip-search-people img{ + margin-left: -30px; +} + +.mdl-chip-search-people__text{ + padding-left: 10px; +} \ No newline at end of file diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.html b/ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.html index b6e13ddeb3..94a6dc7075 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.html +++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.html @@ -5,11 +5,10 @@
  • - - face - {{getDisplayUser(user)}} - +
    • No user found to involve diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.spec.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.spec.ts index 144604d799..ab0e57f66e 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.spec.ts +++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.spec.ts @@ -109,10 +109,11 @@ describe('ActivitiPeopleSearch', () => { searchInput.dispatchEvent(new Event('input')); }); - it('should send an event when an user is clicked', async(() => { + it('should send an event when an user is clicked', (done) => { activitiPeopleSearchComponent.onRowClicked.subscribe((user) => { expect(user).toBeDefined(); expect(user.firstName).toBe('fake-name'); + done(); }); activitiPeopleSearchComponent.results = Observable.of(userArray); activitiPeopleSearchComponent.ngOnInit(); @@ -122,9 +123,9 @@ describe('ActivitiPeopleSearch', () => { let userToSelect = element.querySelector('#user-1'); userToSelect.click(); }); - })); + }); - it('should remove clicked user', async(() => { + it('should remove clicked user', (done) => { activitiPeopleSearchComponent.results = Observable.of(userArray); activitiPeopleSearchComponent.ngOnInit(); fixture.detectChanges(); @@ -135,6 +136,7 @@ describe('ActivitiPeopleSearch', () => { fixture.whenStable() .then(() => { expect(element.querySelector('#user-1')).toBeNull(); + done(); }); - })); + }); }); diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.ts index 687a74c1f8..a06b06cb55 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.ts +++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.ts @@ -32,6 +32,11 @@ declare let componentHandler: any; export class ActivitiPeopleSearch implements OnInit, AfterViewInit { + baseComponentPath = module.id.replace('/activiti-people-search.component.js', ''); + + @Input() + iconImageUrl: string; + @Input() results: Observable; @@ -81,6 +86,7 @@ export class ActivitiPeopleSearch implements OnInit, AfterViewInit { onRowClick(userClicked: User) { this.onRowClicked.emit(userClicked); this.userList = this.userList.filter((user) => { + this.searchUser.reset(); return user.id !== userClicked.id; }); } diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-people.component.html b/ng2-components/ng2-activiti-tasklist/src/components/activiti-people.component.html index 7e5cdbf1a1..e11aa7d557 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-people.component.html +++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-people.component.html @@ -7,14 +7,11 @@
    • - - face - {{getDisplayUser(user)}} + + + {{getDisplayUser(user)}} + cancel - - delete -
    @@ -27,7 +24,8 @@
    + [results]="peopleSearch$" + [iconImageUrl]="iconImageUrl">
    diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-people.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-people.component.ts index e4213f2d24..cc4733429e 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-people.component.ts +++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-people.component.ts @@ -31,6 +31,11 @@ declare let dialogPolyfill: any; }) export class ActivitiPeople { + baseComponentPath = module.id.replace('/activiti-people.component.js', ''); + + @Input() + iconImageUrl: string; + @Input() people: User [] = []; diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html index 7d1d86a2b3..46be6220d5 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html +++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html @@ -15,7 +15,7 @@ (claim)="onClaimTask($event)">
    -
    diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts index ee5574ce03..1abb7e4ab8 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts +++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts @@ -61,6 +61,9 @@ export class ActivitiTaskDetails implements OnInit, OnChanges { @Input() showFormRefreshButton: boolean = true; + @Input() + peopleIconImageUrl: string; + @Output() formSaved: EventEmitter = new EventEmitter();