Add filters by priority + highlighting

src/app/task-table/task-table.component.css

@@ -2,3 +2,6 @@ table {
   table-layout: fixed;
 }
 
+th.sortable:hover {
+  text-decoration: underline;
+}

src/app/task-table/task-table.component.html

@@ -9,6 +9,9 @@
     </a>
     Tasks
   </h3>
+  <div *ngIf="filterUserstoryId">
+    <a [routerLink]="'/tasks'">Alle Tasks anzeigen</a>
+  </div>
 
   <button class="btn btn-secondary my-3" (click)="openTaskForm()">Neuer Task</button>
 
@@ -16,37 +19,43 @@
 
     <thead>
     <tr>
-      <th (click)="sortById()">
+      <th (click)="sortById()" class="sortable">
         <span>ID</span>
         <span *ngIf="sortBy === 'id'" class="pl-3">
           <span *ngIf="sortDescending">▲</span>
           <span *ngIf="sortDescending === false">▼</span>
         </span>
       </th>
-      <th (click)="sortByTitle()">
+      <th (click)="sortByTitle()" class="sortable">
         <span>Titel</span>
         <span *ngIf="sortBy === 'title'" class="pl-3">
           <span *ngIf="sortDescending">▲</span>
           <span *ngIf="sortDescending === false">▼</span>
         </span>
       </th>
-      <th (click)="sortByContent()">
+      <th (click)="sortByContent()" class="sortable">
         <span>Inhalt</span>
         <span *ngIf="sortBy === 'content'" class="pl-3">
           <span *ngIf="sortDescending">▲</span>
           <span *ngIf="sortDescending === false">▼</span>
         </span>
       </th>
-      <th (click)="sortByTasks()">
-        <span>Tasks</span>
-        <span *ngIf="sortBy === 'tasks'" class="pl-3">
+      <th (click)="sortByTasks()" class="sortable">
+        <span>Userstory</span>
+        <span *ngIf="sortBy === 'userstory'" class="pl-3">
           <span *ngIf="sortDescending">▲</span>
           <span *ngIf="sortDescending === false">▼</span>
         </span>
       </th>
-      <th (click)="sortByPrio()">
+      <th (click)="sortByPrio()" class="sortable">
         <span>Priorität</span>
-        <span *ngIf="sortBy === 'priority'" class="pl-3">
+        <label class="pl-3" (click)="$event.stopPropagation()">
+          <select [(ngModel)]="filterPriority">
+            <option [ngValue]="null" selected></option>
+            <option *ngFor="let p of getAllPriorities()" [ngValue]="p">{{p}}</option>
+          </select>
+        </label>
+        <span  *ngIf="sortBy === 'priority'" (click)="sortByPrio()" class="pl-3">
           <span *ngIf="sortDescending">▲</span>
           <span *ngIf="sortDescending === false">▼</span>
         </span>
@@ -56,7 +65,7 @@
     </thead>
 
     <tbody>
-    <tr *ngFor="let task of filteredItems">
+    <tr *ngFor="let task of filteredItems" [class.table-info]="task.id === highlightId">
       <td>{{task.id}}</td>
       <td>{{task.title}}</td>
       <td>{{task.content}}</td>

src/app/task-table/task-table.component.ts

@@ -1,9 +1,10 @@
 import {Component} from '@angular/core';
-import {BackendService, Priority, ScrumTask, ScrumUserstory} from '../services/backend.service';
+import {BackendService, ScrumTask} from '../services/backend.service';
 import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
 import {TaskFormComponent} from '../task-form/task-form.component';
 import {TableComponentBase} from '../services/table-component.base';
-import {ActivatedRoute, Router} from '@angular/router';
+import {ActivatedRoute, ParamMap, Router} from '@angular/router';
+import {getNumberForPriority} from '../services/sorting.service';
 
 @Component({
   selector: 'app-userstory-table',
@@ -12,11 +13,14 @@ import {ActivatedRoute, Router} from '@angular/router';
 })
 export class TaskTableComponent extends TableComponentBase<ScrumTask> {
   public filterUserstoryId: number | null = null;
+  public filterPriority: string | null = null;
+  public highlightId: number;
+
   public get filteredItems() {
-    if (this.filterUserstoryId === null || isNaN(this.filterUserstoryId)) {
-      return this.items;
-    }
-    return this.items.filter(task => task.userstoryid === this.filterUserstoryId);
+    return this.items.filter(task =>
+      (this.filterUserstoryId === null || task.userstoryid === this.filterUserstoryId)
+      && (this.filterPriority === null || task.priority === this.filterPriority)
+    );
   }
 
   constructor(
@@ -25,14 +29,8 @@ export class TaskTableComponent extends TableComponentBase<ScrumTask> {
   ) {
     super();
 
-    const params = route.snapshot.paramMap;
-    if (params.has('userstoryId')) {
-      this.filterUserstoryId = parseInt(params.get('userstoryId'));
-    }
-    if (params.has('id')) {
-      const id = parseInt(params.get('id'));
-      this.openTaskForm(this.items.find(t => t.id === id));
-    }
+    this.applyFilterParameters(route.snapshot.paramMap);
+    route.paramMap.subscribe(map => this.applyFilterParameters(map));
 
     backendService.getTasks().subscribe(response => {
       if (response.status > 399) {
@@ -43,6 +41,17 @@ export class TaskTableComponent extends TableComponentBase<ScrumTask> {
     });
   }
 
+  private applyFilterParameters(params: ParamMap) {
+    if (params.has('userstoryId')) {
+      this.filterUserstoryId = parseInt(params.get('userstoryId'));
+    } else {
+      this.filterUserstoryId = null;
+    }
+    if (params.has('id')) {
+      this.highlightId = parseInt(params.get('id'));
+    }
+  }
+
   public deleteTask(task: ScrumTask) {
     this.backendService.deleteTask(task).subscribe(response => {
       if (response.status > 399) {
@@ -69,37 +78,26 @@ export class TaskTableComponent extends TableComponentBase<ScrumTask> {
   }
 
   sortById() {
-    this.doNumericSort('id', us => us.id);
+    this.doNumericSort('id', task => task.id);
   }
 
   sortByTitle() {
-    this.doStringSort('title', us => us.title);
+    this.doStringSort('title', task => task.title);
   }
 
   sortByContent() {
-    this.doStringSort('content', us => us.content);
-  }
-
-  private getNumberForPriority(priority: Priority): number {
-    switch (priority) {
-      case Priority.High:
-        return 2;
-      case Priority.Medium:
-        return 1;
-      case Priority.Low:
-        return 0;
-    }
+    this.doStringSort('content', task => task.content);
   }
 
   sortByPrio() {
-    this.doNumericSort('priority', us => this.getNumberForPriority(us.priority));
-  }
-
-  getNumberOfTasks(userstory: ScrumUserstory) {
-    return this.items.filter(t => t.userstoryid === userstory.id).length;
+    this.doNumericSort('priority', task => getNumberForPriority(task.priority));
   }
 
   sortByTasks() {
-    this.doNumericSort('tasks', us => this.getNumberOfTasks(us));
+    this.doNumericSort('userstory', task => task.userstoryid);
+  }
+
+  private findTaskById(id: number): ScrumTask {
+    return this.items.find(t => t.id === id);
   }
 }