diff --git a/src/app/services/table-component.base.ts b/src/app/services/table-component.base.ts index 4e22e3f..d62d356 100644 --- a/src/app/services/table-component.base.ts +++ b/src/app/services/table-component.base.ts @@ -1,33 +1,38 @@ import {sortByNumberAscending, sortByStringAscending} from './sorting.service'; +import {Priority} from './backend.service'; export abstract class TableComponentBase { - public sortBy: string; - public sortDescending = false; - public items: 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 doNumericSort(by: string, key: (item: T) => number) { + if (this.sortBy === by) { + this.sortDescending = !this.sortDescending; + } else { + this.sortBy = by; } - 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(); - } + this.items = sortByNumberAscending(this.items, key); + if (this.sortDescending) { + this.items = this.items.reverse(); } + } + + protected doStringSort(by: string, key: (item: T) => 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(); + } + } + + public getAllPriorities(): string[] { + return Object.values(Priority); + } } diff --git a/src/app/task-table/task-table.component.css b/src/app/task-table/task-table.component.css index c1ce646..a7c065c 100644 --- a/src/app/task-table/task-table.component.css +++ b/src/app/task-table/task-table.component.css @@ -2,3 +2,6 @@ table { table-layout: fixed; } +th.sortable:hover { + text-decoration: underline; +} diff --git a/src/app/task-table/task-table.component.html b/src/app/task-table/task-table.component.html index 4a2df3e..09f9851 100644 --- a/src/app/task-table/task-table.component.html +++ b/src/app/task-table/task-table.component.html @@ -9,6 +9,9 @@ Tasks +
+ Alle Tasks anzeigen +
@@ -16,37 +19,43 @@ - + ID - + Titel - + Inhalt - - Tasks - + + Userstory + - + Priorität - + + @@ -56,7 +65,7 @@ - + {{task.id}} {{task.title}} {{task.content}} diff --git a/src/app/task-table/task-table.component.ts b/src/app/task-table/task-table.component.ts index c4d7434..8de5b15 100644 --- a/src/app/task-table/task-table.component.ts +++ b/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 { 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 { ) { 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 { }); } + 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 { } 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); } } diff --git a/src/app/userstory-table/userstory-table.component.css b/src/app/userstory-table/userstory-table.component.css index c1ce646..a7c065c 100644 --- a/src/app/userstory-table/userstory-table.component.css +++ b/src/app/userstory-table/userstory-table.component.css @@ -2,3 +2,6 @@ table { table-layout: fixed; } +th.sortable:hover { + text-decoration: underline; +} diff --git a/src/app/userstory-table/userstory-table.component.html b/src/app/userstory-table/userstory-table.component.html index 4dfcdff..dfa125a 100644 --- a/src/app/userstory-table/userstory-table.component.html +++ b/src/app/userstory-table/userstory-table.component.html @@ -8,36 +8,42 @@ - + ID - + Titel - + Inhalt - + Tasks - + Priorität + @@ -48,7 +54,7 @@ - + {{userstory.id}} {{userstory.title}} {{userstory.content}} diff --git a/src/app/userstory-table/userstory-table.component.ts b/src/app/userstory-table/userstory-table.component.ts index 7d03e10..dd86eff 100644 --- a/src/app/userstory-table/userstory-table.component.ts +++ b/src/app/userstory-table/userstory-table.component.ts @@ -4,7 +4,7 @@ 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'; +import {ActivatedRoute, ParamMap, Router} from '@angular/router'; @Component({ selector: 'app-userstory-table', @@ -13,6 +13,12 @@ import {ActivatedRoute, Router} from '@angular/router'; }) export class UserstoryTableComponent extends TableComponentBase { public tasks: ScrumTask[] = []; + public filterPriority: string | null = null; + public highlightId: number; + + public get filteredItems() { + return this.items.filter(task => this.filterPriority === null || task.priority === this.filterPriority); + } constructor( private backendService: BackendService, private modalService: NgbModal, @@ -20,19 +26,14 @@ export class UserstoryTableComponent extends TableComponentBase ) { super(); - const params = route.snapshot.paramMap; + this.applyFilterParameters(this.route.snapshot.paramMap); + this.route.paramMap.subscribe(map => this.applyFilterParameters(map)); 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 => { @@ -44,12 +45,10 @@ export class UserstoryTableComponent extends TableComponentBase }); } - private findUserstoryById(id: number): ScrumUserstory { - const userstoriesWithId = this.items.filter(us => us.id === id); - if (userstoriesWithId.length === 0) { - return null; + private applyFilterParameters(params: ParamMap) { + if (params.has('id')) { + this.highlightId = parseInt(params.get('id')); } - return userstoriesWithId[0]; } public deleteUserstory(userstory: ScrumUserstory) {