niggl/srumboard_frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added displaying the actual names of users, status and categories

Browse Source
This commit is contained in:
Nicolai Ort
2020-06-29 19:02:46 +02:00
parent e009ac1386
commit 0abe948da6
4 changed files with 264 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

217
src/app/task-table/task-table.component.html
View File

@@ -1,114 +1,113 @@
<div class="mx-5 my-3">
<h3 class="my-1">
<a
*ngIf="filterUserstoryId"
[routerLink]="['/userstories', {id: filterUserstoryId}]"
>
Userstory #{{filterUserstoryId}} &gt;
</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>
<table class="table">
<thead>
<tr>
<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()" 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)="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)="sortByStatus()" class="sortable">
<span>Status</span>
<span *ngIf="sortBy === 'statusid'" class="pl-3">
<span *ngIf="sortDescending">▲</span>
<span *ngIf="sortDescending === false">▼</span>
</span>
</th>
<th (click)="sortByPrio()" class="sortable">
<span>Priorität</span>
<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>
</th>
<th (click)="sortByAssigned()" class="sortable">
<span>Assigned To</span>
<span *ngIf="sortBy === 'assignedtoid'" class="pl-3">
<span *ngIf="sortDescending">▲</span>
<span *ngIf="sortDescending === false">▼</span>
</span>
</th>
<th (click)="sortByCategory()" class="sortable">
<span>Category</span>
<span *ngIf="sortBy === 'categoryid'" 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" [class.table-info]="task.id === highlightId">
<td>{{task.id}}</td>
<td>{{task.title}}</td>
<td>
<a [routerLink]="['/userstories', {id: task.userstoryid}]">
US #{{task.userstoryid}}
<h3 class="my-1">
<a *ngIf="filterUserstoryId" [routerLink]="['/userstories', {id: filterUserstoryId}]">
Userstory #{{filterUserstoryId}}
&gt;
</a>
</td>
<td>
<a [routerLink]="['/status', {id: task.statusid}]">
Status: {{task.statusid}}
</a>
</td>
<td>{{task.priority}}</td>
<td>
<a [routerLink]="['/users', {id: task.assignedtoid}]">
User: {{task.assignedtoid}}
</a>
</td>
<td>
<a [routerLink]="['/categories', {id: task.categoryid}]">
Category: {{task.categoryid}}
</a>
</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>
Tasks
</h3>
<div *ngIf="filterUserstoryId">
<a [routerLink]="'/tasks'">Alle Tasks anzeigen</a>
</div>
</table>
<button class="btn btn-secondary my-3" (click)="openTaskForm()">Neuer Task</button>
<table class="table">
<thead>
<tr>
<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()" 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)="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)="sortByStatus()" class="sortable">
<span>Status</span>
<span *ngIf="sortBy === 'statusid'" class="pl-3">
<span *ngIf="sortDescending">▲</span>
<span *ngIf="sortDescending === false">▼</span>
</span>
</th>
<th (click)="sortByPrio()" class="sortable">
<span>Priorität</span>
<label class="pl-3" (click)="$event.stopPropagation()">
<select [(ngModel)]="filterPriority">
<option [ngValue]="null" selected="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>
</th>
<th (click)="sortByAssigned()" class="sortable">
<span>Assigned To</span>
<span *ngIf="sortBy === 'assignedtoid'" class="pl-3">
<span *ngIf="sortDescending">▲</span>
<span *ngIf="sortDescending === false">▼</span>
</span>
</th>
<th (click)="sortByCategory()" class="sortable">
<span>Category</span>
<span *ngIf="sortBy === 'categoryid'" 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" [class.table-info]="task.id === highlightId">
<td>{{task.id}}</td>
<td>{{task.title}}</td>
<td>
<a [routerLink]="['/userstories', {id: task.userstoryid}]">
US #{{task.userstoryid}}
</a>
</td>
<td>
<a [routerLink]="['/status', {id: task.statusid}]">
{{getStatusTitleById(task.statusid)}}
</a>
</td>
<td>{{task.priority}}</td>
<td>
<a [routerLink]="['/users', {id: task.assignedtoid}]">
{{getUserNameById(task.assignedtoid)}}
</a>
</td>
<td>
<a [routerLink]="['/categories', {id: task.categoryid}]">
{{getCategoryTitleById(task.categoryid)}}
</a>
</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>

110
src/app/task-table/task-table.component.ts
View File

@@ -1,44 +1,78 @@
import {Component} from '@angular/core';
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, ParamMap, Router} from '@angular/router';
import {getNumberForPriority} from '../services/sorting.service';
import { Component } from '@angular/core';
import {
BackendService,
ScrumTask,
ScrumStatus,
ScrumUser,
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 =>
(this.filterUserstoryId === null || task.userstoryid === this.filterUserstoryId)
&& (this.filterPriority === null || task.priority === this.filterPriority)
return this.items.filter(
(task) =>
(this.filterUserstoryId === null ||
task.userstoryid === this.filterUserstoryId) &&
(this.filterPriority === null || task.priority === this.filterPriority)
);
}
constructor(
private backendService: BackendService, private modalService: NgbModal,
private route: ActivatedRoute, private router: Router
private backendService: BackendService,
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;
}
}

4
src/app/userstory-table/userstory-table.component.html
View File

@@ -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>

93
src/app/userstory-table/userstory-table.component.ts
View File

@@ -1,48 +1,77 @@
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, ParamMap, Router} from '@angular/router';
import { Component } from '@angular/core';
import {
BackendService,
ScrumTask,
ScrumUserstory,
ScrumStatus,
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 route: ActivatedRoute, private router: Router
private backendService: BackendService,
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;
}
}