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>

2 files changed, 32 insertions, 3 deletions

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 @@
-<!--
+/*
 ============LICENSE_START==========================================
 ===================================================================
 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);
@@ -20,6 +22,11 @@ limitations under the License.
 ============LICENSE_END============================================
 -->
 <simple-notifications [options]="options"></simple-notifications>
+<ngx-spinner bdColor="rgba(51,51,51,0.8)"
+  size="large"
+  color="orange"
+  loadingText="Uploading template file..."
+  type="ball-scale-multiple"></ngx-spinner>
 <ng-progress [positionUsing]="'marginLeft'" [minimum]="0.15" [maximum]="1" [speed]="200" [showSpinner]="false" [direction]="'leftToRightIncreased'" [color]="'#6ab344'" [trickleSpeed]="250" [thick]="true" [ease]="'linear'"></ng-progress>
 <div>
     <div>
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 {