From 8cb1d49279e1328220bf190790b9d0fc85b5d0c1 Mon Sep 17 00:00:00 2001 From: Ryan Mathis Date: Fri, 30 Aug 2019 13:36:35 -0700 Subject: [PATCH] SHIBUI-1385 Added loading indicator --- .../restore-edit-step.component.spec.ts | 4 +- .../container/restore-edit-step.component.ts | 6 +-- .../container/restore.component.html | 42 +++++++++++-------- .../container/restore.component.spec.ts | 2 +- .../container/restore.component.ts | 2 + .../metadata/configuration/reducer/index.ts | 3 ++ .../configuration/reducer/version.reducer.ts | 18 ++++++-- .../widget/datalist/datalist.component.html | 2 +- .../autocomplete/autocomplete.component.html | 7 +++- 9 files changed, 57 insertions(+), 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 index 7d468b5af..d42f0be51 100644 --- 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 index 904cf43f6..2a9a73a0e 100644 --- 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 index 855426142..3072dbfc3 100644 --- a/ui/src/app/metadata/configuration/container/restore.component.html +++ b/ui/src/app/metadata/configuration/container/restore.component.html @@ -1,20 +1,26 @@ -

- - Restore Version ( date ) - -

-
-
-
-

- Create New Version from Previous Settings -

-

- 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. -

-   - + +

+ + Restore Version ( date ) + +

+
+
+
+

+ Create New Version from Previous Settings +

+

+ 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. +

+   + +
-
+ +
+ + Loading... +
\ No newline at end of file diff --git a/ui/src/app/metadata/configuration/container/restore.component.spec.ts b/ui/src/app/metadata/configuration/container/restore.component.spec.ts index ef3b0f3fa..36420e2f6 100644 --- 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 index 6fc4181c1..bb8ffc2cf 100644 --- 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; constructor( diff --git a/ui/src/app/metadata/configuration/reducer/index.ts b/ui/src/app/metadata/configuration/reducer/index.ts index b64b6e070..a9485de94 100644 --- 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 index 9d2dd9986..ae14c33a4 100644 --- a/ui/src/app/metadata/configuration/reducer/version.reducer.ts +++ b/ui/src/app/metadata/configuration/reducer/version.reducer.ts @@ -7,6 +7,7 @@ export interface State { selectedVersionType: string; selectedMetadataId: string; loaded: Boolean; + loading: Boolean; } export const initialState: State = { @@ -14,7 +15,8 @@ export const initialState: State = { 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 index a4f377035..58cf01c46 100644 --- 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 @@
-