Merge backlog

src/app/app-routing.module.ts

@@ -4,15 +4,14 @@ import { DashboardComponent } from './dashboard/dashboard.component';
 import { UserstoryTableComponent } from './userstory-table/userstory-table.component';
 import { TaskTableComponent } from './task-table/task-table.component';
 import { SprintTableComponent } from './sprint-table/sprint-table.component';
-// import { DashboardComponent } from './dashboard/dashboard.component';
+import {BacklogComponent} from './backlog-table/backlog.component';
-
-
 
 const routes: Routes = [
   { path: 'tasks', component: TaskTableComponent },
   { path: 'userstories', component: UserstoryTableComponent },
   { path: 'dashboard', component: DashboardComponent },
   { path: 'sprints', component: SprintTableComponent },
+  { path: 'backlog', component: BacklogComponent },
   { path: '', redirectTo: '/tasks', pathMatch: 'full' },
 ];
 

src/app/app.module.ts

@@ -16,6 +16,7 @@ import { TaskTableComponent } from './task-table/task-table.component';
 import { SprintTableComponent } from './sprint-table/sprint-table.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { UserstoryInnerTableComponent } from './userstory-inner-table/userstory-inner-table.component';
+import { BacklogComponent } from './backlog-table/backlog.component';
 
 @NgModule({
   declarations: [
@@ -29,6 +30,7 @@ import { UserstoryInnerTableComponent } from './userstory-inner-table/userstory-
     SprintTableComponent,
     DashboardComponent,
     UserstoryInnerTableComponent,
+    BacklogComponent
   ],
   imports: [
     BrowserModule,

src/app/backlog-table/backlog.component.css

@@ -0,0 +1,3 @@
+th.sortable:hover {
+  text-decoration: underline;
+}

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

@@ -0,0 +1,62 @@
+<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 - y</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/backlog-table/backlog.component.ts

@@ -0,0 +1,181 @@
+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 currentSprint: ScrumSprint;
+
+  public backlog: ScrumUserstory[] = [];
+  public choosen: ScrumUserstory[] = [];
+
+  constructor(
+    private backendService: BackendService,
+    private modalService: NgbModal,
+    private route: ActivatedRoute,
+  ) {
+    super();
+
+    backendService.getUserstories().subscribe((response) => {
+      if (response.status > 399) {
+        alert('Fehler');
+      } else {
+        this.items.push(...response.body);
+        this.backlog = this.items;
+      }
+    });
+    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);
+      }
+    });
+    this.getCurrentSprint();
+  }
+
+  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;
+  }
+
+  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;
+  }
+
+  // Sprint-Backlog
+
+  public addToSprintBacklog(userstory: ScrumUserstory) {
+    this.choosen.push(userstory);
+    const index = this.backlog.indexOf(userstory);
+    this.backlog.splice(index, 1);
+
+  }
+  public deleteFromSprintBacklog(userstory: ScrumUserstory){
+
+    const index = this.choosen.indexOf(userstory);
+    this.choosen.splice(index, 1);
+    this.backlog.push(userstory);
+  }
+
+  public getCurrentSprint()
+  {
+    this.backendService.getSprints().subscribe((response) => {
+      if (response.status > 399) {
+      } else {
+        const now = Date.now();
+        this.currentSprint = response.body.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/dashboard/dashboard.component.css

@@ -5,11 +5,3 @@
 .text-very-large {
   font-size: 2.4rem;
 }
-
-.content {
-  position: relative;
-  float: left;
-  margin-top: 10px;
-  margin-left: 20px;
-  width: 80%;
-}

src/app/sprint-table/sprint-table.component.css

@@ -1,11 +0,0 @@
-th.sortable:hover {
-    text-decoration: underline;
-}
-
-.content {
-    position: relative;
-    float: left;
-    margin-top: 10px;
-    margin-left: 20px;
-    width: 80%;
-}

src/app/task-form/task-form.component.html

@@ -1,83 +1,118 @@
 <div class="card" style="width: 100%;">
     <div class="container">
-    <div class="card-body">
+        <div class="card-body">
-        <div style="text-align: right;">
+            <div style="text-align: right;">
-            <i class="fa fa-times fa-2x" (click)="onClose()"></i>
+                <i class="fa fa-times fa-2x" (click)="onClose()"></i>
-    </div>
+            </div>
-        <div class="row">
+            <div class="row">
-        <div class="col-8" style="text-align: left;">
+                <div class="col-8" style="text-align: left;">
-                <h4 class="card-title">Neuen Task anlegen</h4>
+                    <h4 class="card-title">Neuen Task anlegen</h4>
-                <div ngbDropdown class="dropdown card-text">
+                    <div ngbDropdown class="dropdown card-text">
-                    <span ngbDropdownToggle class="dropdown" id="dropdownMenuUserstory" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <span ngbDropdownToggle class="dropdown" id="dropdownMenuUserstory" data-toggle="dropdown"
-                        Gehört zu Story: {{getUserstoryTitleById(task.userstoryid) || "Keine"}}
+                            aria-haspopup="true" aria-expanded="false">
-                        <i class="fa fa-caret-down"></i>
+                            Gehört zu Story: {{getUserstoryTitleById(task.userstoryid) || "Keine"}}
-                    </span>
+                            <i class="fa fa-caret-down"></i>
-                    <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenuUserstory">
+                        </span>
-                        <option ngbDropdownItem *ngFor="let userstory of userstories" (click)="task.userstoryid = userstory.id">{{ userstory.title }}</option>
+                        <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenuUserstory">
+                            <option ngbDropdownItem *ngFor="let userstory of userstories"
+                                (click)="task.userstoryid = userstory.id">{{ userstory.title }}</option>
+                        </div>
                     </div>
                 </div>
-    </div>
+                <div class="col-4"></div>
-    <div class="col-4"></div>
-        </div>
-        <form (ngSubmit)="onSubmit()">
-            <div class="row">
-            <div class="col-8">
-                    <div class="form-group">
-                        <label for="Title">Titel</label>
-                        <input type="text" class="form-control" id="Title" required name="title" [(ngModel)]="task.title" id="titleField"/>
-                    </div>
-                    <div class="form-group">
-                        <label for="Inhalt">What to do?</label>
-                        <textarea type="text" class="form-control" id="Story" required name="story" rows="5" [(ngModel)]="task.content"></textarea>
-                    </div>                
             </div>
-            <div class="col-4">
+            <form (ngSubmit)="onSubmit()">
+                <div class="row">
+                    <div class="col-8">
+                        <div class="form-group">
+                            <label for="Title">Titel</label>
+                            <input type="text" class="form-control" id="Title" required name="title"
+                                [(ngModel)]="task.title" id="titleField" />
+                        </div>
+                        <div class="form-group">
+                            <label for="Inhalt">What to do?</label>
+                            <textarea type="text" class="form-control" id="Story" required name="story" rows="5"
+                                [(ngModel)]="task.content"></textarea>
+                        </div>
+                    </div>
+                    <div class="col-4">
                         <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">
+                            <button ngbDropdownToggle class="btn btn-secondary dropdown-toggle" type="button"
+                                id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                 Prio: {{task.priority}}
                             </button>
                             <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenu2">
-                                <option ngbDropdownItem *ngFor="let p of getAllPriorities()" (click)="task.priority=p">{{p}}</option>
+                                <option ngbDropdownItem *ngFor="let p of getAllPriorities()" (click)="task.priority=p">
+                                    {{p}}</option>
                             </div>
-                    </div>
+                        </div>
-                    <div class="form-group">
+                        <!-- Section to choose, create or delete a random status for the userstory. -->
-                        <div ngbDropdown class="dropdown" [autoClose]="false">
+                        <div class="form-group">
-                            <button ngbDropdownToggle class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            <div ngbDropdown class="dropdown" [autoClose]="false">
-                              Status: {{getStatusTitleById(task.statusid)}}
+                                <button ngbDropdownToggle class="btn btn-secondary dropdown-toggle" type="button"
-                            </button>
+                                    id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true"
-                            <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenu2">
+                                    aria-expanded="false">
-                                <div class="card-text" for="Inhalt">Status wählen</div>
+                                    Status: {{getStatusTitleById(task.statusid)}}
-                                <option disable-auto-close ngbDropdownItem *ngFor="let status of allStatus" (click)="task.statusid = status.id">{{ status.title }}</option>
+                                </button>
+                                <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenu2">
+                                    <div class="card-text" for="Inhalt">Status wählen</div>
+                                    <option disable-auto-close ngbDropdownItem *ngFor="let status of allStatus"
+                                        (click)="task.statusid = status.id">{{ status.title }}</option>
 
-                            <div class="dropdown-divider"></div>
+                                    <div class="dropdown-divider"></div>
-                            <div class="card-text" for="Inhalt">Neuer Status</div>
+                                    <div class="card-text" for="Inhalt">Neuer Status</div>
-                            <input #statusname type="text" id="statusname" class="dropdown-item" (change)="status.title=statusname.value" placeholder="New Title..." style="background-color: rgba(211, 211, 211, 0.342);">
+                                    <input #statusname type="text" id="statusname" class="dropdown-item"
-                            <button disable-auto-close ngbDropdownItem class="dropdown-item" type="button"  (click)="createTaskStatus(status)">Status anlegen</button>
+                                        (change)="status.title=statusname.value" placeholder="New Title..."
-                            <button disable-auto-close ngbDropdownItem class="dropdown-item" type="button" (click)="deleteStatus(task.statusid)">Status löschen</button>
+                                        style="background-color: rgba(211, 211, 211, 0.342);">
+                                    <button disable-auto-close ngbDropdownItem class="dropdown-item" type="button"
+                                        (click)="createTaskStatus(status)">Status anlegen</button>
+                                    <button disable-auto-close ngbDropdownItem class="dropdown-item" type="button"
+                                        (click)="deleteStatus(task.statusid)">Status löschen</button>
+                                </div>
                             </div>
-                          </div>
+                            <div class="dropdown-menu">
-                        <div class="dropdown-menu">
+                                <select class="form-control custom-select mr-sm-2" id="prio" required name="prio"
-                        <select class="form-control custom-select mr-sm-2" id="prio" required name="prio" [(ngModel)]="task.statusid">
+                                    [(ngModel)]="task.statusid">
-                            <option *ngFor="let status of allStatus" [value]="status.id">{{
+                                    <option *ngFor="let status of allStatus" [value]="status.id">{{
                 status.title
               }}</option>
-                        </select>
+                                </select>
+                            </div>
+                        </div>
+                        <!-- Section to choose an author for the userstory. -->
+                        <div class="form-group">
+                            <div ngbDropdown class="dropdown" [autoClose]="true">
+                                <button ngbDropdownToggle class="btn btn-secondary dropdown-toggle" type="button"
+                                    id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true"
+                                    aria-expanded="false">
+                                    Bearbeiter: {{getAuthorById(task.assignedtoid)}}
+                                </button>
+                                <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenu2">
+                                    <div class="card-text" for="Inhalt">User wählen</div>
+                                    <option disable-auto-close ngbDropdownItem *ngFor="let user of allUser"
+                                        (click)="task.assignedtoid = user.id">{{ user.name }}</option>
+                                </div>
+                            </div>
+                            <div class="dropdown-menu">
+                                <select class="form-control custom-select mr-sm-2" id="prio" required name="prio"
+                                    [(ngModel)]="task.assignedtoid">
+                                    <option *ngFor="let user of allUser" [value]="user.id">{{
+                user.name
+              }}</option>
+                                </select>
+                            </div>
+                        </div>
                     </div>
                 </div>
-                <div class="form-group">
+                <div class="row">
-                    <label for="Inhalt">Assigned User</label>
+                    <div class="col-6">
-                    <input type="text" class="form-control" id="Author" required name="author"/>
+                        <button (click)="onClose()" type="dismiss" class="btn btn-secondary" data-dismiss="modal">
+                            Abbrechen
+                        </button>
+                        <button type="submit" class="btn btn-primary">Erstellen</button>
+                    </div>
                 </div>
-                </div>
+            </form>
-    </div>
-    <div class="row">
-        <div class="col-6">
-            <button (click)="onClose()" type="dismiss" class="btn btn-secondary" data-dismiss="modal">
-                Abbrechen
-            </button>
-            <button type="submit" class="btn btn-primary">Erstellen</button>
         </div>
     </div>
-</form></div>
-</div>
 </div>

src/app/task-form/task-form.component.ts

@@ -26,10 +26,13 @@ export class TaskFormComponent implements OnInit {
 	public userstories: any[] = [];
 	public allStatus: any[] = [];
 	public status: ScrumStatus = {title: "", description: ""};
+	public allUser: any[] = [];
+	public user: ScrumUser = { name: "" };
 
 	constructor(private backendService: BackendService, private activeModalService: NgbActiveModal) {
 		this.getUserStories();
 		this.getTaskStatus();
+		this.getAllUsers();
 	}
 
 	ngOnInit(): void {
@@ -155,4 +158,27 @@ export class TaskFormComponent implements OnInit {
 		  }
 		return status.title;
 	}
+
+	// Methods for choosing creator of a userstory.
+
+	getAllUsers() {
+		this.backendService.getUsers().subscribe((response) => {
+			if (response.status > 399) {
+				alert('Fehler');
+			} else {
+				this.allUser.push(...response.body);
+			}
+		});
+	}
+
+	getAuthorById(id: number): string {
+		if (!id) {
+			return null;
+		}
+		var user = this.allUser.find((x) => x.id === id);
+		if (!user) {
+			return null;
+		}
+		return user.name;
+	}
 }

src/app/task-table/task-table.component.css

@@ -1,11 +0,0 @@
-th.sortable:hover {
-  text-decoration: underline;
-}
-
-.content {
-  position: relative;
-  float: left;
-  margin-top: 10px;
-  margin-left: 20px;
-  width: 80%;
-}

src/app/userstory-table/userstory-table.component.css

@@ -1,11 +0,0 @@
-th.sortable:hover {
-  text-decoration: underline;
-}
-
-.content {
-  position: relative;
-  float: left;
-  margin-top: 10px;
-  margin-left: 20px;
-  width: 80%;
-}

src/styles.scss

@@ -3,3 +3,15 @@
 .modal .modal-content {
 	display: contents;
 }
+
+th.sortable:hover {
+  text-decoration: underline;
+}
+
+.content {
+  position: relative;
+  float: left;
+  margin-top: 10px;
+  margin-left: 20px;
+  width: 80%;
+}