TSK-333

initial commit

workplace/src/app/app.component.ts

@@ -1,13 +1,12 @@
-import { Component, Input } from '@angular/core';
-import { DataService } from './services/data.service';
-import { RestConnectorService } from './services/rest-connector.service';
-import { environment } from '../environments/environment';
+import {Component} from '@angular/core';
+import {DataService} from './services/data.service';
+import {environment} from '../environments/environment';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
-  providers: [ DataService, RestConnectorService ]
+  providers: [DataService]
 })
 export class AppComponent {
 

workplace/src/app/app.module.ts

@@ -1,22 +1,23 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
-import { Ng2AutoCompleteModule } from 'ng2-auto-complete';
-import { HttpClientModule } from '@angular/common/http';
-import { AngularSvgIconModule } from 'angular-svg-icon';
+import {BrowserModule} from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {Ng2AutoCompleteModule} from 'ng2-auto-complete';
+import {HttpClientModule} from '@angular/common/http';
+import {AngularSvgIconModule} from 'angular-svg-icon';
 
-import { AppComponent } from './app.component';
-import { AppRoutingModule } from './app-routing.module';
-import { AlertModule } from 'ngx-bootstrap';
-import { SelectorComponent } from './workbasket-selector/workbasket-selector.component';
-import { TasklistComponent } from './tasklist/tasklist.component';
-import { TaskdetailsComponent } from './taskdetails/taskdetails.component';
+import {AppComponent} from './app.component';
+import {AppRoutingModule} from './app-routing.module';
+import {AlertModule} from 'ngx-bootstrap';
+import {SelectorComponent} from './workbasket-selector/workbasket-selector.component';
+import {TasklistComponent} from './tasklist/tasklist.component';
+import {TaskdetailsComponent} from './taskdetails/taskdetails.component';
 
-import { OrderTasksByPipe } from './util/orderTasksBy.pipe';
+import {OrderTasksByPipe} from './util/orderTasksBy.pipe';
 
-import { TaskComponent } from './task/task.component';
-import { TasksComponent } from './tasks/tasks.component';
+import {TaskComponent} from './task/task.component';
+import {TasksComponent} from './tasks/tasks.component';
+import {TaskService} from './services/task.service';
+import {WorkbasketService} from './services/workbasket.service';
 
 
 @NgModule({
@@ -32,14 +33,18 @@ import { TasksComponent } from './tasks/tasks.component';
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule,
     AlertModule.forRoot(),
     Ng2AutoCompleteModule,
     AppRoutingModule,
     HttpClientModule,
     AngularSvgIconModule
   ],
-  providers: [HttpClientModule],
+  providers: [
+    HttpClientModule,
+    TaskService,
+    WorkbasketService
+  ],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}

workplace/src/app/model/classification.ts

@@ -0,0 +1,15 @@
+import {Links} from './links';
+
+export class Classification {
+  constructor(public classificationId: string,
+    public key: string,
+    public category: string,
+    public type: string,
+    public domain: string,
+    public name: string,
+    public parentId: string,
+    public priority: number,
+    public serviceLevel: string,
+    public _links: Links = new Links()) {
+  }
+}

workplace/src/app/model/links.ts

@@ -0,0 +1,8 @@
+export class Links {
+    constructor(
+        public self: { 'href': string } = undefined,
+        public distributionTargets: { 'href': string } = undefined,
+        public accessItems: { 'href': string } = undefined,
+        public allWorkbasketUrl: { 'href': string } = undefined
+    ) { }
+}

workplace/src/app/model/task.ts

@@ -1,38 +1,26 @@
+import {Classification} from './classification';
+import {Workbasket} from './workbasket';
+
 export class Task {
-
-    id: string;
-    created: any;
-    claimed: any;
-    completed: any;
-    modified: any;
-    planned: any;
-    due: any;
-    name: string;
-    description: string;
-    priority: number;
-    state: string;
-    type: string;
-    workbasket: string;
-    owner: string;
-
-  static create(data) {
-    return new Task(data);
-  }
-
-  constructor(data) {
-    this.id = data.id;
-    this.created = data.created;
-    this.claimed = data.claimed;
-    this.completed = data.completed;
-    this.modified = data.modified;
-    this.planned = data.planned;
-    this.due = data.due;
-    this.name = data.name;
-    this.description = data.description;
-    this.priority = data.priority;
-    this.state = data.state;
-    this.type = data.type;
-    this.workbasket = data.workbasket;
-    this.owner = data.owner;
+  constructor(public businessProcessId: string,
+              public parentBusinessProcessId: string,
+              public owner: string,
+              public taskId: string,
+              public created: string,    // ISO-8601
+              public claimed: string,    // ISO-8601
+              public completed: string,  // ISO-8601
+              public modified: string,   // ISO-8601
+              public planned: string,    // ISO-8601
+              public due: string,        // ISO-8601
+              public name: string,
+              public creator: string,
+              public description: string,
+              public note: string,
+              public state: any,
+              public isRead: boolean,
+              public isTransferred: boolean,
+              public priority: number,
+              public classificationSummaryResource: Classification,
+              public workbasketSummaryResource: Workbasket) {
   }
 }

workplace/src/app/model/workbasket.ts

@@ -1,8 +1,23 @@
+import {Links} from './links';
+
 export class Workbasket {
-    key: string;
-    created: string;
-    modified: string;
-    name: string;
-    description: string;
-    owner: string;
+
+  constructor(public workbasketId: string,
+              public created: string = undefined,
+              public key: string = undefined,
+              public domain: string = undefined,
+              public modified: string = undefined,
+              public name: string = undefined,
+              public description: string = undefined,
+              public owner: string = undefined,
+              public custom1: string = undefined,
+              public custom2: string = undefined,
+              public custom3: string = undefined,
+              public custom4: string = undefined,
+              public orgLevel1: string = undefined,
+              public orgLevel2: string = undefined,
+              public orgLevel3: string = undefined,
+              public orgLevel4: string = undefined,
+              public _links: Links = new Links()) {
+  }
 }

workplace/src/app/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();
-  }));
-});

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

@@ -1,52 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Headers, RequestOptions, Http, Response } from '@angular/http';
-
-import { Workbasket } from '../model/workbasket';
-import { Task } from '../model/task';
-import { environment } from '../../environments/environment';
-import { Observable } from 'rxjs/Observable';
-
-@Injectable()
-export class RestConnectorService {
-
-  constructor(private http: Http) { }
-
-  getAllWorkBaskets(): Observable<Workbasket[]> {
-    return this.http.get(environment.taskanaRestUrl + '/v1/workbaskets?requiredPermission=OPEN', this.createAuthorizationHeader())
-      .map(res => res.json());
-  }
-
-  findTaskWithWorkbaskets(basketKey: string): Observable<Task[]> {
-    return this.http.get(environment.taskanaRestUrl + '/v1/tasks?workbasketkey='
-      + basketKey + '&state=READY&state=CLAIMED', this.createAuthorizationHeader())
-      .map(res => res.json());
-  }
-
-  getTask(id: string): Observable<Task> {
-    return this.http.get(environment.taskanaRestUrl + '/v1/tasks/' + id, this.createAuthorizationHeader())
-      .map(res => res.json());
-  }
-
-  completeTask(id: string): Observable<Task> {
-    return this.http.post(environment.taskanaRestUrl + '/v1/tasks/' + id + '/complete', '', this.createAuthorizationHeader())
-      .map(res => res.json());
-  }
-
-  claimTask(id: string): Observable<Task> {
-    return this.http.post(environment.taskanaRestUrl + '/v1/tasks/' + id + '/claim', 'test', this.createAuthorizationHeader())
-      .map(res => res.json());
-  }
-
-  transferTask(taskId: string, workbasketKey: string) {
-    return this.http.post(environment.taskanaRestUrl + '/v1/tasks/' + taskId
-      + '/transfer/' + workbasketKey, '', this.createAuthorizationHeader())
-      .map(res => res.json());
-  }
-
-  private createAuthorizationHeader() {
-    const headers: Headers = new Headers();
-    headers.append('Authorization', 'Basic dXNlcl8xXzE6dXNlcl8xXzE=');
-
-    return new RequestOptions({ headers: headers });
-  }
-}

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

@@ -0,0 +1,42 @@
+import {Task} from '../model/task';
+import {Observable} from 'rxjs/Observable';
+import {HttpClient, HttpHeaders} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {environment} from '../../environments/environment';
+
+@Injectable()
+export class TaskService {
+  url = environment.taskanaRestUrl + '/v1/tasks';
+
+  httpOptions = {
+    headers: new HttpHeaders({
+      'Content-Type': 'application/hal+json',
+      'Authorization': 'Basic dXNlcl8xXzE6dXNlcl8xXzE',
+      'user': 'user_1_1'
+    })
+  };
+
+  constructor(private httpClient: HttpClient) {
+  }
+
+  findTaskWithWorkbaskets(basketKey: string): Observable<Task[]> {
+    return this.httpClient.get<Task[]>(this.url + '?workbasketId=' + basketKey, this.httpOptions);
+  }
+
+  getTask(id: string): Observable<Task> {
+    return this.httpClient.get<Task>(this.url + '/' + id, this.httpOptions);
+  }
+
+  completeTask(id: string): Observable<Task> {
+    return this.httpClient.post<Task>(this.url + '/' + id + '/complete', '', this.httpOptions);
+  }
+
+  claimTask(id: string): Observable<Task> {
+    return this.httpClient.post<Task>(this.url + '/' + id + '/claim', 'test', this.httpOptions);
+  }
+
+  transferTask(taskId: string, workbasketKey: string): Observable<Task> {
+    return this.httpClient.post<Task>(this.url + '/' + taskId
+      + '/transfer/' + workbasketKey, '', this.httpOptions);
+  }
+}

workplace/src/app/services/workbasket.service.ts

@@ -0,0 +1,25 @@
+import {Injectable} from '@angular/core';
+
+import {Workbasket} from '../model/workbasket';
+import {environment} from '../../environments/environment';
+import {Observable} from 'rxjs/Observable';
+import {HttpClient, HttpHeaders} from '@angular/common/http';
+
+@Injectable()
+export class WorkbasketService {
+  url = environment.taskanaRestUrl + '/v1/workbaskets';
+
+  httpOptions = {
+    headers: new HttpHeaders({
+      'Content-Type': 'application/hal+json',
+      'Authorization': 'Basic VEVBTUxFQURfMTpURUFNTEVBRF8x'
+    })
+  };
+
+  constructor(private httpClient: HttpClient) {
+  }
+
+  getAllWorkBaskets(): Observable<Workbasket[]> {
+    return this.httpClient.get<Workbasket[]>(this.url + '?required-permission=OPEN', this.httpOptions);
+  }
+}

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

@@ -1,9 +1,10 @@
-import { Component, OnInit } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
-import { Task } from '../model/task';
-import { RestConnectorService } from '../services/rest-connector.service';
-import { Workbasket } from '../model/workbasket';
-import { SafeResourceUrl, DomSanitizer} from '@angular/platform-browser';
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {Task} from '../model/task';
+import {Workbasket} from '../model/workbasket';
+import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
+import {TaskService} from '../services/task.service';
+import {WorkbasketService} from '../services/workbasket.service';
 
 
 @Component({
@@ -15,27 +16,30 @@ export class TaskComponent implements OnInit {
 
   task: Task = null;
   link: SafeResourceUrl = this.sanitizer.bypassSecurityTrustResourceUrl('https://duckduckgo.com/?q=');
-  autoCompleteData: string[] = new Array;
+  autoCompleteData: string[] = [];
   workbasket: string = null;
   workbasketKey: string;
   workbaskets: Workbasket[];
 
   private sub: any;
 
-  constructor(private restConnectorService: RestConnectorService,
-              private route: ActivatedRoute, private router: Router,
-              private sanitizer: DomSanitizer) { }
+  constructor(private taskService: TaskService,
+              private workbasketService: WorkbasketService,
+              private route: ActivatedRoute,
+              private router: Router,
+              private sanitizer: DomSanitizer) {
+  }
 
   ngOnInit() {
     const id = this.route.snapshot.params['id'];
-        this.restConnectorService.getTask(id).subscribe(
+    this.taskService.getTask(id).subscribe(
       t => {
         this.task = t;
-                         this.link = this.sanitizer.bypassSecurityTrustResourceUrl('https://duckduckgo.com/?q=' + this.task.name );
-                         this.restConnectorService.getAllWorkBaskets().subscribe( w => {
-                            this.workbaskets = w;
+        this.link = this.sanitizer.bypassSecurityTrustResourceUrl('https://duckduckgo.com/?q=' + this.task.name);
+        this.workbasketService.getAllWorkBaskets().subscribe(w => {
+          this.workbaskets = w['_embedded']['workbaskets'];
           this.workbaskets.forEach(workbasket => {
-                            if (workbasket.key !== this.task.workbasket) {
+            if (workbasket.key !== this.task.workbasketSummaryResource.key) {
               this.autoCompleteData.push(workbasket.name);
             }
           });
@@ -50,8 +54,10 @@ export class TaskComponent implements OnInit {
           this.workbasketKey = workbasket.key;
         }
       });
-      this.restConnectorService.transferTask(this.task.id, this.workbasketKey).subscribe(
-                       task => {this.task = task});
+      this.taskService.transferTask(this.task.taskId, this.workbasketKey).subscribe(
+        task => {
+          this.task = task
+        });
       this.router.navigate(['tasks/']);
     }
   }
@@ -61,8 +67,10 @@ export class TaskComponent implements OnInit {
   }
 
   completeTask() {
-      this.restConnectorService.completeTask(this.task.id).subscribe(
-                       task => {this.task = task});
+    this.taskService.completeTask(this.task.taskId).subscribe(
+      task => {
+        this.task = task
+      });
     this.router.navigate(['tasks/']);
   }
 }

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

@@ -1,6 +1,6 @@
 <div *ngIf="task != null" class="panel panel-primary">
   <div class="panel-heading">
-    Details for task '{{ task.name }}' (ID={{ task.id }})
+    Details for task '{{ task.name }}' (ID={{ task.taskId }})
   </div>
   <div class="panel-body">
     <p>{{ task.description }}</p>
@@ -13,7 +13,6 @@
     <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>Type:</b> {{ task.type }}</p>
-    <p><b>Workbasket:</b> {{ task.workbasket }}</p>
+    <p><b>Workbasket:</b> {{ task.workbasketSummaryResource.workbasketId }}</p>
   </div>
 </div>

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

@@ -10,16 +10,18 @@
   </tr>
   </thead>
   <tr *ngFor="let task of tasks">
-    <td>{{ task.id }}</td>
+    <td>{{ task.taskId }}</td>
     <td>{{ task.name }}</td>
     <td>{{ task.due | date:'medium' }}</td>
     <td>{{ task.priority }}</td>
     <td>{{ task.state }}</td>
     <td>
-      <button type="button" title="Open task to work on it" class="btn btn-default" aria-label="Left Align" (click)="openTask(task.id)">
+      <button type="button" title="Open task to work on it" class="btn btn-default" aria-label="Left Align"
+              (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)">
+      <button type="button" title="View details for task" class="btn btn-default" aria-label="Left Align"
+              (click)="selectTask(task)">
         <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
       </button>
     </td>

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

@@ -1,7 +1,7 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { Task } from '../model/task';
-import { Router } from '@angular/router';
-import { RestConnectorService } from '../services/rest-connector.service';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Task} from '../model/task';
+import {Router} from '@angular/router';
+import {TaskService} from '../services/task.service';
 
 @Component({
   selector: 'tasklist',
@@ -17,7 +17,7 @@ export class TasklistComponent implements OnInit {
 
   @Input() tasks: Task[];
 
-  constructor(private restConnectorService: RestConnectorService, private router: Router) {
+  constructor(private taskService: TaskService, private router: Router) {
     this.columnForOrdering = 'id';  // default: order tasks by id
   }
 
@@ -33,7 +33,7 @@ export class TasklistComponent implements OnInit {
   }
 
   openTask(id: string) {
-    this.restConnectorService.claimTask(id).subscribe();
+    this.taskService.claimTask(id).subscribe();
     this.router.navigate(['tasks/', id]);
   }
 }

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

@@ -1,13 +1,14 @@
 <div class="container-fluid">
   <div class="row form-group">
-    <workbasket-selector (tasks) = "loadTasks($event)"></workbasket-selector>
+    <workbasket-selector (tasks)="loadTasks($event)"></workbasket-selector>
   </div>
   <div *ngIf="tasks?.length > 0" class="row form-group">
     <div class="col-md-6">
       <tasklist [tasks]="tasks" (task)="selectTask($event)"></tasklist>
     </div>
     <div class="col-md-6">
-      <taskdetails [task]="task"></taskdetails>
+      <taskdetails [task]="task" *ngIf="taskDetailEnabled"></taskdetails>
+      <div class="overlay" [ngClass]="{overlayActive:taskDetailEnabled}" (click)="taskDetailEnabled = false"></div>
     </div>
   </div>
 </div>

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

@@ -0,0 +1,12 @@
+.overlay {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: none;
+}
+
+.overlayActive {
+  display: block;
+}

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

@@ -1,6 +1,5 @@
-import { Component, Input } from '@angular/core';
-import { Task } from '../model/task';
-import { environment } from '../../environments/environment';
+import {Component, Input} from '@angular/core';
+import {Task} from '../model/task';
 
 @Component({
   selector: 'app-tasks',
@@ -9,6 +8,8 @@ import { environment } from '../../environments/environment';
 })
 export class TasksComponent {
 
+  taskDetailEnabled: boolean;
+
   @Input()
   tasks: Task[];
 
@@ -20,6 +21,7 @@ export class TasksComponent {
   }
 
   selectTask(task: Task) {
+    this.taskDetailEnabled = true;
     this.task = task;
   }
 

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

@@ -1,9 +1,11 @@
 <div class="row">
   <div class="col-lg-6">
     <div class="input-group">
-      <input class="form-control dropdown-toggle" auto-complete [(ngModel)]="result" [source]="autoCompleteData" placeholder="Search for Workbasket ..."/>
+      <input class="form-control dropdown-toggle" auto-complete [(ngModel)]="result" [source]="autoCompleteData"
+             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>
+        <button class="btn btn-primary" type="button" (click)="searchBasket()"
+                [disabled]="result==null || result.length==0">Go!</button>
       </span>
     </div>
     <!-- /input-group -->
@@ -12,4 +14,3 @@
 </div>
 <!-- /.row -->
 
- 

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

@@ -1,8 +1,9 @@
-import { Component, OnInit, Output, EventEmitter } from '@angular/core';
-import { RestConnectorService } from '../services/rest-connector.service';
-import { DataService } from '../services/data.service';
-import { Task } from '../model/task';
-import { Workbasket } from '../model/workbasket';
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import {DataService} from '../services/data.service';
+import {Task} from '../model/task';
+import {Workbasket} from '../model/workbasket';
+import {TaskService} from '../services/task.service';
+import {WorkbasketService} from '../services/workbasket.service';
 
 @Component({
   selector: 'workbasket-selector',
@@ -11,18 +12,23 @@ import { Workbasket } from '../model/workbasket';
 })
 export class SelectorComponent implements OnInit {
 
-  @Output() tasks = new EventEmitter<Task[]>();
+  @Output('tasks') tasksEmitter = new EventEmitter<Task[]>();
 
-  autoCompleteData: string[] = new Array;
+  tasks: Task[] = [];
+
+  autoCompleteData: string[] = [];
   result: string;
   resultKey: string;
   workbaskets: Workbasket[];
 
-  constructor(private restConnectorService: RestConnectorService, private dataService: DataService) { }
+  constructor(private taskService: TaskService,
+              private workbasketService: WorkbasketService,
+              private dataService: DataService) {
+  }
 
   ngOnInit() {
-    this.restConnectorService.getAllWorkBaskets().subscribe( w => {
-      this.workbaskets = w;
+    this.workbasketService.getAllWorkBaskets().subscribe(w => {
+      this.workbaskets = w['_embedded']['workbaskets'];
       this.workbaskets.forEach(workbasket => {
         this.autoCompleteData.push(workbasket.name);
       });
@@ -37,17 +43,20 @@ export class SelectorComponent implements OnInit {
     if (this.workbaskets) {
       this.workbaskets.forEach(workbasket => {
         if (workbasket.name === this.result) {
-          this.resultKey = workbasket.key;
+          this.resultKey = workbasket.workbasketId;
         }
       });
       this.getTasks(this.resultKey);
       this.dataService.workbasketKey = this.resultKey;
       this.dataService.workbasketName = this.result;
+      this.tasksEmitter.emit(this.tasks);
     }
   }
 
   getTasks(workbasketKey: string) {
-    this.restConnectorService.findTaskWithWorkbaskets(workbasketKey).subscribe(
-                       tasks2 => {this.tasks.next(tasks2)});
+    this.taskService.findTaskWithWorkbaskets(workbasketKey).subscribe(
+      tasks2 => {
+        tasks2['_embedded']['tasks'].forEach(e => this.tasks.push(e));
+      });
   }
 }