ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2024-12-23 14:52:22 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Fixes after cr

Browse Source
This commit is contained in:
PiotrP 2018-11-02 02:22:04 -07:00
parent 35f16d3eff
commit c4486ee104
7 changed files with 61 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/components/projects/import-project-dialog/import-project-confirmation-dialog/import-project-confirmation-dialog.component.html
View File

@ -1,8 +1,8 @@
<span>{{confirmationMessage}}</span>
<div class="buttons-bar" *ngIf="!isOpen">
<div mat-dialog-actions *ngIf="!isOpen">
<button mat-button class="cancelButton" (click)="onNoClick()" color="accent">No</button>
<button mat-button class="confirmButton" (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">Yes</button>
</div>
<div class="buttons-bar" *ngIf="isOpen">
<div mat-dialog-actions *ngIf="isOpen">
<button mat-button (click)="onNoClick()" color="accent">Ok</button>
</div>

17
src/app/components/projects/import-project-dialog/import-project-dialog.component.css
View File

@ -4,24 +4,26 @@
.file-button{
height: 50px;
width: 120px;
width: 20%;
margin-top: 10px;
padding: 0px;
}
.file-name-form {
float: right;
width: 100%;
}
.file-name-form-field {
margin-left: 10px;
margin-right: 10px;
width:250px;
margin-left: 5%;
width: 65%;
}
.delete-button {
background: transparent;
border: none;
outline: 0
outline: 0;
width: 10%;
}
.delete-icon {
@ -30,4 +32,9 @@
.result-message-box {
margin-top: 10px;
text-align: center;
}
.progress-bar {
background-color : #0097a7;
}

18
src/app/components/projects/import-project-dialog/import-project-dialog.component.html
View File

@ -2,32 +2,32 @@
<mat-horizontal-stepper #stepper [linear]="true">
<mat-step label="Choose file" editable="false" completed="false">
<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">
<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>
<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 class="delete-button" [hidden]="!isDeleteVisible">
<mat-icon color="primary" (click)="onDeleteClick()" class="delete-icon">clear</mat-icon>
</button>
<div mat-dialog-actions>
<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>
</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 class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
</div>
<div class="result-message-box">
<span>{{resultMessage}}</span>
</div>
<div class="buttons-bar">
<div mat-dialog-actions>
<button mat-button [disabled]="!isFinishEnabled" (click)="onNoClick()" tabindex="2" mat-raised-button color="primary">Finish</button>
</div>
</mat-step>

27
src/app/components/projects/import-project-dialog/import-project-dialog.component.spec.ts
View File

@ -205,4 +205,31 @@ describe('ImportProjectDialogComponent', () => {
expect(component.openConfirmationDialog).toHaveBeenCalled();
});
it('should show delete button after selecting project', () => {
let fileItem = new FileItem(fileSelectDirective.uploader, new File([],"fileName"),{});
fileSelectDirective.uploader.queue.push(fileItem);
let event = {
target: {
files: [ {name : "uploadedFile"} ]
}
};
component.uploadProjectFile(event);
expect(component.isDeleteVisible).toBe(true);
});
it('should hide delete button after deselecting project', () => {
let fileItem = new FileItem(fileSelectDirective.uploader, new File([],"fileName"),{});
fileSelectDirective.uploader.queue.push(fileItem);
let event = {
target: {
files: [ {name : "uploadedFile"} ]
}
};
component.uploadProjectFile(event);
component.onDeleteClick();
expect(component.isDeleteVisible).toBe(false);
});
});

6
src/app/components/projects/import-project-dialog/import-project-dialog.component.ts
View File

@ -11,7 +11,7 @@ import { ServerResponse } from '../../../models/serverResponse';
export class Validator {
static projectNameValidator(projectName) {
var pattern = new RegExp(/[~`!#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?]/);
var pattern = new RegExp(/[~`!#$%\^&*+=\[\]\\';,/{}|\\":<>\?]/);
if(!pattern.test(projectName.value)) {
return null;
@ -31,6 +31,7 @@ export class ImportProjectDialogComponent implements OnInit {
server : Server;
isImportEnabled : boolean = false;
isFinishEnabled : boolean = false;
isDeleteVisible : boolean = false;
resultMessage : string = "The project is being imported... Please wait";
projectNameForm: FormGroup;
submitted: boolean = false;
@ -71,6 +72,7 @@ export class ImportProjectDialogComponent implements OnInit {
uploadProjectFile(event) : void{
this.projectNameForm.controls['projectName'].setValue(event.target.files[0].name.split(".")[0]);
this.isImportEnabled = true;
this.isDeleteVisible = true;
}
onImportClick() : void{
@ -135,6 +137,7 @@ export class ImportProjectDialogComponent implements OnInit {
onDeleteClick() : void{
this.uploader.queue.pop();
this.isImportEnabled = false;
this.isDeleteVisible = false;
this.projectNameForm.controls['projectName'].setValue("");
}
@ -143,4 +146,3 @@ export class ImportProjectDialogComponent implements OnInit {
return `http://${this.server.ip}:${this.server.port}/v2/projects/${uuid()}/import?name=${projectName}`;
}
}

5
src/app/components/projects/projects.component.css
View File

@ -1,3 +1,4 @@
.import-button {
margin-right:10px
}
height: 40px;
margin: 20px;
}

9
src/app/components/projects/projects.component.html
View File

@ -1,6 +1,9 @@
<div class="content">
<div class="default-header">
<h1>Projects</h1>
<div class="row">
<h1 class="col">Projects</h1>
<button class="col" mat-raised-button color="primary" (click)="importProject()" class="import-button">Import project</button>
</div>
</div>
<div class="default-content">
@ -33,9 +36,5 @@
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>
<div class="buttons-bar">
<button mat-raised-button color="primary" (click)="importProject()" class="import-button">Import project</button>
</div>
</div>
</div>