From: Sandeep J Date: Fri, 13 Jul 2018 07:52:42 +0000 (+0530) Subject: added progress spinner while uploading template X-Git-Tag: 1.4.0~112 X-Git-Url: https://gerrit.onap.org/r/gitweb?a=commitdiff_plain;h=dd28c9d3b5c425956ba05645d96ece6e4b0bf16c;p=appc%2Fcdt.git added progress spinner while uploading template added progress spinner while uploading template file so that the user can know visually that the file is being uploaded Issue-ID: APPC-1069 Change-Id: I4d17a1f64a241dc3dc49154ec6c8abe7babb793a Signed-off-by: Sandeep J --- diff --git a/package.json b/package.json index 91d67f9..8041857 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,9 @@ "underscore": "^1.8.3", "xlsx": "^0.11.3", "yamljs": "0.2.10", - "zone.js": "^0.8.14" + "zone.js": "^0.8.14", + "ngx-spinner": "^1.2.0" + }, "devDependencies": { "@angular/cli": "1.2.3", diff --git a/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.html b/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.html index 52a2734..9915d6f 100644 --- a/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.html +++ b/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.html @@ -1,8 +1,10 @@ - +
diff --git a/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.ts b/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.ts index a37834e..37838f0 100644 --- a/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.ts +++ b/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.ts @@ -3,6 +3,8 @@ =================================================================== Copyright (C) 2018 AT&T Intellectual Property. All rights reserved. =================================================================== +Copyright (C) 2018 IBM. +=================================================================== Unless otherwise specified, all software contained herein is licensed under the Apache License, Version 2.0 (the License); @@ -35,6 +37,7 @@ import { BuildDesignComponent } from '../../build-artifacts.component'; import { environment } from '../../../../../environments/environment'; import { ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal'; import { NgProgress } from 'ngx-progressbar'; +import { NgxSpinnerService } from 'ngx-spinner'; declare var $: any @Component({ selector: 'app-golden-configuration', templateUrl: './template-configuration.component.html', styleUrls: ['./template-configuration.component.css'] }) @@ -95,7 +98,18 @@ export class GoldenConfigurationComponent implements OnInit { } public replaceWord; public enableDownloadButtons: boolean = false; - constructor(private buildDesignComponent: BuildDesignComponent, private paramShareService: ParamShareService, private dialogService: DialogService, private notificationService: NotificationService, private httpUtil: HttpUtilService, private mappingEditorService: MappingEditorService, private activeRoutes: ActivatedRoute, private router: Router, private nService: NotificationsService, private ngProgress: NgProgress) { + constructor( + private buildDesignComponent: BuildDesignComponent, + private paramShareService: ParamShareService, + private dialogService: DialogService, + private notificationService: NotificationService, + private httpUtil: HttpUtilService, + private mappingEditorService: MappingEditorService, + private activeRoutes: ActivatedRoute, + private router: Router, + private nService: NotificationsService, + private ngProgress: NgProgress, + private spinner: NgxSpinnerService) { this.artifactRequest.action = ''; this.artifactRequest.version = ''; this.artifactRequest.paramsContent = '{}'; @@ -212,6 +226,8 @@ export class GoldenConfigurationComponent implements OnInit { this.handleAnnotation(this.modal); } }); + this.templateeditor.getEditor().$enableBlockSelect = false; + this.templateeditor.getEditor().$enableMultiselect = false; if (this.mappingEditorService.fromScreen === 'MappingScreen') { this.configMappingEditorContent = this.mappingEditorService.getTemplateMappingDataFromStore(); this.fileType = sessionStorage.getItem('fileType'); @@ -519,6 +535,7 @@ export class GoldenConfigurationComponent implements OnInit { if (refObj && refObj != undefined) { if (input.files && input.files[0]) { + this.spinner.show(); this.myfileName = input.files[0].name; this.fileName = input.files[0].name; this.fileType = input.files[0].type; @@ -547,7 +564,12 @@ export class GoldenConfigurationComponent implements OnInit { this.enableDownloadButtons = true; this.initialData = result; this.saveTemplate(); - + this.templateeditor.getEditor().$enableBlockSelect = false; + this.templateeditor.getEditor().$enableMultiselect = false; + setTimeout(() => { + /** spinner ends after 3.5 seconds */ + this.spinner.hide(); + }, 3500); }); } else { diff --git a/src/app/vnfs/vnfs.module.ts b/src/app/vnfs/vnfs.module.ts index c63d24a..c0f8158 100644 --- a/src/app/vnfs/vnfs.module.ts +++ b/src/app/vnfs/vnfs.module.ts @@ -3,6 +3,8 @@ =================================================================== Copyright (C) 2018 AT&T Intellectual Property. All rights reserved. =================================================================== +Copyright (C) 2018 IBM. +=================================================================== Unless otherwise specified, all software contained herein is licensed under the Apache License, Version 2.0 (the License); @@ -27,7 +29,7 @@ import {CommonModule} from '@angular/common'; // modules import {VnfRoutingModule} from './vnf.routing'; import {SharedModule} from '../shared/shared.module'; - +import { NgxSpinnerModule } from 'ngx-spinner'; import {AceEditorComponent} from 'ng2-ace-editor'; // components import {MyvnfsComponent} from './myvnfs/myvnfs.component'; @@ -77,7 +79,7 @@ export const components = [ export const modules = [ CommonModule, VnfRoutingModule, SharedModule.forRoot(), - FormsModule, BootstrapModalModule, Ng2Bs3ModalModule, SimpleNotificationsModule.forRoot() + FormsModule, BootstrapModalModule, Ng2Bs3ModalModule, SimpleNotificationsModule.forRoot(),NgxSpinnerModule ];