diff --git a/package.json b/package.json index 37c9287..c8a6295 100644 --- a/package.json +++ b/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" +} diff --git a/src/app/userstory-inner-table/userstory-inner-table.component.css b/src/app/userstory-inner-table/userstory-inner-table.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/userstory-inner-table/userstory-inner-table.component.html b/src/app/userstory-inner-table/userstory-inner-table.component.html new file mode 100644 index 0000000..2706790 --- /dev/null +++ b/src/app/userstory-inner-table/userstory-inner-table.component.html @@ -0,0 +1,90 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ID + + + + + + Titel + + + + + + Tasks + + + + + + Status + + + + + + Priorität + + + + + + + Category + + + + +
{{userstory.id}}{{userstory.title}} + + {{getNumberOfTasks(userstory)}} Tasks + + + + {{getStatusTitleById(userstory.statusid)}} + + {{userstory.priority}} + + {{getCategoryTitleById(userstory.categoryid)}} + + + + +
\ No newline at end of file diff --git a/src/app/userstory-inner-table/userstory-inner-table.component.ts b/src/app/userstory-inner-table/userstory-inner-table.component.ts new file mode 100644 index 0000000..3430dc0 --- /dev/null +++ b/src/app/userstory-inner-table/userstory-inner-table.component.ts @@ -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 { + 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; + } +} diff --git a/src/styles.css b/src/styles.css index 83bbb38..e6b67d8 100644 --- a/src/styles.css +++ b/src/styles.css @@ -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; + }