From 573fed6d2b7203a493e7a9eecaf4edc7c24c0abf Mon Sep 17 00:00:00 2001
From: Dillon-Brown <dillon.brown@salesagility.com>
Date: Tue, 4 Aug 2020 13:49:51 +0100
Subject: [PATCH] Implement chart loading splash

---
 core/app/src/app/app.module.ts                |  7 +++----
 .../src/components/chart/chart.component.html | 19 +++++++++++--------
 .../src/components/chart/chart.component.ts   |  6 ++++--
 core/app/src/components/chart/chart.module.ts |  4 +++-
 .../full-page-spinner.module.ts               | 19 +++++++++++++++++++
 5 files changed, 40 insertions(+), 15 deletions(-)
 create mode 100644 core/app/src/components/full-page-spinner/full-page-spinner.module.ts

diff --git a/core/app/src/app/app.module.ts b/core/app/src/app/app.module.ts
index 0cd6c4355..dbc81c8e8 100644
--- a/core/app/src/app/app.module.ts
+++ b/core/app/src/app/app.module.ts
@@ -30,19 +30,17 @@ import {AppManagerModule} from '../app-manager/app-manager.module';
 
 import {environment} from '../environments/environment';
 import {FetchPolicy} from 'apollo-client/core/watchQueryOptions';
-import {FullPageSpinnerComponent} from '@components/full-page-spinner/full-page-spinner.component';
 import {RouteReuseStrategy} from '@angular/router';
 import {AppRouteReuseStrategy} from './app-router-reuse-strategy';
 import {ImageModule} from '@components/image/image.module';
 import {AuthService} from '@services/auth/auth.service';
 import {GraphQLError} from 'graphql';
-
+import {FullPageSpinnerModule} from '@components/full-page-spinner/full-page-spinner.module';
 import {BnNgIdleService} from 'bn-ng-idle';
 
 @NgModule({
     declarations: [
-        AppComponent,
-        FullPageSpinnerComponent
+        AppComponent
     ],
     imports: [
         BrowserModule,
@@ -67,6 +65,7 @@ import {BnNgIdleService} from 'bn-ng-idle';
         ImageModule,
         BrowserAnimationsModule,
         NgbModule,
+        FullPageSpinnerModule
     ],
     providers: [
         {provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true},
diff --git a/core/app/src/components/chart/chart.component.html b/core/app/src/components/chart/chart.component.html
index abfa3b6e6..3691f352d 100644
--- a/core/app/src/components/chart/chart.component.html
+++ b/core/app/src/components/chart/chart.component.html
@@ -8,14 +8,17 @@
                 </select>
             </form>
             <div class="col-xs">
-                <scrm-dropdown-button *ngIf="false" [config]="getDropdownConfig()"></scrm-dropdown-button>
-                <scrm-vertical-bar-chart *ngIf="type === 'bar' && dataSource"
-                                         [dataSource]="dataSource"></scrm-vertical-bar-chart>
-                <scrm-pie-grid-chart *ngIf="type === 'pie-grid' && dataSource"
-                                     [dataSource]="dataSource"></scrm-pie-grid-chart>
-                <scrm-line-chart *ngIf="type === 'line' && dataSource"
+                <ng-container *ngIf="(appState$ | async) as appState">
+                    <app-full-page-spinner *ngIf="appState.loading"></app-full-page-spinner>
+                    <scrm-dropdown-button *ngIf="false" [config]="getDropdownConfig()"></scrm-dropdown-button>
+                    <scrm-vertical-bar-chart *ngIf="type === 'bar' && dataSource"
+                                             [dataSource]="dataSource"></scrm-vertical-bar-chart>
+                    <scrm-pie-grid-chart *ngIf="type === 'pie-grid' && dataSource"
+                                         [dataSource]="dataSource"></scrm-pie-grid-chart>
+                    <scrm-line-chart *ngIf="type === 'line' && dataSource"
                                      [dataSource]="dataSource"></scrm-line-chart>
-                <p *ngIf="!dataSource" class="lead text-center pt-3">Chart not found</p>
+                    <p *ngIf="!dataSource" class="lead text-center pt-3">Chart not found</p>
+                </ng-container>
             </div>
             <div class="donut-chart col-xs" *ngIf="false">
                 <div class="accordion">
@@ -24,4 +27,4 @@
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/core/app/src/components/chart/chart.component.ts b/core/app/src/components/chart/chart.component.ts
index 87e02511d..ef87efa21 100644
--- a/core/app/src/components/chart/chart.component.ts
+++ b/core/app/src/components/chart/chart.component.ts
@@ -7,6 +7,7 @@ import {DropdownButtonInterface} from '@components/dropdown-button/dropdown-butt
 import {PipelineBySalesStage} from '@components/chart/types/pipeline-by-sales-stage/pipeline-by-sales-stage.service';
 import {AccountTypesPerMonthLineChart} from '@components/chart/types/account-types-per-month/account-types-per-month.service';
 import {LeadsByStatus} from '@components/chart/types/leads-by-status/leads-by-status.service';
+import {AppState, AppStateStore} from '@store/app-state/app-state.store';
 
 export interface ChartTypesDataSource {
     getChartTypes(): Observable<ChartTypesMap>;
@@ -24,19 +25,20 @@ export interface ChartsViewModel {
     providers: [PipelineBySalesStage, AccountTypesPerMonthLineChart, LeadsByStatus]
 })
 export class ChartUiComponent {
+    appState$: Observable<AppState> = this.appStateStore.vm$;
     type = '';
     chartKey = '';
     chartLabel = '';
     dataSource;
     private dataSourceMap: { [key: string]: any } = {};
 
-
     constructor(
         protected languageStore: LanguageStore,
         protected listStore: ListViewStore,
         protected pipelineBySalesStage: PipelineBySalesStage,
         protected accountTypesPerMonth: AccountTypesPerMonthLineChart,
-        protected leadsByStatus: LeadsByStatus
+        protected leadsByStatus: LeadsByStatus,
+        private appStateStore: AppStateStore
     ) {
         this.dataSourceMap[this.pipelineBySalesStage.key] = this.pipelineBySalesStage;
         this.dataSourceMap[this.accountTypesPerMonth.key] = this.accountTypesPerMonth;
diff --git a/core/app/src/components/chart/chart.module.ts b/core/app/src/components/chart/chart.module.ts
index fed7cbefa..55226458c 100644
--- a/core/app/src/components/chart/chart.module.ts
+++ b/core/app/src/components/chart/chart.module.ts
@@ -13,6 +13,7 @@ import {NgxChartsModule} from '@swimlane/ngx-charts';
 import {VerticalBarChartComponent} from './charts/vertical-bar-chart/vertical-bar-chart.component';
 import {LineChartComponent} from '@components/chart/charts/line-chart/line-chart.component';
 import {PieGridChartComponent} from './charts/pie-grid-chart/pie-grid-chart.component';
+import {FullPageSpinnerModule} from '@components/full-page-spinner/full-page-spinner.module';
 
 @NgModule({
     declarations: [ChartUiComponent, VerticalBarChartComponent, LineChartComponent, PieGridChartComponent],
@@ -26,7 +27,8 @@ import {PieGridChartComponent} from './charts/pie-grid-chart/pie-grid-chart.comp
         BrowserModule,
         FormsModule,
         NgxChartsModule,
-        BrowserAnimationsModule
+        BrowserAnimationsModule,
+        FullPageSpinnerModule
     ]
 })
 export class ChartUiModule {
diff --git a/core/app/src/components/full-page-spinner/full-page-spinner.module.ts b/core/app/src/components/full-page-spinner/full-page-spinner.module.ts
new file mode 100644
index 000000000..4791c1016
--- /dev/null
+++ b/core/app/src/components/full-page-spinner/full-page-spinner.module.ts
@@ -0,0 +1,19 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {AngularSvgIconModule} from 'angular-svg-icon';
+import {FullPageSpinnerComponent} from '@components/full-page-spinner/full-page-spinner.component';
+
+@NgModule({
+    declarations: [
+        FullPageSpinnerComponent
+    ],
+    exports: [
+        FullPageSpinnerComponent
+    ],
+    imports: [
+        CommonModule,
+        AngularSvgIconModule
+    ]
+})
+export class FullPageSpinnerModule {
+}