Changed activiti people to manage the new search user window

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

@@ -9,3 +9,7 @@
 .material-icons:hover {
     color: rgb(255, 152, 0);
 }
+
+.involve-user-padding {
+    padding: 20px 24px 2px;
+}

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

@@ -1,7 +1,7 @@
 <span class="activiti-label mdl-badge"
       [attr.data-badge]="people?.length">{{ 'TASK_DETAILS.LABELS.PEOPLE' | translate }}</span>
 <div id="addPeople" (click)="showDialog()" class="icon material-icons">add</div>
-<div class="mdl-tooltip" for="addPeople">
+<div class="mdl-tooltip" data-mdl-for="addPeople">
     Add a person
 </div>
 <div class="menu-container" *ngIf="people?.length > 0">
@@ -9,8 +9,11 @@
         <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>
-            {{user.firstName}}
+                <span>{{user.firstName}} {{user.lastName}}</span>
             </span>
+            <a class="mdl-list__item-secondary-action">
+                <i id="remove" class="material-icons" (click)="removeInvolvedUser(user)">delete</i>
+            </a>
         </li>
     </ul>
 </div>
@@ -19,15 +22,14 @@
 </div>
 
 <dialog class="mdl-dialog" #dialog>
-    <h4 class="mdl-dialog__title">New User</h4>
-    <div class="mdl-dialog__content">
-        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-            <input class="mdl-textfield__input" type="text" id="people" />
-            <label class="mdl-textfield__label" for="people">Name</label>
-        </div>
+    <h4 class="mdl-dialog__title">Involve User</h4>
+    <div class="mdl-dialog__content involve-user-padding">
+        <activiti-people-search (onSearch)="searchUser($event)"
+                                (onModalRowClicked)="involveUser($event)"
+                                [results]="people$">
+        </activiti-people-search>
     </div>
     <div class="mdl-dialog__actions">
-        <button type="button" (click)="add()" class="mdl-button">Add User</button>
         <button type="button" (click)="cancel()" class="mdl-button close">Cancel</button>
     </div>
 </dialog>

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

@@ -0,0 +1,50 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ import {
+ AlfrescoAuthenticationService,
+ AlfrescoSettingsService,
+ AlfrescoApiService
+ } from 'ng2-alfresco-core';*/
+import { AlfrescoTranslationService } from 'ng2-alfresco-core';
+import { ActivitiPeopleService } from '../services/activiti-people.service';
+import { ActivitiPeople } from './activiti-people.component';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+
+describe('Activiti People Component', () => {
+
+    let activitiPeopleComponent: ActivitiPeople;
+    let fixture: ComponentFixture<ActivitiPeople>;
+    let element: HTMLElement;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [ActivitiPeople],
+            providers: [AlfrescoTranslationService, ActivitiPeopleService]
+        }).compileComponents().then(() => {
+            fixture = TestBed.createComponent(ActivitiPeople);
+            activitiPeopleComponent = fixture.componentInstance;
+            element = fixture.nativeElement;
+        });
+    }));
+
+    it('should not show any image if the user is not logged in', () => {
+        expect(element.querySelector('#userinfo_container')).toBeDefined();
+        expect(element.querySelector('#logged-user-img')).toBeNull();
+    });
+});

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

@@ -15,10 +15,11 @@
  * limitations under the License.
  */
 
-import { Component, Input, OnInit, ViewChild } from '@angular/core';
-import { AlfrescoTranslationService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
+import { Component, Input, ViewChild } from '@angular/core';
+import { AlfrescoTranslationService } from 'ng2-alfresco-core';
 import { User } from '../models/user.model';
 import { Observer, Observable } from 'rxjs/Rx';
+import { ActivitiPeopleService } from '../services/activiti-people.service';
 
 @Component({
     selector: 'activiti-people',
@@ -26,24 +27,27 @@ import { Observer, Observable } from 'rxjs/Rx';
     templateUrl: './activiti-people.component.html',
     styleUrls: ['./activiti-people.component.css']
 })
-export class ActivitiPeople implements OnInit {
+export class ActivitiPeople {
 
     @Input()
     people: User [] = [];
 
+    @Input()
+    taskId: string = '';
+
     @ViewChild('dialog')
     dialog: any;
 
-    private peopleObserver: Observer<User>;
+    private peopleObserver: Observer<User[]>;
     people$: Observable<User>;
 
     /**
      * Constructor
-     * @param auth
      * @param translate
+     * @param people service
      */
-    constructor(private auth: AlfrescoAuthenticationService,
-                private translate: AlfrescoTranslationService) {
+    constructor(private translate: AlfrescoTranslationService,
+                private peopleService: ActivitiPeopleService) {
 
         if (translate) {
             translate.addTranslationFolder('node_modules/ng2-activiti-tasklist/src');
@@ -51,12 +55,6 @@ export class ActivitiPeople implements OnInit {
         this.people$ = new Observable<User>(observer => this.peopleObserver = observer).share();
     }
 
-    ngOnInit() {
-        this.people$.subscribe((user: User) => {
-            this.people.push(user);
-        });
-    }
-
     public showDialog() {
         if (!this.dialog.nativeElement.showModal) {
             dialogPolyfill.registerDialog(this.dialog.nativeElement);
@@ -66,16 +64,33 @@ export class ActivitiPeople implements OnInit {
         }
     }
 
-    public add() {
-        alert('add people');
-
-        this.cancel();
-    }
-
     public cancel() {
         if (this.dialog) {
             this.dialog.nativeElement.close();
         }
     }
 
+    searchUser(searchedWord: string) {
+        this.peopleService.getWorkflowUsers(this.taskId, searchedWord)
+            .subscribe((users) => {
+                this.peopleObserver.next(users);
+            }, error => console.log('Could not load users'));
+    }
+
+    involveUser(user: User) {
+        this.peopleService.involveUserWithTask(this.taskId, user.id.toString())
+            .subscribe(() => {
+                this.people.push(user);
+            }, error => console.error('Impossible to involve user with task'));
+    }
+
+    removeInvolvedUser(user: User) {
+        this.peopleService.removeInvolvedUser(this.taskId, user.id.toString())
+            .subscribe(() => {
+                this.people = this.people.filter((involvedUser) => {
+                    return involvedUser.id !== user.id;
+                });
+            }, error => console.error('Impossible to remove involved user from task'));
+    }
+
 }