SHIBUI-1385 Added loading indicator

TIER · Aug 30, 2019 · 8cb1d49 · 8cb1d49
1 parent 51bfa3c
commit 8cb1d49
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 29 deletions.
diff --git a/ui/src/app/metadata/configuration/container/restore-edit-step.component.spec.ts b/ui/src/app/metadata/configuration/container/restore-edit-step.component.spec.ts
@@ -79,13 +79,13 @@ describe('Restore Version Edit Step Component', () => {
 
     describe('updateStatus', () => {
         it('should dispatch an update form status event', () => {
-            app.updateStatus([{ value: 'foo' }, 'common']);
+            app.updateStatus({ value: 'foo' }, 'common');
             expect(store.dispatch).toHaveBeenCalled();
             expect(dispatchSpy.calls.mostRecent().args[0].type).toBe(RestoreActionTypes.UPDATE_STATUS);
         });
 
         it('should dispatch an update form status event', () => {
-            app.updateStatus([{}, 'common']);
+            app.updateStatus({}, 'common');
             expect(store.dispatch).toHaveBeenCalled();
             expect(dispatchSpy.calls.mostRecent().args[0].type).toBe(RestoreActionTypes.UPDATE_STATUS);
         });

diff --git a/ui/src/app/metadata/configuration/container/restore-edit-step.component.ts b/ui/src/app/metadata/configuration/container/restore-edit-step.component.ts
@@ -54,21 +54,21 @@ export class RestoreEditStepComponent implements OnDestroy {
 
         this.lockChange$
             .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe(this.updateLock);
+            .subscribe(locked => this.updateLock(locked));
 
         this.statusChange$
             .pipe(
                 takeUntil(this.ngUnsubscribe),
                 withLatestFrom(this.store.select(getWizardIndex))
             )
-            .subscribe(this.updateStatus);
+            .subscribe(([errors, currentPage]) => this.updateStatus(errors, currentPage));
     }
 
     onChange(changes: any): void {
         this.store.dispatch(new UpdateRestorationChangesRequest(changes));
     }
 
-    updateStatus([errors, currentPage]) {
+    updateStatus(errors, currentPage) {
         const status = { [currentPage]: !(errors.value) ? 'VALID' : 'INVALID' };
         this.store.dispatch(new UpdateRestoreFormStatus(status));
     }

diff --git a/ui/src/app/metadata/configuration/container/restore.component.html b/ui/src/app/metadata/configuration/container/restore.component.html
@@ -1,20 +1,26 @@
-<h2 class="mb-4">
-    <translate-i18n key="label.restore-version" [params]="{ 'date': (date$ | async) }">
-        Restore Version ( date )
-    </translate-i18n>
-</h2>
-<div class="d-flex justify-content-center align-items-center">
-    <div class="card m-4 w-50">
-        <div class="card-body">
-            <h3 class="card-title" translate="message.create-new-version-from-version">
-                Create New Version from Previous Settings
-            </h3>
-            <p translate="message.restoring-this-version-will-copy"
-                [translateParams]="{ 'date': date$ | async }">
-                Restoring this version will copy the Version ( date ) configuration and create a new Version from the selected version settings. You can then edit the configuration before saving the new version.
-            </p>
-            <button class="btn btn-light" (click)="cancel()" translate="action.cancel">Cancel</button>&nbsp;
-            <button class="btn btn-primary" (click)="restore()" translate="action.restore">Restore</button>
+<ng-container *ngIf="loaded$ | async">
+    <h2 class="mb-4">
+        <translate-i18n key="label.restore-version" [params]="{ 'date': (date$ | async) }">
+            Restore Version ( date )
+        </translate-i18n>
+    </h2>
+    <div class="d-flex justify-content-center align-items-center">
+        <div class="card m-4 w-50">
+            <div class="card-body">
+                <h3 class="card-title" translate="message.create-new-version-from-version">
+                    Create New Version from Previous Settings
+                </h3>
+                <p translate="message.restoring-this-version-will-copy"
+                    [translateParams]="{ 'date': date$ | async }">
+                    Restoring this version will copy the Version ( date ) configuration and create a new Version from the selected version settings. You can then edit the configuration before saving the new version.
+                </p>
+                <button class="btn btn-light" (click)="cancel()" translate="action.cancel">Cancel</button>&nbsp;
+                <button class="btn btn-primary" (click)="restore()" translate="action.restore">Restore</button>
+            </div>
         </div>
     </div>
-</div>
+</ng-container>
+<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/restore.component.spec.ts b/ui/src/app/metadata/configuration/container/restore.component.spec.ts
@@ -65,7 +65,7 @@ describe('Metadata Restore Page Component', () => {
 
     it('should load metadata objects', async(() => {
         expect(app).toBeTruthy();
-        expect(store.select).toHaveBeenCalledTimes(1);
+        expect(store.select).toHaveBeenCalledTimes(2);
         expect(store.dispatch).not.toHaveBeenCalled();
     }));
 

diff --git a/ui/src/app/metadata/configuration/container/restore.component.ts b/ui/src/app/metadata/configuration/container/restore.component.ts
@@ -19,6 +19,8 @@ import { Router, ActivatedRoute } from '@angular/router';
 export class RestoreComponent {
 
     dateString$ = this.store.select(fromConfiguration.getConfigurationVersionDate);
+    loading$ = this.store.select(fromConfiguration.getVersionLoading);
+    loaded$ = this.loading$.pipe(map(loading => !loading));
     date$: Observable<string>;
 
     constructor(

diff --git a/ui/src/app/metadata/configuration/reducer/index.ts b/ui/src/app/metadata/configuration/reducer/index.ts
@@ -167,6 +167,9 @@ export const getVersionModelFiltersFn =
     null;
 
 export const getVersionState = createSelector(getState, getVersionStateFn);
+
+export const getVersionLoading = createSelector(getVersionState, fromVersion.isVersionLoading);
+
 export const getVersionModel = createSelector(getVersionState, fromVersion.getVersionModel);
 export const getVersionModels = createSelector(getVersionModel, (model) => model ? [model] : null);
 export const getVersionConfigurationSections = createSelector(

diff --git a/ui/src/app/metadata/configuration/reducer/version.reducer.ts b/ui/src/app/metadata/configuration/reducer/version.reducer.ts
@@ -7,14 +7,16 @@ export interface State {
     selectedVersionType: string;
     selectedMetadataId: string;
     loaded: Boolean;
+    loading: Boolean;
 }
 
 export const initialState: State = {
     model: null,
     selectedVersionId: null,
     selectedMetadataId: null,
     selectedVersionType: null,
-    loaded: false
+    loaded: false,
+    loading: false
 };
 
 export function reducer(state = initialState, action: VersionActionsUnion): State {
@@ -24,13 +26,22 @@ export function reducer(state = initialState, action: VersionActionsUnion): Stat
                 ...state,
                 selectedMetadataId: action.payload.id,
                 selectedVersionId: action.payload.version,
-                selectedVersionType: action.payload.type
+                selectedVersionType: action.payload.type,
+                loading: true
             };
         case VersionActionTypes.SELECT_VERSION_SUCCESS:
             return {
                 ...state,
                 model: action.payload,
-                loaded: true
+                loaded: true,
+                loading: false
+            };
+        case VersionActionTypes.SELECT_VERSION_ERROR:
+            return {
+                ...state,
+                model: null,
+                loaded: false,
+                loading: false
             };
         case VersionActionTypes.CLEAR_VERSION:
             return {
@@ -44,6 +55,7 @@ export function reducer(state = initialState, action: VersionActionsUnion): Stat
 
 export const getVersionModel = (state: State) => state.model;
 export const getVersionModelLoaded = (state: State) => state.loaded;
+export const isVersionLoading = (state: State) => state.loading;
 
 export const getSelectedMetadataId = (state: State) => state.selectedMetadataId;
 export const getSelectedVersionId = (state: State) => state.selectedVersionId;

diff --git a/ui/src/app/schema-form/widget/datalist/datalist.component.html b/ui/src/app/schema-form/widget/datalist/datalist.component.html
@@ -1,5 +1,5 @@
 <div class="widget form-group">
-    <label [for]="id" class="d-flex justify-content-between control-label">
+    <label [for]="formProperty._canonicalPath" class="d-flex justify-content-between control-label">
         <span [ngClass]="{'sr-only': formProperty.parent.schema.type === 'array'}">
             <translate-i18n [key]="schema.title">{{ schema.title }}</translate-i18n>
             <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i>

diff --git a/ui/src/app/shared/autocomplete/autocomplete.component.html b/ui/src/app/shared/autocomplete/autocomplete.component.html
@@ -1,4 +1,9 @@
-<div id="{{ id }}-container" class="dropdown form-group" (keydown)="handleKeyDown($event)" role='combobox' [attr.aria-expanded]="(menuIsVisible$ | async) ? 'true' : 'false'">
+<div id="{{ id }}-container"
+    class="dropdown form-group"
+    (keydown)="handleKeyDown($event)"
+    role='combobox'
+    [attr.aria-expanded]="(menuIsVisible$ | async) ? 'true' : 'false'"
+    [attr.aria-label]="id">
     <div [ngClass]="{'input-group': dropdown}">
         <input
             #inputField