mirror of
https://github.com/GNS3/gns3-web-ui.git
synced 2025-06-17 06:18:09 +00:00
Removing stepper
This commit is contained in:
@ -1,8 +1,5 @@
|
|||||||
import { Component, OnInit, Inject, ViewChild } from '@angular/core';
|
import { Component, OnInit, Inject } from '@angular/core';
|
||||||
import { MatStepper, MatDialogRef, MAT_DIALOG_DATA } from "@angular/material";
|
import { 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 { Project } from '../../../../models/project';
|
import { Project } from '../../../../models/project';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -1,7 +1,5 @@
|
|||||||
<h1 mat-dialog-title>Import project</h1>
|
<h1 mat-dialog-title>Import project</h1>
|
||||||
<mat-horizontal-stepper #stepper [linear]="true">
|
<div [hidden]="isFirstStepCompleted">
|
||||||
<mat-step label="Choose file" editable="false" completed="false">
|
|
||||||
<div>
|
|
||||||
<form [formGroup]="projectNameForm" class="file-name-form">
|
<form [formGroup]="projectNameForm" class="file-name-form">
|
||||||
<input type="file" accept=".gns3project, .gns3p" class="non-visible" #file (change)="uploadProjectFile($event)" ng2FileSelect [uploader]="uploader"/>
|
<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>
|
<button mat-raised-button color="primary" (click)="file.click()" class="file-button">Choose file</button>
|
||||||
@ -19,8 +17,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</mat-step>
|
<div [hidden]="!isFirstStepCompleted">
|
||||||
<mat-step label="Progress" editable="false" completed="false">
|
|
||||||
<div class="progress">
|
<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>
|
||||||
@ -30,5 +27,4 @@
|
|||||||
<div mat-dialog-actions>
|
<div mat-dialog-actions>
|
||||||
<button mat-button [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>
|
</div>
|
||||||
</mat-step>
|
</div>
|
||||||
</mat-horizontal-stepper>
|
|
||||||
|
@ -36,7 +36,7 @@ export class MockedProjectService {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
describe('ImportProjectDialogComponent', () => {
|
fdescribe('ImportProjectDialogComponent', () => {
|
||||||
let component: ImportProjectDialogComponent;
|
let component: ImportProjectDialogComponent;
|
||||||
let fixture: ComponentFixture<ImportProjectDialogComponent>;
|
let fixture: ComponentFixture<ImportProjectDialogComponent>;
|
||||||
let server: Server;
|
let server: Server;
|
||||||
@ -160,26 +160,22 @@ describe('ImportProjectDialogComponent', () => {
|
|||||||
expect(fileSelectDirective.uploader.queue[0].url).toContain("newProject");
|
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"),{});
|
let fileItem = new FileItem(fileSelectDirective.uploader, new File([],"fileName"),{});
|
||||||
fileSelectDirective.uploader.queue.push(fileItem);
|
fileSelectDirective.uploader.queue.push(fileItem);
|
||||||
|
|
||||||
spyOn(component.stepper, "next");
|
|
||||||
|
|
||||||
component.onImportClick();
|
component.onImportClick();
|
||||||
|
|
||||||
expect(component.stepper.next).toHaveBeenCalled();
|
expect(component.isFirstStepCompleted).toBe(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should detect if file input is empty', () => {
|
it('should detect if file input is empty', () => {
|
||||||
component.projectNameForm.controls['projectName'].setValue("");
|
component.projectNameForm.controls['projectName'].setValue("");
|
||||||
fixture.detectChanges();
|
fixture.detectChanges();
|
||||||
spyOn(component.stepper, "next");
|
|
||||||
spyOn(fileSelectDirective.uploader, 'uploadItem');
|
spyOn(fileSelectDirective.uploader, 'uploadItem');
|
||||||
|
|
||||||
component.onImportClick();
|
component.onImportClick();
|
||||||
|
|
||||||
expect(component.stepper.next).not.toHaveBeenCalled();
|
|
||||||
expect(fileSelectDirective.uploader.uploadItem).not.toHaveBeenCalled();
|
expect(fileSelectDirective.uploader.uploadItem).not.toHaveBeenCalled();
|
||||||
expect(component.projectNameForm.valid).toBeFalsy();
|
expect(component.projectNameForm.valid).toBeFalsy();
|
||||||
});
|
});
|
||||||
@ -187,12 +183,10 @@ describe('ImportProjectDialogComponent', () => {
|
|||||||
it('should sanitize file name input', () => {
|
it('should sanitize file name input', () => {
|
||||||
component.projectNameForm.controls['projectName'].setValue("[][]");
|
component.projectNameForm.controls['projectName'].setValue("[][]");
|
||||||
fixture.detectChanges();
|
fixture.detectChanges();
|
||||||
spyOn(component.stepper, "next");
|
|
||||||
spyOn(fileSelectDirective.uploader, 'uploadItem');
|
spyOn(fileSelectDirective.uploader, 'uploadItem');
|
||||||
|
|
||||||
component.onImportClick();
|
component.onImportClick();
|
||||||
|
|
||||||
expect(component.stepper.next).not.toHaveBeenCalled();
|
|
||||||
expect(fileSelectDirective.uploader.uploadItem).not.toHaveBeenCalled();
|
expect(fileSelectDirective.uploader.uploadItem).not.toHaveBeenCalled();
|
||||||
expect(component.projectNameForm.valid).toBeFalsy();
|
expect(component.projectNameForm.valid).toBeFalsy();
|
||||||
});
|
});
|
||||||
|
@ -35,8 +35,7 @@ export class ImportProjectDialogComponent implements OnInit {
|
|||||||
resultMessage : string = "The project is being imported... Please wait";
|
resultMessage : string = "The project is being imported... Please wait";
|
||||||
projectNameForm: FormGroup;
|
projectNameForm: FormGroup;
|
||||||
submitted: boolean = false;
|
submitted: boolean = false;
|
||||||
|
isFirstStepCompleted: boolean = false;
|
||||||
@ViewChild('stepper') stepper: MatStepper;
|
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private dialog: MatDialog,
|
private dialog: MatDialog,
|
||||||
@ -98,8 +97,7 @@ export class ImportProjectDialogComponent implements OnInit {
|
|||||||
const url = this.prepareUploadPath();
|
const url = this.prepareUploadPath();
|
||||||
this.uploader.queue.forEach(elem => elem.url = url);
|
this.uploader.queue.forEach(elem => elem.url = url);
|
||||||
|
|
||||||
this.stepper.selected.completed = true;
|
this.isFirstStepCompleted = true;
|
||||||
this.stepper.next();
|
|
||||||
|
|
||||||
const itemToUpload = this.uploader.queue[0];
|
const itemToUpload = this.uploader.queue[0];
|
||||||
this.uploader.uploadItem(itemToUpload);
|
this.uploader.uploadItem(itemToUpload);
|
||||||
|
Reference in New Issue
Block a user