Merge remote-tracking branch 'origin/feature/sprint-form'

package.json

@@ -45,5 +45,13 @@
     "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"
 }

src/app/app-routing.module.ts

@@ -4,15 +4,14 @@ import { Routes, RouterModule } from '@angular/router';
 import { TaskListComponent } from './task-list/task-list.component';
 import { UserstoryListComponent } from './userstory-list/userstory-list.component';
 
-
 const routes: Routes = [
-  { path: 'tasks', component: TaskListComponent },
-  { path: 'userstories', component: UserstoryListComponent },
-  { path: '', redirectTo: '/tasks', pathMatch: 'full' },
+	{ path: 'tasks', component: TaskListComponent },
+	{ path: 'userstories', component: UserstoryListComponent },
+	{ path: '', redirectTo: '/tasks', pathMatch: 'full' }
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+	imports: [ RouterModule.forRoot(routes) ],
+	exports: [ RouterModule ]
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

src/app/app.module.ts

@@ -11,6 +11,7 @@ import { TaskListComponent } from './task-list/task-list.component';
 import { TaskFormComponent } from './task-form/task-form.component';
 import { UserstoryListComponent } from './userstory-list/userstory-list.component';
 import { UserstoryFormComponent } from './userstory-form/userstory-form.component';
+import { SprintFormComponent } from './sprint-form/sprint-form.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 @NgModule({
@@ -19,7 +20,8 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
     TaskListComponent,
     TaskFormComponent,
     UserstoryListComponent,
-    UserstoryFormComponent
+    UserstoryFormComponent,
+    SprintFormComponent
   ],
   imports: [
     BrowserModule,

src/app/services/backend.service.ts

@@ -232,7 +232,7 @@ export interface ScrumUserstory {
 export interface ScrumSprint{
     id?: number;
     title: string;
-    description: string;
+    description?: string;
     startDate: Date;
     endDate: Date;
     project: number;

src/app/sprint-component/sprint.component.html

@@ -0,0 +1 @@
+<button class="btn btn-dark m-3" (click)="openUserstoryForm(null)">Neuer Sprint</button>

src/app/sprint-component/sprint.component.ts

@@ -0,0 +1,54 @@
+import { Component, OnInit } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { BackendService, ScrumSprint } from '../services/backend.service';
+import { SprintFormComponent } from '../sprint-form/sprint-form.component';
+
+@Component({
+  selector: 'app-sprint',
+  templateUrl: './sprint.component.html',
+  styleUrls: ['./sprint.component.css']
+})
+export class SprintComponent implements OnInit {
+
+  public sprints: ScrumSprint[] = [];
+
+  constructor(private backendService: BackendService, private modalService: NgbModal) { 
+      backendService.getSprints().subscribe(response => {
+          if (response.status > 399) {
+              alert('Fehler');
+          }
+          else {
+              this.sprints.push(...response.body);
+          }
+      });
+  }
+
+  ngOnInit(): void {
+  }
+
+  public deleteSprint(sprint: ScrumSprint) {
+    this.backendService.deleteSprint(sprint).subscribe(response => {
+      if (response.status > 399) {
+        alert('Fehler');
+      }
+    });
+    const index = this.sprints.indexOf(sprint);
+    if (index !== -1) {
+      this.sprints.splice(index, 1);
+    }    
+  }
+
+  public openSprintForm(editSprint: ScrumSprint) {
+    const modalRef = this.modalService.open(SprintFormComponent, {
+      backdrop: 'static',
+      keyboard: true,
+    });
+    if (editSprint === null) {
+      modalRef.result.then(result => {
+        this.sprints.push(result);
+      });
+    }
+    modalRef.componentInstance.userstory = editSprint;
+  }
+
+}

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

@@ -0,0 +1,4 @@
+.modal-footer {
+	border-top: 0px solid;
+	padding-top: 5%;
+}

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

@@ -0,0 +1,33 @@
+    <div class="modal-content p-3">
+    <div class="modal-header">
+        <h4 class="modal-title">Neuen Sprint anlegen</h4>
+        <button (click)="onClose()" type="button" class="close" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+        </button>
+    </div>
+    <div class="modal-body">
+        <form (ngSubmit)="onSubmit()">
+            <div class="form-group">
+                <label for="Title">Titel</label>
+                <input type="text" class="form-control" id="Title" required name="title" [(ngModel)]="sprint.title"
+                    id="titleField">
+            </div>
+            <div class="form-group">
+                <label for="date">Startdatum</label>
+                <input type="Date" class="form-control" id="Date" required name="date" [(ngModel)]="sprint.startDate"
+                    id="titleField">
+            </div>
+            <div class="form-group">
+                <label for="Date">Enddatum</label>
+                <input type="date" class="form-control" id="Date" required name="date" [(ngModel)]="sprint.endDate"
+                    id="titleField">
+            </div>
+            
+            <div class="modal-footer">
+                <button (click)="onClose()" type="dismiss" class="btn btn-secondary"
+                    data-dismiss="modal">Abbrechen</button>
+                <button type="submit" class="btn btn-primary">Sprint starten</button>
+            </div>
+        </form>
+    </div>
+</div>

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

@@ -0,0 +1,62 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import {
+  BackendService,
+  ScrumTask,
+  Priority,
+  ScrumStatus,
+  ScrumCategory,
+  ScrumUser,
+  ScrumProject,
+  ScrumUserstory,
+  ScrumSprint
+} from '../services/backend.service';
+import { Observable } from 'rxjs';
+import { HttpResponse } from '@angular/common/http';
+
+@Component({
+  selector: 'app-task-form',
+  templateUrl: './sprint-form.component.html',
+  styleUrls: ['./sprint-form.component.css'],
+})
+export class SprintFormComponent implements OnInit {
+  @Input() public sprint: ScrumSprint;
+  public editing: Boolean;
+  public sprintid: string;
+
+  constructor(
+    private backendService: BackendService,
+    private activeModalService: NgbActiveModal
+  ) { }
+
+  ngOnInit(): void {
+    if (this.sprint === null || this.sprint === undefined) {
+      this.sprint = { title: '', startDate: new Date(), endDate: new Date(), project: 0 }; //project id: static counter?
+      this.editing = false;
+    } else {
+      this.editing = true;
+    }
+    document.getElementById('titleField').focus();
+  }
+
+  onSubmit() {
+    if (this.editing) {
+      this.backendService.putSprint(this.sprint).subscribe((response) => {
+        if (response.status > 399) {
+          alert('Fehler');
+        }
+      });
+    } else {
+      this.backendService.postSprint(this.sprint).subscribe((response) => {
+        if (response.status > 399) {
+          alert('Fehler');
+        }
+      });
+    }
+    this.activeModalService.close(this.sprint);
+  }
+
+  onClose() {
+    this.activeModalService.dismiss(this.sprint);
+  }
+}

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

@@ -0,0 +1,13 @@
+.modal-footer {
+	border-top: 0px solid;
+	padding-top: 5%;
+}
+.modal-content {
+	width: 1040px;
+	right: 55%;
+	border: 0px;
+}
+
+.modal {
+	margin: 0 auto;
+}

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

@@ -1,30 +1,68 @@
 <div class="modal-content p-3">
-    <div>
-        <button (click) ="onClose()" type="button" class="close" aria-label="Close">
+    <div class="modal-header">
+        <table>
+            <tr>
+                <h4 class="modal-title">Neuen Task anlegen</h4>
+            </tr>
+            <tr>
+                <h6 class="modal-caption text-muted"> Gehört zu Story: <a href="#" id="userstoryTitle">{{this.userstoryId}}</a></h6>
+            </tr>
+            <!--getUserstory fehlt noch-->
+        </table>
+        <button (click)="onClose()" type="button" class="close" aria-label="Close">
             <span aria-hidden="true">&times;</span>
         </button>
     </div>
-    <form (ngSubmit)="onSubmit()">
-        <div class="form-group">
-            <label for="Title">Titel</label>
-            <input type="text" class="form-control" id="Title" required name="title" [(ngModel)]="task.title">
+    <div class="modal-body">
+        <form (ngSubmit)="onSubmit()">
+
+            <div class="row">
+                <div class="col-md-9">
+                    <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>
+                <div class="col-md-1"></div>
+                <div class="col-md-2">
+                    <div class="form-group">
+                        <label for="Prio">Prio</label>
+                        <select class="form-control custom-select mr-sm-2" id="prio" required name="prio"
+                            [(ngModel)]="task.priority">
+                            <option value="low">Low</option>
+                            <option value="medium">Medium</option>
+                            <option value="high">High</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-md-9">
+                    <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-md-1"></div>
+                <div class="col-md-2">
+                    <div class="form-group">
+                        <label for="Inhalt">Status</label>
+                        <input type="text" class="form-control" id="Status" required name="status"
+                            [(ngModel)]="task.status">
+                    </div>
+                    <div class="form-group">
+                        <label for="Inhalt">Assigned User</label>
+                        <input type="text" class="form-control" id="Author" required name="author">
+                    </div>
+                </div>
+            </div>
+        
+        <div class="modal-footer">
+            <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 class="form-group">
-            <label for="Inhalt">Inhalt</label>
-            <input type="text" class="form-control" id="Content" required name="content" [(ngModel)]="task.content">
-        </div>
-
-        <div class="form-group">
-            <label for="Prio">Prio</label>
-            <select class="form-control" id="prio" required name="prio" [(ngModel)]="task.priority">
-                <option value="low">Low</option>
-                <option value="medium">Medium</option>
-                <option value="high">High</option>
-             </select>
-        </div>
-
-        <button type="submit" class="btn btn-success">Submit</button>
-
-    </form>
+        </form>
+    </div>
 </div>

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

@@ -1,50 +1,72 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import { BackendService, ScrumTask, Priority, ScrumStatus, ScrumCategory, ScrumUser, ScrumProject } from '../services/backend.service';
+import {
+  BackendService,
+  ScrumTask,
+  Priority,
+  ScrumStatus,
+  ScrumCategory,
+  ScrumUser,
+  ScrumProject,
+  ScrumUserstory,
+} from '../services/backend.service';
+import { Observable } from 'rxjs';
+import { HttpResponse } from '@angular/common/http';
 
 @Component({
-    selector: 'app-task-form',
-    templateUrl: './task-form.component.html',
-    styleUrls: ['./task-form.component.css']
+  selector: 'app-task-form',
+  templateUrl: './task-form.component.html',
+  styleUrls: ['./task-form.component.css'],
 })
 export class TaskFormComponent implements OnInit {
+  @Input() public task: ScrumTask;
+  public editing: Boolean;
+  public userstoryId: string;
 
-    @Input()
-    public task: ScrumTask;
-    public editing: Boolean;
+  constructor(
+    private backendService: BackendService,
+    private activeModalService: NgbActiveModal
+  ) {}
 
-    constructor(private backendService: BackendService, private activeModalService: NgbActiveModal) { }
-
-    ngOnInit(): void {
-        if (this.task === null || this.task === undefined) {
-            this.task = {title: ""};
-            this.editing = false;
-        }
-        else
-        {
-            this.editing = true;
-        }
+  ngOnInit(): void {
+    if (this.task === null || this.task === undefined) {
+      this.task = { title: '' };
+      this.editing = false;
+    } else {
+      this.editing = true;
     }
+    document.getElementById('titleField').focus();
+    this.getRelatedStory();
+  }
 
-    onSubmit() {
-        if (this.editing) {
-            this.backendService.putTask(this.task).subscribe(response => {
-                if (response.status > 399) {
-                  alert('Fehler');
-                }
-              });
+  onSubmit() {
+    if (this.editing) {
+      this.backendService.putTask(this.task).subscribe((response) => {
+        if (response.status > 399) {
+          alert('Fehler');
         }
-        else {
-            this.backendService.postTask(this.task).subscribe(response => {
-                if (response.status > 399) {
-                  alert('Fehler');
-                }
-              });
+      });
+    } else {
+      this.backendService.postTask(this.task).subscribe((response) => {
+        if (response.status > 399) {
+          alert('Fehler');
         }
-        this.activeModalService.close(this.task);
+      });
     }
+    this.activeModalService.close(this.task);
+  }
 
-    onClose(){
-        this.activeModalService.dismiss(this.task);
-    }
+  onClose() {
+    this.activeModalService.dismiss(this.task);
+  }
+
+  getRelatedStory() {
+    this.backendService.getUserstory(2).subscribe((response) => {
+      if (response.status > 399) {
+        alert('Fehler');
+      } else {
+        this.userstoryId = response.body.title;
+      }
+    });
+  }
 }

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

@@ -1,4 +1,6 @@
 <button class="btn btn-dark m-3" (click)="openTaskForm(null)">Neu</button>
+<button class="btn btn-dark m-3" (click)="openSprintForm(null)">Neuer Sprint</button>
+
 
 <ul class="list-group m-3">
     <li *ngFor="let task of tasks" class="list-group-item">

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

@@ -1,7 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { BackendService, ScrumTask } from '../services/backend.service';
+import { BackendService, ScrumTask, ScrumSprint } from '../services/backend.service';
 import { TaskFormComponent } from '../task-form/task-form.component';
+import { SprintFormComponent } from '../sprint-form/sprint-form.component';
+
 
 @Component({
   selector: 'app-task-list',
@@ -11,6 +13,8 @@ import { TaskFormComponent } from '../task-form/task-form.component';
 export class TaskListComponent implements OnInit {
 
   public tasks: ScrumTask[] = [];
+  public sprints: ScrumSprint[] = [];
+
 
   constructor(private backendService: BackendService, private modalService: NgbModal) { 
       backendService.getTasks().subscribe(response => {
@@ -51,4 +55,17 @@ export class TaskListComponent implements OnInit {
     modalRef.componentInstance.task = editTask;
   }
 
+  public openSprintForm(editSprint: ScrumSprint) {
+    const modalRef = this.modalService.open(SprintFormComponent, {
+      backdrop: 'static',
+      keyboard: true,
+    });
+    if (editSprint === null) {
+      modalRef.result.then(result => {
+        this.sprints.push(result);
+      });
+    }
+    modalRef.componentInstance.userstory = editSprint;
+  }
+
 }

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

@@ -0,0 +1,12 @@
+.modal-footer {
+	border-top: 0px solid;
+	padding-top: 5%;
+}
+.modal-content {
+	width: 1040px;
+	right: 55%;
+}
+
+.modal {
+	margin: 0 auto;
+}

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

@@ -1,30 +1,64 @@
-<div class="modal-content p-3">
-    <div>
-        <button (click) ="onClose()" type="button" class="close" aria-label="Close">
-            <span aria-hidden="true">&times;</span>
-        </button>
+<!-- <div class="modal-lg"> -->
+    <div class="modal-content p-3 text-dark">
+        <div class="modal-header">
+            <h4 class="modal-title">Neue Userstory anlegen</h4>
+            <button (click)="onClose()" type="button" class="close" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+            </button>
+        </div>
+        <div class="modal-body">
+            <form (ngSubmit)="onSubmit()">
+
+                <div class="row">
+                    <div class="col-md-9">
+                        <div class="form-group">
+                            <label for="Title">Titel</label>
+                            <input type="text" class="form-control" id="Title" required name="title"
+                                [(ngModel)]="userstory.title" id="titleField">
+                        </div>
+                    </div>
+                    <div class="col-md-1"></div>
+                    <div class="col-md-2">
+                        <div class="form-group">
+                            <label for="Prio">Prio</label>
+                            <select class="custom-select mr-sm-2" id="prio" required name="prio"
+                                [(ngModel)]="userstory.priority">
+                                <option value="low">Low</option>
+                                <option value="medium">Medium</option>
+                                <option value="high">High</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-md-9">
+                        <div class="form-group">
+                            <label for="Inhalt">Story</label>
+                            <textarea type="text" class="form-control" id="Story" required name="story" rows="5"
+                                [(ngModel)]="userstory.content"></textarea>
+                        </div>
+
+                    </div>
+                    <div class="col-md-1"></div>
+                    <div class="col-md-2">
+                        <div class="form-group">
+                            <label for="Inhalt">Status</label>
+                            <input type="text" class="form-control" id="Status" required name="status"
+                                [(ngModel)]="userstory.status">
+                        </div>
+                        <div class="form-group">
+                            <label for="Inhalt">Autor</label>
+                            <input type="text" class="form-control" id="Author" required name="author"
+                                [(ngModel)]="userstory.createdby">
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button (click)="onClose()" type="dismiss" class="btn btn-secondary"
+                        data-dismiss="modal">Abbrechen</button>
+                    <button type="submit" class="btn btn-primary">Erstellen</button>
+                </div>
+            </form>
+        </div>
     </div>
-    <form (ngSubmit)="onSubmit()">
-        <div class="form-group">
-            <label for="Title">Titel</label>
-            <input type="text" class="form-control" id="Title" required name="title" [(ngModel)]="userstory.title">
-        </div>
-
-        <div class="form-group">
-            <label for="Inhalt">Inhalt</label>
-            <input type="text" class="form-control" id="Content" required name="content" [(ngModel)]="userstory.content">
-        </div>
-
-        <div class="form-group">
-            <label for="Prio">Prio</label>
-            <select class="form-control" id="prio" required name="prio" [(ngModel)]="userstory.priority">
-                <option value="low">Low</option>
-                <option value="medium">Medium</option>
-                <option value="high">High</option>
-             </select>
-        </div>
-
-        <button type="submit" class="btn btn-success">Submit</button>
-
-    </form>
-</div>
+<!-- </div> -->

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

@@ -3,48 +3,47 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { BackendService, ScrumUserstory, Priority } from '../services/backend.service';
 
 @Component({
-    selector: 'app-userstory-form',
-    templateUrl: './userstory-form.component.html',
-    styleUrls: ['./userstory-form.component.css']
+	selector: 'app-userstory-form',
+	templateUrl: './userstory-form.component.html',
+	styleUrls: [ './userstory-form.component.css' ]
 })
 export class UserstoryFormComponent implements OnInit {
+	@Input() public userstory: ScrumUserstory;
+	private editing: boolean;
 
+	constructor(private backendService: BackendService, private activeModalService: NgbActiveModal) {}
 
-    @Input()
-    public userstory: ScrumUserstory;
-    private editing: boolean;
+	ngOnInit(): void {
+		if (this.userstory === null || this.userstory === undefined) {
+			this.userstory = { title: '' };
+			this.editing = false;
+		} else {
+			this.editing = true;
+		}
+		document.getElementById('titleField').focus();
+	}
 
-    constructor(private backendService: BackendService, private activeModalService: NgbActiveModal) { }
+	onSubmit() {
+		if (this.editing) {
+			this.backendService.putUserstory(this.userstory).subscribe((response) => {
+				if (response.status > 399) {
+					alert('Fehler');
+				}
+			});
+		} else {
+			this.backendService.postUserstory(this.userstory).subscribe((response) => {
+				if (response.status > 399) {
+					alert('Fehler');
+				}
+			});
+		}
+		this.activeModalService.close(this.userstory);
+	}
+	onClose() {
+		this.activeModalService.dismiss(this.userstory);
+	}
 
-    ngOnInit(): void {
-        if (this.userstory === null || this.userstory === undefined) {
-            this.userstory = {title: ""};
-            this.editing = false;
-        }
-        else
-        {
-            this.editing = true;
-        }
-    }
-
-    onSubmit() {
-        if (this.editing) {
-            this.backendService.putUserstory(this.userstory).subscribe(response => {
-                if (response.status > 399) {
-                  alert('Fehler');
-                }
-              });
-        }
-        else {
-            this.backendService.postUserstory(this.userstory).subscribe(response => {
-                if (response.status > 399) {
-                  alert('Fehler');
-                }
-              });
-        }
-        this.activeModalService.close(this.userstory);
-    }
-    onClose(){
-        this.activeModalService.dismiss(this.userstory);
-    }
+	//focusTitleField() {
+	//	document.getElementById('titleField').focus();
+	//}
 }

src/assets/env.js

@@ -1,7 +1,7 @@
 (function(window) {
-    window["env"] = window["env"] || {};
-  
-    // Environment variables
-    window["env"]["apiUrl"] = "http://localhost:5001";
-    window["env"]["debug"] = false;
-  })(this);
+	window['env'] = window['env'] || {};
+
+	// Environment variables
+	window['env']['apiUrl'] = 'http://taskboard.dev.nig.gl/api';
+	window['env']['debug'] = false;
+})(this);