[ADF-226] Add requeue button to task header (#2366)

* Add requeue button to task header

* Fixing typescript declaration

docs/task-header.component.md

@@ -37,6 +37,7 @@ Shows all the information related to a task.
 | Name | Description |
 | --- | --- |
 | claim | Raised when the task is claimed. |
+| unclaim | Raised when the task is unclaimed (requeued). |
 
 ## Details
 

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

@@ -478,6 +478,7 @@ Shows all the information related to a task.
 | Name | Description |
 | --- | --- |
 | claim | Raised when the task is claimed. |
+| unclaim | Raised when the task is unclaimed (requeued). |
 
 ### Details
 

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

@@ -69,7 +69,8 @@
                         [class]="getTaskHeaderViewClass()"
                         [taskDetails]="taskDetails"
                         [formName]="taskFormName"
-                        (claim)="onClaimTask($event)">
+                        (claim)="onClaimAction($event)"
+                        (unclaim)="onClaimAction($event)">
                     </adf-task-header>
                     <adf-people *ngIf="showInvolvePeople" #people
                         [iconImageUrl]="peopleIconImageUrl"

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

@@ -324,7 +324,7 @@ export class TaskDetailsComponent implements OnInit, OnChanges {
         this.dialog.closeAll();
     }
 
-    onClaimTask(taskId: string): void {
+    onClaimAction(taskId: string): void {
         this.loadDetails(taskId);
     }
 

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

@@ -3,8 +3,10 @@
         <adf-card-view [properties]="properties" [editable]="!isCompleted()"></adf-card-view>
     </md-card-content>
 
-    <md-card-actions *ngIf="!isAssignedToMe()" class="adf-controls">
+    <md-card-actions class="adf-controls">
-        <button md-button data-automation-id="header-claim-button" id="claim-task" (click)="claimTask(taskDetails.id)" class="adf-claim-controls">{{ 'TASK_DETAILS.BUTTON.CLAIM' | translate }}
+        <button *ngIf="isAssignedToMe()" md-button data-automation-id="header-unclaim-button" id="unclaim-task" (click)="unclaimTask(taskDetails.id)" class="adf-claim-controls">{{ 'TASK_DETAILS.BUTTON.UNCLAIM' | translate }}
+        </button>
+        <button *ngIf="!isAssignedToMe()" md-button data-automation-id="header-claim-button" id="claim-task" (click)="claimTask(taskDetails.id)" class="adf-claim-controls">{{ 'TASK_DETAILS.BUTTON.CLAIM' | translate }}
         </button>
     </md-card-actions>
 </md-card>

ng2-components/ng2-activiti-tasklist/src/components/task-header.component.spec.ts

@@ -19,6 +19,7 @@ import { DebugElement } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { AppConfigService, CardViewUpdateService, CoreModule, TranslationService } from 'ng2-alfresco-core';
+import { Observable } from 'rxjs/Rx';
 import { AppConfigServiceMock } from '../assets/app-config.service.mock';
 import { TranslationMock } from '../assets/translation.service.mock';
 
@@ -122,12 +123,55 @@ describe('TaskHeaderComponent', () => {
         expect(datePicker).not.toBeNull('Datepicker should be in DOM');
     });
 
-    it('should display the claim button if no assignee', () => {
+    describe('Claiming', () => {
-        component.taskDetails.assignee = null;
+
-        component.ngOnChanges({});
+        it('should display the claim button if no assignee', () => {
-        fixture.detectChanges();
+            component.taskDetails.assignee = null;
-        let valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-claim-button"]'));
+
-        expect(valueEl.nativeElement.innerText).toBe('TASK_DETAILS.BUTTON.CLAIM');
+            component.ngOnChanges({});
+            fixture.detectChanges();
+
+            let claimButton = fixture.debugElement.query(By.css('[data-automation-id="header-claim-button"]'));
+            expect(claimButton.nativeElement.innerText).toBe('TASK_DETAILS.BUTTON.CLAIM');
+        });
+    });
+
+    describe('Unclaim', () => {
+
+        const batman = { id : 1, email: 'bruce.wayne@gotham.com', firstName: 'Bruce', lastName: 'Wayne', userImage: 'batman.jpg' };
+        let taskListService;
+
+        beforeEach(() => {
+            taskListService = TestBed.get(TaskListService);
+            component.taskDetails.assignee = batman;
+            component.taskDetails.id = 'repair-batmobile';
+            fixture.detectChanges();
+        });
+
+        it('should display the requeue button if there is assignee', () => {
+            let unclaimButton = fixture.debugElement.query(By.css('[data-automation-id="header-unclaim-button"]'));
+            expect(unclaimButton.nativeElement.innerText).toBe('TASK_DETAILS.BUTTON.UNCLAIM');
+        });
+
+        it('should call the service\'s unclaim method on unclaiming' , () => {
+            spyOn(taskListService, 'unclaimTask');
+
+            let unclaimButton = fixture.debugElement.query(By.css('[data-automation-id="header-unclaim-button"]'));
+            unclaimButton.triggerEventHandler('click', {});
+
+            expect(taskListService.unclaimTask).toHaveBeenCalledWith('repair-batmobile');
+        });
+
+        it('should trigger the unclaim event on successfull unclaiming', () => {
+            let unclaimed: boolean = false;
+            component.unclaim.subscribe(() => { unclaimed = true; });
+            spyOn(taskListService, 'unclaimTask').and.returnValue(Observable.of(true));
+
+            let unclaimButton = fixture.debugElement.query(By.css('[data-automation-id="header-unclaim-button"]'));
+            unclaimButton.triggerEventHandler('click', {});
+
+            expect(unclaimed).toBeTruthy();
+        });
     });
 
     it('should display due date', () => {

ng2-components/ng2-activiti-tasklist/src/components/task-header.component.ts

@@ -36,6 +36,9 @@ export class TaskHeaderComponent implements OnChanges {
     @Output()
     claim: EventEmitter<any> = new EventEmitter<any>();
 
+    @Output()
+    unclaim: EventEmitter<any> = new EventEmitter<any>();
+
     properties: CardViewItem [];
     inEdit: boolean = false;
 
@@ -47,6 +50,9 @@ export class TaskHeaderComponent implements OnChanges {
         this.refreshData();
     }
 
+    /**
+     * Refresh the card data
+     */
     refreshData() {
         if (this.taskDetails) {
             let valueMap = new Map([[this.taskDetails.processInstanceId, this.taskDetails.processDefinitionName]]);
@@ -72,18 +78,32 @@ export class TaskHeaderComponent implements OnChanges {
         }
     }
 
+    /**
+     * Does the task have an assignee
+     */
     public hasAssignee(): boolean {
         return (this.taskDetails && this.taskDetails.assignee) ? true : false;
     }
 
+    /**
+     * Is the task assigned to the currently loggedin user
+     */
     isAssignedToMe(): boolean {
         return this.taskDetails.assignee ? true : false;
     }
 
+    /**
+     * Returns task's status
+     */
     getTaskStatus(): string {
         return this.isCompleted() ? 'Completed' : 'Running';
     }
 
+    /**
+     * Claim task
+     *
+     * @param taskId
+     */
     claimTask(taskId: string) {
         this.activitiTaskService.claimTask(taskId).subscribe(
             (res: any) => {
@@ -92,6 +112,22 @@ export class TaskHeaderComponent implements OnChanges {
             });
     }
 
+    /**
+     * Unclaim task
+     *
+     * @param taskId
+     */
+    unclaimTask(taskId: string) {
+        this.activitiTaskService.unclaimTask(taskId).subscribe(
+            (res: any) => {
+                this.logService.info('Task unclaimed');
+                this.unclaim.emit(taskId);
+            });
+    }
+
+    /**
+     * Returns true if the task is completed
+     */
     isCompleted() {
         return !!this.taskDetails.endDate;
     }

ng2-components/ng2-activiti-tasklist/src/i18n/en.json

@@ -22,6 +22,7 @@
         "BUTTON": {
             "COMPLETE": "Complete",
             "CLAIM": "Claim",
+            "UNCLAIM": "Requeue",
             "DRAG-ATTACHMENT": "Drop Files Here...",
             "UPLOAD-ATTACHMENT": "Upload Attachment"
         },

ng2-components/ng2-activiti-tasklist/src/services/tasklist.service.spec.ts

@@ -750,6 +750,22 @@ describe('Activiti TaskList Service', () => {
             });
         });
 
+        it('should unclaim a task', (done) => {
+            let taskId = '111';
+
+            service.unclaimTask(taskId).subscribe(
+                (res: any) => {
+                    done();
+                }
+            );
+
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                'status': 200,
+                contentType: 'application/json',
+                responseText: JSON.stringify({})
+            });
+        });
+
         it('should update a task', (done) => {
             let taskId = '111';
 

ng2-components/ng2-activiti-tasklist/src/services/tasklist.service.ts

@@ -446,6 +446,15 @@ export class TaskListService {
             .catch(err => this.handleError(err));
     }
 
+    /**
+     * Unclaim a task
+     * @param id - taskId
+     */
+    unclaimTask(taskId: string): Observable<TaskDetailsModel> {
+        return Observable.fromPromise(this.apiService.getInstance().activiti.taskApi.unclaimTask(taskId))
+            .catch(err => this.handleError(err));
+    }
+
     /**
      * Update due date
      * @param dueDate - the new due date