Merge branch 'feature/dashboard'
This commit is contained in:
commit
39fcd0f9dc
124
package.json
124
package.json
|
|
@ -1,62 +1,62 @@
|
|||
{
|
||||
"name": "frontend",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"test": "ng test",
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "~9.1.9",
|
||||
"@angular/common": "~9.1.9",
|
||||
"@angular/compiler": "~9.1.9",
|
||||
"@angular/core": "~9.1.9",
|
||||
"@angular/forms": "~9.1.9",
|
||||
"@angular/localize": "~9.1.9",
|
||||
"@angular/platform-browser": "~9.1.9",
|
||||
"@angular/platform-browser-dynamic": "~9.1.9",
|
||||
"@angular/router": "~9.1.9",
|
||||
"@ng-bootstrap/ng-bootstrap": "^6.0.0",
|
||||
"bootstrap": "^4.4.0",
|
||||
"chart.js": "^2.9.3",
|
||||
"component": "^1.1.0",
|
||||
"rxjs": "~6.5.4",
|
||||
"tslib": "^1.10.0",
|
||||
"zone.js": "~0.10.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~0.901.7",
|
||||
"@angular/cli": "~9.1.7",
|
||||
"@angular/compiler-cli": "~9.1.9",
|
||||
"@types/jasmine": "~3.5.0",
|
||||
"@types/jasminewd2": "~2.0.3",
|
||||
"@types/node": "^12.11.1",
|
||||
"codelyzer": "^5.1.2",
|
||||
"jasmine-core": "~3.5.0",
|
||||
"jasmine-spec-reporter": "~4.2.1",
|
||||
"karma": "~5.0.0",
|
||||
"karma-chrome-launcher": "~3.1.0",
|
||||
"karma-coverage-istanbul-reporter": "~2.1.0",
|
||||
"karma-jasmine": "~3.0.1",
|
||||
"karma-jasmine-html-reporter": "^1.4.2",
|
||||
"prettier": "2.0.5",
|
||||
"karma-spec-reporter": "0.0.32",
|
||||
"protractor": "~7.0.0",
|
||||
"puppeteer": "^5.1.0",
|
||||
"ts-node": "~8.3.0",
|
||||
"tslint": "~6.1.0",
|
||||
"typescript": "~3.8.3"
|
||||
},
|
||||
"description": "This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.7.",
|
||||
"main": "karma.conf.js",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://git.informatik.fh-nuernberg.de/scrum-taskboard/frontend.git"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
{
|
||||
"name": "frontend",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"test": "ng test",
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "~9.1.9",
|
||||
"@angular/common": "~9.1.9",
|
||||
"@angular/compiler": "~9.1.9",
|
||||
"@angular/core": "~9.1.9",
|
||||
"@angular/forms": "~9.1.9",
|
||||
"@angular/localize": "~9.1.9",
|
||||
"@angular/platform-browser": "~9.1.9",
|
||||
"@angular/platform-browser-dynamic": "~9.1.9",
|
||||
"@angular/router": "~9.1.9",
|
||||
"@ng-bootstrap/ng-bootstrap": "^6.0.0",
|
||||
"bootstrap": "^4.4.0",
|
||||
"chart.js": "^2.9.3",
|
||||
"component": "^1.1.0",
|
||||
"rxjs": "~6.5.4",
|
||||
"tslib": "^1.10.0",
|
||||
"zone.js": "~0.10.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~0.901.7",
|
||||
"@angular/cli": "~9.1.7",
|
||||
"@angular/compiler-cli": "~9.1.9",
|
||||
"@types/jasmine": "~3.5.0",
|
||||
"@types/jasminewd2": "~2.0.3",
|
||||
"@types/node": "^12.11.1",
|
||||
"codelyzer": "^5.1.2",
|
||||
"jasmine-core": "~3.5.0",
|
||||
"jasmine-spec-reporter": "~4.2.1",
|
||||
"karma": "~5.0.0",
|
||||
"karma-chrome-launcher": "~3.1.0",
|
||||
"karma-coverage-istanbul-reporter": "~2.1.0",
|
||||
"karma-jasmine": "~3.0.1",
|
||||
"karma-jasmine-html-reporter": "^1.4.2",
|
||||
"prettier": "2.0.5",
|
||||
"karma-spec-reporter": "0.0.32",
|
||||
"protractor": "~7.0.0",
|
||||
"puppeteer": "^5.1.0",
|
||||
"ts-node": "~8.3.0",
|
||||
"tslint": "~6.1.0",
|
||||
"typescript": "~3.8.3"
|
||||
},
|
||||
"description": "This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.7.",
|
||||
"main": "karma.conf.js",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://git.informatik.fh-nuernberg.de/scrum-taskboard/frontend.git"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,90 @@
|
|||
<button class="btn btn-secondary my-3" (click)="openUserstoryForm()">Neue Userstory</button>
|
||||
|
||||
<table class="table">
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th (click)="sortById()" class="sortable">
|
||||
<span>ID</span>
|
||||
<span *ngIf="sortBy === 'id'" class="pl-3">
|
||||
<span *ngIf="sortDescending"><i class="fa fa-sort-up"></i></span>
|
||||
<span *ngIf="sortDescending === false"><i class="fa fa-sort-down"></i></span>
|
||||
</span>
|
||||
</th>
|
||||
<th (click)="sortByTitle()" class="sortable">
|
||||
<span>Titel</span>
|
||||
<span *ngIf="sortBy === 'title'" class="pl-3">
|
||||
<span *ngIf="sortDescending"><i class="fa fa-sort-up"></i></span>
|
||||
<span *ngIf="sortDescending === false"><i class="fa fa-sort-down"></i></span>
|
||||
</span>
|
||||
</th>
|
||||
<th (click)="sortByTasks()" class="sortable">
|
||||
<span>Tasks</span>
|
||||
<span *ngIf="sortBy === 'tasks'" class="pl-3">
|
||||
<span *ngIf="sortDescending"><i class="fa fa-sort-up"></i></span>
|
||||
<span *ngIf="sortDescending === false"><i class="fa fa-sort-down"></i></span>
|
||||
</span>
|
||||
</th>
|
||||
<th (click)="sortByStatus()" class="sortable">
|
||||
<span>Status</span>
|
||||
<span *ngIf="sortBy === 'statusid'" class="pl-3">
|
||||
<span *ngIf="sortDescending"><i class="fa fa-sort-up"></i></span>
|
||||
<span *ngIf="sortDescending === false"><i class="fa fa-sort-down"></i></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'" class="pl-3">
|
||||
<span *ngIf="sortDescending"><i class="fa fa-sort-up"></i></span>
|
||||
<span *ngIf="sortDescending === false"><i class="fa fa-sort-down"></i></span>
|
||||
</span>
|
||||
</th>
|
||||
<th (click)="sortByCategory()" class="sortable">
|
||||
<span>Category</span>
|
||||
<span *ngIf="sortBy === 'categoryid'" class="pl-3">
|
||||
<span *ngIf="sortDescending"><i class="fa fa-sort-up"></i></span>
|
||||
<span *ngIf="sortDescending === false"><i class="fa fa-sort-down"></i></span>
|
||||
</span>
|
||||
</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr *ngFor="let userstory of filteredItems" [class.table-info]="userstory.id === highlightId">
|
||||
<td>{{userstory.id}}</td>
|
||||
<td>{{userstory.title}}</td>
|
||||
<td>
|
||||
<a [routerLink]="['/tasks', {userstoryId: userstory.id}]">
|
||||
{{getNumberOfTasks(userstory)}} Tasks
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a [routerLink]="['/status', {id: userstory.statusid}]">
|
||||
{{getStatusTitleById(userstory.statusid)}}
|
||||
</a>
|
||||
</td>
|
||||
<td>{{userstory.priority}}</td>
|
||||
<td>
|
||||
<a [routerLink]="['/categories', {id: userstory.categoryid}]">
|
||||
{{getCategoryTitleById(userstory.categoryid)}}
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<button type="button" rel="tooltip" (click)="openUserstoryForm(userstory)" class="btn btn-success btn-sm btn-icon">
|
||||
<i class="fa fa-pencil-alt"></i>
|
||||
</button>
|
||||
<button type="button" rel="tooltip" (click)="deleteUserstory(userstory)" class="btn btn-danger btn-sm btn-icon">
|
||||
<i class="fa fa-trash"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
import { Component, Input } 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-inner-table',
|
||||
templateUrl: './userstory-inner-table.component.html',
|
||||
styleUrls: ['./userstory-inner-table.component.css']
|
||||
})
|
||||
export class UserstoryInnerTableComponent extends TableComponentBase<ScrumUserstory> {
|
||||
public tasks: ScrumTask[] = [];
|
||||
public filterPriority: string | null = null;
|
||||
public highlightId: number;
|
||||
public status: ScrumStatus[] = [];
|
||||
public categories: ScrumCategory[] = [];
|
||||
|
||||
@Input() public items: ScrumUserstory[] = [];
|
||||
|
||||
public get filteredItems() {
|
||||
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
|
||||
) {
|
||||
super();
|
||||
|
||||
this.applyFilterParameters(this.route.snapshot.paramMap);
|
||||
this.route.paramMap.subscribe((map) => this.applyFilterParameters(map));
|
||||
|
||||
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) {
|
||||
if (params.has('id')) {
|
||||
this.highlightId = parseInt(params.get('id'));
|
||||
}
|
||||
}
|
||||
|
||||
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 sortByPrio() {
|
||||
this.doNumericSort('priority', (us) => getNumberForPriority(us.priority));
|
||||
}
|
||||
|
||||
public sortByTasks() {
|
||||
this.doNumericSort('tasks', (us) => this.getNumberOfTasks(us));
|
||||
}
|
||||
|
||||
sortByStatus() {
|
||||
this.doNumericSort('statusid', (us) => us.statusid);
|
||||
}
|
||||
sortByCategory() {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
/* You can add global styles to this file, and also import other style files */
|
||||
.custom-text-secondary {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.white-content .custom-text-secondary {
|
||||
color: black !important;
|
||||
}
|
||||
color: white;
|
||||
}
|
||||
|
||||
.white-content .custom-text-secondary {
|
||||
color: black !important;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue