TSK-1155: Claiming a task and cancelling a claim works in UI/workplace

web/src/app/workplace/components/task/task.component.html

@@ -3,8 +3,8 @@
   <div class="panel-heading">
     <div class="pull-right">
       <div class="dropdown btn-group">
-        <button type="button" (click)="navigateBack()" class="btn btn-default">
-          <span title="Cancel and return to task detail" class="material-icons md-20 blue">arrow_back</span>
+        <button type="button" (click)="cancelClaimTask()" class="btn btn-default">
+          <span title="Cancel claim and return to task detail" class="material-icons md-20 blue">arrow_back</span>
         </button>
         <button type="button" (click)="completeTask()" class="btn btn-default">
           <span title="Complete task and return to task list" class="material-icons md-20 blue">check</span>

web/src/app/workplace/components/task/task.component.ts

@@ -7,6 +7,7 @@ import { TaskService } from 'app/workplace/services/task.service';
 import { WorkbasketService } from 'app/shared/services/workbasket/workbasket.service';
 import { Subscription } from 'rxjs';
 import { ClassificationsService } from 'app/shared/services/classifications/classifications.service';
+import { take } from 'rxjs/operators';
 
 @Component({
   selector: 'taskana-task',
@@ -37,6 +38,16 @@ export class TaskComponent implements OnInit, OnDestroy {
     this.routeSubscription = this.route.params.subscribe((params) => {
       const { id } = params;
       this.getTask(id);
+
+      this.requestInProgress = true;
+      this.taskService
+        .claimTask(id)
+        .pipe(take(1))
+        .subscribe((task) => {
+          this.task = task;
+          this.taskService.publishUpdatedTask(task);
+          this.requestInProgress = false;
+        });
     });
   }
 
@@ -85,6 +96,19 @@ export class TaskComponent implements OnInit, OnDestroy {
     });
   }
 
+  cancelClaimTask() {
+    this.requestInProgress = true;
+    this.taskService
+      .cancelClaimTask(this.task.taskId)
+      .pipe(take(1))
+      .subscribe((task) => {
+        this.task = task;
+        this.taskService.publishUpdatedTask(task);
+        this.requestInProgress = false;
+      });
+    this.navigateBack();
+  }
+
   navigateBack() {
     this.router.navigate([{ outlets: { detail: `taskdetail/${this.task.taskId}` } }], {
       relativeTo: this.route.parent

web/src/app/workplace/services/task.service.ts

@@ -68,10 +68,13 @@ export class TaskService {
     return this.httpClient.post<Task>(`${this.url}/${id}/complete`, '');
   }
 
-  // currently unused
-  /*  claimTask(id: string): Observable<Task> {
+  claimTask(id: string): Observable<Task> {
     return this.httpClient.post<Task>(`${this.url}/${id}/claim`, 'test');
-  } */
+  }
+
+  cancelClaimTask(id: string): Observable<Task> {
+    return this.httpClient.delete<Task>(`${this.url}/${id}/claim`);
+  }
 
   transferTask(taskId: string, workbasketId: string): Observable<Task> {
     return this.httpClient.post<Task>(`${this.url}/${taskId}/transfer/${workbasketId}`, '');