#1112 Use the mdl-chip (#1466)

* #1112 Use the mdl-chip

* fix unit test

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
 

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;
+}

ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.html

@@ -5,11 +5,10 @@
 </div>
 <ul class='mdl-list'>
     <li class="mdl-list__item fix-element-user-list" *ngFor="let user of userList">
-        <span class="mdl-list__item-primary-content mdl-button mdl-js-button mdl-js-ripple-effect"
-              (click)="onRowClick(user)" id="user-{{user.id}}">
-            <i class="material-icons md-light people-search__icon">face</i>
-                {{getDisplayUser(user)}}
-        </span>
+        <button (click)="onRowClick(user)" id="user-{{user.id}}" class="mdl-chip mdl-chip--contact mdl-chip-search-people">
+            <img class="mdl-chip__contact" [src]="iconImageUrl || baseComponentPath + '/../assets/images/user.jpg'" />
+            <span class="mdl-chip__text mdl-chip-search-people__text">{{getDisplayUser(user)}}</span>
+        </button>
     </li>
     <div *ngIf="userList?.length === 0" id="no-user-found">
         No user found to involve

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 = <HTMLElement> 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();
             });
-    }));
+    });
 });

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<User[]>;
 
@@ -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;
         });
     }

ng2-components/ng2-activiti-tasklist/src/components/activiti-people.component.html

@@ -7,14 +7,11 @@
 <div class="menu-container" *ngIf="people?.length > 0">
     <ul class='mdl-list'>
         <li class="mdl-list__item" *ngFor="let user of people">
-            <span class="mdl-list__item-primary-content">
-                <i class="material-icons mdl-list__item-icon">face</i>
-                <span id="user-{{user.id}}">{{getDisplayUser(user)}}</span>
+            <span class="mdl-chip mdl-chip--contact mdl-chip--deletable">
+                <img class="mdl-chip__contact" [src]="iconImageUrl || baseComponentPath + '/../assets/images/user.jpg'" />
+                <span id="user-{{user.id}}" class="mdl-chip__text">{{getDisplayUser(user)}}</span>
+                <a *ngIf="!readOnly" class="mdl-chip__action"><i id="remove-{{user.id}}" (click)="removeInvolvedUser(user)" class="material-icons people__icon">cancel</i></a>
             </span>
-            <a *ngIf="!readOnly" class="mdl-list__item-secondary-action">
-                <i id="remove" class="material-icons people__icon"
-                   (click)="removeInvolvedUser(user)">delete</i>
-            </a>
         </li>
     </ul>
 </div>
@@ -27,7 +24,8 @@
     <div class="mdl-dialog__content add-people-dialog__content">
         <activiti-people-search (onSearch)="searchUser($event)"
                                 (onRowClicked)="involveUser($event)"
-                                [results]="peopleSearch$">
+                                [results]="peopleSearch$"
+                                [iconImageUrl]="iconImageUrl">
         </activiti-people-search>
     </div>
     <div class="mdl-dialog__actions">

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 [] = [];
 

ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html

@@ -15,7 +15,7 @@
             (claim)="onClaimTask($event)"></activiti-task-header>
     <div class="mdl-grid">
         <div class="mdl-cell mdl-cell--4-col">
-            <activiti-people [people]="taskPeople" [readOnly]="readOnlyForm"
+            <activiti-people [iconImageUrl]="peopleIconImageUrl" [people]="taskPeople" [readOnly]="readOnlyForm"
                              [taskId]="taskDetails.id"></activiti-people>
         </div>
         <div class="mdl-cell mdl-cell--4-col">

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<FormModel> = new EventEmitter<FormModel>();