From 3f23005fa2286b4dfdc6d54c8dc6e2266a80dbf4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lars=20Leo=20Gr=C3=A4tz?= <23726273+LarsLeo@users.noreply.github.com> Date: Mon, 30 Apr 2018 16:44:35 +0200 Subject: [PATCH] TSK-336 TaskDetails prototype --- web/src/app/models/workbasket-resource.ts | 7 + .../master-and-detail.component.html | 8 +- .../master-and-detail.component.ts | 5 +- web/src/app/workplace/models/task-resource.ts | 7 + web/src/app/workplace/models/task.ts | 17 +- .../app/workplace/services/data.service.ts | 7 - .../app/workplace/services/task.service.ts | 30 ++- .../workplace/services/workbasket.service.ts | 13 +- .../app/workplace/task/task.component.html | 65 +++-- web/src/app/workplace/task/task.component.ts | 52 ++-- .../taskdetails/taskdetails.component.html | 241 ++++++++++++++++-- .../taskdetails/taskdetails.component.scss | 6 + .../taskdetails/taskdetails.component.ts | 39 ++- .../tasklist/tasklist.component.html | 51 ++-- .../tasklist/tasklist.component.scss | 49 ++++ .../workplace/tasklist/tasklist.component.ts | 10 +- .../app/workplace/tasks/tasks.component.html | 10 - .../app/workplace/tasks/tasks.component.scss | 3 - .../app/workplace/tasks/tasks.component.ts | 25 -- .../workbasket-selector.component.html | 2 +- .../workbasket-selector.component.ts | 38 +-- .../app/workplace/workplace-routing.module.ts | 62 +++-- web/src/app/workplace/workplace.module.ts | 28 +- 23 files changed, 540 insertions(+), 235 deletions(-) create mode 100644 web/src/app/models/workbasket-resource.ts create mode 100644 web/src/app/workplace/models/task-resource.ts delete mode 100644 web/src/app/workplace/services/data.service.ts delete mode 100644 web/src/app/workplace/tasks/tasks.component.html delete mode 100644 web/src/app/workplace/tasks/tasks.component.scss delete mode 100644 web/src/app/workplace/tasks/tasks.component.ts diff --git a/web/src/app/models/workbasket-resource.ts b/web/src/app/models/workbasket-resource.ts new file mode 100644 index 000000000..4d877b7c4 --- /dev/null +++ b/web/src/app/models/workbasket-resource.ts @@ -0,0 +1,7 @@ +import {Links} from './links'; +import {Workbasket} from './workbasket'; + +export class WorkbasketResource { + constructor(public _embedded: { 'workbaskets': Array } = { 'workbaskets': [] }, + public _links: Links = undefined) {} +} diff --git a/web/src/app/shared/master-and-detail/master-and-detail.component.html b/web/src/app/shared/master-and-detail/master-and-detail.component.html index 558a239dd..9e58f297f 100644 --- a/web/src/app/shared/master-and-detail/master-and-detail.component.html +++ b/web/src/app/shared/master-and-detail/master-and-detail.component.html @@ -15,5 +15,9 @@

Select a classification

- - \ No newline at end of file +
+

Select a Task

+ +
+ + diff --git a/web/src/app/shared/master-and-detail/master-and-detail.component.ts b/web/src/app/shared/master-and-detail/master-and-detail.component.ts index 1b4f37abe..e65dd0c98 100644 --- a/web/src/app/shared/master-and-detail/master-and-detail.component.ts +++ b/web/src/app/shared/master-and-detail/master-and-detail.component.ts @@ -11,7 +11,8 @@ import { MasterAndDetailService } from 'app/services/masterAndDetail/master-and- export class MasterAndDetailComponent implements OnInit { private classifications = 'classifications'; private workbaskets = 'workbaskets'; - private detailRoutes: Array = ['/workbaskets/(detail', 'classifications/(detail']; + private tasks = 'tasks'; + private detailRoutes: Array = ['/workbaskets/(detail', 'classifications/(detail', 'tasks/(detail']; private sub: any; showDetail: Boolean = false; @@ -56,6 +57,8 @@ export class MasterAndDetailComponent implements OnInit { this.currentRoute = this.workbaskets; } else if (url.indexOf(this.classifications) !== -1) { this.currentRoute = this.classifications; + } else if (url.indexOf(this.tasks) !== -1) { + this.currentRoute = this.tasks; } } } diff --git a/web/src/app/workplace/models/task-resource.ts b/web/src/app/workplace/models/task-resource.ts new file mode 100644 index 000000000..917f27575 --- /dev/null +++ b/web/src/app/workplace/models/task-resource.ts @@ -0,0 +1,7 @@ +import {Links} from '../../models/links'; +import {Task} from './task'; + +export class TaskResource { + constructor(public _embedded: { 'tasks': Array } = { 'tasks': [] }, + public _links: Links = undefined) {} +} diff --git a/web/src/app/workplace/models/task.ts b/web/src/app/workplace/models/task.ts index 77e631992..a0a799fbb 100644 --- a/web/src/app/workplace/models/task.ts +++ b/web/src/app/workplace/models/task.ts @@ -22,6 +22,21 @@ export class Task { public priority: number, public classificationSummaryResource: Classification, public workbasketSummaryResource: Workbasket, - public custom1: any) { + public custom1: string, + public custom2: string, + public custom3: string, + public custom4: string, + public custom5: string, + public custom6: string, + public custom7: string, + public custom8: string, + public custom9: string, + public custom10: string, + public custom11: string, + public custom12: string, + public custom13: string, + public custom14: string, + public custom15: string, + public custom16: string) { } } diff --git a/web/src/app/workplace/services/data.service.ts b/web/src/app/workplace/services/data.service.ts deleted file mode 100644 index ab35f7e0a..000000000 --- a/web/src/app/workplace/services/data.service.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Injectable } from '@angular/core'; - -@Injectable() -export class DataService { - workbasketKey: string; - workbasketName: string; -} diff --git a/web/src/app/workplace/services/task.service.ts b/web/src/app/workplace/services/task.service.ts index 03f3a69a6..0feb1f954 100644 --- a/web/src/app/workplace/services/task.service.ts +++ b/web/src/app/workplace/services/task.service.ts @@ -1,34 +1,38 @@ -import { Task } from '../models/task'; -import { Observable } from 'rxjs/Observable'; -import { HttpClient, HttpHeaders } from '@angular/common/http'; -import { Injectable } from '@angular/core'; -import { environment } from 'app/../environments/environment'; +import {Task} from 'app/workplace/models/task'; +import {Observable} from 'rxjs/Observable'; +import {HttpClient} from '@angular/common/http'; +import {Injectable} from '@angular/core'; +import {environment} from 'app/../environments/environment'; +import {TaskResource} from 'app/workplace/models/task-resource'; @Injectable() export class TaskService { - url = environment.taskanaRestUrl + '/v1/tasks'; + url = `${environment.taskanaRestUrl}/v1/tasks`; constructor(private httpClient: HttpClient) { } - findTaskWithWorkbaskets(basketKey: string): Observable { - return this.httpClient.get(this.url + '?workbasketId=' + basketKey); + findTasksWithWorkbasket(basketKey: string): Observable { + return this.httpClient.get(`${this.url}?workbasket-id=${basketKey}`); } getTask(id: string): Observable { - return this.httpClient.get(this.url + '/' + id); + return this.httpClient.get(`${this.url}/${id}`); } completeTask(id: string): Observable { - return this.httpClient.post(this.url + '/' + id + '/complete', ''); + return this.httpClient.post(`${this.url}/${id}/complete`, ''); } claimTask(id: string): Observable { - return this.httpClient.post(this.url + '/' + id + '/claim', 'test'); + return this.httpClient.post(`${this.url}/${id}/claim`, 'test'); } transferTask(taskId: string, workbasketKey: string): Observable { - return this.httpClient.post(this.url + '/' + taskId - + '/transfer/' + workbasketKey, ''); + return this.httpClient.post(`${this.url}/${taskId}/transfer/${workbasketKey}`, ''); + } + + updateTask(task: Task): Observable { + return this.httpClient.put(`${this.url}/${task.taskId}`, task); } } diff --git a/web/src/app/workplace/services/workbasket.service.ts b/web/src/app/workplace/services/workbasket.service.ts index 2a05fbcff..22f9e46f2 100644 --- a/web/src/app/workplace/services/workbasket.service.ts +++ b/web/src/app/workplace/services/workbasket.service.ts @@ -1,17 +1,20 @@ import { Injectable } from '@angular/core'; -import { Workbasket } from 'app/models/workbasket'; import { environment } from 'app/../environments/environment'; import { Observable } from 'rxjs/Observable'; -import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { HttpClient } from '@angular/common/http'; +import {WorkbasketResource} from 'app/models/workbasket-resource'; @Injectable() export class WorkbasketService { - url = environment.taskanaRestUrl + '/v1/workbaskets'; + url = `${environment.taskanaRestUrl}/v1/workbaskets`; + workbasketKey: string; + workbasketName: string; + constructor(private httpClient: HttpClient) { } - getAllWorkBaskets(): Observable { - return this.httpClient.get(this.url + '?required-permission=OPEN'); + getAllWorkBaskets(): Observable { + return this.httpClient.get(`${this.url}?required-permission=OPEN`); } } diff --git a/web/src/app/workplace/task/task.component.html b/web/src/app/workplace/task/task.component.html index afcd92500..a2582cec5 100644 --- a/web/src/app/workplace/task/task.component.html +++ b/web/src/app/workplace/task/task.component.html @@ -1,21 +1,52 @@ - -
- +
+
+
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+ + + + diff --git a/web/src/app/workplace/task/task.component.ts b/web/src/app/workplace/task/task.component.ts index b90b2ce13..9126bd02e 100644 --- a/web/src/app/workplace/task/task.component.ts +++ b/web/src/app/workplace/task/task.component.ts @@ -1,10 +1,10 @@ -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; -import { Task } from '../models/task'; -import { Workbasket } from 'app/models/workbasket'; -import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; -import { TaskService } from '../services/task.service'; -import { WorkbasketService } from '../services/workbasket.service'; +import {Component, OnInit} from '@angular/core'; +import {ActivatedRoute, Router} from '@angular/router'; +import {Task} from 'app/workplace/models/task'; +import {Workbasket} from 'app/models/workbasket'; +import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser'; +import {TaskService} from 'app/workplace/services/task.service'; +import {WorkbasketService} from 'app/workplace/services/workbasket.service'; @Component({ @@ -13,31 +13,36 @@ import { WorkbasketService } from '../services/workbasket.service'; styleUrls: ['./task.component.scss'] }) export class TaskComponent implements OnInit { - task: Task = null; - link: SafeResourceUrl = this.sanitizer.bypassSecurityTrustResourceUrl('https://duckduckgo.com/?q='); + address = 'https://bing.com'; + link: SafeResourceUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.address); autoCompleteData: string[] = []; workbasket: string = null; workbasketKey: string; workbaskets: Workbasket[]; - - private sub: any; + requestInProgress = false; constructor(private taskService: TaskService, - private workbasketService: WorkbasketService, - private route: ActivatedRoute, - private router: Router, - private sanitizer: DomSanitizer) { + private workbasketService: WorkbasketService, + private route: ActivatedRoute, + private router: Router, + private sanitizer: DomSanitizer) { } ngOnInit() { const id = this.route.snapshot.params['id']; + this.getTask(id); + } + + getTask(id: string) { + this.requestInProgress = true; this.taskService.getTask(id).subscribe( - t => { - this.task = t; - this.link = this.sanitizer.bypassSecurityTrustResourceUrl('https://duckduckgo.com/?q=' + this.task.name); - this.workbasketService.getAllWorkBaskets().subscribe(w => { - this.workbaskets = w['_embedded']['workbaskets']; + task => { + this.requestInProgress = false; + this.task = task; + this.link = this.sanitizer.bypassSecurityTrustResourceUrl(`${this.address}/?q=${this.task.name}`); + this.workbasketService.getAllWorkBaskets().subscribe(workbaskets => { + this.workbaskets = workbaskets._embedded ? workbaskets._embedded.workbaskets : []; this.workbaskets.forEach(workbasket => { if (workbasket.key !== this.task.workbasketSummaryResource.key) { this.autoCompleteData.push(workbasket.name); @@ -54,8 +59,11 @@ export class TaskComponent implements OnInit { this.workbasketKey = workbasket.key; } }); + + this.requestInProgress = true; this.taskService.transferTask(this.task.taskId, this.workbasketKey).subscribe( task => { + this.requestInProgress = false; this.task = task }); this.navigateBack(); @@ -67,14 +75,16 @@ export class TaskComponent implements OnInit { } completeTask() { + this.requestInProgress = true; this.taskService.completeTask(this.task.taskId).subscribe( task => { + this.requestInProgress = false; this.task = task }); this.navigateBack(); } private navigateBack() { - this.router.navigate(['./'], { relativeTo: this.route.parent }); + this.router.navigate([{outlets: {detail: `taskdetail/${this.task.taskId}`}}], {relativeTo: this.route.parent}); } } diff --git a/web/src/app/workplace/taskdetails/taskdetails.component.html b/web/src/app/workplace/taskdetails/taskdetails.component.html index 75002d7de..103c1f624 100644 --- a/web/src/app/workplace/taskdetails/taskdetails.component.html +++ b/web/src/app/workplace/taskdetails/taskdetails.component.html @@ -1,29 +1,222 @@ -
+ +
-
- +
+ +
- Details for task '{{ task.name }}' (ID={{ task.taskId }}) +

{{task?.name}}

-
-

{{ task.description }}

-

Owner: {{ task.owner }}

-

State: {{ task.state }}

-

Creation Date: {{ task.created | date:'medium' }}

-

Claim Date: {{ task.claimed | date:'medium' }}

-

Completion Date: {{ task.completed | date:'medium' }}

-

Modification Date: {{ task.modified | date:'medium' }}

-

Planning Date: {{ task.planned | date:'medium' }}

-

Due Date: {{ task.due | date:'medium' }}

-

Priority: {{ task.priority }}

-

Creator: {{task.creator}}

-

Note: {{task.note}}

-

Workbasket: {{ task.workbasketSummaryResource.workbasketId }}

-

Classification: {{task.classificationSummaryResource.classificationId}}

-

BusinessProcessID: {{task.businessProcessId}}

-

ParentBusinessProcessID: {{task.parentBusinessProcessId}}

-

Read: {{task.read}}

-

Transferred: {{task.transferred}}

-

custom1: {{task.custom1}}

+ +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
diff --git a/web/src/app/workplace/taskdetails/taskdetails.component.scss b/web/src/app/workplace/taskdetails/taskdetails.component.scss index e69de29bb..ac338f344 100644 --- a/web/src/app/workplace/taskdetails/taskdetails.component.scss +++ b/web/src/app/workplace/taskdetails/taskdetails.component.scss @@ -0,0 +1,6 @@ +.list-group { + max-height: 84vh; + margin-bottom: 10px; + overflow:scroll; + -webkit-overflow-scrolling: touch; +} diff --git a/web/src/app/workplace/taskdetails/taskdetails.component.ts b/web/src/app/workplace/taskdetails/taskdetails.component.ts index c1b443c10..c9890da08 100644 --- a/web/src/app/workplace/taskdetails/taskdetails.component.ts +++ b/web/src/app/workplace/taskdetails/taskdetails.component.ts @@ -1,8 +1,8 @@ import {Component, OnInit} from '@angular/core'; import {Task} from '../models/task'; -import {ActivatedRoute} from '@angular/router'; +import {ActivatedRoute, Router} from '@angular/router'; import {TaskService} from '../services/task.service'; -import {Location} from '@angular/common'; +import {Subscription} from 'rxjs/Subscription'; @Component({ selector: 'taskana-task-details', @@ -11,24 +11,39 @@ import {Location} from '@angular/common'; }) export class TaskdetailsComponent implements OnInit { task: Task = null; + requestInProgress = false; + + private routeSubscription: Subscription; constructor(private route: ActivatedRoute, private taskService: TaskService, - private location: Location) { + private router: Router) { } ngOnInit() { - this.getTask(); - } - - getTask(): void { - const id = this.route.snapshot.paramMap.get('id'); - this.taskService.getTask(id).subscribe(task => { - this.task = task + this.routeSubscription = this.route.params.subscribe(params => { + const id = params['id']; + this.getTask(id); }); } - goBack(): void { - this.location.back(); + getTask(id: string): void { + this.requestInProgress = true; + this.taskService.getTask(id).subscribe(task => { + this.requestInProgress = false; + this.task = task; + }); + } + + updateTask() { + this.requestInProgress = true; + this.taskService.updateTask(this.task).subscribe(task => { + this.requestInProgress = false; + this.task = task; + }); + } + + openTask(taskId: string) { + this.router.navigate([{outlets: {detail: `task/${taskId}`}}], {relativeTo: this.route.parent}); } } diff --git a/web/src/app/workplace/tasklist/tasklist.component.html b/web/src/app/workplace/tasklist/tasklist.component.html index 34500a381..5b9ca3413 100644 --- a/web/src/app/workplace/tasklist/tasklist.component.html +++ b/web/src/app/workplace/tasklist/tasklist.component.html @@ -1,29 +1,22 @@ - - - - - - - - - - - - - - - - - - - -
IDNameDue DatePriorityStateActions
{{ task.taskId }}{{ task.name }}{{ task.due | date:'medium' }}{{ task.priority }}{{ task.state }} - - - - -
+
+ + +
+
    +
  • There are no Tasks for this workbasket
    • +
  • +
    +
    +
    {{task.name}}, + {{task.taskId}} +
    +
    Due: {{task.due}}  
    +
    Priority: {{task.priority}}  
    +
    State: {{task.state}}  
    +
    +
    +
    • +
+
+
diff --git a/web/src/app/workplace/tasklist/tasklist.component.scss b/web/src/app/workplace/tasklist/tasklist.component.scss index 97ada106c..3d83732f2 100644 --- a/web/src/app/workplace/tasklist/tasklist.component.scss +++ b/web/src/app/workplace/tasklist/tasklist.component.scss @@ -1,3 +1,52 @@ .clickable { cursor: pointer; } + +.task-list-full-height{ + height: calc(100vh - 55px); +} + +.row.list-group { + margin-left: 2px; +} + +.list-group > li { + border-left: none; + border-right: none; +} + +ul { + max-height: 90vh; + margin-bottom: 10px; + overflow:scroll; + -webkit-overflow-scrolling: touch; +} + +a > label{ + height: 2em; + width: 100%; +} +dd, dt { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +dt > i { + font-weight: normal; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +li > div.row > dl { + margin-bottom: 0px; +} +li > div.row > dl:first-child { + margin-left: 10px; +} + +.no-space { + border-top: none; + padding: 0px +} diff --git a/web/src/app/workplace/tasklist/tasklist.component.ts b/web/src/app/workplace/tasklist/tasklist.component.ts index 35b1648fd..3cc17db44 100644 --- a/web/src/app/workplace/tasklist/tasklist.component.ts +++ b/web/src/app/workplace/tasklist/tasklist.component.ts @@ -11,6 +11,7 @@ export class TasklistComponent implements OnInit { private columnForOrdering: string; + selectedId = ''; @Input() tasks: Task[]; constructor(private router: Router, @@ -25,7 +26,12 @@ export class TasklistComponent implements OnInit { this.columnForOrdering = column; } - openTask(id: string) { - this.router.navigate(['tasks/', id], {relativeTo: this.route.parent}); + loadTasks(tasks: Task[]) { + this.tasks = tasks; + } + + selectTask(taskId: string) { + this.selectedId = taskId; + this.router.navigate([{outlets: {detail: `taskdetail/${this.selectedId}`}}], {relativeTo: this.route}); } } diff --git a/web/src/app/workplace/tasks/tasks.component.html b/web/src/app/workplace/tasks/tasks.component.html deleted file mode 100644 index 068b9b1d2..000000000 --- a/web/src/app/workplace/tasks/tasks.component.html +++ /dev/null @@ -1,10 +0,0 @@ -
-
- -
-
-
- -
-
-
diff --git a/web/src/app/workplace/tasks/tasks.component.scss b/web/src/app/workplace/tasks/tasks.component.scss deleted file mode 100644 index e512e4fc0..000000000 --- a/web/src/app/workplace/tasks/tasks.component.scss +++ /dev/null @@ -1,3 +0,0 @@ -.container-fluid > .row { - min-height: 50px; -} diff --git a/web/src/app/workplace/tasks/tasks.component.ts b/web/src/app/workplace/tasks/tasks.component.ts deleted file mode 100644 index be39fe96b..000000000 --- a/web/src/app/workplace/tasks/tasks.component.ts +++ /dev/null @@ -1,25 +0,0 @@ -import {Component, Input} from '@angular/core'; -import {Task} from '../models/task'; - -@Component({ - selector: 'taskana-tasks', - templateUrl: './tasks.component.html', - styleUrls: ['./tasks.component.scss'] -}) -export class TasksComponent { - - @Input() - tasks: Task[]; - - @Input() - task: Task; - - loadTasks(tasks: Task[]) { - this.tasks = tasks; - } - - selectTask(task: Task) { - this.task = task; - } - -} diff --git a/web/src/app/workplace/workbasket-selector/workbasket-selector.component.html b/web/src/app/workplace/workbasket-selector/workbasket-selector.component.html index 9d14a1dc1..645488f0e 100644 --- a/web/src/app/workplace/workbasket-selector/workbasket-selector.component.html +++ b/web/src/app/workplace/workbasket-selector/workbasket-selector.component.html @@ -1,5 +1,5 @@
-
+
diff --git a/web/src/app/workplace/workbasket-selector/workbasket-selector.component.ts b/web/src/app/workplace/workbasket-selector/workbasket-selector.component.ts index c794f5399..01d1afd07 100644 --- a/web/src/app/workplace/workbasket-selector/workbasket-selector.component.ts +++ b/web/src/app/workplace/workbasket-selector/workbasket-selector.component.ts @@ -1,9 +1,8 @@ -import { Component, EventEmitter, OnInit, Output } from '@angular/core'; -import { DataService } from '../services/data.service'; -import { Task } from '../models/task'; -import { Workbasket } from 'app/models/workbasket'; -import { TaskService } from '../services/task.service'; -import { WorkbasketService } from '../services/workbasket.service'; +import {Component, EventEmitter, OnInit, Output} from '@angular/core'; +import {Task} from 'app/workplace/models/task'; +import {Workbasket} from 'app/models/workbasket'; +import {TaskService} from 'app/workplace/services/task.service'; +import {WorkbasketService} from 'app/workplace/services/workbasket.service'; @Component({ selector: 'taskana-workbasket-selector', @@ -22,20 +21,19 @@ export class SelectorComponent implements OnInit { workbaskets: Workbasket[]; constructor(private taskService: TaskService, - private workbasketService: WorkbasketService, - private dataService: DataService) { + private workbasketService: WorkbasketService) { } ngOnInit() { - this.workbasketService.getAllWorkBaskets().subscribe(w => { - this.workbaskets = w['_embedded']['workbaskets']; + this.workbasketService.getAllWorkBaskets().subscribe(workbaskets => { + this.workbaskets = workbaskets._embedded ? workbaskets._embedded.workbaskets : []; this.workbaskets.forEach(workbasket => { this.autoCompleteData.push(workbasket.name); }); }); - if (this.dataService.workbasketKey) { - this.getTasks(this.dataService.workbasketKey); - this.result = this.dataService.workbasketName; + if (this.workbasketService.workbasketKey) { + this.getTasks(this.workbasketService.workbasketKey); + this.result = this.workbasketService.workbasketName; } } @@ -47,16 +45,20 @@ export class SelectorComponent implements OnInit { } }); this.getTasks(this.resultKey); - this.dataService.workbasketKey = this.resultKey; - this.dataService.workbasketName = this.result; + this.workbasketService.workbasketKey = this.resultKey; + this.workbasketService.workbasketName = this.result; this.tasksChanged.emit(this.tasks); } } getTasks(workbasketKey: string) { - this.taskService.findTaskWithWorkbaskets(workbasketKey).subscribe( - tasks2 => { - tasks2['_embedded']['tasks'].forEach(e => this.tasks.push(e)); + this.taskService.findTasksWithWorkbasket(workbasketKey).subscribe( + tasks => { + if (!tasks || tasks._embedded === undefined) { + this.tasks.length = 0; + return; + } + tasks._embedded.tasks.forEach(e => this.tasks.push(e)); }); } } diff --git a/web/src/app/workplace/workplace-routing.module.ts b/web/src/app/workplace/workplace-routing.module.ts index 5b75480de..a23dd2852 100644 --- a/web/src/app/workplace/workplace-routing.module.ts +++ b/web/src/app/workplace/workplace-routing.module.ts @@ -1,36 +1,42 @@ 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 {MasterAndDetailComponent} from '../shared/master-and-detail/master-and-detail.component'; +import {WorkplaceComponent} from './workplace.component'; +import {TaskComponent} from './task/task.component'; import {TaskdetailsComponent} from './taskdetails/taskdetails.component'; +import {TasklistComponent} from './tasklist/tasklist.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: 'tasks/taskdetail/:id', - component: TaskdetailsComponent - } - ] - } -]; + { + path: 'tasks', + component: MasterAndDetailComponent, + children: [ + { + path: '', + component: TasklistComponent, + outlet: 'master' + }, + { + path: 'taskdetail/:id', + component: TaskdetailsComponent, + outlet: 'detail' + }, + { + path: 'task/:id', + component: TaskComponent, + outlet: 'detail' + } + ] + }, + { + path: '', + component: WorkplaceComponent, + redirectTo: 'tasks', + pathMatch: 'full' + } + + ] +; @NgModule({ imports: [RouterModule.forChild(routes)], diff --git a/web/src/app/workplace/workplace.module.ts b/web/src/app/workplace/workplace.module.ts index 860a61f47..a7fe52dbc 100644 --- a/web/src/app/workplace/workplace.module.ts +++ b/web/src/app/workplace/workplace.module.ts @@ -1,28 +1,26 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { Ng2AutoCompleteModule } from 'ng2-auto-complete'; -import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'; -import { AngularSvgIconModule } from 'angular-svg-icon'; -import { WorkplaceRoutingModule } from './workplace-routing.module'; -import { AlertModule } from 'ngx-bootstrap'; -import { SharedModule } from 'app/shared/shared.module'; +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {FormsModule} from '@angular/forms'; +import {Ng2AutoCompleteModule} from 'ng2-auto-complete'; +import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http'; +import {AngularSvgIconModule} from 'angular-svg-icon'; +import {WorkplaceRoutingModule} from './workplace-routing.module'; +import {AlertModule} from 'ngx-bootstrap'; import { WorkplaceComponent } from './workplace.component'; import { SelectorComponent } from './workbasket-selector/workbasket-selector.component'; import { TasklistComponent } from './tasklist/tasklist.component'; import { TaskdetailsComponent } from './taskdetails/taskdetails.component'; import { TaskComponent } from './task/task.component'; -import { TasksComponent } from './tasks/tasks.component'; import { CodeComponent } from './components/code/code.component'; import { OrderTasksByPipe } from './util/orderTasksBy.pipe'; -import { DataService } from './services/data.service'; -import { TaskService } from './services/task.service'; -import { WorkbasketService } from './services/workbasket.service'; -import { CustomHttpClientInterceptor } from './services/custom-http-interceptor/custom-http-interceptor.service'; +import {TaskService} from './services/task.service'; +import {WorkbasketService} from './services/workbasket.service'; +import {SharedModule} from '../shared/shared.module'; +import {CustomHttpClientInterceptor} from './services/custom-http-interceptor/custom-http-interceptor.service'; const MODULES = [ @@ -42,7 +40,6 @@ const DECLARATIONS = [ TasklistComponent, TaskdetailsComponent, TaskComponent, - TasksComponent, CodeComponent, OrderTasksByPipe ]; @@ -51,7 +48,6 @@ const DECLARATIONS = [ declarations: DECLARATIONS, imports: MODULES, providers: [ - DataService, TaskService, WorkbasketService, {