SHIBUI-1268 Integrated header with version history

TIER · Jun 20, 2019 · 926e946 · 926e946
1 parent 0f8f6c7
commit 926e946
Show file tree

Hide file tree

Showing 39 changed files with 364 additions and 197 deletions.
diff --git a/ui/src/app/metadata/configuration/action/configuration.action.ts b/ui/src/app/metadata/configuration/action/configuration.action.ts
@@ -65,7 +65,7 @@ export class LoadSchemaError implements Action {
 export class LoadXmlRequest implements Action {
     readonly type = ConfigurationActionTypes.LOAD_XML_REQUEST;
 
-    constructor(public payload: string) { }
+    constructor(public payload: { id: string, type: string }) { }
 }
 
 export class LoadXmlSuccess implements Action {

diff --git a/ui/src/app/metadata/configuration/action/history.action.ts b/ui/src/app/metadata/configuration/action/history.action.ts
@@ -0,0 +1,52 @@
+import { Action } from '@ngrx/store';
+import { MetadataHistory } from '../model/history';
+
+export enum HistoryActionTypes {
+    LOAD_HISTORY_REQUEST = '[Configuration History] Load History Request',
+    LOAD_HISTORY_SUCCESS = '[Configuration History] Load History Success',
+    LOAD_HISTORY_ERROR = '[Configuration History] Load History Error',
+    SET_HISTORY = '[Configuration History] Set History',
+    CLEAR_HISTORY = '[Configuration History] Clear History',
+    SELECT_VERSION = '[Configuration History] Select Version'
+}
+
+export class LoadHistoryRequest implements Action {
+    readonly type = HistoryActionTypes.LOAD_HISTORY_REQUEST;
+
+    constructor(public payload: { id: string, type: string }) { }
+}
+
+export class LoadHistorySuccess implements Action {
+    readonly type = HistoryActionTypes.LOAD_HISTORY_SUCCESS;
+
+    constructor(public payload: MetadataHistory) { }
+}
+
+export class LoadHistoryError implements Action {
+    readonly type = HistoryActionTypes.LOAD_HISTORY_ERROR;
+
+    constructor(public payload: any) { }
+}
+
+export class SelectVersion implements Action {
+    readonly type = HistoryActionTypes.SELECT_VERSION;
+    constructor(public payload: string | null) { }
+}
+
+export class SetHistory implements Action {
+    readonly type = HistoryActionTypes.SET_HISTORY;
+
+    constructor(public payload: MetadataHistory) {}
+}
+
+export class ClearHistory implements Action {
+    readonly type = HistoryActionTypes.CLEAR_HISTORY;
+}
+
+export type HistoryActionsUnion =
+    | LoadHistoryRequest
+    | LoadHistorySuccess
+    | LoadHistoryError
+    | SetHistory
+    | ClearHistory
+    | SelectVersion;
diff --git a/...ion/component/history-list.component.html → ...ion/component/history-list.component.html b/...ion/component/history-list.component.html → ...ion/component/history-list.component.html
@@ -12,7 +12,7 @@
         </tr>
     </thead>
     <tbody>
-        <tr *ngFor="let version of history.versions; index as i;">
+        <tr *ngFor="let version of history; index as i;">
             <td>
                 <div class="custom-control custom-checkbox" (click)="toggleVersionSelected(version)">
                     <input [title]="'check-' + i" type="checkbox" class="custom-control-input" [checked]="selected.indexOf(version) > -1">
@@ -21,13 +21,13 @@
                     </label>
                 </div>
             </td>
-            <td *ngIf="i === 0"><translate-i18n key="label.current">Current</translate-i18n> (v{{ version.versionNumber }})</td>
-            <td *ngIf="i > 0">v{{ version.versionNumber }}</td>
-            <td>{{ version.saveDate | date }}</td>
-            <td>{{ version.changedBy }}</td>
+            <td *ngIf="i === 0"><translate-i18n key="label.current">Current</translate-i18n> (v{{ i + 1 }})</td>
+            <td *ngIf="i > 0">v{{ i + 1 }}</td>
+            <td>{{ version.date | date }}</td>
+            <td>{{ version.creator }}</td>
             <td>
                 <button class="btn btn-link" (click)="restoreVersion(version)">
-                    <i class="fa fa-undo"></i>
+                    <i class="fa fa-undo"></i>&nbsp;
                     <translate-i18n key="label.restore">Restore</translate-i18n>
                 </button>
             </td>

diff --git a/.../component/history-list.component.spec.ts → .../component/history-list.component.spec.ts b/.../component/history-list.component.spec.ts → .../component/history-list.component.spec.ts
diff --git a/...rsion/component/history-list.component.ts → ...ation/component/history-list.component.ts b/...rsion/component/history-list.component.ts → ...ation/component/history-list.component.ts
@@ -9,7 +9,7 @@ import { MetadataVersion } from '../model/version';
     styleUrls: []
 })
 export class HistoryListComponent {
-    @Input() history: MetadataHistory;
+    @Input() history: MetadataVersion[];
     @Output() compare: EventEmitter<MetadataVersion[]> = new EventEmitter();
     @Output() restore: EventEmitter<MetadataVersion> = new EventEmitter();
 

diff --git a/ui/src/app/metadata/configuration/component/metadata-configuration.component.html b/ui/src/app/metadata/configuration/component/metadata-configuration.component.html
@@ -7,10 +7,10 @@ <h2 class="title h4 m-0 flex-grow-1">
                     <span class="text">{{ section.label | translate }}</span>
                 </h2>
                 <div class="actions px-2">
-                    <a class="edit-link change-view" [routerLink]="['../', 'edit', section.id]">
-                        <i class="fa fa-edit"></i>
+                    <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>
-                    </a>
+                    </button>
                 </div>
             </div>
             <div class="d-flex border-bottom border-light border-2 p-2">

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,4 +1,5 @@
 import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
 import { MetadataConfiguration } from '../model/metadata-configuration';
 
 @Component({
@@ -10,5 +11,12 @@ import { MetadataConfiguration } from '../model/metadata-configuration';
 export class MetadataConfigurationComponent {
     @Input() configuration: MetadataConfiguration;
 
-    constructor() { }
+    constructor(
+        private router: Router,
+        private activatedRoute: ActivatedRoute
+    ) { }
+
+    edit(id: string): void {
+        this.router.navigate(['../', 'edit', id], { relativeTo: this.activatedRoute.parent });
+    }
 }
diff --git a/ui/src/app/metadata/configuration/component/metadata-header.component.html b/ui/src/app/metadata/configuration/component/metadata-header.component.html
@@ -1,13 +1,14 @@
-<div class="card enabled-status">
+<div class="card enabled-status" *ngIf="version">
     <div class="card-body">
-        <h2 class="card-title version-title">Version 5</h2>
+        <h2 class="card-title version-title">Version {{ versionNumber }}</h2>
         <p class="card-text version-details">
-            Saved <span class="save-date">Mmm DD, YYYY</span>, by <span class="author">Username</span>
+            Saved <span class="save-date">{{ version.date | date }}</span>, by <span class="author">{{ version.creator }}</span>
         </p>
         <p class="card-text">
             <span class="badge badge-primary" *ngIf="isEnabled" translate="value.enabled">Enabled</span>
+            &nbsp;
             <span class="badge badge-danger" *ngIf="!isEnabled" translate="value.disabled">Disabled</span>
-            <span class="badge badge-primary">Current</span>
+            <span class="badge badge-primary" *ngIf="isCurrent">Current</span>
         </p>
     </div>
 </div>
diff --git a/ui/src/app/metadata/configuration/component/metadata-header.component.ts b/ui/src/app/metadata/configuration/component/metadata-header.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { Metadata, MetadataTypes } from '../../domain/domain.type';
-import { MetadataResolver } from '../../domain/model';
+import { MetadataVersion } from '../model/version';
 
 @Component({
     selector: 'metadata-header',
@@ -10,6 +10,10 @@ import { MetadataResolver } from '../../domain/model';
 
 export class MetadataHeaderComponent {
     @Input() metadata: Metadata;
+    @Input() version: MetadataVersion;
+    @Input() versionNumber: number;
+    @Input() isCurrent: boolean;
+
     constructor() {}
 
     get isEnabled(): boolean {

diff --git a/ui/src/app/metadata/configuration/configuration.module.ts b/ui/src/app/metadata/configuration/configuration.module.ts
@@ -12,14 +12,17 @@ import { MetadataConfigurationService } from './service/configuration.service';
 import * as fromConfig from './reducer';
 import { MetadataConfigurationEffects } from './effect/configuration.effect';
 import { ConfigurationPropertyComponent } from './component/configuration-property.component';
-import { DomainModule } from '../domain/domain.module';
 import { PrimitivePropertyComponent } from './component/primitive-property.component';
 import { ObjectPropertyComponent } from './component/object-property.component';
 import { ArrayPropertyComponent } from './component/array-property.component';
 import { RouterModule } from '@angular/router';
 import { MetadataOptionsComponent } from './container/metadata-options.component';
 import { MetadataXmlComponent } from './container/metadata-xml.component';
 import { MetadataHeaderComponent } from './component/metadata-header.component';
+import { MetadataHistoryEffects } from './effect/history.effect';
+import { MetadataHistoryService } from './service/history.service';
+import { MetadataHistoryComponent } from './container/metadata-history.component';
+import { HistoryListComponent } from './component/history-list.component';
 
 @NgModule({
     declarations: [
@@ -31,7 +34,9 @@ import { MetadataHeaderComponent } from './component/metadata-header.component';
         ObjectPropertyComponent,
         ArrayPropertyComponent,
         ConfigurationComponent,
-        MetadataHeaderComponent
+        MetadataHeaderComponent,
+        MetadataHistoryComponent,
+        HistoryListComponent
     ],
     entryComponents: [],
     imports: [
@@ -48,7 +53,8 @@ export class MetadataConfigurationModule {
         return {
             ngModule: RootMetadataConfigurationModule,
             providers: [
-                MetadataConfigurationService
+                MetadataConfigurationService,
+                MetadataHistoryService
             ]
         };
     }
@@ -58,7 +64,7 @@ export class MetadataConfigurationModule {
     imports: [
         MetadataConfigurationModule,
         StoreModule.forFeature('metadata-configuration', fromConfig.reducers),
-        EffectsModule.forFeature([MetadataConfigurationEffects])
+        EffectsModule.forFeature([MetadataConfigurationEffects, MetadataHistoryEffects])
     ],
     providers: []
 })

diff --git a/ui/src/app/metadata/configuration/configuration.routing.ts b/ui/src/app/metadata/configuration/configuration.routing.ts
@@ -2,6 +2,7 @@ import { Routes } from '@angular/router';
 import { ConfigurationComponent } from './container/configuration.component';
 import { MetadataOptionsComponent } from './container/metadata-options.component';
 import { MetadataXmlComponent } from './container/metadata-xml.component';
+import { MetadataHistoryComponent } from './container/metadata-history.component';
 
 export const ConfigurationRoutes: Routes = [
     {
@@ -19,6 +20,10 @@ export const ConfigurationRoutes: Routes = [
             {
                 path: 'xml',
                 component: MetadataXmlComponent
+            },
+            {
+                path: 'history',
+                component: MetadataHistoryComponent
             }
         ]
     }

diff --git a/ui/src/app/metadata/configuration/configuration.values.ts b/ui/src/app/metadata/configuration/configuration.values.ts
@@ -0,0 +1,10 @@
+import { MetadataSourceEditor } from '../domain/model/wizards/metadata-source-editor';
+
+export enum PATHS {
+    resolver = 'EntityDescriptor',
+    provider = 'MetadataResolvers'
+}
+
+export const DEFINITIONS = {
+    resolver: MetadataSourceEditor
+};
diff --git a/ui/src/app/metadata/configuration/container/configuration.component.ts b/ui/src/app/metadata/configuration/container/configuration.component.ts
@@ -5,8 +5,10 @@ import { ActivatedRoute, Params } from '@angular/router';
 
 import * as fromConfiguration from '../reducer';
 import { MetadataConfiguration } from '../model/metadata-configuration';
-import { takeUntil, map } from 'rxjs/operators';
-import { LoadMetadataRequest, ClearConfiguration } from '../action/configuration.action';
+import { takeUntil, map, withLatestFrom, filter } from 'rxjs/operators';
+import { LoadMetadataRequest, ClearConfiguration, LoadXmlRequest } from '../action/configuration.action';
+import { LoadHistoryRequest, ClearHistory, SelectVersion } from '../action/history.action';
+import * as fromReducer from '../reducer';
 
 @Component({
     selector: 'configuration-page',
@@ -25,11 +27,34 @@ export class ConfigurationComponent implements OnDestroy {
             takeUntil(this.ngUnsubscribe),
             map(params => new LoadMetadataRequest({id: params.id, type: params.type}))
         ).subscribe(store);
+
+        this.routerState.params.pipe(
+            takeUntil(this.ngUnsubscribe),
+            map(params => new LoadHistoryRequest({ id: params.id, type: params.type }))
+        ).subscribe(store);
+
+        this.store.select(fromReducer.getVersionCollection).pipe(
+            takeUntil(this.ngUnsubscribe),
+            withLatestFrom(
+                this.routerState.queryParams
+            ),
+            map(([collection, params]) => {
+                if (collection && collection.length) {
+                    return params.version || collection[0].id;
+                }
+                return null;
+            })
+        ).subscribe(version => {
+            if (version) {
+                this.store.dispatch(new SelectVersion(version));
+            }
+        });
     }
 
     ngOnDestroy() {
         this.ngUnsubscribe.next();
         this.ngUnsubscribe.complete();
         this.store.dispatch(new ClearConfiguration());
+        this.store.dispatch(new ClearHistory());
     }
 }
diff --git a/ui/src/app/metadata/configuration/container/metadata-history.component.html b/ui/src/app/metadata/configuration/container/metadata-history.component.html
@@ -0,0 +1,3 @@
+<div class="container">
+    <history-list [history]="history$ | async"></history-list>
+</div>
diff --git a/...ntainer/version-history.component.spec.ts → ...tainer/metadata-history.component.spec.ts b/...ntainer/version-history.component.spec.ts → ...tainer/metadata-history.component.spec.ts
@@ -1,10 +1,10 @@
 import { Component, ViewChild, Input, EventEmitter, Output } from '@angular/core';
 import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { MockI18nModule } from '../../../../testing/i18n.stub';
-import { VersionHistoryComponent } from './version-history.component';
+import { MetadataHistoryComponent } from './metadata-history.component';
 import { MetadataHistory } from '../model/history';
 import { MetadataVersion } from '../model/version';
-import { HistoryService } from '../service/history.service';
+import { MetadataHistoryService } from '../service/history.service';
 import { of } from 'rxjs';
 
 export const TestData = {
@@ -33,26 +33,26 @@ const MockHistoryService = {
 };
 
 describe('Metadata Version History Component', () => {
-    let fixture: ComponentFixture<VersionHistoryComponent>;
-    let instance: VersionHistoryComponent;
+    let fixture: ComponentFixture<MetadataHistoryComponent>;
+    let instance: MetadataHistoryComponent;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
             providers: [
                 {
-                    provide: HistoryService, useValue: MockHistoryService
+                    provide: MetadataHistoryService, useValue: MockHistoryService
                 }
             ],
             imports: [
                 MockI18nModule
             ],
             declarations: [
                 MockHistoryListComponent,
-                VersionHistoryComponent
+                MetadataHistoryComponent
             ],
         });
 
-        fixture = TestBed.createComponent(VersionHistoryComponent);
+        fixture = TestBed.createComponent(MetadataHistoryComponent);
         instance = fixture.componentInstance;
         fixture.detectChanges();
     });

diff --git a/ui/src/app/metadata/configuration/container/metadata-history.component.ts b/ui/src/app/metadata/configuration/container/metadata-history.component.ts
@@ -0,0 +1,22 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Store } from '@ngrx/store';
+import { ConfigurationState, getVersionCollection } from '../reducer';
+import { MetadataVersion } from '../model/version';
+
+@Component({
+    selector: 'metadata-history',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl: './metadata-history.component.html',
+    styleUrls: []
+})
+export class MetadataHistoryComponent {
+
+    history$: Observable<MetadataVersion[]>;
+
+    constructor(
+        private store: Store<ConfigurationState>
+    ) {
+        this.history$ = this.store.select(getVersionCollection);
+    }
+}
diff --git a/ui/src/app/metadata/configuration/container/metadata-options.component.html b/ui/src/app/metadata/configuration/container/metadata-options.component.html
@@ -1,10 +1,17 @@
 <div class="container">
-    <metadata-header [metadata]="model$ | async"></metadata-header>
+    <metadata-header
+        [metadata]="model$ | async"
+        [version]="version$ | async"
+        [versionNumber]="versionNumber$ | async"
+        [isCurrent]="isCurrent$ | async"></metadata-header>
     <div class="px-3 my-3 d-flex justify-content-between">
-        <button class="btn btn-link">Version History</button>
+        <a class="btn btn-link" routerLink="../history">
+            <i class="fa fa-history sr-hidden"></i>
+            Version History
+        </a>
         <div class="btn-group">
-            <button class="btn" routerLinkActive="btn-primary">Options</button>
-            <button class="btn" routerLinkActive="btn-primary">XML</button>
+            <a class="btn" routerLink="../options" routerLinkActive="btn-primary">Options</a>
+            <a class="btn" routerLink="../xml" routerLinkActive="btn-primary">XML</a>
         </div>
     </div>
     <metadata-configuration [configuration]="configuration$ | async"></metadata-configuration>