ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-04-09 11:31:15 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

1. Improve progress bar and I used common progress bar.

Browse Source 
2.  Added cancel button
3. And modified the unit test cases
This commit is contained in:
Rajnikant Lodhi 2022-07-06 20:27:44 +05:30
parent 379a39a98f
commit 9381578657
10 changed files with 59 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/common/uploading-processbar/uploading-processbar.component.html
View File

@ -1,4 +1,4 @@
<p>Image Uploading please wait .... {{uploadProgress}}%</p>
<p>{{upload_file_type}} Uploading please wait .... {{uploadProgress}}%</p>
<div class="row proccessBar-row ">
<div class="col-md-9 proccessBar-col">
<mat-progress-bar mode="determinate" [value]="uploadProgress" aria-valuemin="0" aria-valuemax="100">

4
src/app/common/uploading-processbar/uploading-processbar.component.ts
View File

@ -13,7 +13,7 @@ import { UploadServiceService } from './upload-service.service';
export class UploadingProcessbarComponent implements OnInit {
uploadProgress: number = 0
subscription: Subscription;
upload_file_type:string
constructor(
@Inject(MAT_SNACK_BAR_DATA) public data,
private _snackRef: MatSnackBarRef<UploadingProcessbarComponent>,
@ -21,6 +21,8 @@ export class UploadingProcessbarComponent implements OnInit {
) { }
ngOnInit() {
this.upload_file_type = this.data.upload_file_type
debugger
this.subscription = this._US.currentCount.subscribe((count:number) => {
this.uploadProgress = count;
if (this.uploadProgress === 100 || this.uploadProgress == null ) {

1
src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.ts
View File

@ -158,6 +158,7 @@ export class AddIosTemplateComponent implements OnInit, OnDestroy {
this.uploader.uploadItem(itemToUpload);
this.snackBar.openFromComponent(UploadingProcessbarComponent, {
panelClass: 'uplaoding-file-snackabar',
data:{upload_file_type:'Image'}
});
}

1
src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.ts
View File

@ -129,6 +129,7 @@ export class AddIouTemplateComponent implements OnInit, OnDestroy {
this.uploader.uploadItem(itemToUpload);
this.snackBar.openFromComponent(UploadingProcessbarComponent, {
panelClass: 'uplaoding-file-snackabar',
data:{upload_file_type:'Image'}
});
}

2
src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.ts
View File

@ -157,7 +157,7 @@ export class AddQemuVmTemplateComponent implements OnInit {
if ((itemToUpload as any).options) (itemToUpload as any).options.disableMultipart = true; ((itemToUpload as any).options.headers =[{name:'Authorization',value:'Bearer ' + this.server.authToken}])
this.uploader.uploadItem(itemToUpload);
this.snackBar.openFromComponent(UploadingProcessbarComponent,{panelClass: 'uplaoding-file-snackabar',});
this.snackBar.openFromComponent(UploadingProcessbarComponent,{panelClass: 'uplaoding-file-snackabar', data:{upload_file_type:'Image'}});
}
cancelUploading() {

1
src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts
View File

@ -728,6 +728,7 @@ export class NewTemplateDialogComponent implements OnInit {
openSnackBar() {
this.snackBar.openFromComponent(UploadingProcessbarComponent, {
panelClass: 'uplaoding-file-snackabar',
data:{upload_file_type:'Image'}
});
}

5
src/app/components/project-map/project-map.component.ts
View File

@ -943,6 +943,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
}
importProject() {
debugger
let uuid: string = '';
const dialogRef = this.dialog.open(ImportProjectDialogComponent, {
width: '400px',
@ -955,9 +956,9 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
uuid = projectId;
});
dialogRef.afterClosed().subscribe(() => {
dialogRef.afterClosed().subscribe((isCancel:boolean) => {
subscription.unsubscribe();
if (uuid) {
if (uuid && !isCancel) {
this.bottomSheet.open(NavigationDialogComponent);
let bottomSheetRef = this.bottomSheet._openedBottomSheetRef;
bottomSheetRef.instance.projectMessage = 'imported project';

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

@ -38,7 +38,7 @@
<button class="delete-button" [hidden]="!isDeleteVisible">
<mat-icon color="primary" (click)="onDeleteClick()" class="delete-icon">clear</mat-icon>
</button>
<div mat-dialog-actions>
<div mat-dialog-actions align="end">
<button mat-button (click)="onNoClick()" color="accent">Cancel</button>
<button
mat-button
@ -54,13 +54,13 @@
</form>
</div>
<div [hidden]="!isFirstStepCompleted">
<div class="progress">
<!-- <div class="progress">
<div class="progress-bar" role="progressbar" [ngStyle]="{ width: uploader.progress + '%' }"></div>
</div>
<div class="result-message-box">
</div> -->
<div class="">
<span>{{ resultMessage }}</span>
</div>
<div mat-dialog-actions>
<div mat-dialog-actions align="end">
<button
mat-button
[disabled]="!isFinishEnabled"

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

@ -18,6 +18,10 @@ import { Project } from '../../../models/project';
import { Server } from '../../../models/server';
import { ProjectService } from '../../../services/project.service';
import { ImportProjectDialogComponent } from './import-project-dialog.component';
import { ToasterService } from '../../../services/toaster.service';
import { MockedToasterService } from '../../../services/toaster.service.spec';
import { MatSnackBarModule } from '@angular/material/snack-bar';
export class MockedProjectService {
public projects: Project[] = [
@ -62,6 +66,7 @@ describe('ImportProjectDialogComponent', () => {
let server: Server;
let debugElement: DebugElement;
let fileSelectDirective: FileSelectDirective;
let mockedToasterService = new MockedToasterService()
let dialogRef = {
close: jasmine.createSpy('close'),
@ -77,6 +82,7 @@ describe('ImportProjectDialogComponent', () => {
MatDialogModule,
MatFormFieldModule,
MatInputModule,
MatSnackBarModule,
NoopAnimationsModule,
FileUploadModule,
FormsModule,
@ -87,6 +93,8 @@ describe('ImportProjectDialogComponent', () => {
{ provide: MatDialogRef, useValue: dialogRef },
{ provide: MAT_DIALOG_DATA, useValue: [] },
{ provide: ProjectService, useClass: MockedProjectService },
{ provide: ToasterService, useValue: mockedToasterService },
],
declarations: [ImportProjectDialogComponent],
}).compileComponents();

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

@ -1,6 +1,7 @@
import { Component, EventEmitter, Inject, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { ToasterService } from '../../../services/toaster.service';
import { FileItem, FileUploader, ParsedResponseHeaders } from 'ng2-file-upload';
import { v4 as uuid } from 'uuid';
import { Project } from '../../../models/project';
@ -9,6 +10,9 @@ import { ServerResponse } from '../../../models/serverResponse';
import { ProjectService } from '../../../services/project.service';
import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation-dialog.component';
import { ProjectNameValidator } from '../models/projectNameValidator';
import { UploadServiceService } from '../../../common/uploading-processbar/upload-service.service';
import { UploadingProcessbarComponent } from '../../../common/uploading-processbar/uploading-processbar.component';
import { MatSnackBar } from '@angular/material/snack-bar';
@Component({
selector: 'app-import-project-dialog',
@ -18,6 +22,7 @@ import { ProjectNameValidator } from '../models/projectNameValidator';
})
export class ImportProjectDialogComponent implements OnInit {
uploader: FileUploader;
uploadProgress: number = 0;
server: Server;
isImportEnabled: boolean = false;
isFinishEnabled: boolean = false;
@ -35,7 +40,11 @@ export class ImportProjectDialogComponent implements OnInit {
@Inject(MAT_DIALOG_DATA) public data: any,
private formBuilder: FormBuilder,
private projectService: ProjectService,
private projectNameValidator: ProjectNameValidator
private projectNameValidator: ProjectNameValidator,
private toasterService : ToasterService,
private uploadServiceService: UploadServiceService,
private snackBar : MatSnackBar,
) {
this.projectNameForm = this.formBuilder.group({
projectName: new FormControl(null, [Validators.required, projectNameValidator.get]),
@ -64,6 +73,16 @@ export class ImportProjectDialogComponent implements OnInit {
this.resultMessage = 'Project was imported succesfully!';
this.isFinishEnabled = true;
};
this.uploader.onProgressItem = (progress: any) => {
this.uploadProgress = progress['progress'];
this.uploadServiceService.processBarCount(this.uploadProgress)
};
this.uploadServiceService.currentCancelItemDetails.subscribe((isCancel) => {
if (isCancel) {
this.cancelUploading()
}
})
}
get form() {
@ -96,10 +115,12 @@ export class ImportProjectDialogComponent implements OnInit {
importProject() {
const url = this.prepareUploadPath();
this.uploader.queue.forEach((elem) => (elem.url = url));
this.uploader.authToken = `Bearer ${this.server.authToken.toString()}`
this.uploader.authToken = `Bearer ${this.server.authToken}`
this.isFirstStepCompleted = true;
const itemToUpload = this.uploader.queue[0];
this.uploader.uploadItem(itemToUpload);
this.snackBar.openFromComponent(UploadingProcessbarComponent,{panelClass: 'uplaoding-file-snackabar',data:{upload_file_type:'Project'}});
}
openConfirmationDialog(existingProject: Project) {
@ -126,11 +147,11 @@ export class ImportProjectDialogComponent implements OnInit {
onNoClick(): void {
this.uploader.cancelAll();
this.dialogRef.close();
this.dialogRef.close(false);
}
onFinishClick(): void {
this.dialogRef.close();
this.dialogRef.close(false);
}
onDeleteClick(): void {
@ -145,4 +166,14 @@ export class ImportProjectDialogComponent implements OnInit {
const projectName = this.projectNameForm.controls['projectName'].value;
return this.projectService.getUploadPath(this.server, this.uuid, projectName);
}
cancelUploading() {
this.uploader.clearQueue();
this.uploadServiceService.processBarCount(null)
this.toasterService.warning('Image upload cancelled');
this.uploadServiceService.cancelFileUploading(false)
this.isFirstStepCompleted = false
this.uploader.cancelAll();
this.dialogRef.close(true);
}
}