niggl/srumboard_frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added category dropdown to userstory-form

Browse Source
This commit is contained in:
test 2020-07-02 17:44:04 +02:00
parent 84a8ca442d
commit b0d63b4952
3 changed files with 94 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/services/backend.service.ts
View File

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

42
src/app/userstory-form/userstory-form.component.html
View File

@ -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"

53
src/app/userstory-form/userstory-form.component.ts
View File

@ -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;
}
}