Commit 51c86b60 authored by Simone Vuotto's avatar Simone Vuotto

Add requirements-details component

parent e7b74065
......@@ -11,6 +11,8 @@ import { LoginComponent } from './login/login.component';
import { ProjectsComponent } from './projects/projects.component';
import { AlertComponent } from './alert/alert.component';
import { ProjectDialogComponent } from './project-dialog/project-dialog.component';
import { ProjectDetailsComponent } from './project-details/project-details.component';
import { RequirementDetailsComponent } from './requirement-details/requirement-details.component';
// Services
import { AuthenticationService } from './services/authentication.service';
......@@ -23,7 +25,6 @@ import {AuthGuard} from './auth.guard';
// Http Interceptor
import { JwtInterceptor } from './jwt.interceptor.js';
import { ProjectDetailsComponent } from './project-details/project-details.component';
@NgModule({
......@@ -34,6 +35,7 @@ import { ProjectDetailsComponent } from './project-details/project-details.compo
ProjectsComponent,
ProjectDialogComponent,
ProjectDetailsComponent,
RequirementDetailsComponent,
],
imports: [
BrowserModule,
......
export enum ReqState {
VALID = 'VALID',
INVALID = 'INVALID',
NOT_VALIDATED = 'NOT_VALIDATED',
COMPLIANT = 'COMPLIANT',
WARNING = 'WARNING',
ERROR = 'ERROR',
NOT_CHECKED = 'NOT_CHECKED'
}
export class Requirement {
......@@ -11,4 +12,21 @@ export class Requirement {
errorDescription: string;
state: ReqState;
clone(req: Requirement): Requirement {
this.id = req.id;
this.text = req.text;
this.project = req.project;
this.errorDescription = req.errorDescription;
this.state = req.state;
return this;
}
get compliant(): boolean { return this.state === ReqState.COMPLIANT; }
get warning(): boolean { return this.state === ReqState.WARNING; }
get error(): boolean { return this.state === ReqState.ERROR; }
get notChecked(): boolean { return this.state === ReqState.NOT_CHECKED; }
}
.badge-green {
color: #fff;
background-color: #469408;
}
.badge-yellow {
color: #fff;
background-color: #D9831F;
}
.badge-red {
color: #fff;
background-color: #D9230F;
}
<button #openModalBtn [hidden]="true" data-toggle="modal" data-target="#reqDetailsModal">Open Modal</button>
<div class="modal" id="reqDetailsModal" *ngIf="requirement">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit Requirement</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="reqTextarea">Requirement</label>
<textarea class="form-control" id="reqTextarea" rows="2" [(ngModel)]="requirement.text"></textarea>
</div>
<div class="form-group">
<label for="stateBadge">State</label>
<p id="stateBadge"><span class="badge"
[ngClass]="{'badge-green': requirement.compliant,
'badge-yellow': requirement.notChecked || requirement.warning,
'badge-red': requirement.error}">{{ requirement.state }}</span></p>
</div>
<div class="form-group">
<label for="errorTextarea">Error</label>
<textarea class="form-control" id="errorTextarea" disabled>{{ requirement.errorDescription }}</textarea>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" (click)="save()" #saveBtn [disabled]="loading">
<i class="fa fa-spinner fa-spin" aria-hidden="true" *ngIf="loading">&nbsp;</i>Save
</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal" #closeBtn>Close</button>
</div>
</div>
</div>
</div>
import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { Requirement } from '../models/requirement';
import { RequirementService } from '../services/requirement.service';
import { AlertService } from '../alert/alert.service';
@Component({
selector: 'app-requirement-details',
templateUrl: './requirement-details.component.html',
styleUrls: ['./requirement-details.component.css']
})
export class RequirementDetailsComponent implements OnInit {
requirement: Requirement;
@Output() update = new EventEmitter<Requirement>();
@ViewChild('openModalBtn') openModalBtn: ElementRef;
@ViewChild('closeBtn') closeBtn: ElementRef;
loading = false;
constructor(private requirementService: RequirementService,
private alertService: AlertService) { }
ngOnInit() {
}
@Input()
set req(req: Requirement) {
if (req) {
this.requirement = req;
this.openModalBtn.nativeElement.click();
}
}
save() {
this.loading = true;
this.requirementService.updateRequirement(this.requirement).subscribe(
data => {
this.loading = false;
this.update.emit(new Requirement().clone(data));
this.closeBtn.nativeElement.click();
},
error => {
this.loading = false;
console.error(error);
this.alertService.error('Error during requirement update, try again.');
}
);
}
}
......@@ -19,12 +19,16 @@ export class RequirementService {
return this.http.get<Requirement[]>(this.requirementsUrl, {params: params});
}
uploadFile(file: File, projectId: number) {
updateRequirement(req: Requirement): Observable<Requirement> {
return this.http.put<Requirement>(this.requirementsUrl, req);
}
uploadFile(file: File, projectId: number): Observable<Requirement[]> {
const formData = new FormData();
formData.append('file', file, file.name);
formData.append('pId', projectId.toString());
return this.http.post(this.reqFileUrl, formData, { observe: 'response' });
return this.http.post<Requirement[]>(this.reqFileUrl, formData);
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment