[ADF-1139] People search - Provide an API to reset the search (#2196)

* People search provide a way to reset the search

* Fix readme rules

ng2-components/ng2-activiti-tasklist/README.md

@@ -39,6 +39,11 @@
 - [Task People Component](#task-people-component)
   * [Properties](#properties-8)
     + [Events](#events-7)
+    + [How to customize the people component behavior](#how-to-customize-the-people-component-behavior)
+    + [Involve People single click and close search](#involve-people-single-click-and-close-search)
+    + [Involve People single click without close search](#involve-people-single-click-without-close-search)
+    + [Involve People double click and close search](#involve-people-double-click-and-close-search)
+    + [Involve People double double without close search](#involve-people-double-double-without-close-search)
 - [ADF Comments Component](#adf-comments-component)
   * [Properties](#properties-9)
     + [Events](#events-8)
@@ -50,7 +55,7 @@
     + [Events](#events-10)
 - [People Search Component](#people-search-component)
   * [Properties](#properties-12)
-  * [Events](#events-12)
+  * [Events](#events-11)
 - [Build from sources](#build-from-sources)
 - [NPM scripts](#npm-scripts)
 - [Demo](#demo)
@@ -474,6 +479,66 @@ This component displays involved users to a specified task
 
 No Events
 
+#### How to customize the people component behavior
+
+The people component provide two methods to customize the behavior:
+- involveUserAndCloseSearch: The selected user is going to be added and the search section closed
+- involveUserWithoutCloseSearch: The selected user is going to be added without close the search section
+
+In this way will be easy customize the people component to involve the user with the single or double click event:
+
+#### Involve People single click and close search
+
+```html
+<adf-people #people
+    (row-click)="people.involveUserAndCloseSearch()"
+    [people]="YOUR_INVOLVED_PEOPLE_LIST"
+    [taskId]="YOUR_TASK_ID"
+    [readOnly]="YOUR_READ_ONLY_FLAG">
+</adf-people>
+```
+
+![involve-people-single-click-and-close-search](docs/assets/involve-people-single-click-and-close-search.gif)
+
+#### Involve People single click without close search
+
+```html
+<adf-people #people
+    (row-click)="people.involveUserWithoutCloseSearch()"
+    [people]="YOUR_INVOLVED_PEOPLE_LIST"
+    [taskId]="YOUR_TASK_ID"
+    [readOnly]="YOUR_READ_ONLY_FLAG">
+</adf-people>
+```
+
+![involve-people-single-click-without-close-search](docs/assets/involve-people-single-click-without-close-search.gif)
+
+#### Involve People double click and close search
+
+```html
+<adf-people #people
+    (row-dblclick)="people.involveUserAndCloseSearch()"
+    [people]="YOUR_INVOLVED_PEOPLE_LIST"
+    [taskId]="YOUR_TASK_ID"
+    [readOnly]="YOUR_READ_ONLY_FLAG">
+</adf-people>
+```
+
+![involve-people-double-click-and-close-search](docs/assets/involve-people-double-click-and-close-search.gif)
+
+#### Involve People double double without close search
+
+```html
+<adf-people #people
+    (row-dblclick)="people.involveUserWithoutCloseSearch()"
+    [people]="YOUR_INVOLVED_PEOPLE_LIST"
+    [taskId]="YOUR_TASK_ID"
+    [readOnly]="YOUR_READ_ONLY_FLAG">
+</adf-people>
+```
+
+![involve-people-double-click-without-close-search](docs/assets/involve-people-double-click-without-close-search.gif)
+
 ## ADF Comments Component
 
 This component displays comments entered by involved users to a specified task. It also allows an involved user to add his/her comment to the task.

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

@@ -2,6 +2,7 @@
     [rows]="users"
     [actions]="hasActions()"
     (rowClick)="selectUser($event)"
+    (rowDblClick)="selectUser($event)"
     (showRowActionsMenu)="onShowRowActionsMenu($event)"
     (executeRowAction)="onExecuteRowAction($event)">
 </adf-datatable>

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

@@ -26,7 +26,7 @@
     <button md-button type="button" id="close-people-search" (click)="closeSearchList()">
         {{'PEOPLE.DIALOG_CLOSE' | translate }}
     </button>
-    <button md-button type="button" id="add-people" (click)="addInvolvedUser()">
+    <button md-button type="button" id="add-people" (click)="involveUserAndClose()">
         <ng-content select="action-button-label"></ng-content>
     </button>
 </div>

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

@@ -73,7 +73,12 @@ export class PeopleSearchComponent implements OnInit {
         this.closeSearch.emit();
     }
 
-    addInvolvedUser() {
+    involveUserAndClose() {
+        this.involveUser();
+        this.closeSearchList();
+    }
+
+    involveUser() {
         if (this.selectedUser === undefined) {
             return;
         }

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

@@ -15,11 +15,12 @@
  * limitations under the License.
  */
 
-import { AfterViewInit, Component, Input } from '@angular/core';
+import { AfterViewInit, Component, Input, ViewChild } from '@angular/core';
 import { LogService } from 'ng2-alfresco-core';
 import { Observable, Observer } from 'rxjs/Rx';
 import { UserEventModel } from '../models/user-event.model';
 import { User } from '../models/user.model';
+import { PeopleSearchComponent } from './people-search.component';
 
 import { PeopleService } from '../services/people.service';
 
@@ -45,6 +46,9 @@ export class PeopleComponent implements AfterViewInit {
     @Input()
     readOnly: boolean = false;
 
+    @ViewChild(PeopleSearchComponent)
+    peopleSearch: PeopleSearchComponent;
+
     showAssignment: boolean = false;
 
     private peopleSearchObserver: Observer<User[]>;
@@ -74,6 +78,18 @@ export class PeopleComponent implements AfterViewInit {
         return isUpgraded;
     }
 
+    involveUserAndCloseSearch() {
+        if (this.peopleSearch) {
+            this.peopleSearch.involveUserAndClose();
+        }
+    }
+
+    involveUserWithoutCloseSearch() {
+        if (this.peopleSearch) {
+            this.peopleSearch.involveUser();
+        }
+    }
+
     searchUser(searchedWord: string) {
         this.peopleService.getWorkflowUsers(this.taskId, searchedWord)
             .subscribe((users) => {
@@ -82,7 +98,6 @@ export class PeopleComponent implements AfterViewInit {
     }
 
     involveUser(user: User) {
-        this.showAssignment = false;
         this.peopleService.involveUserWithTask(this.taskId, user.id.toString())
             .subscribe(() => {
                 this.people = [...this.people, user];

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

@@ -76,7 +76,7 @@
         </div>
     </dialog>
     <br /><br />
-    <adf-people *ngIf="showInvolvePeople"
+    <adf-people *ngIf="showInvolvePeople" #people
                 [iconImageUrl]="peopleIconImageUrl"
                 [people]="taskPeople"
                 [readOnly]="readOnlyForm"