mirror of
https://github.com/GNS3/gns3-web-ui.git
synced 2025-01-31 00:23:57 +00:00
Fixes after review
This commit is contained in:
PiotrP
parent
4084fb39e0
commit
668235936d
@ -1,7 +1,7 @@
|
||||
import * as Raven from 'raven-js';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { NgModule, ErrorHandler } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { CdkTableModule } from "@angular/cdk/table";
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
|
||||
@ -131,6 +131,7 @@ if (environment.production) {
|
||||
HttpClientModule,
|
||||
AppRoutingModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
BrowserAnimationsModule,
|
||||
CdkTableModule,
|
||||
MatButtonModule,
|
||||
|
||||
@ -1,9 +1,33 @@
|
||||
.non-visible {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-button{
|
||||
height: 50px;
|
||||
width: 120px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.file-name-form {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.file-name-form-field {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
width:250px;
|
||||
}
|
||||
|
||||
.non-visible {
|
||||
display: none;
|
||||
}
|
||||
.delete-button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: 0
|
||||
}
|
||||
|
||||
.delete-icon {
|
||||
vertical-align: "middle";
|
||||
}
|
||||
|
||||
.result-message-box {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@ -1,26 +1,34 @@
|
||||
<h1 mat-dialog-title>Import project</h1>
|
||||
<mat-horizontal-stepper #stepper [linear]="true">
|
||||
<mat-step label="Choose file" editable="false" completed="false">
|
||||
<input type="file" accept=".gns3project, .gns3p" class="non-visible" #file (change)="uploadProjectFile($event)" ng2FileSelect [uploader]="uploader"/>
|
||||
<button mat-raised-button color="primary" (click)="file.click()">Choose file</button>
|
||||
<mat-form-field class="file-name-form">
|
||||
<input matInput tabindex="1" (input)="validateInput()" [(ngModel)]="projectName" placeholder="Please enter name">
|
||||
</mat-form-field>
|
||||
<button class="material-icons" (click)="onDeleteClick()">delete</button>
|
||||
<div class="buttons-bar">
|
||||
<button mat-button (click)="onNoClick()" color="accent">Cancel</button>
|
||||
<button mat-button ng-disabled="!isImportEnabled" (click)="onImportClick()" tabindex="2" mat-raised-button color="primary">Import</button>
|
||||
<div>
|
||||
<input type="file" accept=".gns3project, .gns3p" class="non-visible" #file (change)="uploadProjectFile($event)" ng2FileSelect [uploader]="uploader"/>
|
||||
<button mat-raised-button color="primary" (click)="file.click()" class="file-button">Choose file</button>
|
||||
<form [formGroup]="projectNameForm" class="file-name-form">
|
||||
<mat-form-field class="file-name-form-field">
|
||||
<input matInput type="text" formControlName="projectName" [ngClass]="{ 'is-invalid': form.projectName.errors }" placeholder="Please enter name" />
|
||||
<mat-error *ngIf="form.projectName.errors && form.projectName.errors.required">Project name is required</mat-error>
|
||||
<mat-error *ngIf="form.projectName.errors && form.projectName.errors.invalidName">Project name is incorrect</mat-error>
|
||||
</mat-form-field>
|
||||
<button class="delete-button">
|
||||
<mat-icon color="primary" (click)="onDeleteClick()" class="delete-icon">clear</mat-icon>
|
||||
</button>
|
||||
<div class="buttons-bar">
|
||||
<button mat-button (click)="onNoClick()" color="accent">Cancel</button>
|
||||
<button mat-button [disabled]="!isImportEnabled" (click)="onImportClick()" tabindex="2" mat-raised-button color="primary">Import</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</mat-step>
|
||||
<mat-step label="Progress" editable="false" completed="false">
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{errorMessage}}</span>
|
||||
<div class="result-message-box">
|
||||
<span>{{resultMessage}}</span>
|
||||
</div>
|
||||
<div class="buttons-bar">
|
||||
<button mat-button ng-disabled="!isFinishEnabled" (click)="onNoClick()" tabindex="2" mat-raised-button color="primary">Finish</button>
|
||||
<button mat-button [disabled]="!isFinishEnabled" (click)="onNoClick()" tabindex="2" mat-raised-button color="primary">Finish</button>
|
||||
</div>
|
||||
</mat-step>
|
||||
</mat-horizontal-stepper>
|
||||
@ -1,11 +1,11 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { ImportProjectDialogComponent } from "./import-project-dialog.component";
|
||||
import { ImportProjectDialogComponent, Validator } from "./import-project-dialog.component";
|
||||
import { Server } from "../../../models/server";
|
||||
import { MatInputModule, MatIconModule, MatSortModule, MatTableModule, MatTooltipModule, MatDialogModule, MatStepperModule, MatFormFieldModule, MatDialogRef, MatDialog, MAT_DIALOG_DATA } from "@angular/material";
|
||||
import { RouterTestingModule } from "@angular/router/testing";
|
||||
import { NoopAnimationsModule } from "@angular/platform-browser/animations";
|
||||
import { FileUploadModule, FileSelectDirective, FileItem, FileUploader } from "ng2-file-upload";
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { FormsModule, ReactiveFormsModule, FormBuilder, FormControl, Validators } from '@angular/forms';
|
||||
import { DebugElement } from '@angular/core';
|
||||
import { By } from '@angular/platform-browser';
|
||||
|
||||
@ -13,9 +13,9 @@ describe('ImportProjectDialogComponent', () => {
|
||||
let component: ImportProjectDialogComponent;
|
||||
let fixture: ComponentFixture<ImportProjectDialogComponent>;
|
||||
let server: Server;
|
||||
let dialog: MatDialog;
|
||||
let debugElement: DebugElement;
|
||||
let fileSelectDirective: FileSelectDirective;
|
||||
let formBuilder: FormBuilder;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
@ -31,6 +31,7 @@ describe('ImportProjectDialogComponent', () => {
|
||||
NoopAnimationsModule,
|
||||
FileUploadModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
RouterTestingModule.withRoutes([]),
|
||||
],
|
||||
providers: [
|
||||
@ -41,10 +42,10 @@ describe('ImportProjectDialogComponent', () => {
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
dialog = TestBed.get(MatDialog);
|
||||
server = new Server();
|
||||
server.ip = "localhost";
|
||||
server.port = 80;
|
||||
formBuilder = new FormBuilder();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
@ -52,7 +53,10 @@ describe('ImportProjectDialogComponent', () => {
|
||||
debugElement = fixture.debugElement;
|
||||
component = fixture.componentInstance;
|
||||
component.server = server;
|
||||
|
||||
component.projectNameForm = formBuilder.group({
|
||||
projectName: new FormControl(null, [Validators.required, Validator.projectNameValidator])
|
||||
});
|
||||
component.projectNameForm.controls['projectName'].setValue("ValidName");
|
||||
fixture.detectChanges();
|
||||
|
||||
debugElement = fixture.debugElement.query(By.directive(FileSelectDirective));
|
||||
@ -119,16 +123,16 @@ describe('ImportProjectDialogComponent', () => {
|
||||
|
||||
it('should prepare correct upload path for file', () => {
|
||||
fileSelectDirective.uploader.queue.push(new FileItem(fileSelectDirective.uploader,new File([],"fileName"),{}));
|
||||
component.projectName = "newProject.gns3";
|
||||
component.projectNameForm.controls['projectName'].setValue("newProject");
|
||||
|
||||
component.prepareUploadPath();
|
||||
component.onImportClick();
|
||||
|
||||
expect(fileSelectDirective.uploader.queue[0].url).toContain("localhost:80");
|
||||
expect(fileSelectDirective.uploader.queue[0].url).toContain("newProject");
|
||||
});
|
||||
|
||||
it('should navigate to next step after clicking import', () => {
|
||||
let fileItem = new FileItem(fileSelectDirective.uploader,new File([],"fileName"),{});
|
||||
let fileItem = new FileItem(fileSelectDirective.uploader, new File([],"fileName"),{});
|
||||
fileSelectDirective.uploader.queue.push(fileItem);
|
||||
spyOn(component.stepper, "next");
|
||||
|
||||
@ -136,4 +140,30 @@ describe('ImportProjectDialogComponent', () => {
|
||||
|
||||
expect(component.stepper.next).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should detect if file input is empty', () => {
|
||||
component.projectNameForm.controls['projectName'].setValue("");
|
||||
fixture.detectChanges();
|
||||
spyOn(component.stepper, "next");
|
||||
spyOn(fileSelectDirective.uploader, 'uploadItem');
|
||||
|
||||
component.onImportClick();
|
||||
|
||||
expect(component.stepper.next).not.toHaveBeenCalled();
|
||||
expect(fileSelectDirective.uploader.uploadItem).not.toHaveBeenCalled();
|
||||
expect(component.projectNameForm.valid).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should sanitize file name input', () => {
|
||||
component.projectNameForm.controls['projectName'].setValue("[][]");
|
||||
fixture.detectChanges();
|
||||
spyOn(component.stepper, "next");
|
||||
spyOn(fileSelectDirective.uploader, 'uploadItem');
|
||||
|
||||
component.onImportClick();
|
||||
|
||||
expect(component.stepper.next).not.toHaveBeenCalled();
|
||||
expect(fileSelectDirective.uploader.uploadItem).not.toHaveBeenCalled();
|
||||
expect(component.projectNameForm.valid).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
@ -3,51 +3,80 @@ import { MatStepper, MatDialogRef, MAT_DIALOG_DATA } from "@angular/material";
|
||||
import { FileUploader, ParsedResponseHeaders, FileItem } from 'ng2-file-upload';
|
||||
import { Server } from '../../../models/server';
|
||||
import { v4 as uuid } from 'uuid';
|
||||
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
|
||||
|
||||
export class Validator {
|
||||
static projectNameValidator(projectName) {
|
||||
var pattern = new RegExp(/[~`!#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?]/);
|
||||
|
||||
if(!pattern.test(projectName.value)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return { invalidName: true }
|
||||
}
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-import-project-dialog',
|
||||
templateUrl: 'import-project-dialog.component.html',
|
||||
styleUrls: ['import-project-dialog.component.css'],
|
||||
styleUrls: ['import-project-dialog.component.css']
|
||||
})
|
||||
export class ImportProjectDialogComponent implements OnInit {
|
||||
uploader: FileUploader;
|
||||
server : Server;
|
||||
projectName : string;
|
||||
isImportEnabled : boolean = false;
|
||||
isFinishEnabled : boolean = false;
|
||||
errorMessage : string;
|
||||
resultMessage : string = "The project is being imported... Please wait";
|
||||
projectNameForm: FormGroup;
|
||||
submitted: boolean = false;
|
||||
|
||||
@ViewChild('stepper') stepper: MatStepper;
|
||||
|
||||
constructor(
|
||||
public dialogRef: MatDialogRef<ImportProjectDialogComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data: any){}
|
||||
@Inject(MAT_DIALOG_DATA) public data: any,
|
||||
private formBuilder: FormBuilder){
|
||||
this.projectNameForm = this.formBuilder.group({
|
||||
projectName: new FormControl(null, [Validators.required, Validator.projectNameValidator])
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit(){
|
||||
this.uploader = new FileUploader({});
|
||||
this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; };
|
||||
}
|
||||
|
||||
get form() {
|
||||
return this.projectNameForm.controls;
|
||||
}
|
||||
|
||||
uploadProjectFile(event) : void{
|
||||
this.projectName = event.target.files[0].name.split(".")[0];
|
||||
this.projectNameForm.controls['projectName'].setValue(event.target.files[0].name.split(".")[0]);
|
||||
this.isImportEnabled = true;
|
||||
}
|
||||
|
||||
onImportClick() : void{
|
||||
if(this.validateProjectName()){
|
||||
this.prepareUploadPath();
|
||||
if (this.projectNameForm.invalid){
|
||||
this.submitted = true;
|
||||
} else {
|
||||
const url = this.prepareUploadPath();
|
||||
this.uploader.queue.forEach(elem => elem.url = url);
|
||||
|
||||
this.stepper.selected.completed = true;
|
||||
this.stepper.next();
|
||||
let itemToUpload = this.uploader.queue[0];
|
||||
|
||||
const itemToUpload = this.uploader.queue[0];
|
||||
this.uploader.uploadItem(itemToUpload);
|
||||
|
||||
this.uploader.onErrorItem = (item: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => {
|
||||
this.errorMessage = response;
|
||||
this.isFinishEnabled = true;
|
||||
this.resultMessage = response;
|
||||
this.isFinishEnabled = true;
|
||||
};
|
||||
|
||||
this.uploader.onSuccessItem = (item: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => {
|
||||
this.isFinishEnabled = true;
|
||||
this.resultMessage = "Project was imported succesfully!";
|
||||
this.isFinishEnabled = true;
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -64,16 +93,11 @@ export class ImportProjectDialogComponent implements OnInit {
|
||||
onDeleteClick() : void{
|
||||
this.uploader.queue.pop();
|
||||
this.isImportEnabled = false;
|
||||
this.projectName = "";
|
||||
this.projectNameForm.controls['projectName'].setValue("");
|
||||
}
|
||||
|
||||
prepareUploadPath() : void{
|
||||
let url = `http://${this.server.ip}:${this.server.port}/v2/projects/${uuid()}/import?name=${this.projectName}`;
|
||||
this.uploader.queue.forEach(elem => elem.url = url);
|
||||
}
|
||||
|
||||
validateProjectName() : boolean{
|
||||
var pattern = new RegExp(/[~`!#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?]/);
|
||||
return !pattern.test(this.projectName);
|
||||
prepareUploadPath() : string{
|
||||
const projectName = this.projectNameForm.controls['projectName'].value;
|
||||
return `http://${this.server.ip}:${this.server.port}/v2/projects/${uuid()}/import?name=${projectName}`;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user