SHIBUI-1385 Added loaders

TIER · Sep 4, 2019 · 1f008a7 · 1f008a7
1 parent 54bceeb
commit 1f008a7
Show file tree

Hide file tree

Showing 13 changed files with 82 additions and 23 deletions.
diff --git a/ui/src/app/metadata/configuration/container/metadata-comparison.component.html b/ui/src/app/metadata/configuration/container/metadata-comparison.component.html
@@ -4,7 +4,7 @@ <h2 class="mb-4" [ngSwitch]="type$ | async">
     <ng-container *ngSwitchDefault translate="label.provider">Provider</ng-container>
     Configuration
 </h2>
-<div class="" [ngClass]="{
+<div *ngIf="!(loading$ | async)" class="" [ngClass]="{
     'container-fluid': (numVersions$ | async) > 2,
     'container': (numVersions$ | async) <= 2
 }">
@@ -14,5 +14,9 @@ <h2 class="mb-4" [ngSwitch]="type$ | async">
             <translate-i18n key="action.version-history">Version History</translate-i18n>
         </a>
     </div>
-    <metadata-configuration [configuration]="versions$ | async"></metadata-configuration>
+    <metadata-configuration [configuration]="versions$ | async" [editable]="false"></metadata-configuration>
+</div>
+<div *ngIf="loading$ | async" class="d-flex justify-content-center">
+    <i class="fa fa-spinner fa-pulse fa-4x fa-fw"></i>
+    <span class="sr-only">Loading...</span>
 </div>
diff --git a/ui/src/app/metadata/configuration/container/metadata-comparison.component.ts b/ui/src/app/metadata/configuration/container/metadata-comparison.component.ts
@@ -1,10 +1,10 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy, OnDestroy } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Store } from '@ngrx/store';
 import { ActivatedRoute } from '@angular/router';
 import { map } from 'rxjs/operators';
 import { ConfigurationState, getComparisonConfigurations, getComparisonConfigurationCount } from '../reducer';
-import { CompareVersionRequest } from '../action/compare.action';
+import { CompareVersionRequest, ClearVersions } from '../action/compare.action';
 import { MetadataConfiguration } from '../model/metadata-configuration';
 import * as fromReducer from '../reducer';
 
@@ -14,23 +14,29 @@ import * as fromReducer from '../reducer';
     templateUrl: './metadata-comparison.component.html',
     styleUrls: []
 })
-export class MetadataComparisonComponent {
+export class MetadataComparisonComponent implements OnDestroy {
 
     versions$: Observable<MetadataConfiguration>;
     numVersions$: Observable<number>;
     type$: Observable<string>;
+    loading$: Observable<boolean> = this.store.select(fromReducer.getComparisonLoading);
 
     constructor(
         private store: Store<ConfigurationState>,
         private activatedRoute: ActivatedRoute
     ) {
         this.activatedRoute.queryParams.pipe(
             map(params => params.versions),
+            map(versions => Array.isArray(versions) ? versions : [versions]),
             map(versions => new CompareVersionRequest(versions))
         ).subscribe(this.store);
 
         this.versions$ = this.store.select(getComparisonConfigurations);
         this.numVersions$ = this.store.select(getComparisonConfigurationCount);
         this.type$ = this.store.select(fromReducer.getConfigurationModelType);
     }
+
+    ngOnDestroy(): void {
+        this.store.dispatch(new ClearVersions());
+    }
 }
diff --git a/ui/src/app/metadata/configuration/container/metadata-history.component.html b/ui/src/app/metadata/configuration/container/metadata-history.component.html
@@ -1,9 +1,13 @@
 <h2 class="mb-4">
     Version History
 </h2>
-<div class="container">
+<div class="container" *ngIf="!(loading$ | async)">
     <history-list
         [history]="history$ | async"
         (compare)="compareVersions($event)"
         (restore)="restoreVersion($event)"></history-list>
 </div>
+<div *ngIf="loading$ | async" class="d-flex justify-content-center">
+    <i class="fa fa-spinner fa-pulse fa-4x fa-fw"></i>
+    <span class="sr-only">Loading...</span>
+</div>
diff --git a/ui/src/app/metadata/configuration/container/metadata-history.component.ts b/ui/src/app/metadata/configuration/container/metadata-history.component.ts
@@ -5,7 +5,8 @@ import {
     ConfigurationState,
     getVersionCollection,
     getConfigurationModelId,
-    getConfigurationModelKind
+    getConfigurationModelKind,
+    getHistoryLoading
 } from '../reducer';
 import { MetadataVersion } from '../model/version';
 import { Router, ActivatedRoute } from '@angular/router';
@@ -23,6 +24,7 @@ export class MetadataHistoryComponent implements OnDestroy {
     private ngUnsubscribe: Subject<void> = new Subject<void>();
 
     history$: Observable<MetadataVersion[]>;
+    loading$: Observable<boolean> = this.store.select(getHistoryLoading);
 
     constructor(
         private store: Store<ConfigurationState>,

diff --git a/ui/src/app/metadata/configuration/container/metadata-options.component.html b/ui/src/app/metadata/configuration/container/metadata-options.component.html
@@ -31,10 +31,16 @@ <h2 class="mb-4" [ngSwitch]="type$ | async">
                 translate="action.xml">XML</a>
         </div>
     </div>
-    <metadata-configuration
-        [configuration]="configuration$ | async"
-        id="configuration">
-    </metadata-configuration>
+    <ng-container *ngIf="configuration$ | async">
+        <metadata-configuration [configuration]="configuration$ | async" id="configuration"></metadata-configuration>
+    </ng-container>
+    <ng-container *ngIf="!(configuration$ | async)">
+        <metadata-configuration [configuration]="configuration$ | async" id="configuration"></metadata-configuration>
+        <div class="d-flex justify-content-center">
+            <i class="fa fa-spinner fa-pulse fa-4x fa-fw"></i>
+            <span class="sr-only">Loading...</span>
+        </div>
+    </ng-container>
     <div *ngIf="kind === 'provider'" id="filters">
         <div class="numbered-header d-flex justify-content-start bg-light align-items-center">
             <h2 class="title h4 m-0 ml-2 flex-grow-1">

diff --git a/ui/src/app/metadata/configuration/container/metadata-options.component.ts b/ui/src/app/metadata/configuration/container/metadata-options.component.ts
@@ -9,17 +9,13 @@ import { takeUntil, filter } from 'rxjs/operators';
 import {
     ConfigurationState,
     getConfigurationSections,
-    getSelectedVersion,
-    getSelectedVersionNumber,
     getSelectedIsCurrent,
     getConfigurationModelEnabled,
     getConfigurationHasXml,
     getConfigurationModel,
-    getConfigurationDefinition,
     getConfigurationModelType
 } from '../reducer';
 import { MetadataConfiguration } from '../model/metadata-configuration';
-import { MetadataVersion } from '../model/version';
 import { MetadataFilter } from '../../domain/model';
 import { getAdditionalFilters } from '../../filter/reducer';
 import {
@@ -32,6 +28,7 @@ import {
 
 import { Metadata } from '../../domain/domain.type';
 import { DeleteFilterComponent } from '../../provider/component/delete-filter.component';
+import { ClearHistory } from '../action/history.action';
 
 @Component({
     selector: 'metadata-options-page',
@@ -105,5 +102,6 @@ export class MetadataOptionsComponent implements OnDestroy {
         this.ngUnsubscribe.complete();
 
         this.store.dispatch(new ClearFilters());
+        this.store.dispatch(new ClearHistory());
     }
 }
diff --git a/ui/src/app/metadata/configuration/container/version-options.component.html b/ui/src/app/metadata/configuration/container/version-options.component.html
@@ -3,7 +3,7 @@ <h2 class="mb-4" [ngSwitch]="type$ | async">
     <ng-container *ngSwitchDefault translate="label.provider">Provider</ng-container>
     Configuration
 </h2>
-<div class="container" id="header">
+<div class="container" id="header" *ngIf="!(loading$ | async)">
     <metadata-header
         [isEnabled]="isEnabled$ | async"
         [version]="model$ | async"
@@ -40,4 +40,8 @@ <h2 class="title h4 m-0 ml-2 flex-grow-1">
         <i class="fa fa-chevron-up sr-hidden"></i>&nbsp;
         <translate-i18n key="action.back-to-top">Back to Top</translate-i18n>
     </button>
+</div>
+<div *ngIf="loading$ | async" class="d-flex justify-content-center">
+    <i class="fa fa-spinner fa-pulse fa-4x fa-fw"></i>
+    <span class="sr-only">Loading...</span>
 </div>
diff --git a/ui/src/app/metadata/configuration/container/version-options.component.ts b/ui/src/app/metadata/configuration/container/version-options.component.ts
@@ -11,7 +11,8 @@ import {
     getSelectedVersion,
     getConfigurationModelEnabled,
     getConfigurationModelType,
-    getVersionModelFilters
+    getVersionModelFilters,
+    getVersionLoading
 } from '../reducer';
 import { MetadataConfiguration } from '../model/metadata-configuration';
 import { MetadataVersion } from '../model/version';
@@ -37,6 +38,7 @@ export class VersionOptionsComponent implements OnDestroy {
     model$: Observable<Metadata> = this.store.select(getVersionModel);
     type$: Observable<string> = this.store.select(getConfigurationModelType);
     filters$: Observable<any[]> = this.store.select(getVersionModelFilters);
+    loading$: Observable<boolean> = this.store.select(getVersionLoading);
     id: string;
     kind: string;
 

diff --git a/ui/src/app/metadata/configuration/reducer/compare.reducer.ts b/ui/src/app/metadata/configuration/reducer/compare.reducer.ts
@@ -3,16 +3,29 @@ import { Metadata } from '../../domain/domain.type';
 
 export interface State {
     models: Metadata[];
-    loaded: Boolean;
+    loaded: boolean;
+    loading: boolean;
 }
 
 export const initialState: State = {
     models: [],
-    loaded: false
+    loaded: false,
+    loading: false
 };
 
 export function reducer(state = initialState, action: CompareActionsUnion): State {
     switch (action.type) {
+        case CompareActionTypes.COMPARE_METADATA_REQUEST:
+            return {
+                ...state,
+                loading: true
+            };
+        case CompareActionTypes.COMPARE_METADATA_ERROR:
+        case CompareActionTypes.COMPARE_METADATA_SUCCESS:
+            return {
+                ...state,
+                loading: false
+            };
         case CompareActionTypes.SET_VERSIONS:
             return {
                 ...state,
@@ -31,3 +44,4 @@ export function reducer(state = initialState, action: CompareActionsUnion): Stat
 
 export const getVersionModels = (state: State) => state.models;
 export const getVersionModelsLoaded = (state: State) => state.loaded;
+export const getComparisonLoading = (state: State) => state.loading;
diff --git a/ui/src/app/metadata/configuration/reducer/configuration.reducer.ts b/ui/src/app/metadata/configuration/reducer/configuration.reducer.ts
@@ -9,14 +9,16 @@ export interface State {
     schema: Schema;
     definition: Wizard<Metadata>;
     xml: string;
+    loading: boolean;
 }
 
 export const initialState: State = {
     modelType: null,
     modelId: null,
     schema: null,
     definition: null,
-    xml: ''
+    xml: '',
+    loading: false
 };
 
 export function reducer(state = initialState, action: ConfigurationActionsUnion): State {

diff --git a/ui/src/app/metadata/configuration/reducer/history.reducer.ts b/ui/src/app/metadata/configuration/reducer/history.reducer.ts
@@ -4,6 +4,7 @@ import { MetadataVersion } from '../model/version';
 
 export interface HistoryState extends EntityState<MetadataVersion> {
     selectedVersionId: string;
+    loading: boolean;
 }
 
 export function sortByDate(a: MetadataVersion, b: MetadataVersion): number {
@@ -16,11 +17,23 @@ export const adapter: EntityAdapter<MetadataVersion> = createEntityAdapter<Metad
 });
 
 export const initialState: HistoryState = adapter.getInitialState({
-    selectedVersionId: null
+    selectedVersionId: null,
+    loading: false
 });
 
 export function reducer(state = initialState, action: HistoryActionsUnion): HistoryState {
     switch (action.type) {
+        case HistoryActionTypes.LOAD_HISTORY_REQUEST:
+            return {
+                ...state,
+                loading: true
+            };
+        case HistoryActionTypes.LOAD_HISTORY_ERROR:
+        case HistoryActionTypes.LOAD_HISTORY_SUCCESS:
+            return {
+                ...state,
+                loading: false
+            };
         case HistoryActionTypes.SET_HISTORY:
             return adapter.addAll(action.payload.versions, {
                 ...state,
@@ -48,3 +61,5 @@ export const {
     selectAll: selectAllVersions,
     selectTotal: selectVersionTotal
 } = adapter.getSelectors();
+
+export const getHistoryLoading = (state: HistoryState) => state.loading;
diff --git a/ui/src/app/metadata/configuration/reducer/index.ts b/ui/src/app/metadata/configuration/reducer/index.ts
@@ -121,6 +121,7 @@ export const getConfigurationModelTypeFn =
 
 export const getHistoryState = createSelector(getState, getHistoryStateFn);
 
+export const getHistoryLoading = createSelector(getHistoryState, fromHistory.getHistoryLoading);
 export const getVersionEntities = createSelector(getHistoryState, fromHistory.selectVersionEntities);
 export const getSelectedVersionId = createSelector(getHistoryState, fromHistory.getSelectedVersionId);
 export const getVersionIds = createSelector(getHistoryState, fromHistory.selectVersionIds);
@@ -143,6 +144,7 @@ export const getSelectedIsCurrent = createSelector(
 // Version Comparison
 
 export const getCompareState = createSelector(getState, getCompareStateFn);
+export const getComparisonLoading = createSelector(getCompareState, fromCompare.getComparisonLoading);
 export const getComparisonModels = createSelector(getCompareState, fromCompare.getVersionModels);
 export const getComparisonModelsLoaded = createSelector(getCompareState, fromCompare.getVersionModelsLoaded);
 export const getComparisonConfigurations = createSelector(

diff --git a/ui/src/app/metadata/configuration/reducer/version.reducer.ts b/ui/src/app/metadata/configuration/reducer/version.reducer.ts
@@ -6,8 +6,8 @@ export interface State {
     selectedVersionId: string;
     selectedVersionType: string;
     selectedMetadataId: string;
-    loaded: Boolean;
-    loading: Boolean;
+    loaded: boolean;
+    loading: boolean;
 }
 
 export const initialState: State = {