Merged in feature/SHIBUI-1408 (pull request #368)

SHIBUI-1408 Added toggle for displaying only changes in comparison

Approved-by: Ryan Mathis <rmathis@unicon.net>

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

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;

ui/src/app/metadata/configuration/component/metadata-configuration.component.html

@@ -18,20 +18,26 @@ <h2 class="title h4 m-0 flex-grow-1">
                 </div>
             </div>
             <div class="p-2">
-                <div class="d-flex border-bottom border-light border-2 py-2">
-                    <strong [ngStyle]="{'width': width}" translate="label.option">Option</strong>
-                    <strong *ngFor="let date of configuration.dates" [ngStyle]="{'width': width}">
-                        <translate-i18n key="label.value" *ngIf="configuration.dates.length <= 1">Value</translate-i18n>
-                        <span *ngIf="configuration.dates.length > 1">{{ date | date:DATE_FORMAT }}</span>
-                    </strong>
-                </div>
-                <object-property
-                    class="d-block"
-                    *ngIf="section"
-                    [property]="section"
-                    [columns]="configuration.dates.length"
-                    (preview)="onPreview($event)">
-                </object-property>
+                <ng-container *ngIf="section && section.properties && section.properties.length">
+                    <div class="d-flex border-bottom border-light border-2 py-2">
+                        <strong [ngStyle]="{'width': width}" translate="label.option">Option</strong>
+                        <strong *ngFor="let date of configuration.dates" [ngStyle]="{'width': width}">
+                            <translate-i18n key="label.value" *ngIf="configuration.dates.length <= 1">Value</translate-i18n>
+                            <span *ngIf="configuration.dates.length > 1">{{ date | date:DATE_FORMAT }}</span>
+                        </strong>
+                    </div>
+                    <object-property
+                        class="d-block"
+                        [property]="section"
+                        [columns]="configuration.dates.length"
+                        (preview)="onPreview($event)">
+                    </object-property>
+                </ng-container>
+                <ng-container *ngIf="!section || !section.properties || !section.properties.length">
+                    <div class="alert">
+                        No Changes
+                    </div>
+                </ng-container>
             </div>
         </div>
     </section>

ui/src/app/metadata/configuration/component/property/array-property.component.html

@@ -20,20 +20,6 @@
                 </div>
             </ng-container>
         </div>
-        <ng-container *ngFor="let version of property.value">
-            <div *ngIf="version && version[i]"
-                [ngbPopover]="version[i][prop]"
-                triggers="mouseenter:mouseleave"
-                container="body"
-                [ngStyle]="{'width': width}"
-                class="text-truncate"
-                popoverClass="popover-lg popover-info">
-                {{ version[i][prop] }}
-            </div>
-            <div *ngIf="!version || !version[i]" [ngStyle]="{'width': width}">
-                -
-            </div>
-        </ng-container>
     </div>
 </div>
 <ng-container *ngIf="property.items.type === 'string'" [ngSwitch]="getItemType(property)">
@@ -47,18 +33,18 @@
         <div *ngIf="!property.widget || !property.widget.id">
             <ng-template [ngTemplateOutlet]="listref"></ng-template>
         </div>
-        <div *ngIf="property.widget && property.widget.dataUrl">
-            <div *ngFor="let attr of attributeList$ | async"
+        <div *ngIf="property.widget && property.widget.data">
+            <div *ngFor="let item of dataList"
                 class="d-flex justify-content-start border-bottom border-light"
-                [ngClass]="{'bg-diff': isDifferent(attr.key, property.value || [])}">
-                <span class="p-2" role="term" [translate]="attr.label" [ngStyle]="{'width': width}">{{ attr.label }}</span>
+                [ngClass]="{'bg-diff': property.differences && item.differences}">
+                <span class="p-2" role="term" [translate]="item.label" [ngStyle]="{'width': width}">{{ item.label }}</span>
                 <div *ngFor="let v of property.value"
                     class="py-2"
                     [ngStyle]="{'width': width}">
-                    <span *ngIf="v && v.indexOf(attr.key) > -1" translate="value.true">
+                    <span *ngIf="v && v.indexOf(item.key) > -1" translate="value.true">
                         true
                     </span>
-                    <span *ngIf="!v || !(v.indexOf(attr.key) > -1)" translate="value.false">
+                    <span *ngIf="!v || !(v.indexOf(item.key) > -1)" translate="value.false">
                         false
                     </span>
                 </div>

ui/src/app/metadata/configuration/component/property/array-property.component.spec.ts

@@ -67,22 +67,9 @@ describe('Array Property Component', () => {
         expect(app).toBeTruthy();
     }));
 
-    describe('isDifferent method', () => {
-        it('should return true if the value is different between any of the lists', () => {
-            expect(app.isDifferent('foo', [['foo', 'bar', 'baz'], ['bar', 'baz']])).toBe(true);
-            expect(app.isDifferent('bar', [['bar'], null])).toBe(true);
-        });
-
-        it('should return false if the list of values is the same', () => {
-            expect(app.isDifferent('foo', [['foo', 'baz'], ['foo', 'bar']])).toBe(false);
-        });
-    });
-
     describe('attributeList$ getter', () => {
         it('should return an empty list when no data or dataUrl is set', () => {
-            app.attributeList$.subscribe((list) => {
-                expect(list).toEqual([]);
-            });
+            expect(app.dataList).toBeUndefined();
         });
         it('should return a list of data items from the schema', () => {
             const datalist = [
@@ -98,29 +85,7 @@ describe('Array Property Component', () => {
                 }
             });
             fixture.detectChanges();
-            app.attributeList$.subscribe(list => {
-                expect(list).toEqual(datalist);
-            });
-        });
-
-        it('should call the attribute service with a provided dataUrl', () => {
-            const datalist = [
-                { key: 'foo', label: 'foo' },
-                { key: 'bar', label: 'bar' },
-                { key: 'baz', label: 'baz' },
-            ];
-            spyOn(service, 'query').and.returnValue(of(datalist));
-            instance.setProperty({
-                ...instance.property,
-                widget: {
-                    id: 'datalist',
-                    dataUrl: '/foo'
-                }
-            });
-            fixture.detectChanges();
-            app.attributeList$.subscribe(list => {
-                expect(list).toEqual(datalist);
-            });
+            expect(app.dataList).toEqual(datalist);
         });
     });
 });

ui/src/app/metadata/configuration/component/property/array-property.component.ts

@@ -33,20 +33,8 @@ export class ArrayPropertyComponent extends ConfigurationPropertyComponent imple
         return UriValidator.isUri(str);
     }
 
-    isDifferent(key: string, model: any): boolean {
-        return model
-            .map((value) => value ? value.indexOf(key) > -1 : false)
-            .reduce((current, val) => current !== val ? true : false, false);
-    }
-
-    get attributeList$(): Observable<{ key: string, label: string }[]> {
-        if (this.property.widget && this.property.widget.hasOwnProperty('data')) {
-            return of(this.property.widget.data);
-        }
-        if (this.property.widget && this.property.widget.hasOwnProperty('dataUrl')) {
-            return this.attrService.query(this.property.widget.dataUrl);
-        }
-        return of([]);
+    get dataList(): { key: string, label: string }[] {
+        return this.property.widget.data;
     }
 }
 

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>

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, combineLatest } 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, ClearVersions } from '../action/compare.action';
+import { map, withLatestFrom } from 'rxjs/operators';
+import { ConfigurationState, getComparisonConfigurationCount } from '../reducer';
+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>,
@@ -31,12 +35,20 @@ export class MetadataComparisonComponent implements OnDestroy {
             map(versions => new CompareVersionRequest(versions))
         ).subscribe(this.store);
 
-        this.versions$ = this.store.select(getComparisonConfigurations);
+        this.versions$ = this.store.select(fromReducer.getLimitedComparisonConfigurations);
         this.numVersions$ = this.store.select(getComparisonConfigurationCount);
         this.type$ = this.store.select(fromReducer.getConfigurationModelType);
+
+        this.versions$.subscribe(console.log);
+
+        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());
     }
 }

ui/src/app/metadata/configuration/model/section.ts

@@ -4,14 +4,18 @@ export interface Section {
     label: string;
     pageNumber: number;
     properties: SectionProperty[];
+    differences?: boolean;
 }
 
 export interface SectionProperty {
     label: string;
     type: string;
     value: any[];
+    differences?: boolean;
+    properties?: SectionProperty[];
     widget?: {
         id: string;
+        data?: any[];
         [propertyName: string]: any;
     };
 }

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;