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 <sandeejh@in.ibm.com>

1 files changed, 24 insertions, 2 deletions

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 {