Added displaying the actual names of users, status and categories

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

@@ -1,11 +1,9 @@
 <div class="mx-5 my-3">
 
     <h3 class="my-1">
-    <a
+        <a *ngIf="filterUserstoryId" [routerLink]="['/userstories', {id: filterUserstoryId}]">
-      *ngIf="filterUserstoryId"
+            Userstory #{{filterUserstoryId}}
-      [routerLink]="['/userstories', {id: filterUserstoryId}]"
+            &gt;
-    >
-      Userstory #{{filterUserstoryId}} &gt;
         </a>
         Tasks
     </h3>
@@ -51,7 +49,7 @@
                     <span>Priorität</span>
                     <label class="pl-3" (click)="$event.stopPropagation()">
                         <select [(ngModel)]="filterPriority">
-            <option [ngValue]="null" selected></option>
+                            <option [ngValue]="null" selected="selected"></option>
                             <option *ngFor="let p of getAllPriorities()" [ngValue]="p">{{p}}</option>
                         </select>
                     </label>
@@ -89,18 +87,18 @@
                 </td>
                 <td>
                     <a [routerLink]="['/status', {id: task.statusid}]">
-        Status: {{task.statusid}}
+                        {{getStatusTitleById(task.statusid)}}
                     </a>
                 </td>
                 <td>{{task.priority}}</td>
                 <td>
                     <a [routerLink]="['/users', {id: task.assignedtoid}]">
-        User: {{task.assignedtoid}}
+                        {{getUserNameById(task.assignedtoid)}}
                     </a>
                 </td>
                 <td>
                     <a [routerLink]="['/categories', {id: task.categoryid}]">
-        Category: {{task.categoryid}}
+                        {{getCategoryTitleById(task.categoryid)}}
                     </a>
                 </td>
                 <td>
@@ -112,3 +110,4 @@
 
     </table>
 </div>
+

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

@@ -1,44 +1,78 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {BackendService, ScrumTask} from '../services/backend.service';
+import {
-import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
+  BackendService,
-import {TaskFormComponent} from '../task-form/task-form.component';
+  ScrumTask,
-import {TableComponentBase} from '../services/table-component.base';
+  ScrumStatus,
-import {ActivatedRoute, ParamMap, Router} from '@angular/router';
+  ScrumUser,
-import {getNumberForPriority} from '../services/sorting.service';
+  ScrumCategory,
+} 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, ParamMap, Router } from '@angular/router';
+import { getNumberForPriority } from '../services/sorting.service';
 
 @Component({
   selector: 'app-userstory-table',
   templateUrl: './task-table.component.html',
-  styleUrls: ['./task-table.component.css']
+  styleUrls: ['./task-table.component.css'],
 })
 export class TaskTableComponent extends TableComponentBase<ScrumTask> {
   public filterUserstoryId: number | null = null;
   public filterPriority: string | null = null;
   public highlightId: number;
+  public status: ScrumStatus[] = [];
+  public users: ScrumUser[] = [];
+  public categories: ScrumCategory[] = [];
 
   public get filteredItems() {
-    return this.items.filter(task =>
+    return this.items.filter(
-      (this.filterUserstoryId === null || task.userstoryid === this.filterUserstoryId)
+      (task) =>
-      && (this.filterPriority === null || task.priority === this.filterPriority)
+        (this.filterUserstoryId === null ||
+          task.userstoryid === this.filterUserstoryId) &&
+        (this.filterPriority === null || task.priority === this.filterPriority)
     );
   }
 
   constructor(
-    private backendService: BackendService, private modalService: NgbModal,
+    private backendService: BackendService,
-    private route: ActivatedRoute, private router: Router
+    private modalService: NgbModal,
+    private route: ActivatedRoute,
+    private router: Router
   ) {
     super();
 
     this.applyFilterParameters(route.snapshot.paramMap);
-    route.paramMap.subscribe(map => this.applyFilterParameters(map));
+    route.paramMap.subscribe((map) => this.applyFilterParameters(map));
 
-    backendService.getTasks().subscribe(response => {
+    backendService.getTasks().subscribe((response) => {
       if (response.status > 399) {
         alert('Fehler');
       } else {
         this.items.push(...response.body);
       }
     });
+    backendService.getAllStatus().subscribe((response) => {
+      if (response.status > 399) {
+        alert('Fehler');
+      } else {
+        this.status.push(...response.body);
+      }
+    });
+    backendService.getUsers().subscribe((response) => {
+      if (response.status > 399) {
+        alert('Fehler');
+      } else {
+        this.users.push(...response.body);
+      }
+    });
+    backendService.getCategories().subscribe((response) => {
+      if (response.status > 399) {
+        alert('Fehler');
+      } else {
+        this.categories.push(...response.body);
+      }
+    });
   }
 
   private applyFilterParameters(params: ParamMap) {
@@ -53,7 +87,7 @@ export class TaskTableComponent extends TableComponentBase<ScrumTask> {
   }
 
   public deleteTask(task: ScrumTask) {
-    this.backendService.deleteTask(task).subscribe(response => {
+    this.backendService.deleteTask(task).subscribe((response) => {
       if (response.status > 399) {
         alert('Fehler');
       }
@@ -70,7 +104,7 @@ export class TaskTableComponent extends TableComponentBase<ScrumTask> {
       keyboard: true,
     });
     if (editTask === null) {
-      modalRef.result.then(result => {
+      modalRef.result.then((result) => {
         this.items.push(result);
       });
     }
@@ -78,32 +112,58 @@ export class TaskTableComponent extends TableComponentBase<ScrumTask> {
   }
 
   sortById() {
-    this.doNumericSort('id', task => task.id);
+    this.doNumericSort('id', (task) => task.id);
   }
 
   sortByTitle() {
-    this.doStringSort('title', task => task.title);
+    this.doStringSort('title', (task) => task.title);
   }
 
   sortByPrio() {
-    this.doNumericSort('priority', task => getNumberForPriority(task.priority));
+    this.doNumericSort('priority', (task) =>
+      getNumberForPriority(task.priority)
+    );
   }
 
   sortByTasks() {
-    this.doNumericSort('userstory', task => task.userstoryid);
+    this.doNumericSort('userstory', (task) => task.userstoryid);
   }
 
   sortByStatus() {
-    this.doNumericSort('statusid', task => task.statusid);
+    this.doNumericSort('statusid', (task) => task.statusid);
   }
   sortByAssigned() {
-    this.doNumericSort('assignedtoid', task => task.assignedtoid);
+    this.doNumericSort('assignedtoid', (task) => task.assignedtoid);
   }
   sortByCategory() {
-    this.doNumericSort('categoryid', task => task.categoryid);
+    this.doNumericSort('categoryid', (task) => task.categoryid);
   }
 
   private findTaskById(id: number): ScrumTask {
-    return this.items.find(t => t.id === id);
+    return this.items.find((t) => t.id === id);
+  }
+
+  getStatusTitleById(id) {
+    var status = this.status.find((x) => x.id === id);
+    if (!status) {
+      return 'N/A';
+    }
+    return status.title;
+  }
+
+  getUserNameById(id) {
+    var user = this.users.find((x) => x.id === id);
+    if (!user) {
+      return 'N/A';
+    }
+    return user.name;
+  }
+
+  getCategoryTitleById(id) {
+    var category = this.categories.find((x) => x.id === id);
+    if (!category) {
+      return 'N/A';
+    }
+    return category.title;
   }
 }

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

@@ -71,13 +71,13 @@
       </td>
       <td>
         <a [routerLink]="['/status', {id: userstory.statusid}]">
-        Status: {{userstory.statusid}}
+        {{getStatusTitleById(userstory.statusid)}}
         </a>
       </td>
       <td>{{userstory.priority}}</td>
       <td>
         <a [routerLink]="['/categories', {id: userstory.categoryid}]">
-        Category: {{userstory.categoryid}}
+        {{getCategoryTitleById(userstory.categoryid)}}
         </a>
       </td>
       <td>

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

@@ -1,48 +1,77 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {BackendService, ScrumTask, ScrumUserstory} from '../services/backend.service';
+import {
-import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
+  BackendService,
-import {TableComponentBase} from '../services/table-component.base';
+  ScrumTask,
-import {getNumberForPriority} from '../services/sorting.service';
+  ScrumUserstory,
-import {UserstoryFormComponent} from '../userstory-form/userstory-form.component';
+  ScrumStatus,
-import {ActivatedRoute, ParamMap, Router} from '@angular/router';
+  ScrumCategory,
+} from '../services/backend.service';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { TableComponentBase } from '../services/table-component.base';
+import { getNumberForPriority } from '../services/sorting.service';
+import { UserstoryFormComponent } from '../userstory-form/userstory-form.component';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 
 @Component({
   selector: 'app-userstory-table',
   templateUrl: './userstory-table.component.html',
-  styleUrls: ['./userstory-table.component.css']
+  styleUrls: ['./userstory-table.component.css'],
 })
-export class UserstoryTableComponent extends TableComponentBase<ScrumUserstory> {
+export class UserstoryTableComponent extends TableComponentBase<
+  ScrumUserstory
+> {
   public tasks: ScrumTask[] = [];
   public filterPriority: string | null = null;
   public highlightId: number;
+  public status: ScrumStatus[] = [];
+  public categories: ScrumCategory[] = [];
 
   public get filteredItems() {
-    return this.items.filter(task => this.filterPriority === null || task.priority === this.filterPriority);
+    return this.items.filter(
+      (task) =>
+        this.filterPriority === null || task.priority === this.filterPriority
+    );
   }
 
   constructor(
-    private backendService: BackendService, private modalService: NgbModal,
+    private backendService: BackendService,
-    private route: ActivatedRoute, private router: Router
+    private modalService: NgbModal,
+    private route: ActivatedRoute,
+    private router: Router
   ) {
     super();
 
     this.applyFilterParameters(this.route.snapshot.paramMap);
-    this.route.paramMap.subscribe(map => this.applyFilterParameters(map));
+    this.route.paramMap.subscribe((map) => this.applyFilterParameters(map));
 
-    backendService.getUserstories().subscribe(response => {
+    backendService.getUserstories().subscribe((response) => {
       if (response.status > 399) {
         alert('Fehler');
       } else {
         this.items.push(...response.body);
       }
     });
-    backendService.getTasks().subscribe(response => {
+    backendService.getTasks().subscribe((response) => {
       if (response.status > 399) {
         alert('Fehler');
       } else {
         this.tasks.push(...response.body);
       }
     });
+    backendService.getAllStatus().subscribe((response) => {
+      if (response.status > 399) {
+        alert('Fehler');
+      } else {
+        this.status.push(...response.body);
+      }
+    });
+    backendService.getCategories().subscribe((response) => {
+      if (response.status > 399) {
+        alert('Fehler');
+      } else {
+        this.categories.push(...response.body);
+      }
+    });
   }
 
   private applyFilterParameters(params: ParamMap) {
@@ -52,7 +81,7 @@ export class UserstoryTableComponent extends TableComponentBase<ScrumUserstory>
   }
 
   public deleteUserstory(userstory: ScrumUserstory) {
-    this.backendService.deleteUserstory(userstory).subscribe(response => {
+    this.backendService.deleteUserstory(userstory).subscribe((response) => {
       if (response.status > 399) {
         alert('Fehler');
       }
@@ -69,7 +98,7 @@ export class UserstoryTableComponent extends TableComponentBase<ScrumUserstory>
       keyboard: true,
     });
     if (editUserstory === null) {
-      modalRef.result.then(result => {
+      modalRef.result.then((result) => {
         this.items.push(result);
       });
     }
@@ -77,29 +106,45 @@ export class UserstoryTableComponent extends TableComponentBase<ScrumUserstory>
   }
 
   public getNumberOfTasks(userstory: ScrumUserstory) {
-    return this.tasks.filter(t => t.userstoryid === userstory.id).length;
+    return this.tasks.filter((t) => t.userstoryid === userstory.id).length;
   }
 
   public sortById() {
-    this.doNumericSort('id', us => us.id);
+    this.doNumericSort('id', (us) => us.id);
   }
 
   public sortByTitle() {
-    this.doStringSort('title', us => us.title);
+    this.doStringSort('title', (us) => us.title);
   }
 
   public sortByPrio() {
-    this.doNumericSort('priority', us => getNumberForPriority(us.priority));
+    this.doNumericSort('priority', (us) => getNumberForPriority(us.priority));
   }
 
   public sortByTasks() {
-    this.doNumericSort('tasks', us => this.getNumberOfTasks(us));
+    this.doNumericSort('tasks', (us) => this.getNumberOfTasks(us));
   }
 
   sortByStatus() {
-    this.doNumericSort('statusid', us => us.statusid);
+    this.doNumericSort('statusid', (us) => us.statusid);
   }
   sortByCategory() {
-    this.doNumericSort('categoryid', us => us.categoryid);
+    this.doNumericSort('categoryid', (us) => us.categoryid);
+  }
+
+  getStatusTitleById(id) {
+    var status = this.status.find((x) => x.id === id);
+    if (!status) {
+      return 'N/A';
+    }
+    return status.title;
+  }
+
+  getCategoryTitleById(id) {
+    var category = this.categories.find((x) => x.id === id);
+    if (!category) {
+      return 'N/A';
+    }
+    return category.title;
   }
 }