SHIBUI-1408 added toggle button

TIER · Sep 10, 2019 · 0d0e9ed · 0d0e9ed
1 parent b9507b2
commit 0d0e9ed
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 8 deletions.
diff --git a/backend/src/main/resources/i18n/messages.properties b/backend/src/main/resources/i18n/messages.properties
@@ -56,6 +56,7 @@ action.manage=Manage
 action.close=Close
 action.back-to-top=Back to Top
 action.restore=Restore
+action.view-only-changes=View Only Changes
 
 value.enabled=Enabled
 value.disabled=Disabled

diff --git a/ui/src/app/metadata/configuration/action/compare.action.ts b/ui/src/app/metadata/configuration/action/compare.action.ts
@@ -8,7 +8,8 @@ export enum CompareActionTypes {
     COMPARE_METADATA_SUCCESS = '[Compare Version] Compare Version Success',
     COMPARE_METADATA_ERROR = '[Compare Version] Compare Version Error',
     SET_VERSIONS = '[Compare Version] Set Versions',
-    CLEAR_VERSIONS = '[Compare Version] Clear Versions'
+    CLEAR_VERSIONS = '[Compare Version] Clear Versions',
+    SET_VIEW_CHANGED = '[Compare Version] View Changed Only'
 }
 
 export class CompareVersionRequest implements Action {
@@ -35,6 +36,11 @@ export class SetMetadataVersions implements Action {
     constructor(public payload: Metadata[]) { }
 }
 
+export class ViewChanged implements Action {
+    readonly type = CompareActionTypes.SET_VIEW_CHANGED;
+    constructor(public payload: boolean) {  }
+}
+
 export class ClearVersions implements Action {
     readonly type = CompareActionTypes.CLEAR_VERSIONS;
 }
@@ -44,4 +50,5 @@ export type CompareActionsUnion =
     | CompareVersionSuccess
     | CompareVersionError
     | SetMetadataVersions
-    | ClearVersions;
+    | ClearVersions
+    | ViewChanged;
diff --git a/ui/src/app/metadata/configuration/container/metadata-comparison.component.html b/ui/src/app/metadata/configuration/container/metadata-comparison.component.html
@@ -8,13 +8,23 @@ <h2 class="mb-4" [ngSwitch]="type$ | async">
     'container-fluid': (numVersions$ | async) > 2,
     'container': (numVersions$ | async) <= 2
 }">
-    <div class="px-3 my-3 d-flex justify-content-start">
+    <div class="px-3 my-3 d-flex justify-content-between">
         <a class="btn btn-link" routerLink="../history">
             <i class="fa fa-history sr-hidden"></i>&nbsp;
             <translate-i18n key="action.version-history">Version History</translate-i18n>
         </a>
+        <button class="btn btn-link" (click)="limiter.next('compare')">
+            <translate-i18n key="action.view-only-changes">Compare Changes</translate-i18n>&nbsp;
+            <i class="fa fa-lg sr-hidden"
+                [ngClass]="{
+                    'fa-toggle-off': limited$ | async,
+                    'fa-toggle-on': !(limited$ | async)
+                }"></i>
+        </button>
     </div>
-    <metadata-configuration [configuration]="versions$ | async" [editable]="false"></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>

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, OnDestroy } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Observable, BehaviorSubject, Subscription } from 'rxjs';
 import { Store } from '@ngrx/store';
 import { ActivatedRoute } from '@angular/router';
-import { map } from 'rxjs/operators';
+import { map, withLatestFrom } from 'rxjs/operators';
 import { ConfigurationState, getComparisonConfigurations, getComparisonConfigurationCount } from '../reducer';
-import { CompareVersionRequest, ClearVersions } from '../action/compare.action';
+import { CompareVersionRequest, ClearVersions, ViewChanged } from '../action/compare.action';
 import { MetadataConfiguration } from '../model/metadata-configuration';
 import * as fromReducer from '../reducer';
 
@@ -16,10 +16,14 @@ import * as fromReducer from '../reducer';
 })
 export class MetadataComparisonComponent implements OnDestroy {
 
+    limiter: BehaviorSubject<boolean> = new BehaviorSubject(false);
+
     versions$: Observable<MetadataConfiguration>;
     numVersions$: Observable<number>;
     type$: Observable<string>;
     loading$: Observable<boolean> = this.store.select(fromReducer.getComparisonLoading);
+    limited$: Observable<boolean> = this.store.select(fromReducer.getViewChangedOnly);
+    sub: Subscription;
 
     constructor(
         private store: Store<ConfigurationState>,
@@ -34,9 +38,15 @@ export class MetadataComparisonComponent implements OnDestroy {
         this.versions$ = this.store.select(getComparisonConfigurations);
         this.numVersions$ = this.store.select(getComparisonConfigurationCount);
         this.type$ = this.store.select(fromReducer.getConfigurationModelType);
+
+        this.sub = this.limiter.pipe(
+            withLatestFrom(this.limited$),
+            map(([compare, limit]) => new ViewChanged(!limit))
+        ).subscribe(this.store);
     }
 
     ngOnDestroy(): void {
+        this.sub.unsubscribe();
         this.store.dispatch(new ClearVersions());
     }
 }
diff --git a/ui/src/app/metadata/configuration/reducer/compare.reducer.ts b/ui/src/app/metadata/configuration/reducer/compare.reducer.ts
@@ -5,16 +5,23 @@ export interface State {
     models: Metadata[];
     loaded: boolean;
     loading: boolean;
+    compareChangedOnly: boolean;
 }
 
 export const initialState: State = {
     models: [],
     loaded: false,
-    loading: false
+    loading: false,
+    compareChangedOnly: false
 };
 
 export function reducer(state = initialState, action: CompareActionsUnion): State {
     switch (action.type) {
+        case CompareActionTypes.SET_VIEW_CHANGED:
+            return {
+                ...state,
+                compareChangedOnly: action.payload
+            };
         case CompareActionTypes.COMPARE_METADATA_REQUEST:
             return {
                 ...state,
@@ -45,3 +52,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;
+export const getViewChangedOnly = (state: State) => state.compareChangedOnly;
diff --git a/ui/src/app/metadata/configuration/reducer/index.ts b/ui/src/app/metadata/configuration/reducer/index.ts
@@ -162,6 +162,8 @@ export const getComparisonConfigurations = createSelector(
 
 export const getComparisonConfigurationCount = createSelector(getComparisonConfigurations, (config) => config ? config.dates.length : 0);
 
+export const getViewChangedOnly = createSelector(getCompareState, fromCompare.getViewChangedOnly);
+
 // Version Restoration
 
 export const getRestoreState = createSelector(getState, getRestoreStateFn);