Commit cd33edbd authored by Simone Vuotto's avatar Simone Vuotto

Update project-details component + minor UI enhancements

parent 51c86b60
.container-fluid {
padding: 4em 2em;
}
.hline {
border-bottom: 1px solid #373a3c;
margin-bottom: 0.5em;
}
......@@ -13,7 +13,7 @@
</nav>
<!-- main app container -->
<div class="jumbotron">
<div class="container-fluid">
<div class="container">
<app-alert></app-alert>
......@@ -23,8 +23,12 @@
</div>
<!-- credits -->
<footer class="text-center">
<p>
Copyright © 2017 Simone Vuotto | All Rights Reserved
</p>
<footer>
<div class="container">
<div class="hline"></div>
<p class="small">
Copyright © 2017 Simone Vuotto | All Rights Reserved
</p>
</div>
</footer>
.top-container {
margin-bottom: 2em;
}
.btn-top {
margin-left: 0.5em;
}
.hidden {
display: none !important;
visibility: hidden !important;
}
<p>
id: {{ id }}
</p>
<div class="row top-container">
<div class="col-md-9">
<h1 *ngIf="project != null">{{ project.name }}</h1>
</div>
<div class="col-md-3">
<div class="hidden"><input type="file" #fileInput (change)="fileChange($event)"/></div>
<button type="button" class="btn btn-primary pull-right btn-top" (click)="fileInput.click()"
[disabled]="uploadLoading">
<i class="fa fa-upload" aria-hidden="true" *ngIf="!uploadLoading"></i>
<i class='fa fa-spinner fa-spin' *ngIf="uploadLoading"></i>
&nbsp;Upload File
</button>
<button type="button" class="btn btn-primary pull-right btn-top">
<i class="fa fa-play" aria-hidden="true"></i>&nbsp;Validate</button>
</div>
</div>
<div class="container"></div>
<table class="table table-hover">
<thead>
<tr>
<th class="col-md-1">Id</th>
<th class="col-md-9">Requirement</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let req of requirements"
[ngClass]="{'table-success': req.compliant,
'table-primary': req.error,
'table-dange': req.warning,
'table-light': req.notChecked}"
(click)="requirementDetails(req)">
<td scope="row">{{ req.id }}</td>
<td>{{ req.text }}</td>
</tr>
</tbody>
</table>
<app-requirement-details [req]="selectedRequirement" (update)="onChange($event)"></app-requirement-details>
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Project } from '../models/project';
import { ReqState, Requirement } from '../models/requirement';
import { ProjectService } from '../services/project.service';
import { RequirementService } from '../services/requirement.service';
import { AlertService } from '../alert/alert.service';
import { errorObject } from 'rxjs/util/errorObject';
@Component({
selector: 'app-project-details',
......@@ -8,12 +15,64 @@ import { ActivatedRoute } from '@angular/router';
})
export class ProjectDetailsComponent implements OnInit {
id: number;
projectId: number;
project: Project;
requirements: Requirement[];
uploadLoading = false;
selectedRequirement = new Requirement();
constructor(private route: ActivatedRoute) { }
constructor(private route: ActivatedRoute,
private projectService: ProjectService,
private requirementService: RequirementService,
private alertService: AlertService) { }
ngOnInit() {
this.id = +this.route.snapshot.paramMap.get('id');
this.projectId = +this.route.snapshot.paramMap.get('projectId');
this.getProject();
this.getRequirements();
}
getProject() {
this.projectService.getProject(this.projectId).subscribe(
project => this.project = project);
}
getRequirements() {
this.requirementService.getRequirements(this.projectId).subscribe(
requirements => this.requirements = requirements.map(req => new Requirement().clone(req)));
}
fileChange(event) {
const fileList: FileList = event.target.files;
if (fileList.length > 0) {
this.uploadLoading = true;
this.requirementService.uploadFile(fileList[0], this.projectId).subscribe(
data => {
this.uploadLoading = false;
this.requirements = this.requirements.concat(data);
this.alertService.success('File uploaded correctly!');
},
error => {
this.alertService.error('Error uploading the file!');
console.error(error);
this.uploadLoading = false;
}
);
}
}
requirementDetails(req: Requirement) {
this.selectedRequirement = new Requirement().clone(req);
}
onChange(req: Requirement) {
const index = this.requirements.findIndex(r => r.id === req.id);
if (index >= 0) {
this.requirements[index] = req;
}
}
}
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