TSK-1540: Rework task-list component with Angular Material

web/src/app/shared/pipes/date-time-zone.pipe.ts

@@ -7,7 +7,7 @@ import { TaskanaDate } from '../util/taskana.date';
 export class DateTimeZonePipe implements PipeTransform {
   private datesMap = new Map<string, string>();
 
-  transform(value: any, format: string, args?: any): any {
+  transform(value: any, format?: string, args?: any): any {
     let date = this.datesMap.get(value);
     if (!date) {
       date = TaskanaDate.getDateToDisplay(value, format);

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

@@ -1,35 +1,38 @@
+<!-- TASK LIST -->
 <div *ngIf="(tasks && tasks.length > 0); else empty_list">
-  <ul #taskList id="task-list-container" class="list-group">
-    <li class="list-group-item" *ngFor="let task of tasks" [class.active]="task.taskId == selectedId" type="text"
-      (click)="selectTask(task.taskId)">
-      <div class="row">
-        <dl class="col-xs-2">
-          <span data-toggle="tooltip" class="badge" [ngClass]="{
-                'badge-red': task.priority <=5,
-                'badge-orange': (task.priority > 5 && task.priority <=15),
-                'badge-green': task.priority > 15}" title="{{task.priority}}">{{task.priority}}</span>
-        </dl>
-        <dl class="col-xs-8">
-          <dt>
-            <span data-toggle="tooltip" title="{{task.name}}">{{task.name}}</span>
-            <i *ngIf="task.owner" data-toggle="tooltip" title="{{task.owner}}">, {{task.owner}}</i>
-          </dt>
-        </dl>
-      </div>
-      <div class="row">
-        <dl class="col-xs-3 col-xs-offset-2">
-          <dd data-toggle="tooltip" title="{{task.state}}">{{task.state}}</dd>
-        </dl>
-        <dl class="pull-right padding-right">
-          <i data-toggle="tooltip" title="{{task.due}}">Due: {{task.due | dateTimeZone}}</i>
-        </dl>
+  <mat-selection-list [multiple]="false">
+    <mat-list-option *ngFor="let task of tasks"
+                     (click)="selectTask(task.taskId)"
+                     [selected]="task.taskId == selectedId"
+                     [value]="task.taskId">
 
-      </div>
-    </li>
-  </ul>
+        <div class="task-list__task">
+
+          <!-- TASK PRIORITY -->
+          <div class="task-list__task-priority-badge"
+             matTooltip="Priority"
+             matBadge="{{task.priority}}" matBadgePosition="{{task.taskId == selectedId? 'above' : 'below'}}">
+          </div>
+
+          <!-- TASK INFORMATION -->
+          <div class="task-list__task-info">
+            <p> <b>{{task.name}}</b>, <i *ngIf="task.owner">{{task.owner}} </i> </p>
+            <p> State: {{task.state}} </p>
+            <p> Due: {{task.due | dateTimeZone }} </p>
+          </div>
+
+        </div>
+
+      <mat-divider></mat-divider>
+
+    </mat-list-option>
+  </mat-selection-list>
 </div>
+
+
+<!-- EMPTY TASK-LIST -->
 <ng-template #empty_list>
-  <div class="col-xs-12 container-no-items center-block">
+  <div class="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>

web/src/app/workplace/components/task-list/task-list.component.scss

@@ -1,16 +1,51 @@
-.clickable {
-  cursor: pointer;
+@import 'src/theme/_colors.scss';
+
+.task-list {
+
+  &__task {
+    display: flex;
+  }
+
+  &__task-info {
+    display: block;
+    width: 316px;
+  }
+
+  &__task-priority-badge {
+    top: 24px;
+    height: 24px;
+    width: 40px;
+  }
 }
 
-.list-group > li {
-  border-left: none;
-  border-right: none;
+
+
+p {
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-li > div.row > dl {
-  margin-bottom: 0px;
+.mat-list-item {
+  height: 90px !important;
+  overflow: hidden;
 }
 
-.list-group-item > div > dl > span.badge {
-  margin-left: 8px;
+.mat-list-single-selected-option {
+  background-color: $green !important;
+  color: white;
 }
+
+.mat-badge-medium.mat-badge-above .mat-badge-content {
+  top: 1px;
+  right: 16px;
+  color: $green;
+  background-color: white;
+}
+
+.mat-badge-medium.mat-badge-below .mat-badge-content {
+  top: 1px;
+  right: 16px;
+  background-color: $green;
+}
+

web/src/app/workplace/components/task-list/task-list.component.spec.ts

@@ -8,6 +8,9 @@ import { Component, ChangeDetectorRef } from '@angular/core';
 import { WorkplaceService } from 'app/workplace/services/workplace.service';
 import { TaskListComponent } from './task-list.component';
 import { DateTimeZonePipe } from '../../../shared/pipes/date-time-zone.pipe';
+import { MatSelectModule } from '@angular/material/select';
+import { MatListModule } from '@angular/material/list';
+import { MatBadgeModule } from '@angular/material/badge';
 
 @Component({
   selector: 'taskana-dummy-detail',
@@ -29,7 +32,14 @@ describe('TaskListComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [FormsModule, RouterTestingModule.withRoutes(routes), HttpClientModule],
+      imports: [
+        FormsModule,
+        RouterTestingModule.withRoutes(routes),
+        HttpClientModule,
+        MatSelectModule,
+        MatListModule,
+        MatBadgeModule
+      ],
       declarations: [TaskListComponent, DummyDetailComponent, MockSvgIconComponent, DateTimeZonePipe],
       providers: [WorkplaceService, ChangeDetectorRef]
     }).compileComponents();

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

@@ -1,6 +1,5 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Task } from 'app/workplace/models/task';
-import { WorkplaceService } from 'app/workplace/services/workplace.service';
 import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
@@ -10,7 +9,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 })
 export class TaskListComponent implements OnInit {
   @Input()
-  tasks: Array<Task>;
+  tasks: Task[];
 
   @Input()
   selectedId: string;
@@ -18,7 +17,7 @@ export class TaskListComponent implements OnInit {
   @Output()
   selectedIdChange = new EventEmitter<string>();
 
-  constructor(private router: Router, private route: ActivatedRoute, private workplaceService: WorkplaceService) {}
+  constructor(private router: Router, private route: ActivatedRoute) {}
 
   ngOnInit() {}
 

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

@@ -127,7 +127,7 @@ export class TaskMasterComponent implements OnInit, OnDestroy {
   private calculateHeightCard() {
     if (this.toolbarElement) {
       const toolbarSize = this.toolbarElement.nativeElement.offsetHeight;
-      const cardHeight = 53;
+      const cardHeight = 90;
       const unusedHeight = 150;
       const totalHeight = window.innerHeight;
       const cards = Math.round((totalHeight - (unusedHeight + toolbarSize)) / cardHeight);

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

@@ -26,6 +26,9 @@ import { WorkplaceService } from './services/workplace.service';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 const MODULES = [
   TypeaheadModule.forRoot(),
@@ -57,7 +60,7 @@ const DECLARATIONS = [
 
 @NgModule({
   declarations: DECLARATIONS,
-  imports: [MODULES],
+  imports: [MODULES, MatListModule, MatBadgeModule, MatTooltipModule],
   providers: [
     TaskService,
     ClassificationCategoriesService,