SHIBUI-1267 Implemented configuration component

backend/src/main/resources/metadata-sources-ui-schema.json

@@ -310,6 +310,7 @@
         },
         "attributeRelease": {
             "type": "array",
+            "title": "label.attribute-release",
             "description": "Attribute release table - select the attributes you want to release (default unchecked)",
             "widget": {
                 "id": "checklist",

ui/src/app/metadata/configuration/action/configuration.action.ts

@@ -8,6 +8,10 @@ export enum ConfigurationActionTypes {
     LOAD_METADATA_SUCCESS = '[Metadata Configuration] Load Metadata Success',
     LOAD_METADATA_ERROR = '[Metadata Configuration] Load Metadata Error',
 
+    LOAD_SCHEMA_REQUEST = '[Metadata Configuration] Load Schema Request',
+    LOAD_SCHEMA_SUCCESS = '[Metadata Configuration] Load Schema Success',
+    LOAD_SCHEMA_ERROR = '[Metadata Configuration] Load Schema Error',
+
     SET_METADATA = '[Metadata Configuration] Set Metadata Model',
     SET_DEFINITION = '[Metadata Configuration] Set Metadata Definition',
     SET_SCHEMA = '[Metadata Configuration] Set Metadata Schema',
@@ -32,6 +36,24 @@ export class LoadMetadataError implements Action {
     constructor(public payload: any) { }
 }
 
+export class LoadSchemaRequest implements Action {
+    readonly type = ConfigurationActionTypes.LOAD_SCHEMA_REQUEST;
+
+    constructor(public payload: string) { }
+}
+
+export class LoadSchemaSuccess implements Action {
+    readonly type = ConfigurationActionTypes.LOAD_SCHEMA_SUCCESS;
+
+    constructor(public payload: Schema) { }
+}
+
+export class LoadSchemaError implements Action {
+    readonly type = ConfigurationActionTypes.LOAD_SCHEMA_ERROR;
+
+    constructor(public payload: any) { }
+}
+
 export class SetMetadata implements Action {
     readonly type = ConfigurationActionTypes.SET_METADATA;
 
@@ -55,6 +77,12 @@ export class ClearConfiguration implements Action {
 }
 
 export type ConfigurationActionsUnion =
+    | LoadMetadataRequest
+    | LoadMetadataSuccess
+    | LoadMetadataError
+    | LoadSchemaRequest
+    | LoadSchemaSuccess
+    | LoadSchemaError
     | SetMetadata
     | SetDefinition
     | SetSchema

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

@@ -0,0 +1,51 @@
+<div>
+    <ng-container *ngIf="property.items.type === 'object'">
+        <div class="p-2" role="term" [translate]="property.name">{{ property.name }}</div>
+        <div class="p-2" *ngIf="property.value && property.value.length">
+            <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">
+                        <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>
+                </div>
+            </div>
+        </div>
+    </ng-container>
+    <ng-container *ngIf="property.items.type === 'string'" [ngSwitch]="getItemType(property.items)">
+        <ng-container *ngSwitchCase="'datalist'">
+            <ng-template [ngTemplateOutlet]="listref"></ng-template>
+        </ng-container>
+        <ng-container *ngSwitchCase="'select'">
+            <ng-template [ngTemplateOutlet]="listref"></ng-template>
+        </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">
+                        true
+                    </span>
+                    <span *ngIf="!property.value || !(property.value.indexOf(attr.key) > -1)" translate="value.false">
+                        false
+                    </span>
+                </div>
+            </div>
+        </ng-container>
+    </ng-container>
+</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>
+    </div>
+</ng-template>

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

@@ -0,0 +1,36 @@
+import { Component, Input } from '@angular/core';
+import { Property } from '../../domain/model/property';
+import { Observable, of } from 'rxjs';
+import { AttributesService } from '../../domain/service/attributes.service';
+import { ConfigurationPropertyComponent } from './configuration-property.component';
+
+@Component({
+    selector: 'array-property',
+    templateUrl: './array-property.component.html',
+    styleUrls: []
+})
+
+export class ArrayPropertyComponent extends ConfigurationPropertyComponent {
+    @Input() property: Property;
+
+    constructor(
+        private attrService: AttributesService
+    ) {
+        super();
+    }
+
+    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([]);
+    }
+}
+

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

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+import { Property } from '../../domain/model/property';
+
+@Component({
+    selector: 'configuration-property',
+    templateUrl: './configuration-property.component.html',
+    styleUrls: []
+})
+
+export class ConfigurationPropertyComponent {
+    @Input() property: Property;
+
+    constructor() { }
+
+    getItemType(items: Property): string {
+        return items.widget ? items.widget.id : 'default';
+    }
+}
+

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

@@ -1,10 +1,23 @@
-<div class="row" *ngIf="configuration && configuration.columns">
-    <div class="col-xl-6 col-xs-12" *ngFor="let sections of configuration.columns">
-        <section class="px-3" *ngFor="let section of sections; let i = index;">
-            {{ i + 1 }}: {{ section.label }}
-            <ng-container *ngFor="let prop of section.properties">
-                {{ prop | json }}
-            </ng-container>
-        </section>
-    </div>
-</div>
+<div *ngIf="configuration" class="container">
+    <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">
+                <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="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>
+                        Edit
+                    </a>
+                </div>
+            </div>
+            <div class="d-flex border-bottom border-light border-2 p-2">
+                <strong class="w-50">Option</strong>
+                <strong class="w-50">Value</strong>
+            </div>
+            <object-property class="d-block" *ngIf="section" [property]="section"></object-property>
+        </div>
+    </section>
+</div>

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

@@ -1,7 +1,7 @@
 import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
-import { WizardStep } from '../../../wizard/model';
-import Section from '../model/section';
 import { MetadataConfiguration } from '../model/metadata-configuration';
+import { Property } from '../../domain/model/property';
+import Section from '../model/section';
 
 @Component({
     selector: 'metadata-configuration',
@@ -13,4 +13,8 @@ export class MetadataConfigurationComponent {
     @Input() configuration: MetadataConfiguration;
 
     constructor() { }
+
+    edit(section: Section): void {
+        console.log(section);
+    }
 }

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

@@ -0,0 +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>
+    </ng-container>
+</ng-container>

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

@@ -0,0 +1,26 @@
+import { Component, Input } from '@angular/core';
+import { Property } from '../../domain/model/property';
+import { ConfigurationPropertyComponent } from './configuration-property.component';
+
+@Component({
+    selector: 'object-property',
+    templateUrl: './object-property.component.html',
+    styleUrls: []
+})
+
+export class ObjectPropertyComponent extends ConfigurationPropertyComponent {
+    @Input() property: Property;
+
+    constructor() {
+        super();
+    }
+
+    getKeys(schema): string[] {
+        return Object.keys(schema.properties);
+    }
+
+    getItemType(items: Property): string {
+        return items.widget ? items.widget.id : 'default';
+    }
+}
+

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

@@ -0,0 +1,5 @@
+<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>
+</div>

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

@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core';
+import { ConfigurationPropertyComponent } from './configuration-property.component';
+
+@Component({
+    selector: 'primitive-property',
+    templateUrl: './primitive-property.component.html',
+    styleUrls: []
+})
+
+export class PrimitivePropertyComponent extends ConfigurationPropertyComponent {
+    constructor() {
+        super();
+    }
+}
+

ui/src/app/metadata/configuration/configuration.module.ts

@@ -3,22 +3,36 @@ import { CommonModule } from '@angular/common';
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 
+import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
+
 import { I18nModule } from '../../i18n/i18n.module';
 import { MetadataConfigurationComponent } from './component/metadata-configuration.component';
 import { ConfigurationComponent } from './container/configuration.component';
 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';
 
 @NgModule({
     declarations: [
         MetadataConfigurationComponent,
+        ConfigurationPropertyComponent,
+        PrimitivePropertyComponent,
+        ObjectPropertyComponent,
+        ArrayPropertyComponent,
         ConfigurationComponent
     ],
     entryComponents: [],
     imports: [
         CommonModule,
-        I18nModule
+        I18nModule,
+        NgbPopoverModule,
+        RouterModule
     ],
     exports: [],
     providers: []

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></metadata-configuration>
+            <metadata-configuration [configuration]="configuration$ | async"></metadata-configuration>
         </div>
     </section>
 </div>

ui/src/app/metadata/configuration/container/configuration.component.ts

@@ -24,16 +24,14 @@ export class ConfigurationComponent implements OnDestroy {
         private store: Store<fromConfiguration.ConfigurationState>,
         private routerState: ActivatedRoute
     ) {
-        this.configuration$ = this.store.select(fromConfiguration.getConfigurationColumns);
+        this.configuration$ = this.store.select(fromConfiguration.getConfigurationSections);
 
         this.routerState.params.pipe(
             takeUntil(this.ngUnsubscribe),
             map(params => new LoadMetadataRequest({id: params.id, type: params.type}))
         ).subscribe(store);
 
         this.configuration$.subscribe(c => console.log(c));
-
-        // this.resolver$ = this.store.select(fromResolvers.getSelectedResolver).pipe(skipWhile(p => !p));
     }
 
     ngOnDestroy() {

ui/src/app/metadata/configuration/effect/configuration.effect.ts

@@ -10,7 +10,11 @@ import {
     LoadMetadataError,
     ConfigurationActionTypes,
     SetMetadata,
-    SetDefinition
+    SetDefinition,
+    LoadSchemaRequest,
+    LoadSchemaSuccess,
+    SetSchema,
+    LoadSchemaError
 } from '../action/configuration.action';
 
 @Injectable()
@@ -36,11 +40,36 @@ export class MetadataConfigurationEffects {
     );
 
     @Effect()
-    setDefinitionOnMetadataSet$ = this.actions$.pipe(
+    setDefinition$ = this.actions$.pipe(
         ofType<SetMetadata>(ConfigurationActionTypes.SET_METADATA),
         map(action => new SetDefinition(this.configService.getDefinition(action.payload)))
     );
 
+    @Effect()
+    loadSchemaOnDefinitionSet$ = this.actions$.pipe(
+        ofType<SetDefinition>(ConfigurationActionTypes.SET_DEFINITION),
+        map(action => new LoadSchemaRequest(action.payload.schema))
+    );
+
+    @Effect()
+    loadSchemaData$ = this.actions$.pipe(
+        ofType<LoadSchemaRequest>(ConfigurationActionTypes.LOAD_SCHEMA_REQUEST),
+        switchMap(action =>
+            this.configService
+                .loadSchema(action.payload)
+                .pipe(
+                    map(schema => new LoadSchemaSuccess(schema)),
+                    catchError(error => of(new LoadSchemaError(error)))
+                )
+        )
+    );
+
+    @Effect()
+    setSchema$ = this.actions$.pipe(
+        ofType<LoadSchemaSuccess>(ConfigurationActionTypes.LOAD_SCHEMA_SUCCESS),
+        map(action => new SetSchema(action.payload))
+    );
+
     constructor(
         private configService: MetadataConfigurationService,
         private actions$: Actions