Merge branch 'feature/backlog' into refactor/tabels

src/app/app-routing.module.ts

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

src/app/app.module.ts

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

src/app/components/backlog-table/backlog.component.html

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

src/app/components/backlog-table/backlog.component.ts

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

src/app/components/backlog/backlog.component.html

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

src/app/components/backlog/backlog.component.ts

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

src/app/components/userstory-inner-table/userstory-inner-table.component.html

@@ -32,18 +32,22 @@
         <span *ngIf="sortDescending === false"><i class="fa fa-sort-down"></i></span>
         </span>
     </th>
-    <th (click)="sortByPrio()" class="sortable">
+    <th class="sortable">
-        <span>Priorität</span>
+        <div class="d-inline-block">
-        <label class="pl-3" (click)="$event.stopPropagation()">
+            <span (click)="sortByPrio()">Priorität: </span>
-        <select [(ngModel)]="filterPriority">
+            <div ngbDropdown class="d-inline-block">
-            <option [ngValue]="null" selected></option>
+              <span id="dropdownBasic1" ngbDropdownToggle>{{filterPriority || "All"}}</span>
-            <option *ngFor="let p of getAllPriorities()" [ngValue]="p">{{p}}</option>
+              <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
-        </select>
+                <option ngbDropdownItem (click)="filterPriority=null">All</option>
-        </label>
+                <option ngbDropdownItem *ngFor="let p of getAllPriorities()" (click)="filterPriority=p">{{p}}</option>
-        <span *ngIf="sortBy === 'priority'" class="pl-3">
+              </div>
-        <span *ngIf="sortDescending"><i class="fa fa-sort-up"></i></span>
+            </div>
-        <span *ngIf="sortDescending === false"><i class="fa fa-sort-down"></i></span>
+            <span (click)="sortByPrio()">
-        </span>
+              <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>