SHIBUI-1269 Implemented configuration xml component

TIER · Jun 11, 2019 · 0b387cc · 0b387cc
1 parent 63f9277
commit 0b387cc
Show file tree

Hide file tree

Showing 18 changed files with 372 additions and 23 deletions.
diff --git a/ui/src/app/metadata/configuration/action/configuration.action.ts b/ui/src/app/metadata/configuration/action/configuration.action.ts
@@ -12,9 +12,17 @@ export enum ConfigurationActionTypes {
     LOAD_SCHEMA_SUCCESS = '[Metadata Configuration] Load Schema Success',
     LOAD_SCHEMA_ERROR = '[Metadata Configuration] Load Schema Error',
 
+    LOAD_XML_REQUEST = '[Metadata Configuration] Load XML Request',
+    LOAD_XML_SUCCESS = '[Metadata Configuration] Load XML Success',
+    LOAD_XML_ERROR = '[Metadata Configuration] Load XML Error',
+
     SET_METADATA = '[Metadata Configuration] Set Metadata Model',
     SET_DEFINITION = '[Metadata Configuration] Set Metadata Definition',
     SET_SCHEMA = '[Metadata Configuration] Set Metadata Schema',
+    SET_XML = '[Metadata Configuration] Set Metadata Xml',
+
+    DOWNLOAD_XML = '[Metadata Configuration] Download Metadata Xml',
+
     CLEAR = '[Metadata Configuration] Clear'
 }
 
@@ -54,6 +62,24 @@ export class LoadSchemaError implements Action {
     constructor(public payload: any) { }
 }
 
+export class LoadXmlRequest implements Action {
+    readonly type = ConfigurationActionTypes.LOAD_XML_REQUEST;
+
+    constructor(public payload: string) { }
+}
+
+export class LoadXmlSuccess implements Action {
+    readonly type = ConfigurationActionTypes.LOAD_XML_SUCCESS;
+
+    constructor(public payload: string) { }
+}
+
+export class LoadXmlError implements Action {
+    readonly type = ConfigurationActionTypes.LOAD_XML_ERROR;
+
+    constructor(public payload: any) { }
+}
+
 export class SetMetadata implements Action {
     readonly type = ConfigurationActionTypes.SET_METADATA;
 
@@ -72,6 +98,16 @@ export class SetSchema implements Action {
     constructor(public payload: Schema) { }
 }
 
+export class SetXml implements Action {
+    readonly type = ConfigurationActionTypes.SET_XML;
+
+    constructor(public payload: string) { }
+}
+
+export class DownloadXml implements Action {
+    readonly type = ConfigurationActionTypes.DOWNLOAD_XML;
+}
+
 export class ClearConfiguration implements Action {
     readonly type = ConfigurationActionTypes.CLEAR;
 }
@@ -83,7 +119,12 @@ export type ConfigurationActionsUnion =
     | LoadSchemaRequest
     | LoadSchemaSuccess
     | LoadSchemaError
+    | LoadXmlRequest
+    | LoadXmlSuccess
+    | LoadXmlError
     | SetMetadata
     | SetDefinition
     | SetSchema
+    | SetXml
+    | DownloadXml
     | ClearConfiguration;
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,4 +1,4 @@
-<div *ngIf="configuration" class="container">
+<div *ngIf="configuration">
     <section class="px-3 mb-3" *ngFor="let section of configuration.sections; let i = index;">
         <div class="config-group">
             <div class="numbered-header d-flex justify-content-start bg-light align-items-center">

diff --git a/ui/src/app/metadata/configuration/configuration.module.ts b/ui/src/app/metadata/configuration/configuration.module.ts
@@ -17,10 +17,14 @@ import { PrimitivePropertyComponent } from './component/primitive-property.compo
 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';
 
 @NgModule({
     declarations: [
         MetadataConfigurationComponent,
+        MetadataOptionsComponent,
+        MetadataXmlComponent,
         ConfigurationPropertyComponent,
         PrimitivePropertyComponent,
         ObjectPropertyComponent,

diff --git a/ui/src/app/metadata/configuration/configuration.routing.ts b/ui/src/app/metadata/configuration/configuration.routing.ts
@@ -1,9 +1,25 @@
 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';
 
 export const ConfigurationRoutes: Routes = [
     {
         path: ':type/:id/configuration',
-        component: ConfigurationComponent
+        component: ConfigurationComponent,
+        children: [
+            {
+                path: '',
+                redirectTo: 'options'
+            },
+            {
+                path: 'options',
+                component: MetadataOptionsComponent
+            },
+            {
+                path: 'xml',
+                component: MetadataXmlComponent
+            }
+        ]
     }
 ];
diff --git a/ui/src/app/metadata/configuration/container/configuration.component.html b/ui/src/app/metadata/configuration/container/configuration.component.html
@@ -11,7 +11,7 @@
             </div>
         </div>
         <div class="section-body p-4 border border-top-0 border-info">
-            <metadata-configuration [configuration]="configuration$ | async"></metadata-configuration>
+            <router-outlet></router-outlet>
         </div>
     </section>
 </div>
diff --git a/ui/src/app/metadata/configuration/container/configuration.component.spec.ts b/ui/src/app/metadata/configuration/container/configuration.component.spec.ts
@@ -9,14 +9,6 @@ import { ConfigurationComponent } from './configuration.component';
 import * as fromConfiguration from '../reducer';
 import { MockI18nModule } from '../../../../testing/i18n.stub';
 
-@Component({
-    selector: 'metadata-configuration',
-    template: ``
-})
-class MetadataConfigurationComponent {
-    @Input() configuration: MetadataConfiguration;
-}
-
 @Component({
     template: `
         <configuration-page></configuration-page>
@@ -47,7 +39,6 @@ describe('Metadata Configuration Page Component', () => {
             ],
             declarations: [
                 ConfigurationComponent,
-                MetadataConfigurationComponent,
                 TestHostComponent
             ],
         }).compileComponents();

diff --git a/ui/src/app/metadata/configuration/container/configuration.component.ts b/ui/src/app/metadata/configuration/container/configuration.component.ts
@@ -1,7 +1,7 @@
 import { Store } from '@ngrx/store';
 import { Component, ChangeDetectionStrategy, OnDestroy } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Params } from '@angular/router';
 
 import * as fromConfiguration from '../reducer';
 import { MetadataConfiguration } from '../model/metadata-configuration';
@@ -17,14 +17,10 @@ import { LoadMetadataRequest, ClearConfiguration } from '../action/configuration
 export class ConfigurationComponent implements OnDestroy {
     private ngUnsubscribe: Subject<void> = new Subject<void>();
 
-    configuration$: Observable<MetadataConfiguration>;
-
     constructor(
         private store: Store<fromConfiguration.ConfigurationState>,
         private routerState: ActivatedRoute
     ) {
-        this.configuration$ = this.store.select(fromConfiguration.getConfigurationSections);
-
         this.routerState.params.pipe(
             takeUntil(this.ngUnsubscribe),
             map(params => new LoadMetadataRequest({id: params.id, type: params.type}))

diff --git a/ui/src/app/metadata/configuration/container/metadata-options.component.html b/ui/src/app/metadata/configuration/container/metadata-options.component.html
@@ -0,0 +1,3 @@
+<div class="container">
+    <metadata-configuration [configuration]="configuration$ | async"></metadata-configuration>
+</div>
diff --git a/ui/src/app/metadata/configuration/container/metadata-options.component.spec.ts b/ui/src/app/metadata/configuration/container/metadata-options.component.spec.ts
@@ -0,0 +1,70 @@
+import { Component, ViewChild, Input } from '@angular/core';
+import { TestBed, async, ComponentFixture } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { StoreModule, combineReducers, Store } from '@ngrx/store';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+
+import { MetadataConfiguration } from '../model/metadata-configuration';
+import * as fromConfiguration from '../reducer';
+import { MockI18nModule } from '../../../../testing/i18n.stub';
+import { MetadataOptionsComponent } from './metadata-options.component';
+
+@Component({
+    selector: 'metadata-configuration',
+    template: ``
+})
+class MetadataConfigurationComponent {
+    @Input() configuration: MetadataConfiguration;
+}
+
+@Component({
+    template: `
+        <metadata-options-page></metadata-options-page>
+    `
+})
+class TestHostComponent {
+    @ViewChild(MetadataOptionsComponent)
+    public componentUnderTest: MetadataOptionsComponent;
+
+    configuration: MetadataConfiguration = { sections: [] };
+}
+
+describe('Metadata Options Page Component', () => {
+
+    let fixture: ComponentFixture<TestHostComponent>;
+    let instance: TestHostComponent;
+    let app: MetadataOptionsComponent;
+    let store: Store<fromConfiguration.State>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                NgbDropdownModule,
+                StoreModule.forRoot({
+                    'metadata-configuration': combineReducers(fromConfiguration.reducers),
+                }),
+                MockI18nModule,
+                RouterTestingModule
+            ],
+            declarations: [
+                MetadataOptionsComponent,
+                MetadataConfigurationComponent,
+                TestHostComponent
+            ],
+        }).compileComponents();
+
+        store = TestBed.get(Store);
+        spyOn(store, 'dispatch');
+        spyOn(store, 'select');
+
+        fixture = TestBed.createComponent(TestHostComponent);
+        instance = fixture.componentInstance;
+        app = instance.componentUnderTest;
+        fixture.detectChanges();
+    }));
+
+    it('should load metadata objects', async(() => {
+        expect(app).toBeTruthy();
+        expect(store.select).toHaveBeenCalled();
+    }));
+});
diff --git a/ui/src/app/metadata/configuration/container/metadata-options.component.ts b/ui/src/app/metadata/configuration/container/metadata-options.component.ts
@@ -0,0 +1,23 @@
+import { Store } from '@ngrx/store';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Observable } from 'rxjs';
+
+import * as fromConfiguration from '../reducer';
+import { MetadataConfiguration } from '../model/metadata-configuration';
+
+@Component({
+    selector: 'metadata-options-page',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl: './metadata-options.component.html',
+    styleUrls: []
+})
+export class MetadataOptionsComponent {
+
+    configuration$: Observable<MetadataConfiguration>;
+
+    constructor(
+        private store: Store<fromConfiguration.ConfigurationState>
+    ) {
+        this.configuration$ = this.store.select(fromConfiguration.getConfigurationSections);
+    }
+}
diff --git a/ui/src/app/metadata/configuration/container/metadata-xml.component.html b/ui/src/app/metadata/configuration/container/metadata-xml.component.html
@@ -0,0 +1,7 @@
+<div class="container-fluid">
+    <pre class="border p-2 bg-light rounded"><code>{{ xml$ | async }}</code></pre>
+    <button type="button" class="btn btn-primary" (click)="preview(xml)">
+        <i class="fa fa-fw fa-save"></i>
+        <translate-i18n key="action.download-file">Download File</translate-i18n>
+    </button>
+</div>
diff --git a/ui/src/app/metadata/configuration/container/metadata-xml.component.spec.ts b/ui/src/app/metadata/configuration/container/metadata-xml.component.spec.ts
@@ -0,0 +1,61 @@
+import { Component, ViewChild, Input } from '@angular/core';
+import { TestBed, async, ComponentFixture } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { StoreModule, combineReducers, Store } from '@ngrx/store';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+
+import { MetadataConfiguration } from '../model/metadata-configuration';
+import * as fromConfiguration from '../reducer';
+import { MockI18nModule } from '../../../../testing/i18n.stub';
+import { MetadataXmlComponent } from './metadata-xml.component';
+
+@Component({
+    template: `
+        <metadata-xml-page></metadata-xml-page>
+    `
+})
+class TestHostComponent {
+    @ViewChild(MetadataXmlComponent)
+    public componentUnderTest: MetadataXmlComponent;
+
+    configuration: MetadataConfiguration = { sections: [] };
+}
+
+describe('Metadata Xml Page Component', () => {
+
+    let fixture: ComponentFixture<TestHostComponent>;
+    let instance: TestHostComponent;
+    let app: MetadataXmlComponent;
+    let store: Store<fromConfiguration.State>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                NgbDropdownModule,
+                StoreModule.forRoot({
+                    'metadata-configuration': combineReducers(fromConfiguration.reducers),
+                }),
+                MockI18nModule,
+                RouterTestingModule
+            ],
+            declarations: [
+                MetadataXmlComponent,
+                TestHostComponent
+            ],
+        }).compileComponents();
+
+        store = TestBed.get(Store);
+        spyOn(store, 'dispatch');
+        spyOn(store, 'select');
+
+        fixture = TestBed.createComponent(TestHostComponent);
+        instance = fixture.componentInstance;
+        app = instance.componentUnderTest;
+        fixture.detectChanges();
+    }));
+
+    it('should load metadata objects', async(() => {
+        expect(app).toBeTruthy();
+        expect(store.select).toHaveBeenCalledTimes(2);
+    }));
+});
diff --git a/ui/src/app/metadata/configuration/container/metadata-xml.component.ts b/ui/src/app/metadata/configuration/container/metadata-xml.component.ts
@@ -0,0 +1,33 @@
+import { Store } from '@ngrx/store';
+import { Component } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+
+import * as fromConfiguration from '../reducer';
+import { Metadata } from '../../domain/domain.type';
+import { DownloadXml } from '../action/configuration.action';
+
+@Component({
+    selector: 'metadata-xml-page',
+    templateUrl: './metadata-xml.component.html',
+    styleUrls: []
+})
+export class MetadataXmlComponent {
+
+    private ngUnsubscribe: Subject<void> = new Subject<void>();
+
+    entity: Metadata;
+    entity$: Observable<Metadata>;
+    xml: string;
+    xml$: Observable<string>;
+
+    constructor(
+        private store: Store<fromConfiguration.ConfigurationState>
+    ) {
+        this.xml$ = this.store.select(fromConfiguration.getConfigurationXml);
+        this.entity$ = this.store.select(fromConfiguration.getConfigurationModel);
+    }
+
+    preview(): void {
+        this.store.dispatch(new DownloadXml());
+    }
+}