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

Removing stepper

Browse Source
This commit is contained in:
PiotrP 2018-11-07 05:43:19 -08:00
parent c4486ee104
commit ce13d3a68c
4 changed files with 34 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,5 @@
import { Component, OnInit, Inject, ViewChild } from '@angular/core';
import { MatStepper, MatDialogRef, MAT_DIALOG_DATA } from "@angular/material";
import { FileUploader, ParsedResponseHeaders, FileItem } from 'ng2-file-upload';
import { v4 as uuid } from 'uuid';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material";
import { Project } from '../../../../models/project';
@Component({

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

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

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

@ -36,7 +36,7 @@ export class MockedProjectService {
}
}
describe('ImportProjectDialogComponent', () => {
fdescribe('ImportProjectDialogComponent', () => {
let component: ImportProjectDialogComponent;
let fixture: ComponentFixture<ImportProjectDialogComponent>;
let server: Server;
@ -160,26 +160,22 @@ describe('ImportProjectDialogComponent', () => {
expect(fileSelectDirective.uploader.queue[0].url).toContain("newProject");
});
it('should navigate to next step after clicking import', () => {
it('should navigate to progress view after clicking import', () => {
let fileItem = new FileItem(fileSelectDirective.uploader, new File([],"fileName"),{});
fileSelectDirective.uploader.queue.push(fileItem);
spyOn(component.stepper, "next");
component.onImportClick();
expect(component.stepper.next).toHaveBeenCalled();
expect(component.isFirstStepCompleted).toBe(true);
});
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();
});
@ -187,12 +183,10 @@ describe('ImportProjectDialogComponent', () => {
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();
});

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

@ -35,8 +35,7 @@ export class ImportProjectDialogComponent implements OnInit {
resultMessage : string = "The project is being imported... Please wait";
projectNameForm: FormGroup;
submitted: boolean = false;
@ViewChild('stepper') stepper: MatStepper;
isFirstStepCompleted: boolean = false;
constructor(
private dialog: MatDialog,
@ -98,8 +97,7 @@ export class ImportProjectDialogComponent implements OnInit {
const url = this.prepareUploadPath();
this.uploader.queue.forEach(elem => elem.url = url);
this.stepper.selected.completed = true;
this.stepper.next();
this.isFirstStepCompleted = true;
const itemToUpload = this.uploader.queue[0];
this.uploader.uploadItem(itemToUpload);