merge from ecomp a88f0072 - Modern UI

Issue-ID: VID-378
Change-Id: Ibcb23dd27f550cf32ce2fe0239f0f496ae014ff6
Signed-off-by: Ittay Stern <ittay.stern@att.com>

3 files changed, 73 insertions, 29 deletions

diff --git a/vid-webpack-master/src/app/shared/components/spinner/spinner.component.html b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.html
index cb11feea8..238f7693d 100644
--- a/vid-webpack-master/src/app/shared/components/spinner/spinner.component.html
+++ b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.html
@@ -1,2 +1,6 @@
-<div *ngIf="show"
-     class="spinner"></div>
+<sdc-loader name= "global"
+            #globalLoader
+            [global] = "global"
+            [size]="size"
+            [(active)] = "show"></sdc-loader>
+
diff --git a/vid-webpack-master/src/app/shared/components/spinner/spinner.component.spec.ts b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.spec.ts
index 531ee8c62..57f7b009c 100644
--- a/vid-webpack-master/src/app/shared/components/spinner/spinner.component.spec.ts
+++ b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.spec.ts
@@ -1,42 +1,50 @@
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {HttpClientTestingModule} from '@angular/common/http/testing';
-import { SpinnerComponent } from './spinner.component';
+import {SpinnerComponent, SpinnerInfo} from './spinner.component';
+import {CUSTOM_ELEMENTS_SCHEMA} from "@angular/core";
 
 describe('Spinner component', () => {
   let component: SpinnerComponent;
   let fixture: ComponentFixture<SpinnerComponent>;
 
-  beforeEach(async(() => {
+  beforeAll(done => (async () => {
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule],
       providers: [],
-      declarations: [SpinnerComponent ]
-    })
-      .compileComponents();
-  }));
+      declarations: [SpinnerComponent],
+      schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
+    });
+    await TestBed.compileComponents();
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(SpinnerComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
-  });
 
-  it('component should be defined', () => {
+  })().then(done).catch(done.fail));
+
+
+
+  test('component should be defined', () => {
     expect(component).toBeDefined();
   });
 
-
-  it('component constructor should subscribe of showSpinner event with true', ()=> {
-    SpinnerComponent.showSpinner.next(true);
+  test('component constructor should subscribe of showSpinner event with true', ()=> {
+    let spinnerInfo : SpinnerInfo = new SpinnerInfo(true, 'someUrl', 'json');
+    SpinnerComponent.showSpinner.next(spinnerInfo);
     expect(component.show).toBeTruthy();
   });
 
-  it('component constructor should subscribe of showSpinner event with false', ()=> {
-    SpinnerComponent.showSpinner.next(false);
+  test('component constructor should subscribe of showSpinner event with true and then to be false', ()=> {
+    let spinnerInfo : SpinnerInfo = new SpinnerInfo(true, 'someUrl', 'json');
+    SpinnerComponent.showSpinner.next(spinnerInfo);
+    spinnerInfo  = new SpinnerInfo(false, 'someUrl', 'json');
+    SpinnerComponent.showSpinner.next(spinnerInfo);
     expect(component.show).toBeFalsy();
   });
 
-
-
-
+  test('component constructor should subscribe of showSpinner event with false', ()=> {
+    let spinnerInfo : SpinnerInfo = new SpinnerInfo(false, 'someUrl', 'json');
+    SpinnerComponent.showSpinner.next(spinnerInfo);
+    expect(component.show).toBeFalsy();
+  });
 });
diff --git a/vid-webpack-master/src/app/shared/components/spinner/spinner.component.ts b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.ts
index 0ce5d2074..94a0e1c52 100644
--- a/vid-webpack-master/src/app/shared/components/spinner/spinner.component.ts
+++ b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.ts
@@ -1,18 +1,50 @@
-import { Component, Input } from '@angular/core';
-import { Subject } from 'rxjs/Subject';
+import {Component} from '@angular/core';
+import {Subject} from 'rxjs/Subject';
+import * as _ from 'lodash';
 
 @Component({
   selector : 'spinner-component',
-  templateUrl : './spinner.component.html',
-  styleUrls : ['./spinner.component.scss']
+  templateUrl: './spinner.component.html',
+  styleUrls : ['./spinner.component.scss'],
+  providers : []
+
 })
-export class SpinnerComponent {
-  show : boolean = false;
-  static showSpinner: Subject<boolean> = new Subject<boolean>();
+export class SpinnerComponent{
+  show : boolean;
+  size = "large";
+  global = true;
+
+  requestMap = {};
+
+  static showSpinner: Subject<SpinnerInfo> = new Subject<SpinnerInfo>();
 
   constructor(){
-    SpinnerComponent.showSpinner.subscribe((status) => {
-      this.show = status;
+    SpinnerComponent.showSpinner.subscribe((spinnerInfo) => {
+      let status = spinnerInfo['status'];
+      let requestType = spinnerInfo['requestType'];
+      let requestUrl = spinnerInfo['requestUrl'];
+
+      if(status && requestType === 'json'){
+        this.requestMap[requestUrl] = true;
+      }else {
+        delete this.requestMap[requestUrl]
+      }
+      console.log(this.requestMap);
+      this.show = !_.isEmpty(this.requestMap) && this.requestMap !== undefined;
+
     })
   }
 }
+
+
+export class SpinnerInfo {
+  status : boolean;
+  requestUrl : string;
+  requestType : string;
+
+  constructor(status : boolean, requestUrl : string, requestType : string){
+    this.status = status;
+    this.requestUrl = requestUrl;
+    this.requestType = requestType;
+  }
+}