TSK-701

Select workbasket now displayed with icon.
Also alert triggered when empty workbasket is selected.
This commit is contained in:
Lars Leo Grätz 2018-09-11 14:52:45 +02:00 committed by Mustapha Zorgati
parent 079e7756e1
commit 7076efcf5e
2 changed files with 34 additions and 20 deletions

View File

@ -4,22 +4,28 @@
(performFilter)="performFilter($event)"> (performFilter)="performFilter($event)">
</taskana-tasklist-toolbar> </taskana-tasklist-toolbar>
<div *ngIf="!requestInProgress"> <div *ngIf="!requestInProgress">
<ul #taskList id="task-list-container" class="list-group"> <div *ngIf="(tasks && tasks.length > 0); else empty_list">
<li class="list-group-item" *ngIf="tasks === undefined || tasks.length === 0" type="text"> <ul #taskList id="task-list-container" class="list-group">
<b>This Workbasket has no Tasks</b> <li class="list-group-item"
</li> *ngFor="let task of tasks" [class.active]="task.taskId == selectedId"
<li class="list-group-item" *ngFor="let task of tasks" [class.active]="task.taskId == selectedId" type="text" (click)="selectTask(task.taskId)">
type="text" (click)="selectTask(task.taskId)"> <div class="row">
<div class="row"> <dl class="col-xs-10">
<dl class="col-xs-10"> <dt data-toggle="tooltip" title="{{task.name}}">{{task.name}}</dt>
<dt data-toggle="tooltip" title="{{task.name}}">{{task.name}}</dt> <dd data-toggle="tooltip" title="{{task.owner}}">Owner: {{task.owner}} &nbsp;</dd>
<dd data-toggle="tooltip" title="{{task.owner}}">Owner: {{task.owner}} &nbsp;</dd> <dd data-toggle="tooltip" title="{{task.priority}}">Priority: {{task.priority}} &nbsp;</dd>
<dd data-toggle="tooltip" title="{{task.priority}}">Priority: {{task.priority}} &nbsp;</dd> <dd data-toggle="tooltip" title="{{task.state}}">State: {{task.state}} &nbsp;</dd>
<dd data-toggle="tooltip" title="{{task.state}}">State: {{task.state}} &nbsp;</dd> </dl>
</dl> </div>
</div> </li>
</li> </ul>
</ul> </div>
<ng-template #empty_list>
<div class="col-xs-12 container-no-items center-block">
<h3 class="grey">Select a workbasket</h3>
<svg-icon class="img-responsive empty-icon workbasket-icon" src="./assets/icons/wb-empty.svg"></svg-icon>
</div>
</ng-template>
</div> </div>
</div> </div>
<taskana-code></taskana-code> <taskana-code></taskana-code>

View File

@ -1,4 +1,4 @@
import {Component, Input, OnDestroy, OnInit} from '@angular/core'; import {Component, OnDestroy, OnInit} from '@angular/core';
import {Task} from 'app/workplace/models/task'; import {Task} from 'app/workplace/models/task';
import {ActivatedRoute, Router} from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
import {TaskService} from 'app/workplace/services/task.service'; import {TaskService} from 'app/workplace/services/task.service';
@ -6,6 +6,8 @@ import {Subscription} from 'rxjs';
import {SortingModel} from 'app/models/sorting'; import {SortingModel} from 'app/models/sorting';
import {Workbasket} from 'app/models/workbasket'; import {Workbasket} from 'app/models/workbasket';
import {FilterModel} from 'app/models/filter'; import {FilterModel} from 'app/models/filter';
import {AlertService} from 'app/services/alert/alert.service';
import {AlertModel, AlertType} from 'app/models/alert';
@Component({ @Component({
selector: 'taskana-task-list', selector: 'taskana-task-list',
@ -35,7 +37,8 @@ export class TasklistComponent implements OnInit, OnDestroy {
constructor(private router: Router, constructor(private router: Router,
private route: ActivatedRoute, private route: ActivatedRoute,
private taskService: TaskService) { private taskService: TaskService,
private alertService: AlertService) {
this.taskChangeSubscription = this.taskService.taskChangedStream.subscribe(task => { this.taskChangeSubscription = this.taskService.taskChangedStream.subscribe(task => {
for (let i = 0; i < this.tasks.length; i++) { for (let i = 0; i < this.tasks.length; i++) {
if (this.tasks[i].taskId === task.taskId) { if (this.tasks[i].taskId === task.taskId) {
@ -68,7 +71,7 @@ export class TasklistComponent implements OnInit, OnDestroy {
selectTask(taskId: string) { selectTask(taskId: string) {
this.selectedId = taskId; this.selectedId = taskId;
this.router.navigate([{ outlets: { detail: `taskdetail/${this.selectedId}` } }], { relativeTo: this.route }); this.router.navigate([{outlets: {detail: `taskdetail/${this.selectedId}`}}], {relativeTo: this.route});
} }
loadBasketID(workbasket: Workbasket) { loadBasketID(workbasket: Workbasket) {
@ -93,7 +96,12 @@ export class TasklistComponent implements OnInit, OnDestroy {
this.filterBy.filterParams.state) this.filterBy.filterParams.state)
.subscribe(tasks => { .subscribe(tasks => {
this.requestInProgress = false; this.requestInProgress = false;
this.tasks = tasks._embedded ? tasks._embedded.tasks : []; if (tasks._embedded) {
this.tasks = tasks._embedded.tasks;
} else {
this.tasks = [];
this.alertService.triggerAlert(new AlertModel(AlertType.INFO, 'The selected Workbasket is empty!'));
}
}); });
} }