Replace task-list/userstory-list with task-table/userstory-table

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

@@ -0,0 +1,4 @@
+table {
+  table-layout: fixed;
+}
+

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

@@ -0,0 +1,77 @@
+<div class="mx-5 my-3">
+
+  <h3 class="my-1">
+    <a
+      *ngIf="filterUserstoryId"
+      [routerLink]="['/userstories', {id: filterUserstoryId}]"
+    >
+      Userstory #{{filterUserstoryId}} &gt;
+    </a>
+    Tasks
+  </h3>
+
+  <button class="btn btn-secondary my-3" (click)="openTaskForm()">Neuer Task</button>
+
+  <table class="table">
+
+    <thead>
+    <tr>
+      <th (click)="sortById()">
+        <span>ID</span>
+        <span *ngIf="sortBy === 'id'" class="pl-3">
+          <span *ngIf="sortDescending">▲</span>
+          <span *ngIf="sortDescending === false">▼</span>
+        </span>
+      </th>
+      <th (click)="sortByTitle()">
+        <span>Titel</span>
+        <span *ngIf="sortBy === 'title'" class="pl-3">
+          <span *ngIf="sortDescending">▲</span>
+          <span *ngIf="sortDescending === false">▼</span>
+        </span>
+      </th>
+      <th (click)="sortByContent()">
+        <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">
+          <span *ngIf="sortDescending">▲</span>
+          <span *ngIf="sortDescending === false">▼</span>
+        </span>
+      </th>
+      <th (click)="sortByPrio()">
+        <span>Priorität</span>
+        <span *ngIf="sortBy === 'priority'" class="pl-3">
+          <span *ngIf="sortDescending">▲</span>
+          <span *ngIf="sortDescending === false">▼</span>
+        </span>
+      </th>
+      <th></th>
+    </tr>
+    </thead>
+
+    <tbody>
+    <tr *ngFor="let task of filteredItems">
+      <td>{{task.id}}</td>
+      <td>{{task.title}}</td>
+      <td>{{task.content}}</td>
+      <td>
+        <a [routerLink]="['/userstories', {id: task.userstoryid}]">
+          US #{{task.userstoryid}}
+        </a>
+      </td>
+      <td>{{task.priority}}</td>
+      <td>
+        <button class="btn btn-secondary m-2" (click)="openTaskForm(task)">Bearbeiten</button>
+        <button class="btn btn-secondary m-2" (click)="deleteTask(task)">Löschen</button>
+      </td>
+    </tr>
+    </tbody>
+
+  </table>
+</div>

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

@@ -0,0 +1,105 @@
+import {Component} from '@angular/core';
+import {BackendService, Priority, ScrumTask, ScrumUserstory} 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';
+
+@Component({
+  selector: 'app-userstory-table',
+  templateUrl: './task-table.component.html',
+  styleUrls: ['./task-table.component.css']
+})
+export class TaskTableComponent extends TableComponentBase<ScrumTask> {
+  public filterUserstoryId: number | null = null;
+  public get filteredItems() {
+    if (this.filterUserstoryId === null || isNaN(this.filterUserstoryId)) {
+      return this.items;
+    }
+    return this.items.filter(task => task.userstoryid === this.filterUserstoryId);
+  }
+
+  constructor(
+    private backendService: BackendService, private modalService: NgbModal,
+    private route: ActivatedRoute, private router: Router
+  ) {
+    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));
+    }
+
+    backendService.getTasks().subscribe(response => {
+      if (response.status > 399) {
+        alert('Fehler');
+      } else {
+        this.items.push(...response.body);
+      }
+    });
+  }
+
+  public deleteTask(task: ScrumTask) {
+    this.backendService.deleteTask(task).subscribe(response => {
+      if (response.status > 399) {
+        alert('Fehler');
+      }
+    });
+    const index = this.items.indexOf(task);
+    if (index !== -1) {
+      this.items.splice(index, 1);
+    }
+  }
+
+  public openTaskForm(editTask?: ScrumTask) {
+    const modalRef = this.modalService.open(TaskFormComponent, {
+      backdrop: 'static',
+      keyboard: true,
+    });
+    if (editTask === null) {
+      modalRef.result.then(result => {
+        this.items.push(result);
+      });
+    }
+    modalRef.componentInstance.task = editTask;
+  }
+
+  sortById() {
+    this.doNumericSort('id', us => us.id);
+  }
+
+  sortByTitle() {
+    this.doStringSort('title', us => us.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;
+    }
+  }
+
+  sortByPrio() {
+    this.doNumericSort('priority', us => this.getNumberForPriority(us.priority));
+  }
+
+  getNumberOfTasks(userstory: ScrumUserstory) {
+    return this.items.filter(t => t.userstoryid === userstory.id).length;
+  }
+
+  sortByTasks() {
+    this.doNumericSort('tasks', us => this.getNumberOfTasks(us));
+  }
+}