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

added status dropdown, design changes

Browse Source
This commit is contained in:
test
2020-07-02 15:34:31 +02:00
parent ba987265a3
commit 0c485486e0
3 changed files with 147 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/userstory-form/userstory-form.component.css
View File

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

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

@@ -1,78 +1,87 @@
<!-- <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 class="card" style="width: 100%;">
<div class="container">
<div class="card-body">
<div style="text-align: right;">
<i class="fa fa-times fa-2x" (click)="onClose()"></i>
</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 class="col-8" style="text-align: left;">
<h4 class="card-title">Neue Userstory anlegen</h4>
</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"> -->
<select class="custom-select mr-sm-2" id="selectAdd">
</select>
<button onclick="addOption()">Add</button>
<script type="text/javascript">
function addOption() {
var optText = 'New element';
var optValue = 1;
$('#selectAdd').append(`<option value="${optValue}">${optText}</option>`);
}
</script>
<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)]="userstory.title" id="titleField" />
</div>
<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-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">
<label for="Inhalt">Autor</label>
<input type="text" class="form-control" id="Author" required name="author"
[(ngModel)]="userstory.createdbyid">
<div class="dropdown-divider"></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);">
<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="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 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>
<!-- </div> -->
</div>

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

@@ -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() {
// document.getElementById('titleField').focus();
//}
getUserstoryStatus() {
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;
}
}