SHIBUI-1270 Implemented metadata comparison component

TIER · Jul 12, 2019 · 1fc94d1 · 1fc94d1
1 parent 3da8895
commit 1fc94d1
Show file tree

Hide file tree

Showing 23 changed files with 250 additions and 85 deletions.
diff --git a/ui/src/app/metadata/configuration/action/compare.action.ts b/ui/src/app/metadata/configuration/action/compare.action.ts
@@ -14,13 +14,13 @@ export enum CompareActionTypes {
 export class CompareVersionRequest implements Action {
     readonly type = CompareActionTypes.COMPARE_METADATA_REQUEST;
 
-    constructor(public payload: MetadataVersion[]) { }
+    constructor(public payload: string[]) { }
 }
 
 export class CompareVersionSuccess implements Action {
     readonly type = CompareActionTypes.COMPARE_METADATA_SUCCESS;
 
-    constructor(public payload: MetadataHistory) { }
+    constructor(public payload: Metadata[]) { }
 }
 
 export class CompareVersionError implements Action {

diff --git a/ui/src/app/metadata/configuration/component/array-property.component.html b/ui/src/app/metadata/configuration/component/array-property.component.html
@@ -5,12 +5,17 @@
             <div *ngFor="let value of property.value; let i = index;" class="mb-2 bg-lighter">
                 <div *ngFor="let prop of getKeys(property.items); let n = index;"
                     class="d-flex p-2">
-                    <div class="w-50">
+                    <div [ngStyle]="{'width': width}">
                         <span [class.invisible]="n">{{ i + 1 }}.&nbsp;</span>
                         <span [translate]="property.items.properties[prop].title">{{ property.items.properties[prop].title }}</span>
                     </div>
-                    <div class="w-50" [ngbPopover]="value[prop]" triggers="mouseenter:mouseleave" container="body" placement="left">
-                        {{ value[prop] }}
+                    <div *ngFor="let v of value"
+                        [ngbPopover]="value[prop]"
+                        triggers="mouseenter:mouseleave"
+                        container="body"
+                        placement="left"
+                        [ngStyle]="{'width': width}">
+                        {{ v[prop] }}
                     </div>
                 </div>
             </div>
@@ -25,12 +30,14 @@
         </ng-container>
         <ng-container *ngSwitchDefault>
             <div *ngFor="let attr of attributeList$ | async" class="d-flex justify-content-between border-bottom border-light">
-                <span class="w-50 p-2" role="term" [translate]="attr.label">{{ attr.label }}</span>
-                <div class="w-50 p-2">
-                    <span *ngIf="property.value && property.value.indexOf(attr.key) > -1" translate="value.true">
+                <span class="p-2" role="term" [translate]="attr.label" [ngStyle]="{'width': width}">{{ attr.label }}</span>
+                <div *ngFor="let v of property.value"
+                    class="p-2"
+                    [ngStyle]="{'width': width}">
+                    <span *ngIf="v && v.indexOf(attr.key) > -1" translate="value.true">
                         true
                     </span>
-                    <span *ngIf="!property.value || !(property.value.indexOf(attr.key) > -1)" translate="value.false">
+                    <span *ngIf="!v || !(v.indexOf(attr.key) > -1)" translate="value.false">
                         false
                     </span>
                 </div>
@@ -40,12 +47,14 @@
 </div>
 <ng-template #listref>
     <div class="d-flex border-bottom border-light">
-        <span class="w-50 p-2" role="term" [translate]="property.name">{{ property.name }}</span>
-        <p class="text-secondary w-50 p-2" *ngIf="!property.value || !property.value.length">&mdash;</p>
-        <ul class="list-unstyled w-50 py-2" *ngIf="property.value && property.value.length">
-            <li *ngFor="let item of property.value">
-                {{ item }}
-            </li>
-        </ul>
+        <span class="p-2" role="term" [translate]="property.name" [ngStyle]="{'width': width}">{{ property.name }}</span>
+        <ng-container *ngFor="let v of property.value">
+            <p [ngStyle]="{'width': width}" class="text-secondary p-2" *ngIf="!v || !v.length">&mdash;</p>
+            <ul [ngStyle]="{'width': width}" class="list-unstyled py-2" *ngIf="v && v.length">
+                <li *ngFor="let item of v">
+                    {{ item }}
+                </li>
+            </ul>
+        </ng-container>
     </div>
 </ng-template>
diff --git a/ui/src/app/metadata/configuration/component/configuration-property.component.ts b/ui/src/app/metadata/configuration/component/configuration-property.component.ts
@@ -3,12 +3,12 @@ import { Property } from '../../domain/model/property';
 
 @Component({
     selector: 'configuration-property',
-    template: `{{ property | json }}`,
-    styleUrls: []
+    template: `{{ property | json }}`
 })
 
 export class ConfigurationPropertyComponent {
     @Input() property: Property;
+    @Input() columns = 1;
 
     constructor() { }
 
@@ -19,5 +19,9 @@ export class ConfigurationPropertyComponent {
     getItemType(items: Property): string {
         return items.widget ? items.widget.id : 'default';
     }
+
+    get width(): string {
+        return `${ Math.floor(100 / (this.columns + 1)) }%`;
+    }
 }
 
diff --git a/ui/src/app/metadata/configuration/component/metadata-configuration.component.html b/ui/src/app/metadata/configuration/component/metadata-configuration.component.html
@@ -3,21 +3,31 @@
         <div class="config-group">
             <div class="numbered-header d-flex justify-content-start bg-light align-items-center">
                 <h2 class="title h4 m-0 flex-grow-1">
-                    <span class="d-inline-block px-2 py-1 mr-2 mb-0 h4 number border border-secondary bg-white rounded-lg"><span *ngIf="i + 1 < 10">0</span>{{ i + 1 }}</span>
+                    <span class="d-inline-block px-2 py-1 mr-2 mb-0 h4 number border border-secondary bg-white rounded-lg">
+                        <span *ngIf="i + 1 < 10">0</span>{{ i + 1 }}
+                    </span>
                     <span class="text">{{ section.label | translate }}</span>
                 </h2>
-                <div class="actions px-2">
+                <div class="actions px-2" *ngIf="configuration.dates.length === 1">
                     <button class="btn btn-link edit-link change-view" (click)="edit(section.id)">
                         <i class="fa fa-edit"></i>&nbsp;
                         <span translate="action.edit">Edit</span>
                     </button>
                 </div>
             </div>
             <div class="d-flex border-bottom border-light border-2 p-2">
-                <strong class="w-50" translate="label.option">Option</strong>
-                <strong class="w-50" translate="label.value">Value</strong>
+                <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:'medium' }}</span>
+                </strong>
             </div>
-            <object-property class="d-block" *ngIf="section" [property]="section"></object-property>
+            <object-property
+                class="d-block"
+                *ngIf="section"
+                [property]="section"
+                [columns]="configuration.dates.length">
+            </object-property>
         </div>
     </section>
-</div>
+</div>
diff --git a/ui/src/app/metadata/configuration/component/metadata-configuration.component.ts b/ui/src/app/metadata/configuration/component/metadata-configuration.component.ts
@@ -1,6 +1,8 @@
 import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { MetadataConfiguration } from '../model/metadata-configuration';
+import { Property } from '../../domain/model/property';
+import { Observable, of } from 'rxjs';
 
 @Component({
     selector: 'metadata-configuration',
@@ -19,4 +21,28 @@ export class MetadataConfigurationComponent {
     edit(id: string): void {
         this.router.navigate(['../', 'edit', id], { relativeTo: this.activatedRoute.parent });
     }
+
+    getItemType(items: Property): string {
+        return items.widget ? items.widget.id : 'default';
+    }
+
+    getKeys(schema): string[] {
+        return Object.keys(schema.properties);
+    }
+
+    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 width(): string {
+        return `${ Math.floor(100 / this.configuration.dates.length) }%`;
+    }
 }
diff --git a/ui/src/app/metadata/configuration/component/object-property.component.html b/ui/src/app/metadata/configuration/component/object-property.component.html
@@ -1,7 +1,7 @@
 <ng-container *ngFor="let prop of property.properties">
     <ng-container [ngSwitch]="prop.type">
-        <primitive-property *ngSwitchDefault [property]="prop"></primitive-property>
-        <array-property *ngSwitchCase="'array'" [property]="prop"></array-property>
-        <object-property *ngSwitchCase="'object'" [property]="prop"></object-property>
+        <primitive-property *ngSwitchDefault [property]="prop" [columns]="columns"></primitive-property>
+        <array-property *ngSwitchCase="'array'" [property]="prop" [columns]="columns"></array-property>
+        <object-property *ngSwitchCase="'object'" [property]="prop" [columns]="columns"></object-property>
     </ng-container>
 </ng-container>
diff --git a/ui/src/app/metadata/configuration/component/primitive-property.component.html b/ui/src/app/metadata/configuration/component/primitive-property.component.html
@@ -1,5 +1,10 @@
 <div *ngIf="property.name" class="d-flex border-bottom border-light p-2">
-    <span class="w-50 d-block" role="term" [translate]="property.name">{{ property.name }}</span>
-    <span class="w-50 d-block"
-        role="definition">{{ property.value || property.value === false ? property.value : '-' }}</span>
+    <span class="d-block"
+        role="term"
+        [translate]="property.name"
+        [ngStyle]="{'width': width}">{{ property.name }}</span>
+    <span *ngFor="let v of property.value"
+        class="d-block"
+        role="definition"
+        [ngStyle]="{'width': width}">{{ v ? v : (v === false) ? v : '-' }}</span>
 </div>
diff --git a/ui/src/app/metadata/configuration/container/configuration.component.html b/ui/src/app/metadata/configuration/container/configuration.component.html
@@ -14,7 +14,9 @@
                 </ol>
             </nav>
             <h2 class="mb-4">Source Configuration</h2>
-            <router-outlet></router-outlet>
+            <ng-container *ngIf="name$ | async">
+                <router-outlet></router-outlet>
+            </ng-container>
         </div>
     </section>
 </div>
diff --git a/ui/src/app/metadata/configuration/container/metadata-comparison.component.html b/ui/src/app/metadata/configuration/container/metadata-comparison.component.html
@@ -0,0 +1,15 @@
+<div class="container">
+    <!--<metadata-header
+        [isEnabled]="isEnabled$ | async"
+        [version]="version$ | async"
+        [versionNumber]="versionNumber$ | async"
+        [isCurrent]="isCurrent$ | async"></metadata-header>
+    -->
+    <div class="px-3 my-3 d-flex justify-content-start">
+        <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>
+    </div>
+    <metadata-configuration [configuration]="versions$ | async"></metadata-configuration>
+</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,9 +1,12 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Store } from '@ngrx/store';
-import { ConfigurationState, getVersionCollection } from '../reducer';
-import { Metadata } from '../../domain/domain.type';
 import { ActivatedRoute } from '@angular/router';
+import { map } from 'rxjs/operators';
+import { ConfigurationState, getVersionConfigurations } from '../reducer';
+import { Metadata } from '../../domain/domain.type';
+import { CompareVersionRequest } from '../action/compare.action';
+import { MetadataConfiguration } from '../model/metadata-configuration';
 
 @Component({
     selector: 'metadata-comparison',
@@ -13,12 +16,17 @@ import { ActivatedRoute } from '@angular/router';
 })
 export class MetadataComparisonComponent {
 
-    versions$: Observable<Metadata[]>;
+    versions$: Observable<MetadataConfiguration>;
 
     constructor(
         private store: Store<ConfigurationState>,
         private activatedRoute: ActivatedRoute
     ) {
-        this.activatedRoute.queryParams.subscribe(versions => console.log(versions));
+        this.activatedRoute.queryParams.pipe(
+            map(params => params.versions),
+            map(versions => new CompareVersionRequest(versions))
+        ).subscribe(this.store);
+
+        this.versions$ = this.store.select(getVersionConfigurations);
     }
 }
diff --git a/ui/src/app/metadata/configuration/container/metadata-history.component.ts b/ui/src/app/metadata/configuration/container/metadata-history.component.ts
@@ -4,6 +4,7 @@ import { Store } from '@ngrx/store';
 import { ConfigurationState, getVersionCollection } from '../reducer';
 import { MetadataVersion } from '../model/version';
 import { CompareVersionRequest } from '../action/compare.action';
+import { Router, ActivatedRoute } from '@angular/router';
 
 @Component({
     selector: 'metadata-history',
@@ -16,12 +17,20 @@ export class MetadataHistoryComponent {
     history$: Observable<MetadataVersion[]>;
 
     constructor(
-        private store: Store<ConfigurationState>
+        private store: Store<ConfigurationState>,
+        private router: Router,
+        private route: ActivatedRoute
     ) {
         this.history$ = this.store.select(getVersionCollection);
     }
 
     compareVersions(versions: MetadataVersion[]): void {
-        this.store.dispatch(new CompareVersionRequest(versions));
+        this.router.navigate(
+            ['../', 'compare'],
+            {
+                queryParams: { versions: versions.map(v => v.id) },
+                relativeTo: this.route
+            }
+        );
     }
 }
diff --git a/ui/src/app/metadata/configuration/container/metadata-options.component.ts b/ui/src/app/metadata/configuration/container/metadata-options.component.ts
@@ -31,7 +31,7 @@ export class MetadataOptionsComponent {
     constructor(
         private store: Store<ConfigurationState>
     ) {
-        this.configuration$ = this.store.select(getConfigurationSections);
+        this.configuration$ = this.store.select(getConfigurationSections).pipe(map(config => config));
         this.isEnabled$ = this.store.select(getConfigurationModel).pipe(
             map(config => config ? ('serviceEnabled' in config) ? config.serviceEnabled : config.enabled : false)
         );

diff --git a/ui/src/app/metadata/configuration/effect/compare.effect.ts b/ui/src/app/metadata/configuration/effect/compare.effect.ts
@@ -1,23 +1,43 @@
 import { Injectable } from '@angular/core';
 import { Effect, Actions, ofType } from '@ngrx/effects';
-import { switchMap, catchError, tap, withLatestFrom } from 'rxjs/operators';
+import { catchError, withLatestFrom, map, filter, combineLatest, switchMap } from 'rxjs/operators';
 import { of } from 'rxjs';
 import { MetadataHistoryService } from '../service/history.service';
-import { CompareVersionRequest, CompareActionTypes } from '../action/compare.action';
+import {
+    CompareVersionRequest,
+    CompareActionTypes,
+    CompareVersionSuccess,
+    CompareVersionError,
+    SetMetadataVersions
+} from '../action/compare.action';
 import { Store } from '@ngrx/store';
 import { State, getConfigurationModel } from '../reducer';
-import { ActivatedRoute, RouterState, RouterStateSnapshot } from '@angular/router';
 
 @Injectable()
 export class CompareVersionEffects {
 
-    @Effect({dispatch: false})
+    @Effect()
     compareVersionRequest$ = this.actions$.pipe(
         ofType<CompareVersionRequest>(CompareActionTypes.COMPARE_METADATA_REQUEST),
-        withLatestFrom(
+        map(action => action.payload),
+        combineLatest(
             this.store.select(getConfigurationModel)
         ),
-        tap((data) => console.log(data, '@type' in data[1]))
+        switchMap(([versions, model]) => {
+            const type = '@type' in model ? 'provider' : 'resolver';
+            const id = '@type' in model ? model.resourceId : model.id;
+            return this.historyService.getVersions(id, versions, type).pipe(
+                map(v => new CompareVersionSuccess(v)),
+                catchError(err => of(new CompareVersionError(err)))
+            );
+        })
+    );
+
+    @Effect()
+    setVersionsOnSuccess$ = this.actions$.pipe(
+        ofType<CompareVersionSuccess>(CompareActionTypes.COMPARE_METADATA_SUCCESS),
+        map(action => action.payload),
+        map(versions => new SetMetadataVersions(versions))
     );
 
     constructor(

diff --git a/ui/src/app/metadata/configuration/model/metadata-configuration.ts b/ui/src/app/metadata/configuration/model/metadata-configuration.ts
@@ -1,5 +1,6 @@
-import Section from './section';
+import { Section } from './section';
 
 export interface MetadataConfiguration {
     sections: Section[];
+    dates: String[];
 }
diff --git a/ui/src/app/metadata/configuration/model/section.ts b/ui/src/app/metadata/configuration/model/section.ts
@@ -1,11 +1,17 @@
-import { Property } from '../../domain/model/property';
-
 export interface Section {
     id: string;
     index: number;
     label: string;
     pageNumber: number;
-    properties: Property[];
+    properties: SectionProperty[];
 }
 
-export default Section;
+export interface SectionProperty {
+    label: string;
+    type: string;
+    value: any[];
+    widget?: {
+        id: string;
+        [propertyName: string]: any;
+    };
+}
diff --git a/...ent/configuration-property.component.html → ...iguration/reducer/compare.reducer.spec.ts b/...ent/configuration-property.component.html → ...iguration/reducer/compare.reducer.spec.ts
diff --git a/ui/src/app/metadata/configuration/reducer/compare.reducer.ts b/ui/src/app/metadata/configuration/reducer/compare.reducer.ts
@@ -28,3 +28,6 @@ export function reducer(state = initialState, action: CompareActionsUnion): Stat
         }
     }
 }
+
+export const getVersionModels = (state: State) => state.models;
+export const getVersionModelsLoaded = (state: State) => state.loaded;