TSK-471 - Create TaskDetailsComponent

web/src/app/workplace/models/task.ts

@@ -17,10 +17,11 @@ export class Task {
               public description: string,
               public note: string,
               public state: any,
-              public isRead: boolean,
-              public isTransferred: boolean,
+              public read: boolean,
+              public transferred: boolean,
               public priority: number,
               public classificationSummaryResource: Classification,
-              public workbasketSummaryResource: Workbasket) {
+              public workbasketSummaryResource: Workbasket,
+              public custom1: any) {
   }
 }

web/src/app/workplace/services/rest-connector.service.spec.ts

@@ -1,15 +0,0 @@
-import { TestBed, inject } from '@angular/core/testing';
-
-import { RestConnectorService } from './rest-connector.service';
-
-describe('RestConnectorService', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [RestConnectorService]
-    });
-  });
-
-  it('should be created', inject([RestConnectorService], (service: RestConnectorService) => {
-    expect(service).toBeTruthy();
-  }));
-});

web/src/app/workplace/services/rest-connector.service.ts

@@ -1,48 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
-
-import { Workbasket } from 'app/models/workbasket';
-import { Task } from '../models/task';
-import { environment } from 'app/../environments/environment';
-import { Observable } from 'rxjs/Observable';
-
-@Injectable()
-export class RestConnectorService {
-
-  httpOptions = {
-    headers: new HttpHeaders({
-      'Content-Type': 'application/json',
-      'Authorization': 'Basic VEVBTUxFQURfMTpURUFNTEVBRF8x'
-    })
-  };
-
-  constructor(private httpClient: HttpClient) { }
-
-  getAllWorkBaskets(): Observable<Workbasket[]> {
-    return this.httpClient.get<Array<Workbasket>>(environment.taskanaRestUrl + '/v1/workbaskets?requiredPermission=OPEN',
-      this.httpOptions);
-  }
-
-  findTaskWithWorkbaskets(basketKey: string): Observable<Task[]> {
-    return this.httpClient.get<Array<Task>>(environment.taskanaRestUrl + '/v1/tasks?workbasketkey='
-      + basketKey + '&state=READY&state=CLAIMED', this.httpOptions);
-  }
-
-  getTask(id: string): Observable<Task> {
-    return this.httpClient.get<Task>(environment.taskanaRestUrl + '/v1/tasks/' + id, this.httpOptions);
-  }
-
-  completeTask(id: string): Observable<Task> {
-    return this.httpClient.post<Task>(environment.taskanaRestUrl + '/v1/tasks/' + id + '/complete', '', this.httpOptions);
-  }
-
-  claimTask(id: string): Observable<Task> {
-    return this.httpClient.post<Task>(environment.taskanaRestUrl + '/v1/tasks/' + id + '/claim', 'test', this.httpOptions);
-  }
-
-  transferTask(taskId: string, workbasketKey: string): Observable<any> {
-    return this.httpClient.post(environment.taskanaRestUrl + '/v1/tasks/' + taskId
-      + '/transfer/' + workbasketKey, '', this.httpOptions);
-  }
-
-}

web/src/app/workplace/taskdetails/taskdetails.component.html

@@ -1,10 +1,14 @@
 <div *ngIf="task != null" class="panel panel-primary">
   <div class="panel-heading">
+    <div class="col-xs-2">
+      <a type="button" class="glyphicon glyphicon-arrow-left white" (click)="goBack()"></a>
+    </div>
     Details for task '{{ task.name }}' (ID={{ task.taskId }})
   </div>
   <div class="panel-body">
     <p>{{ task.description }}</p>
     <p><b>Owner:</b> {{ task.owner }}</p>
+    <p><b>State:</b> {{ task.state }}</p>
     <p><b>Creation Date:</b> {{ task.created | date:'medium' }}</p>
     <p><b>Claim Date:</b> {{ task.claimed | date:'medium' }}</p>
     <p><b>Completion Date:</b> {{ task.completed | date:'medium' }}</p>
@@ -12,7 +16,14 @@
     <p><b>Planning Date:</b> {{ task.planned | date:'medium' }}</p>
     <p><b>Due Date:</b> {{ task.due | date:'medium' }}</p>
     <p><b>Priority:</b> {{ task.priority }}</p>
-    <p><b>State:</b> {{ task.state }}</p>
+    <p><b>Creator:</b> {{task.creator}}</p>
+    <p><b>Note:</b> {{task.note}}</p>
     <p><b>Workbasket:</b> {{ task.workbasketSummaryResource.workbasketId }}</p>
+    <p><b>Classification:</b> {{task.classificationSummaryResource.classificationId}}</p>
+    <p><b>BusinessProcessID:</b> {{task.businessProcessId}}</p>
+    <p><b>ParentBusinessProcessID:</b> {{task.parentBusinessProcessId}}</p>
+    <p><b>Read:</b> {{task.read}}</p>
+    <p><b>Transferred:</b> {{task.transferred}}</p>
+    <p><b>custom1:</b> {{task.custom1}}</p>
   </div>
 </div>

web/src/app/workplace/taskdetails/taskdetails.component.ts

@@ -1,5 +1,8 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { Task } from '../models/task';
+import {Component, OnInit} from '@angular/core';
+import {Task} from '../models/task';
+import {ActivatedRoute} from '@angular/router';
+import {TaskService} from '../services/task.service';
+import {Location} from '@angular/common';
 
 @Component({
   selector: 'taskana-task-details',
@@ -7,13 +10,25 @@ import { Task } from '../models/task';
   styleUrls: ['./taskdetails.component.scss']
 })
 export class TaskdetailsComponent implements OnInit {
-
-  @Input()
   task: Task = null;
 
-  constructor() {
+  constructor(private route: ActivatedRoute,
+              private taskService: TaskService,
+              private location: Location) {
   }
 
   ngOnInit() {
+    this.getTask();
+  }
+
+  getTask(): void {
+    const id = this.route.snapshot.paramMap.get('id');
+    this.taskService.getTask(id).subscribe(task => {
+      this.task = task
+    });
+  }
+
+  goBack(): void {
+    this.location.back();
   }
 }

web/src/app/workplace/tasklist/tasklist.component.html

@@ -20,10 +20,10 @@
               (click)="openTask(task.taskId)">
         <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span>
       </button>
-      <button type="button" title="View details for task" class="btn btn-default" aria-label="Left Align"
-              (click)="selectTask(task)">
+      <a type="button" title="View details for task" class="btn btn-default" aria-label="Left Align"
+         routerLink="taskdetail/{{task.taskId}}">
         <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
-      </button>
+      </a>
     </td>
   </tr>
 </table>

web/src/app/workplace/tasklist/tasklist.component.ts

@@ -1,7 +1,6 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Task } from '../models/task';
-import { Router, ActivatedRoute } from '@angular/router';
-import { TaskService } from '../services/task.service';
+import {Component, Input, OnInit} from '@angular/core';
+import {Task} from '../models/task';
+import {ActivatedRoute, Router} from '@angular/router';
 
 @Component({
   selector: 'taskana-task-list',
@@ -12,31 +11,21 @@ export class TasklistComponent implements OnInit {
 
   private columnForOrdering: string;
 
-  @Output()
-  task = new EventEmitter<Task>();
-
   @Input() tasks: Task[];
 
-  constructor(
-    private taskService: TaskService,
-    private router: Router,
-    private route: ActivatedRoute) {
+  constructor(private router: Router,
+              private route: ActivatedRoute) {
     this.columnForOrdering = 'id';  // default: order tasks by id
   }
 
   ngOnInit() {
   }
 
-  selectTask(task: Task) {
-    this.task.next(task);
-  }
-
   orderTasks(column: string) {
     this.columnForOrdering = column;
   }
 
   openTask(id: string) {
-    this.taskService.claimTask(id).subscribe();
-    this.router.navigate(['tasks/', id], { relativeTo: this.route.parent });
+    this.router.navigate(['tasks/', id], {relativeTo: this.route.parent});
   }
 }

web/src/app/workplace/tasks/tasks.component.html

@@ -6,9 +6,5 @@
     <div class="col-md-6">
       <taskana-task-list [tasks]="tasks" (task)="selectTask($event)"></taskana-task-list>
     </div>
-    <div class="col-md-6">
-      <taskana-task-details [task]="task" *ngIf="taskDetailEnabled"></taskana-task-details>
-      <div class="overlay" [ngClass]="{overlayActive:taskDetailEnabled}" (click)="taskDetailEnabled = false"></div>
-    </div>
   </div>
-</div>
+</div>

web/src/app/workplace/tasks/tasks.component.scss

@@ -1,16 +1,3 @@
-.overlay {
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  display: none;
-}
-
-.overlayActive {
-  display: block;
-}
-
 .container-fluid > .row {
   min-height: 50px;
-}
+}

web/src/app/workplace/tasks/tasks.component.ts

@@ -8,8 +8,6 @@ import {Task} from '../models/task';
 })
 export class TasksComponent {
 
-  taskDetailEnabled: boolean;
-
   @Input()
   tasks: Task[];
 
@@ -21,7 +19,6 @@ export class TasksComponent {
   }
 
   selectTask(task: Task) {
-    this.taskDetailEnabled = true;
     this.task = task;
   }
 

web/src/app/workplace/workbasket-selector/workbasket-selector.component.html

@@ -5,7 +5,7 @@
              placeholder="Search for Workbasket ..."/>
       <span class="input-group-btn">
         <button class="btn btn-primary" type="button" (click)="searchBasket()"
-                [disabled]="result==null || result.length==0">Go!</button>
+                [disabled]="result.length==0">Go!</button>
       </span>
     </div>
     <!-- /input-group -->

web/src/app/workplace/workbasket-selector/workbasket-selector.component.ts

@@ -17,7 +17,7 @@ export class SelectorComponent implements OnInit {
   tasks: Task[] = [];
 
   autoCompleteData: string[] = [];
-  result: string;
+  result = '';
   resultKey: string;
   workbaskets: Workbasket[];
 

web/src/app/workplace/workplace-routing.module.ts

@@ -1,34 +1,40 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { WorkplaceComponent } from './workplace.component'
-import { TasksComponent } from 'app/workplace/tasks/tasks.component';
-import { TaskComponent } from 'app/workplace/task/task.component';
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {WorkplaceComponent} from './workplace.component'
+import {TasksComponent} from 'app/workplace/tasks/tasks.component';
+import {TaskComponent} from 'app/workplace/task/task.component';
+import {TaskdetailsComponent} from './taskdetails/taskdetails.component';
 
 const routes: Routes = [
-    {
-        path: '',
-        component: WorkplaceComponent,
-        redirectTo: 'tasks',
-        pathMatch: 'full'
-    },
-    {
-        path: '',
-        component: WorkplaceComponent,
-        children: [
-            {
-                path: 'tasks',
-                component: TasksComponent
-            },
-            {
-                path: 'tasks/:id',
-                component: TaskComponent
-            }
-        ]
-    }
+  {
+    path: '',
+    component: WorkplaceComponent,
+    redirectTo: 'tasks',
+    pathMatch: 'full'
+  },
+  {
+    path: '',
+    component: WorkplaceComponent,
+    children: [
+      {
+        path: 'tasks',
+        component: TasksComponent
+      },
+      {
+        path: 'tasks/:id',
+        component: TaskComponent
+      },
+      {
+        path: 'tasks/taskdetail/:id',
+        component: TaskdetailsComponent
+      }
+    ]
+  }
 ];
 
 @NgModule({
-    imports: [RouterModule.forChild(routes)],
-    exports: [RouterModule]
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
 })
-export class WorkplaceRoutingModule { }
+export class WorkplaceRoutingModule {
+}

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

@@ -1,5 +1,4 @@
 import { Component, OnInit, HostListener, OnDestroy } from '@angular/core';
-import { RestConnectorService } from './services/rest-connector.service';
 
 @Component({
     selector: 'taskana-workplace',

web/src/app/workplace/workplace.module.ts

@@ -16,7 +16,6 @@ import { TasksComponent } from './tasks/tasks.component';
 
 import { OrderTasksByPipe } from './util/orderTasksBy.pipe';
 
-import { RestConnectorService } from './services/rest-connector.service';
 import { DataService } from './services/data.service';
 import { TaskService } from './services/task.service';
 import { WorkbasketService } from './services/workbasket.service';
@@ -45,7 +44,6 @@ const DECLARATIONS = [
   declarations: DECLARATIONS,
   imports: MODULES,
   providers: [
-    RestConnectorService,
     DataService,
     TaskService,
     WorkbasketService