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

src/app/app-routing.module.ts

@@ -1,13 +1,13 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { TaskListComponent } from './task-list/task-list.component';
-import { UserstoryListComponent } from './userstory-list/userstory-list.component';
+import {UserstoryTableComponent} from './userstory-table/userstory-table.component';
+import {TaskTableComponent} from './task-table/task-table.component';
 
 
 const routes: Routes = [
-  { path: 'tasks', component: TaskListComponent },
-  { path: 'userstories', component: UserstoryListComponent },
+  { path: 'tasks', component: TaskTableComponent },
+  { path: 'userstories', component: UserstoryTableComponent },
   { path: '', redirectTo: '/tasks', pathMatch: 'full' },
 ];
 

src/app/app.module.ts

@@ -7,19 +7,20 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
 import { BackendService } from './services/backend.service';
-import { TaskListComponent } from './task-list/task-list.component';
 import { TaskFormComponent } from './task-form/task-form.component';
-import { UserstoryListComponent } from './userstory-list/userstory-list.component';
 import { UserstoryFormComponent } from './userstory-form/userstory-form.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { UserstoryTableComponent } from './userstory-table/userstory-table.component';
+import { TaskTableComponent } from './task-table/task-table.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    TaskListComponent,
+    TaskTableComponent,
     TaskFormComponent,
-    UserstoryListComponent,
-    UserstoryFormComponent
+    UserstoryTableComponent,
+    UserstoryFormComponent,
+    UserstoryTableComponent
   ],
   imports: [
     BrowserModule,

src/app/services/backend.service.ts

@@ -209,12 +209,12 @@ export interface ScrumTask {
     id?: number;
     title: string;
     content?: string;
-    status?: number;
-    category?: number;
-    assignedto?: number;
-    sprint?: number;
-    project?: number;
-    userstory?: number;
+    statusid?: number;
+    categoryid?: number;
+    assignedtoid?: number;
+    sprintid?: number;
+    projectid?: number;
+    userstoryid?: number;
     priority?: Priority;
 }
 
@@ -223,10 +223,10 @@ export interface ScrumUserstory {
     title: string;
     content?: string;
     priority?: Priority;
-    status?: number;
-    category?: number;
-    createdby?: number;
-    project?: number;
+    statusid?: number;
+    categoryid?: number;
+    createdbyid?: number;
+    projectid?: number;
 }
 
 export interface ScrumSprint{

src/app/services/sorting.service.ts

@@ -0,0 +1,20 @@
+import {Priority} from './backend.service';
+
+export function sortByNumberAscending<T>(items: T[], key: (T) => number) {
+  return items.sort((a, b) => key(a) - key(b));
+}
+
+export function sortByStringAscending<T>(items: T[], key: (T) => string) {
+  return items.sort((a, b) => key(a).localeCompare(key(b)));
+}
+
+export function getNumberForPriority(priority: Priority): number {
+  switch (priority) {
+    case Priority.High:
+      return 2;
+    case Priority.Medium:
+      return 1;
+    case Priority.Low:
+      return 0;
+  }
+};

src/app/services/table-component.base.ts

@@ -0,0 +1,33 @@
+import {sortByNumberAscending, sortByStringAscending} from './sorting.service';
+
+export abstract class TableComponentBase<T> {
+    public sortBy: string;
+    public sortDescending = false;
+    public items: T[] = [];
+
+    protected doNumericSort(by: string, key: (ScrumTask) => number) {
+        if (this.sortBy === by) {
+            this.sortDescending = !this.sortDescending;
+        } else {
+            this.sortBy = by;
+        }
+
+        this.items = sortByNumberAscending(this.items, key);
+        if (this.sortDescending) {
+            this.items = this.items.reverse();
+        }
+    }
+
+    protected doStringSort(by: string, key: (ScrumTask) => string) {
+        if (this.sortBy === by) {
+            this.sortDescending = !this.sortDescending;
+        } else {
+            this.sortBy = by;
+        }
+
+        this.items = sortByStringAscending(this.items, key);
+        if (this.sortDescending) {
+            this.items = this.items.reverse();
+        }
+    }
+}

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

@@ -1,14 +0,0 @@
-<button class="btn btn-dark m-3" (click)="openTaskForm(null)">Neu</button>
-
-<ul class="list-group m-3">
-    <li *ngFor="let task of tasks" class="list-group-item">
-        <span>Titel: {{task.title}}</span>
-        <br/>
-        <span>Inhalt: {{task.content}}</span>
-        <br/>
-        <span>Priotität: {{task.priority}}</span>
-        <br>
-        <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>
-    </li>
-</ul>

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

@@ -1,54 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { BackendService, ScrumTask } from '../services/backend.service';
-import { TaskFormComponent } from '../task-form/task-form.component';
-
-@Component({
-  selector: 'app-task-list',
-  templateUrl: './task-list.component.html',
-  styleUrls: ['./task-list.component.css']
-})
-export class TaskListComponent implements OnInit {
-
-  public tasks: ScrumTask[] = [];
-
-  constructor(private backendService: BackendService, private modalService: NgbModal) { 
-      backendService.getTasks().subscribe(response => {
-          if (response.status > 399) {
-              alert('Fehler');
-          }
-          else {
-              this.tasks.push(...response.body);
-          }
-      });
-  }
-
-  ngOnInit(): void {
-  }
-
-  public deleteTask(task: ScrumTask) {
-    this.backendService.deleteTask(task).subscribe(response => {
-      if (response.status > 399) {
-        alert('Fehler');
-      }
-    });
-    const index = this.tasks.indexOf(task);
-    if (index !== -1) {
-      this.tasks.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.tasks.push(result);
-          });
-      }
-    modalRef.componentInstance.task = editTask;
-  }
-
-}

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));
+  }
+}

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

@@ -1,14 +0,0 @@
-<button class="btn btn-dark m-3" (click)="openUserstoryForm(null)">Neu</button>
-
-<ul class="list-group m-3">
-    <li *ngFor="let userstory of userstories" class="list-group-item">
-        <span>Titel: {{userstory.title}}</span>
-        <br/>
-        <span>Inhalt: {{userstory.content}}</span>
-        <br/>
-        <span>Priotität: {{userstory.priority}}</span>
-        <br>
-        <button class="btn btn-secondary m-2" (click)="openUserstoryForm(userstory)">Bearbeiten</button>
-        <button class="btn btn-secondary m-2" (click)="deleteUserstory(userstory)">Löschen</button>
-    </li>
-</ul>

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

@@ -1,54 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { BackendService, ScrumUserstory } from '../services/backend.service';
-import { UserstoryFormComponent } from '../userstory-form/userstory-form.component';
-
-@Component({
-  selector: 'app-userstory-list',
-  templateUrl: './userstory-list.component.html',
-  styleUrls: ['./userstory-list.component.css']
-})
-export class UserstoryListComponent implements OnInit {
-
-  public userstories: ScrumUserstory[] = [];
-
-  constructor(private backendService: BackendService, private modalService: NgbModal) { 
-      backendService.getUserstories().subscribe(response => {
-          if (response.status > 399) {
-              alert('Fehler');
-          }
-          else {
-              this.userstories.push(...response.body);
-          }
-      });
-  }
-
-  ngOnInit(): void {
-  }
-
-  public deleteUserstory(userstory: ScrumUserstory) {
-    this.backendService.deleteUserstory(userstory).subscribe(response => {
-      if (response.status > 399) {
-        alert('Fehler');
-      }
-    });
-    const index = this.userstories.indexOf(userstory);
-    if (index !== -1) {
-      this.userstories.splice(index, 1);
-    }    
-  }
-
-  public openUserstoryForm(editUserstory: ScrumUserstory) {
-    const modalRef = this.modalService.open(UserstoryFormComponent, {
-      backdrop: 'static',
-      keyboard: true,
-    });
-    if (editUserstory === null) {
-      modalRef.result.then(result => {
-        this.userstories.push(result);
-      });
-    }
-    modalRef.componentInstance.userstory = editUserstory;
-  }
-
-}

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

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

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

@@ -0,0 +1,69 @@
+<div class="mx-5 my-3">
+
+  <h3 class="my-1">Userstories</h3>
+
+  <button class="btn btn-secondary my-3" (click)="openUserstoryForm()">Neue Userstory</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 userstory of items">
+      <td>{{userstory.id}}</td>
+      <td>{{userstory.title}}</td>
+      <td>{{userstory.content}}</td>
+      <td>
+        <a [routerLink]="['/tasks', {userstoryId: userstory.id}]">
+          {{getNumberOfTasks(userstory)}} Tasks
+        </a>
+      </td>
+      <td>{{userstory.priority}}</td>
+      <td>
+        <button class="btn btn-secondary m-2" (click)="openUserstoryForm(userstory)">Bearbeiten</button>
+        <button class="btn btn-secondary m-2" (click)="deleteUserstory(userstory)">Löschen</button>
+      </td>
+    </tr>
+    </tbody>
+
+  </table>
+</div>

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

@@ -0,0 +1,103 @@
+import {Component} from '@angular/core';
+import {BackendService, ScrumTask, ScrumUserstory} 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, Router} from '@angular/router';
+
+@Component({
+  selector: 'app-userstory-table',
+  templateUrl: './userstory-table.component.html',
+  styleUrls: ['./userstory-table.component.css']
+})
+export class UserstoryTableComponent extends TableComponentBase<ScrumUserstory> {
+  public tasks: ScrumTask[] = [];
+
+  constructor(
+    private backendService: BackendService, private modalService: NgbModal,
+    private route: ActivatedRoute, private router: Router
+  ) {
+    super();
+
+    const params = route.snapshot.paramMap;
+
+    backendService.getUserstories().subscribe(response => {
+      if (response.status > 399) {
+        alert('Fehler');
+      } else {
+        this.items.push(...response.body);
+
+        // Wenn  /userstories;id=3  aufgerufen wird, öffne die Userstory mit ID 3
+        const userstory = this.findUserstoryById(parseInt(params.get('id')));
+        if (userstory !== null) {
+          this.openUserstoryForm(userstory);
+        }
+      }
+    });
+    backendService.getTasks().subscribe(response => {
+      if (response.status > 399) {
+        alert('Fehler');
+      } else {
+        this.tasks.push(...response.body);
+      }
+    });
+  }
+
+  private findUserstoryById(id: number): ScrumUserstory {
+    const userstoriesWithId = this.items.filter(us => us.id === id);
+    if (userstoriesWithId.length === 0) {
+      return null;
+    }
+    return userstoriesWithId[0];
+  }
+
+  public deleteUserstory(userstory: ScrumUserstory) {
+    this.backendService.deleteUserstory(userstory).subscribe(response => {
+      if (response.status > 399) {
+        alert('Fehler');
+      }
+    });
+    const index = this.items.indexOf(userstory);
+    if (index !== -1) {
+      this.items.splice(index, 1);
+    }
+  }
+
+  public openUserstoryForm(editUserstory?: ScrumUserstory) {
+    const modalRef = this.modalService.open(UserstoryFormComponent, {
+      backdrop: 'static',
+      keyboard: true,
+    });
+    if (editUserstory === null) {
+      modalRef.result.then(result => {
+        this.items.push(result);
+      });
+    }
+    modalRef.componentInstance.userstory = editUserstory;
+  }
+
+  public getNumberOfTasks(userstory: ScrumUserstory) {
+    return this.tasks.filter(t => t.userstoryid === userstory.id).length;
+  }
+
+  public sortById() {
+    this.doNumericSort('id', us => us.id);
+  }
+
+  public sortByTitle() {
+    this.doStringSort('title', us => us.title);
+  }
+
+  public sortByContent() {
+    this.doStringSort('content', us => us.content);
+  }
+
+  public sortByPrio() {
+    this.doNumericSort('priority', us => getNumberForPriority(us.priority));
+  }
+
+  public sortByTasks() {
+    this.doNumericSort('tasks', us => this.getNumberOfTasks(us));
+  }
+}

src/assets/env.js

@@ -2,6 +2,6 @@
     window["env"] = window["env"] || {};
 
     // Environment variables
-    window["env"]["apiUrl"] = "http://localhost:5001";
+    window["env"]["apiUrl"] = "https://localhost:5001";
     window["env"]["debug"] = false;
   })(this);