Added sprint selection to backlog

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

@@ -8,10 +8,34 @@
 <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 class="dropdown">
+          <button 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 class="dropdown-menu" aria-labelledby="dropdownMenu2">
+              <option 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">
-    <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">
@@ -32,12 +56,9 @@
       </div>
     </div>
     </div>
-    <div></div>
 
-    <div class="col-lg-6 container-fluid">
+  <div class="col-lg-6 container-fluid">
-
+    <div *ngFor="let story of choosen" 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>

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

@@ -28,9 +28,9 @@ export class BacklogComponent extends TableComponentBase<
   public status: ScrumStatus[] = [];
   public categories: ScrumCategory[] = [];
   public sprints: ScrumSprint[] = [];
+  public storys: ScrumUserstory[] = [];
 
-  public backlog: ScrumUserstory[] = [];
+  public selectedSprint: ScrumSprint;
-  public choosen: ScrumUserstory[] = [];
 
   constructor(
     private backendService: BackendService,
@@ -43,14 +43,14 @@ export class BacklogComponent extends TableComponentBase<
         alert('Fehler');
       } else {
         this.sprints.push(...response.body);
+        this.selectedSprint = this.currentSprint;
       }
     });
     backendService.getUserstories().subscribe((response) => {
       if (response.status > 399) {
         alert('Fehler');
       } else {
-        this.backlog = response.body.filter(u => u.sprintid == null);
+        this.storys.push(...response.body);
-        this.choosen = response.body.filter(u => u.sprintid == this.currentSprint.id);
       }
     });
     backendService.getTasks().subscribe((response) => {
@@ -117,10 +117,7 @@ export class BacklogComponent extends TableComponentBase<
   // Sprint-Backlog
 
   public addToSprintBacklog(userstory: ScrumUserstory) {
-    this.choosen.push(userstory);
+    userstory.sprintid = this.selectedSprint.id;
-    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');
@@ -129,9 +126,6 @@ export class BacklogComponent extends TableComponentBase<
   }
 
   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) {
@@ -140,11 +134,27 @@ export class BacklogComponent extends TableComponentBase<
     });
   }
 
+  public get choosen(): ScrumUserstory[]
+  {
+    if(this.selectedSprint === undefined){return null;}
+    return this.storys.filter(u => u.sprintid == this.selectedSprint.id);
+  }
+
+  public get backlog(): ScrumUserstory[]
+  {
+    return this.storys.filter(u => u.sprintid === undefined);
+  }
+
   public get currentSprint(): ScrumSprint {
     const now = Date.now();
     return this.sprints.find(s => Date.parse(s.startDate) < now && Date.parse(s.endDate) > now);
   }
 
+  public toDateString(isoFormatString) {
+    const date = new Date(isoFormatString);
+    return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`;
+  }
+
   public openSprintForm(editSprint?: ScrumSprint) {
     const modalRef = this.modalService.open(SprintFormComponent, {
       backdrop: 'static',