Refactored version display

TIER · Aug 15, 2019 · 2eb54a0 · 2eb54a0
1 parent be60891
commit 2eb54a0
Show file tree

Hide file tree

Showing 28 changed files with 421 additions and 218 deletions.
diff --git a/backend/src/main/resources/i18n/messages.properties b/backend/src/main/resources/i18n/messages.properties
@@ -60,6 +60,7 @@ action.restore=Restore
 value.enabled=Enabled
 value.disabled=Disabled
 value.current=Current
+value.not-current=Not Current
 value.none=None
 value.file=File
 value.memory=Memory

diff --git a/ui/src/app/metadata/configuration/action/restore.action.ts b/ui/src/app/metadata/configuration/action/restore.action.ts
@@ -1,27 +1,19 @@
 import { Action } from '@ngrx/store';
 import { Metadata } from '../../domain/domain.type';
+import { VersionRequest } from '../model/request';
 
 export enum RestoreActionTypes {
-    SELECT_VERSION_SUCCESS = '[Restore Version] Select Version Success',
-    SELECT_VERSION_ERROR = '[Restore Version] Select Version Error',
-    SELECT_VERSION_REQUEST = '[Restore Version] Select Version Request',
-
     RESTORE_VERSION_REQUEST = '[Restore Version] Restore Version Request',
     RESTORE_VERSION_SUCCESS = '[Restore Version] Restore Version Success',
     RESTORE_VERSION_ERROR = '[Restore Version] Restore Version Error',
 
-    CLEAR_VERSION = '[Restore Version] Clear Versions'
-}
-
-export interface VersionRequest {
-    type: string;
-    id: string;
-    version: string;
+    CLEAR_VERSION = '[Restore Version] Clear Versions',
+    CANCEL_RESTORE = '[Restore Version] Cancel Restore'
 }
 
 export class RestoreVersionRequest implements Action {
     readonly type = RestoreActionTypes.RESTORE_VERSION_REQUEST;
-    constructor(public payload: VersionRequest) { }
+    constructor() { }
 }
 
 export class RestoreVersionSuccess implements Action {
@@ -34,32 +26,13 @@ export class RestoreVersionError implements Action {
     constructor(public payload: any) { }
 }
 
-export class SelectVersionRestoreRequest implements Action {
-    readonly type = RestoreActionTypes.SELECT_VERSION_REQUEST;
-
-    constructor(public payload: VersionRequest) { }
-}
-
-export class SelectVersionRestoreSuccess implements Action {
-    readonly type = RestoreActionTypes.SELECT_VERSION_SUCCESS;
-
-    constructor(public payload: Metadata) { }
-}
-export class SelectVersionRestoreError implements Action {
-    readonly type = RestoreActionTypes.SELECT_VERSION_ERROR;
-
-    constructor(public payload: any) { }
-}
-
-export class ClearVersionRestore implements Action {
-    readonly type = RestoreActionTypes.CLEAR_VERSION;
+export class CancelRestore implements Action {
+    readonly type = RestoreActionTypes.CANCEL_RESTORE;
+    constructor() { }
 }
 
 export type RestoreActionsUnion =
-    | SelectVersionRestoreRequest
-    | SelectVersionRestoreError
-    | SelectVersionRestoreSuccess
     | RestoreVersionRequest
     | RestoreVersionSuccess
     | RestoreVersionError
-    | ClearVersionRestore;
+    | CancelRestore;
diff --git a/ui/src/app/metadata/configuration/action/version.action.ts b/ui/src/app/metadata/configuration/action/version.action.ts
@@ -0,0 +1,40 @@
+import { Action } from '@ngrx/store';
+import { Metadata } from '../../domain/domain.type';
+import { VersionRequest } from '../model/request';
+
+export enum VersionActionTypes {
+    SELECT_VERSION_SUCCESS = '[Version] Select Version Success',
+    SELECT_VERSION_ERROR = '[Version] Select Version Error',
+    SELECT_VERSION_REQUEST = '[Version] Select Version Request',
+
+    CLEAR_VERSION = '[Version] Clear Versions'
+}
+
+export class SelectVersionRequest implements Action {
+    readonly type = VersionActionTypes.SELECT_VERSION_REQUEST;
+
+    constructor(public payload: VersionRequest) { }
+}
+
+export class SelectVersionSuccess implements Action {
+    readonly type = VersionActionTypes.SELECT_VERSION_SUCCESS;
+
+    constructor(public payload: Metadata) { }
+}
+export class SelectVersionError implements Action {
+    readonly type = VersionActionTypes.SELECT_VERSION_ERROR;
+
+    constructor(public payload: any) { }
+}
+
+export class ClearVersion implements Action {
+    readonly type = VersionActionTypes.CLEAR_VERSION;
+
+    constructor() { }
+}
+
+export type VersionActionsUnion =
+    | SelectVersionRequest
+    | SelectVersionError
+    | SelectVersionSuccess
+    | ClearVersion;
diff --git a/ui/src/app/metadata/configuration/component/filter-configuration-list.component.ts b/ui/src/app/metadata/configuration/component/filter-configuration-list.component.ts
@@ -1,8 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { FilterListComponent } from '../../filter/component/filter-list.component';
 
 @Component({
     selector: 'filter-configuration-list',
     templateUrl: './filter-configuration-list.component.html'
 })
-export class FilterConfigurationListComponent extends FilterListComponent { }
+export class FilterConfigurationListComponent extends FilterListComponent {
+    @Input() editable = true;
+}
diff --git a/ui/src/app/metadata/configuration/component/history-list.component.html b/ui/src/app/metadata/configuration/component/history-list.component.html
@@ -21,13 +21,11 @@
                 </div>
             </td>
             <td>
-                <a [routerLink]="['../', 'options']" [queryParams]="{'version': version.id}">
-                    <ng-container>
-                        {{ version.date | date:DATE_FORMAT }}&nbsp;
-                        <ng-container *ngIf="i === 0">
-                            (<translate-i18n key="label.current">Current</translate-i18n>)
-                        </ng-container>
-                    </ng-container>
+                <a [routerLink]="['../', 'options']" *ngIf="i === 0">
+                    {{ version.date | date:DATE_FORMAT }}&nbsp;(<translate-i18n key="label.current">Current</translate-i18n>)
+                </a>
+                <a [routerLink]="['../', 'version', version.id, 'options']" *ngIf="i > 0">
+                    {{ version.date | date:DATE_FORMAT }}
                 </a>
             </td>
             <td>{{ version.creator }}</td>

diff --git a/ui/src/app/metadata/configuration/component/metadata-configuration.component.html b/ui/src/app/metadata/configuration/component/metadata-configuration.component.html
@@ -1,8 +1,7 @@
 <div *ngIf="configuration">
     <section *ngFor="let section of configuration.sections; let i = index;" class="mb-4">
         <div class="config-group">
-            <div class="numbered-header d-flex justify-content-start bg-light align-items-center"
-                [ngClass]="{'py-2': !editable}">
+            <div class="numbered-header d-flex justify-content-start bg-light align-items-center">
                 <h2 class="title h4 m-0 flex-grow-1">
                     <span *ngIf="numbered"
                         class="d-inline-block px-2 py-1 mb-0 h4 number border border-secondary bg-white rounded-lg">

diff --git a/ui/src/app/metadata/configuration/component/metadata-header.component.html b/ui/src/app/metadata/configuration/component/metadata-header.component.html
@@ -2,16 +2,17 @@
     <div class="card-body">
         <h5 class="card-title version-title">
             <translate-i18n key="label.saved">Saved</translate-i18n>:&nbsp;
-            <span class="save-date">{{ version.date | date:'medium' }}</span>
+            <span class="save-date">{{ version.modifiedDate | date:'medium' }}</span>
             <br />
             <translate-i18n key="label.by">By</translate-i18n>:&nbsp;
-            <span class="author">{{ version.creator }}</span>
+            <span class="author">{{ version.createdBy }}</span>
         </h5>
         <p class="card-text">
             <span class="badge badge-primary" *ngIf="isEnabled" translate="value.enabled">Enabled</span>
             <span class="badge badge-danger" *ngIf="!isEnabled" translate="value.disabled">Disabled</span>
             &nbsp;
             <span class="badge badge-primary" *ngIf="isCurrent" translate="value.current">Current</span>
+            <span class="badge badge-warning" *ngIf="!isCurrent" translate="value.not-current">Not 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,5 @@
 import { Component, Input } from '@angular/core';
-import { Metadata, MetadataTypes } from '../../domain/domain.type';
-import { MetadataVersion } from '../model/version';
+import { Metadata } from '../../domain/domain.type';
 
 @Component({
     selector: 'metadata-header',
@@ -10,8 +9,7 @@ import { MetadataVersion } from '../model/version';
 
 export class MetadataHeaderComponent {
     @Input() isEnabled: boolean;
-    @Input() version: MetadataVersion;
-    @Input() versionNumber: number;
+    @Input() version: Metadata;
     @Input() isCurrent: boolean;
 
     constructor() {}

diff --git a/ui/src/app/metadata/configuration/configuration.module.ts b/ui/src/app/metadata/configuration/configuration.module.ts
@@ -31,7 +31,10 @@ import { FilterConfigurationListItemComponent } from './component/filter-configu
 import { SharedModule } from '../../shared/shared.module';
 import { FilterTargetPropertyComponent } from './component/filter-target-property.component';
 import { RestoreComponent } from './container/restore.component';
-import { RestoreVersionEffects } from './effect/restore.effect';
+import { RestoreEffects } from './effect/restore.effect';
+import { VersionComponent } from './container/version.component';
+import { VersionOptionsComponent } from './container/version-options.component';
+import { VersionEffects } from './effect/version.effect';
 
 @NgModule({
     declarations: [
@@ -50,7 +53,9 @@ import { RestoreVersionEffects } from './effect/restore.effect';
         FilterConfigurationListComponent,
         FilterConfigurationListItemComponent,
         FilterTargetPropertyComponent,
-        RestoreComponent
+        RestoreComponent,
+        VersionComponent,
+        VersionOptionsComponent
     ],
     entryComponents: [],
     imports: [
@@ -88,7 +93,8 @@ export class MetadataConfigurationModule {
                 MetadataConfigurationEffects,
                 MetadataHistoryEffects,
                 CompareVersionEffects,
-                RestoreVersionEffects
+                RestoreEffects,
+                VersionEffects
             ])
     ],
     providers: []

diff --git a/ui/src/app/metadata/configuration/configuration.routing.ts b/ui/src/app/metadata/configuration/configuration.routing.ts
@@ -5,6 +5,8 @@ import { MetadataXmlComponent } from './container/metadata-xml.component';
 import { MetadataHistoryComponent } from './container/metadata-history.component';
 import { MetadataComparisonComponent } from './container/metadata-comparison.component';
 import { RestoreComponent } from './container/restore.component';
+import { VersionComponent } from './container/version.component';
+import { VersionOptionsComponent } from './container/version-options.component';
 
 export const ConfigurationRoutes: Routes = [
     {
@@ -32,8 +34,18 @@ export const ConfigurationRoutes: Routes = [
                 component: MetadataComparisonComponent
             },
             {
-                path: 'restore',
-                component: RestoreComponent
+                path: 'version/:version',
+                component: VersionComponent,
+                children: [
+                    {
+                        path: 'options',
+                        component: VersionOptionsComponent
+                    },
+                    {
+                        path: 'restore',
+                        component: RestoreComponent
+                    }
+                ]
             }
         ]
     }

diff --git a/ui/src/app/metadata/configuration/container/configuration.component.ts b/ui/src/app/metadata/configuration/container/configuration.component.ts
@@ -1,13 +1,12 @@
-import { Component, ChangeDetectionStrategy, OnDestroy, HostListener } from '@angular/core';
-import { ActivatedRoute, Router, Scroll, Event } from '@angular/router';
-import { takeUntil, map, withLatestFrom, filter, timeout, delay } from 'rxjs/operators';
+import { Component, ChangeDetectionStrategy, OnDestroy } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { takeUntil, map } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
-import { Observable, Subject, interval, combineLatest } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
 
 import * as fromConfiguration from '../reducer';
 
 import { ClearConfiguration, SetMetadata } from '../action/configuration.action';
-import { LoadHistoryRequest, ClearHistory, SelectVersion } from '../action/history.action';
 import * as fromReducer from '../reducer';
 
 @Component({
@@ -22,39 +21,20 @@ export class ConfigurationComponent implements OnDestroy {
     name$: Observable<string>;
     type$: Observable<string>;
 
-    hasVersion = ([collection, params]) => params.version || collection && collection.length > 0 ? collection[0].id : null;
-
     constructor(
         private store: Store<fromConfiguration.ConfigurationState>,
         private routerState: ActivatedRoute
     ) {
 
-        combineLatest(
-            this.routerState.params,
-            this.routerState.queryParams
-        ).pipe(
+        this.routerState.params.pipe(
             takeUntil(this.ngUnsubscribe),
-            map(([{ id, type }, { version }]) => new SetMetadata({
+            map(({ id, type, version }) => new SetMetadata({
                 id,
                 type,
                 version
             }))
         ).subscribe(this.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(
-            filter(collection => collection && collection.length > 0),
-            takeUntil(this.ngUnsubscribe),
-            withLatestFrom(
-                this.routerState.queryParams
-            ),
-            map(this.hasVersion)
-        ).subscribe(version => this.store.dispatch(new SelectVersion(version)));
-
         this.name$ = this.store.select(fromReducer.getConfigurationModelName);
         this.type$ = this.store.select(fromReducer.getConfigurationModelType);
     }
@@ -63,6 +43,5 @@ export class ConfigurationComponent implements OnDestroy {
         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-comparison.component.ts b/ui/src/app/metadata/configuration/container/metadata-comparison.component.ts
@@ -3,7 +3,7 @@ import { Observable } from 'rxjs';
 import { Store } from '@ngrx/store';
 import { ActivatedRoute } from '@angular/router';
 import { map } from 'rxjs/operators';
-import { ConfigurationState, getVersionConfigurations, getVersionConfigurationCount } from '../reducer';
+import { ConfigurationState, getComparisonConfigurations, getComparisonConfigurationCount } from '../reducer';
 import { CompareVersionRequest } from '../action/compare.action';
 import { MetadataConfiguration } from '../model/metadata-configuration';
 import * as fromReducer from '../reducer';
@@ -29,8 +29,8 @@ export class MetadataComparisonComponent {
             map(versions => new CompareVersionRequest(versions))
         ).subscribe(this.store);
 
-        this.versions$ = this.store.select(getVersionConfigurations);
-        this.numVersions$ = this.store.select(getVersionConfigurationCount);
+        this.versions$ = this.store.select(getComparisonConfigurations);
+        this.numVersions$ = this.store.select(getComparisonConfigurationCount);
         this.type$ = this.store.select(fromReducer.getConfigurationModelType);
     }
 }