added category dropdown to userstory-form

src/app/services/backend.service.ts

@@ -260,7 +260,7 @@ export interface ScrumCategory {
   title: string;
   description?: string;
   color?: string;
-  project: number;
+  project?: number;
 }
 
 export interface ScrumStatus {

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

@@ -31,10 +31,13 @@
                                 Prio: {{userstory.priority}}
                             </button>
                             <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenu2">
-                                <option ngbDropdownItem *ngFor="let p of getAllPriorities()" (click)="userstory.priority=p">
+                                <option ngbDropdownItem *ngFor="let p of getAllPriorities()"
+                                    (click)="userstory.priority=p">
                                     {{p}}</option>
                             </div>
                         </div>
+
+                        <!-- Section to choose, create or delete a random status for the userstory. -->
                         <div class="form-group">
                             <div ngbDropdown class="dropdown" [autoClose]="false">
                                 <button ngbDropdownToggle class="btn btn-secondary dropdown-toggle" type="button"
@@ -67,7 +70,42 @@
                                 </select>
                             </div>
                         </div>
-<!-- Section to choose an author for the userstory. Currently not finished -->
+
+                        <!-- Section to choose, create or delete a random category for the userstory. -->
+                        <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">
+                                    Kategorie: {{getCategoryById(userstory.categoryid)}}
+                                </button>
+                                <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenu2">
+                                    <div class="card-text" for="Inhalt">Kategorie wählen</div>
+                                    <option disable-auto-close ngbDropdownItem *ngFor="let category of allCategories"
+                                        (click)="userstory.categoryid = category.id">{{ category.title }}</option>
+
+                                    <div class="dropdown-divider"></div>
+                                    <div class="card-text" for="Inhalt">Neue Kategorie</div>
+                                    <input #categoryname type="text" id="categoryname" class="dropdown-item"
+                                        (change)="category.title=categoryname.value" placeholder="New Title..."
+                                        style="background-color: rgba(211, 211, 211, 0.342);">
+                                    <button disable-auto-close ngbDropdownItem class="dropdown-item" type="button"
+                                        (click)="createUserstoryCategory(category)">Kategorie anlegen</button>
+                                    <button disable-auto-close ngbDropdownItem class="dropdown-item" type="button"
+                                        (click)="deleteCategory(userstory.categoryid)">Kategorie 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.categoryid">
+                                    <option *ngFor="let category of allCategories" [value]="category.id">{{
+                category.title
+              }}</option>
+                                </select>
+                            </div>
+                        </div>
+
+                        <!-- Section to choose an author for the userstory. -->
                         <div class="form-group">
                             <div ngbDropdown class="dropdown" [autoClose]="false">
                                 <button ngbDropdownToggle class="btn btn-secondary dropdown-toggle" type="button"

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

@@ -20,12 +20,15 @@ export class UserstoryFormComponent implements OnInit {
 	public status: ScrumStatus = { title: "", description: "" };
 	public allUser: any[] = [];
 	public user: ScrumUser = { name: "" };
+	public allCategories: any[] = [];
+	public category: ScrumCategory = { title: ""};
 	private editing: boolean;
 
 
 	constructor(private backendService: BackendService, private activeModalService: NgbActiveModal) {
 		this.getUserstoryStatus();
 		this.getAllUsers();
+		this.getUserstoryCategory();
 	}
 
 	ngOnInit(): void {
@@ -135,4 +138,54 @@ export class UserstoryFormComponent implements OnInit {
 		return user.name;
 	}
 
+	// Methods for creating, choosing and deleting categories for a userstory.
+
+	getUserstoryCategory() {
+		this.backendService.getCategories().subscribe((response) => {
+			if (response.status > 399) {
+				alert('Fehler');
+			} else {
+				this.allCategories.push(...response.body);
+			}
+		});
+	}
+
+	createUserstoryCategory(category: ScrumCategory) {
+		this.backendService.postCategory(category).subscribe((response) => {
+			if (response.status > 399) {
+				alert('Fehler');
+			}
+			else {
+				this.allCategories.push(response.body);
+			}
+		});
+	}
+
+	deleteCategory(id: number) {
+		var category = this.allCategories.find((x) => x.id === id);
+		this.backendService.deleteCategory(category).subscribe((response) => {
+			if (response.status > 399) {
+				alert('Fehler');
+			}
+			else {
+				const index = this.allCategories.indexOf(category);
+				if (index !== -1) {
+					this.allCategories.splice(index, 1);
+				}
+			}
+			this.userstory.categoryid = null;
+		});
+	}
+
+	getCategoryById(id: number): string {
+		if (!id) {
+			return null;
+		}
+		var category = this.allCategories.find((x) => x.id === id);
+		if (!category) {
+			return null;
+		}
+		return category.title;
+	}
+
 }