added progress spinner for uploading param file

added progress spinner while uplaoding param file for the user to have a visual representation of the upload

Issue-ID: APPC-1066
Change-Id: I411cca1677e924ee43050843401fd957a2aba3f9
Signed-off-by: Sandeep J <sandeejh@in.ibm.com>

2 files changed, 28 insertions, 1 deletions

diff --git a/src/app/vnfs/build-artifacts/template-holder/param-name-value/param-name-value.component.html b/src/app/vnfs/build-artifacts/template-holder/param-name-value/param-name-value.component.html
index 3b1199b..e505b59 100644
--- a/src/app/vnfs/build-artifacts/template-holder/param-name-value/param-name-value.component.html
+++ b/src/app/vnfs/build-artifacts/template-holder/param-name-value/param-name-value.component.html
@@ -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);
@@ -22,6 +24,11 @@ ECOMP is a trademark and service mark of AT&T Intellectual Property.
 -->
 
 <simple-notifications [options]="options"></simple-notifications>
+<ngx-spinner bdColor="rgba(51,51,51,0.8)"
+  size="large"
+  color="orange"
+  loadingText="Uploading param 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>
 
 <tabs>
diff --git a/src/app/vnfs/build-artifacts/template-holder/param-name-value/param-name-value.component.ts b/src/app/vnfs/build-artifacts/template-holder/param-name-value/param-name-value.component.ts
index b098ab7..e49140d 100644
--- a/src/app/vnfs/build-artifacts/template-holder/param-name-value/param-name-value.component.ts
+++ b/src/app/vnfs/build-artifacts/template-holder/param-name-value/param-name-value.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);
@@ -39,6 +41,7 @@ import { Tab } from './tab';
 import { environment } from '../../../../../environments/environment';
 import { NgProgress } from 'ngx-progressbar';
 import * as XLSX from 'xlsx';
+import { NgxSpinnerService } from 'ngx-spinner';
 
 declare var $: any;
 
@@ -104,7 +107,19 @@ export class GoldenConfigurationMappingComponent implements OnInit {
     refObj: any;
     public paramsContent = localStorage['paramsContent'];
 
-    constructor(private buildDesignComponent: BuildDesignComponent, private paramShareService: ParamShareService, private router: Router, private httpUtil: HttpUtilService, private dialogService: DialogService, private activeRoutes: ActivatedRoute, private mappingEditorService: MappingEditorService, private notificationService: NotificationService, private nService: NotificationsService, private ngProgress: NgProgress) {
+    constructor(
+        private buildDesignComponent: BuildDesignComponent,
+        private paramShareService: ParamShareService,
+        private router: Router,
+        private httpUtil: HttpUtilService,
+        private dialogService: DialogService,
+        private activeRoutes: ActivatedRoute,
+        private mappingEditorService: MappingEditorService,
+        private notificationService: NotificationService,
+        private nService: NotificationsService,
+        private ngProgress: NgProgress,
+        private spinner: NgxSpinnerService
+    ) {
         this.artifactRequest.action = '';
         this.artifactRequest.version = '';
         this.artifactRequest.paramKeysContent = '';
@@ -205,6 +220,7 @@ export class GoldenConfigurationMappingComponent implements OnInit {
 
     public fileParamChange(input) {
         if (input.files && input.files[0]) {
+            this.spinner.show();
             this.enableMappingSave = true;
             this.myfileName = input.files[0].name;
             var fileExtension = this.myfileName.substr(this.myfileName.lastIndexOf('.') + 1);
@@ -221,6 +237,10 @@ export class GoldenConfigurationMappingComponent implements OnInit {
                     }
                     this.enableMerge = true;
                     this.initialData = result;
+                    setTimeout(() => {
+                        /** spinner ends after 3.5 seconds */
+                        this.spinner.hide();
+                    }, 3500);
                 });
             }
             else {