Merge branch 'feature/backlog' into refactor/tabels
This commit is contained in:
commit
275910ac05
@ -4,7 +4,7 @@ import { DashboardComponent } from './components/dashboard/dashboard.component';
|
||||
import { UserstoryTableComponent } from './components/tabels/userstory/userstory-table.component';
|
||||
import { TaskTableComponent } from './components/tabels/task/task-table.component';
|
||||
import { SprintTableComponent } from './components/tabels/sprint/sprint-table.component';
|
||||
import {BacklogComponent} from './components/backlog-table/backlog.component';
|
||||
import {BacklogComponent} from './components/backlog/backlog.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: 'tasks', component: TaskTableComponent },
|
||||
|
||||
@ -16,7 +16,7 @@ import { TaskTableComponent } from './components/tabels/task/task-table.componen
|
||||
import { SprintTableComponent } from './components/tabels/sprint/sprint-table.component';
|
||||
import { DashboardComponent } from './components/dashboard/dashboard.component';
|
||||
import { UserstoryInnerTableComponent } from './components/userstory-inner-table/userstory-inner-table.component';
|
||||
import { BacklogComponent } from './components/backlog-table/backlog.component';
|
||||
import { BacklogComponent } from './components/backlog/backlog.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
|
||||
@ -1,62 +0,0 @@
|
||||
<div class="container-fluid">
|
||||
<div class="content">
|
||||
|
||||
<h3>Backlog</h3>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 container-fluid">
|
||||
</div>
|
||||
<div align="right" class="col-lg-6 container-fluid">
|
||||
<button class="btn btn-secondary" (click)="openSprintForm()">Neuer Sprint</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 container-fluid">
|
||||
<h4>Backlog</h4>
|
||||
<div *ngFor="let story of backlog" class="col-lg-6 container-fluid">
|
||||
<div class="card" style="width: 150%;">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">{{story.title}}</h4>
|
||||
<h6 class="card-subtitle mb-2 text-muted">Prio: {{story.priority}}</h6>
|
||||
<p class="card-text">{{story.content}}</p>
|
||||
<div title="Badges">
|
||||
<span class="badge badge-primary">Category: {{story.categoryid || "N/A"}}</span>
|
||||
<span class="badge badge-info">Status: {{story.statusid || "N/A"}}</span>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<button type="button" rel="tooltip" (click)="addToSprintBacklog(story)"
|
||||
class="btn btn-sm btn-success btn-icon">
|
||||
<i class="fas fa-plus-square"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
|
||||
<div class="col-lg-6 container-fluid">
|
||||
|
||||
<h4>Sprint-Backlog - Aktueller Sprint: {{this.currentSprint.title}}</h4>
|
||||
<div *ngFor="let story of choosen" class="col-lg-6 container-fluid">
|
||||
<div class="card" style="width: 150%;">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">{{story.title}}</h4>
|
||||
<h6 class="card-subtitle mb-2 text-muted">Prio: {{story.priority}}</h6>
|
||||
<p class="card-text">{{story.content}}</p>
|
||||
<div title="Badges">
|
||||
<span class="badge badge-primary">Category: {{story.categoryid || "N/A"}}</span>
|
||||
<span class="badge badge-info">Status: {{story.statusid || "N/A"}}</span>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<button type="button" rel="tooltip" (click)="deleteFromSprintBacklog(story)"
|
||||
class="btn btn-danger btn-sm btn-icon">
|
||||
<i class="fa fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,160 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import {
|
||||
BackendService,
|
||||
ScrumTask,
|
||||
ScrumUserstory,
|
||||
ScrumStatus,
|
||||
ScrumCategory,
|
||||
ScrumSprint,
|
||||
} 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 } from '@angular/router';
|
||||
import { SprintFormComponent } from '../sprint-form/sprint-form.component';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-backlog',
|
||||
templateUrl: './backlog.component.html',
|
||||
styleUrls: ['./backlog.component.css'],
|
||||
})
|
||||
export class BacklogComponent extends TableComponentBase<
|
||||
ScrumUserstory
|
||||
> {
|
||||
public tasks: ScrumTask[] = [];
|
||||
public filterPriority: string | null = null;
|
||||
public status: ScrumStatus[] = [];
|
||||
public categories: ScrumCategory[] = [];
|
||||
public sprints: ScrumSprint[] = [];
|
||||
|
||||
public backlog: ScrumUserstory[] = [];
|
||||
public choosen: ScrumUserstory[] = [];
|
||||
|
||||
constructor(
|
||||
private backendService: BackendService,
|
||||
private modalService: NgbModal,
|
||||
private route: ActivatedRoute,
|
||||
) {
|
||||
super();
|
||||
backendService.getSprints().subscribe((response) => {
|
||||
if (response.status > 399) {
|
||||
alert('Fehler');
|
||||
} else {
|
||||
this.sprints.push(...response.body);
|
||||
}
|
||||
});
|
||||
backendService.getUserstories().subscribe((response) => {
|
||||
if (response.status > 399) {
|
||||
alert('Fehler');
|
||||
} else {
|
||||
this.backlog = response.body.filter(u => u.sprintid == null);
|
||||
this.choosen = response.body.filter(u => u.sprintid == this.currentSprint.id);
|
||||
}
|
||||
});
|
||||
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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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,
|
||||
size: 'lg'
|
||||
});
|
||||
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;
|
||||
}
|
||||
|
||||
getCategoryTitleById(id) {
|
||||
var category = this.categories.find((x) => x.id === id);
|
||||
if (!category) {
|
||||
return 'N/A';
|
||||
}
|
||||
return category.title;
|
||||
}
|
||||
|
||||
// Sprint-Backlog
|
||||
|
||||
public addToSprintBacklog(userstory: ScrumUserstory) {
|
||||
this.choosen.push(userstory);
|
||||
const index = this.backlog.indexOf(userstory);
|
||||
this.backlog.splice(index, 1);
|
||||
userstory.sprintid = this.currentSprint.id;
|
||||
this.backendService.putUserstory(userstory).subscribe((response) => {
|
||||
if (response.status > 399) {
|
||||
alert('Fehler');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public deleteFromSprintBacklog(userstory: ScrumUserstory){
|
||||
const index = this.choosen.indexOf(userstory);
|
||||
this.choosen.splice(index, 1);
|
||||
this.backlog.push(userstory)
|
||||
userstory.sprintid = null;
|
||||
this.backendService.putUserstory(userstory).subscribe((response) => {
|
||||
if (response.status > 399) {
|
||||
alert('Fehler');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public get currentSprint(): ScrumSprint {
|
||||
const now = Date.now();
|
||||
return this.sprints.find(s => Date.parse(s.startDate) < now && Date.parse(s.endDate) > now);
|
||||
}
|
||||
|
||||
public openSprintForm(editSprint?: ScrumSprint) {
|
||||
const modalRef = this.modalService.open(SprintFormComponent, {
|
||||
backdrop: 'static',
|
||||
keyboard: true,
|
||||
});
|
||||
if (editSprint === null) {
|
||||
modalRef.result.then(result => {
|
||||
this.items.push(result);
|
||||
});
|
||||
}
|
||||
modalRef.componentInstance.sprint = editSprint;
|
||||
}
|
||||
}
|
||||
97
src/app/components/backlog/backlog.component.html
Normal file
97
src/app/components/backlog/backlog.component.html
Normal file
@ -0,0 +1,97 @@
|
||||
<div class="container-fluid">
|
||||
<div class="content">
|
||||
<h3>Backlog</h3>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 container-fluid"></div>
|
||||
<div align="right" class="col-lg-6 container-fluid">
|
||||
<button class="btn btn-secondary" (click)="openSprintForm()">Neuer Sprint</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<h3>Backlog</h3>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="row px-3 py-2">
|
||||
<ng-container *ngIf="selectedSprint === undefined">
|
||||
<h3>
|
||||
Aktuell läuft kein Sprint.
|
||||
<a [routerLink]="['../sprints']">Zur Sprint Übersicht</a>
|
||||
</h3>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="selectedSprint != undefined">
|
||||
<h3 *ngIf="selectedSprint === currentSprint">Aktueller Sprint:</h3>
|
||||
<h3 *ngIf="selectedSprint !== currentSprint">Sprint:</h3>
|
||||
<div ngbDropdown="ngbDropdown" class="dropdown">
|
||||
<button ngbDropdownToggle="ngbDropdownToggle" class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
{{selectedSprint.title}}
|
||||
({{toDateString(selectedSprint.startDate)}}
|
||||
-
|
||||
{{toDateString(selectedSprint.endDate)}})
|
||||
</button>
|
||||
<div ngbDropdownMenu="ngbDropdownMenu" class="dropdown-menu" aria-labelledby="dropdownMenu2">
|
||||
<option ngbDropdownItem="ngbDropdownItem" *ngFor="let s of sprints" (click)="this.selectedSprint = s;">
|
||||
{{s.title}}
|
||||
({{toDateString(selectedSprint.startDate)}}
|
||||
-
|
||||
{{toDateString(selectedSprint.endDate)}})
|
||||
</option>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6 container-fluid">
|
||||
<div *ngFor="let story of backlog" class="col-lg-6 container-fluid">
|
||||
<div class="card" style="width: 150%;">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">{{story.title}}</h4>
|
||||
<h6 class="card-subtitle mb-2 text-muted">Prio:
|
||||
{{story.priority}}</h6>
|
||||
<p class="card-text">{{story.content}}</p>
|
||||
<div title="Badges">
|
||||
<span class="badge badge-primary">Category:
|
||||
{{story.categoryid || "N/A"}}</span>
|
||||
<span class="badge badge-info">Status:
|
||||
{{story.statusid || "N/A"}}</span>
|
||||
</div>
|
||||
<div style="text-align: right;" *ngIf="selectedSprint != undefined">
|
||||
<button type="button" rel="tooltip" (click)="addToSprintBacklog(story)" class="btn btn-sm btn-success btn-icon">
|
||||
<i class="fas fa-plus-square"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 container-fluid">
|
||||
<div *ngFor="let story of choosen" class="col-lg-6 container-fluid">
|
||||
<div class="card" style="width: 150%;">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">{{story.title}}</h4>
|
||||
<h6 class="card-subtitle mb-2 text-muted">Prio:
|
||||
{{story.priority}}</h6>
|
||||
<p class="card-text">{{story.content}}</p>
|
||||
<div title="Badges">
|
||||
<span class="badge badge-primary">Category:
|
||||
{{story.categoryid || "N/A"}}</span>
|
||||
<span class="badge badge-info">Status:
|
||||
{{story.statusid || "N/A"}}</span>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<button type="button" rel="tooltip" (click)="deleteFromSprintBacklog(story)" class="btn btn-danger btn-sm btn-icon">
|
||||
<i class="fa fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
156
src/app/components/backlog/backlog.component.ts
Normal file
156
src/app/components/backlog/backlog.component.ts
Normal file
@ -0,0 +1,156 @@
|
||||
import { Component } from '@angular/core';
|
||||
import {
|
||||
BackendService,
|
||||
ScrumUserstory,
|
||||
ScrumStatus,
|
||||
ScrumCategory,
|
||||
ScrumSprint,
|
||||
} from '../../services/backend.service';
|
||||
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { SprintFormComponent } from '../sprint-form/sprint-form.component';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-backlog',
|
||||
templateUrl: './backlog.component.html',
|
||||
styleUrls: ['./backlog.component.css'],
|
||||
})
|
||||
|
||||
|
||||
export class BacklogComponent{
|
||||
public status: ScrumStatus[] = [];
|
||||
public categories: ScrumCategory[] = [];
|
||||
public sprints: ScrumSprint[] = [];
|
||||
public storys: ScrumUserstory[] = [];
|
||||
public selectedSprint: ScrumSprint;
|
||||
|
||||
/**
|
||||
* Constructor of the class that initialized the communication with the backend
|
||||
* @param backendService
|
||||
* @param modalService
|
||||
*/
|
||||
constructor(
|
||||
private backendService: BackendService,
|
||||
private modalService: NgbModal,
|
||||
) {
|
||||
backendService.getSprints().subscribe((response) => {
|
||||
if (response.status > 399) {
|
||||
alert('Fehler');
|
||||
} else {
|
||||
this.sprints.push(...response.body);
|
||||
this.selectedSprint = this.currentSprint;
|
||||
}
|
||||
});
|
||||
backendService.getUserstories().subscribe((response) => {
|
||||
if (response.status > 399) {
|
||||
alert('Fehler');
|
||||
} else {
|
||||
this.storys.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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Formats an ISO DateString to a simple date string in the format "DD.MM.YYYY"
|
||||
* @param isoFormatString date formatted as an ISO DateString (Date objects get converted implicitly)
|
||||
*/
|
||||
public toDateString(isoFormatString) {
|
||||
const date = new Date(isoFormatString);
|
||||
return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`;
|
||||
}
|
||||
|
||||
//#region getters
|
||||
|
||||
/**
|
||||
* Getter that returns an array with all userstories that are in the currently selected sprint.
|
||||
* The relation to the sprint is determined by the userstory's sprintid.
|
||||
* If no sprint is selected it just returns an empty array.
|
||||
*/
|
||||
public get choosen(): ScrumUserstory[]
|
||||
{
|
||||
if(this.selectedSprint === undefined){return null;}
|
||||
return this.storys.filter(u => u.sprintid == this.selectedSprint.id);
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter that returns an array with all userstories that aren't in any sprint.
|
||||
* The relation to no sprint is determined by the userstory's sprintid being undefined.
|
||||
*/
|
||||
public get backlog(): ScrumUserstory[]
|
||||
{
|
||||
return this.storys.filter(u => u.sprintid === undefined);
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter that returns the current sprint.
|
||||
* The current sprint is selected by determining if todays date is between the startDate and the endDate of the sprint.
|
||||
*/
|
||||
public get currentSprint(): ScrumSprint {
|
||||
const now = Date.now();
|
||||
return this.sprints.find(s => Date.parse(s.startDate) < now && Date.parse(s.endDate) > now);
|
||||
}
|
||||
|
||||
//#endregion getters
|
||||
|
||||
//#region backlogFunctions
|
||||
|
||||
/**
|
||||
* Adds a userstory to the currently selected sprint by changing it's sprintid to the current sprint's id
|
||||
* @param userstory userstory object that shall be added to the selected sprint's backlog
|
||||
*/
|
||||
public addToSprintBacklog(userstory: ScrumUserstory) {
|
||||
userstory.sprintid = this.selectedSprint.id;
|
||||
this.backendService.putUserstory(userstory).subscribe((response) => {
|
||||
if (response.status > 399) {
|
||||
alert('Fehler');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Deletes a userstory from the currently selected sprint by changing it's sprintid to undefined
|
||||
* @param userstory userstory object that shall be removed from the selected sprint's backlog
|
||||
*/
|
||||
public deleteFromSprintBacklog(userstory: ScrumUserstory){
|
||||
userstory.sprintid = undefined;
|
||||
this.backendService.putUserstory(userstory).subscribe((response) => {
|
||||
if (response.status > 399) {
|
||||
alert('Fehler');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//#endregion backlogFunctions
|
||||
|
||||
//#region modals
|
||||
/**
|
||||
* Opens the SprintForm Modal to let the user create a new sprint.
|
||||
* The created sprint get pushed to the database and the local sprints array.
|
||||
*/
|
||||
public openSprintForm() {
|
||||
const modalRef = this.modalService.open(SprintFormComponent, {
|
||||
backdrop: 'static',
|
||||
keyboard: true,
|
||||
size: "md",
|
||||
});
|
||||
|
||||
modalRef.result.then(result => {
|
||||
this.sprints.push(result);
|
||||
});
|
||||
}
|
||||
//#endregion modals
|
||||
}
|
||||
@ -32,18 +32,22 @@
|
||||
<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 class="sortable">
|
||||
<div class="d-inline-block">
|
||||
<span (click)="sortByPrio()">Priorität: </span>
|
||||
<div ngbDropdown class="d-inline-block">
|
||||
<span id="dropdownBasic1" ngbDropdownToggle>{{filterPriority || "All"}}</span>
|
||||
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
|
||||
<option ngbDropdownItem (click)="filterPriority=null">All</option>
|
||||
<option ngbDropdownItem *ngFor="let p of getAllPriorities()" (click)="filterPriority=p">{{p}}</option>
|
||||
</div>
|
||||
</div>
|
||||
<span (click)="sortByPrio()">
|
||||
<span *ngIf="sortBy != 'priority'"><i class="fa fa-sort fa-lg"></i></span>
|
||||
<span *ngIf="sortDescending && sortBy === 'priority'"><i class="fa fa-sort-up fa-lg"></i></span>
|
||||
<span *ngIf="sortDescending === false && sortBy === 'priority'"><i class="fa fa-sort-down fa-lg"></i></span>
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
<th (click)="sortByCategory()" class="sortable">
|
||||
<span>Category</span>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user