added status dropdown, design changes

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

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

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

@@ -1,78 +1,87 @@
-<!-- <div class="modal-lg"> -->
+<div class="card" style="width: 100%;">
-<div class="modal-content p-3 text-dark">
+    <div class="container">
-    <div class="modal-header">
+        <div class="card-body">
-        <h4 class="modal-title">Neue Userstory anlegen</h4>
+            <div style="text-align: right;">
-        <button (click)="onClose()" type="button" class="close" aria-label="Close">
+                <i class="fa fa-times fa-2x" (click)="onClose()"></i>
-            <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="col-8" style="text-align: left;">
-                    <div class="form-group">
+                    <h4 class="card-title">Neue Userstory anlegen</h4>
-                        <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-4"></div>
-                <div class="col-md-2">
+            </div>
-                    <div class="form-group">
+            <form (ngSubmit)="onSubmit()">
-                        <label for="Inhalt">Status</label>
+                <div class="row">
-                        <!-- <input type="text" class="form-control" id="Status" required name="status"
+                    <div class="col-8">
-                                    [(ngModel)]="userstory.status"> -->
+                        <div class="form-group">
-                        <select class="custom-select mr-sm-2" id="selectAdd">
+                            <label for="Title">Titel</label>
-
+                            <input type="text" class="form-control" id="Title" required name="title"
-                        </select>
+                                [(ngModel)]="userstory.title" id="titleField" />
-
+                        </div>
-                        <button onclick="addOption()">Add</button>
+                        <div class="form-group">
-
+                            <label for="Inhalt">Story</label>
-                        <script type="text/javascript">
+                            <textarea type="text" class="form-control" id="Story" required name="story" rows="5"
-                            function addOption() {
+                                [(ngModel)]="userstory.content"></textarea>
-                                var optText = 'New element';
+                        </div>
-                                var optValue = 1;
-                                $('#selectAdd').append(`<option value="${optValue}">${optText}</option>`);
-                            }
-                        </script>
                     </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">
+                                Prio: {{userstory.priority}}
+                            </button>
+                            <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenu2">
+                                <option ngbDropdownItem *ngFor="let p of getAllPriorities()" (click)="userstory.priority=p">
+                                    {{p}}</option>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <div ngbDropdown class="dropdown" [autoClose]="false">
+                                <button ngbDropdownToggle class="btn btn-secondary dropdown-toggle" type="button"
+                                    id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true"
+                                    aria-expanded="false">
+                                    Status: {{getStatusTitleById(userstory.statusid)}}
+                                </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)="userstory.statusid = status.id">{{ status.title }}</option>
 
-                    <div class="form-group">
+                                    <div class="dropdown-divider"></div>
-                        <label for="Inhalt">Autor</label>
+                                    <div class="card-text" for="Inhalt">Neuer Status</div>
-                        <input type="text" class="form-control" id="Author" required name="author"
+                                    <input #statusname type="text" id="statusname" class="dropdown-item"
-                            [(ngModel)]="userstory.createdbyid">
+                                        (change)="status.title=statusname.value" placeholder="New Title..."
+                                        style="background-color: rgba(211, 211, 211, 0.342);">
+                                    <button disable-auto-close ngbDropdownItem class="dropdown-item" type="button"
+                                        (click)="createUserstoryStatus(status)">Status anlegen</button>
+                                    <button disable-auto-close ngbDropdownItem class="dropdown-item" type="button"
+                                        (click)="deleteStatus(userstory.statusid)">Status löschen</button>
+                                </div>
+                            </div>
+                            <div class="dropdown-menu">
+                                <select class="form-control custom-select mr-sm-2" id="prio" required name="prio"
+                                    [(ngModel)]="userstory.statusid">
+                                    <option *ngFor="let status of allStatus" [value]="status.id">{{
+                status.title
+              }}</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="Inhalt">Autor</label>
+                            <input type="text" class="form-control" id="Author" required name="author" />
+                        </div>
                     </div>
                 </div>
-            </div>
+                <div class="row">
-            <div class="modal-footer">
+                    <div class="col-6">
-                <button (click)="onClose()" type="dismiss" class="btn btn-secondary"
+                        <button (click)="onClose()" type="dismiss" class="btn btn-secondary" data-dismiss="modal">
-                    data-dismiss="modal">Abbrechen</button>
+                            Abbrechen
-                <button type="submit" class="btn btn-primary">Erstellen</button>
+                        </button>
-            </div>
+                        <button type="submit" class="btn btn-primary">Erstellen</button>
-        </form>
+                    </div>
+                </div>
+            </form>
+        </div>
     </div>
 </div>
-<!-- </div> -->

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

@@ -1,17 +1,29 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { BackendService, ScrumUserstory, Priority } from '../services/backend.service';
+import {
+	ScrumTask,
+	ScrumStatus,
+	ScrumCategory,
+	ScrumUser,
+	ScrumProject,
+} from '../services/backend.service';
 
 @Component({
 	selector: 'app-userstory-form',
 	templateUrl: './userstory-form.component.html',
-	styleUrls: [ './userstory-form.component.css' ]
+	styleUrls: ['./userstory-form.component.css']
 })
 export class UserstoryFormComponent implements OnInit {
 	@Input() public userstory: ScrumUserstory;
+	public allStatus: any[] = [];
+	public status: ScrumStatus = { title: "", description: "" };
 	private editing: boolean;
 
-	constructor(private backendService: BackendService, private activeModalService: NgbActiveModal) {}
+
+	constructor(private backendService: BackendService, private activeModalService: NgbActiveModal) {
+		this.getUserstoryStatus();
+	}
 
 	ngOnInit(): void {
 		if (this.userstory === null || this.userstory === undefined) {
@@ -43,7 +55,55 @@ export class UserstoryFormComponent implements OnInit {
 		this.activeModalService.dismiss(this.userstory);
 	}
 
-	//focusTitleField() {
+	getUserstoryStatus() {
-	//	document.getElementById('titleField').focus();
+		this.backendService.getAllStatus().subscribe((response) => {
-	//}
+			if (response.status > 399) {
+				alert('Fehler');
+			} else {
+				this.allStatus.push(...response.body);
+			}
+		});
+	}
+
+	createUserstoryStatus(status: ScrumStatus) {
+		this.backendService.postStatus(status).subscribe((response) => {
+			if (response.status > 399) {
+				alert('Fehler');
+			}
+			else {
+				this.allStatus.push(response.body);
+			}
+		});
+	}
+
+	deleteStatus(id: number) {
+		var status = this.allStatus.find((x) => x.id === id);
+		this.backendService.deleteStatus(status).subscribe((response) => {
+			if (response.status > 399) {
+				alert('Fehler');
+			}
+			else {
+				const index = this.allStatus.indexOf(status);
+				if (index !== -1) {
+					this.allStatus.splice(index, 1);
+				}
+			}
+			this.userstory.statusid = null;
+		});
+	}
+
+	getAllPriorities(): string[] {
+		return Object.values(Priority);
+	}
+	getStatusTitleById(id: number): string {
+		if (!id) {
+			return null;
+		}
+		var status = this.allStatus.find((x) => x.id === id);
+		if (!status) {
+			return null;
+		}
+		return status.title;
+	}
+
 }