Merged in feature/SHIBUI-744 (pull request #180)

SHIBUI-744 Implemented preview buttons Approved-by: Shibui Jenkins <shibui.jenkins@gmail.com> Approved-by: Ryan Mathis <rmathis@unicon.net>
TIER · Aug 27, 2018 · 6685072 · 6685072
1 parent 4e5e8a3
commit 6685072
Show file tree

Hide file tree

Showing 15 changed files with 111 additions and 26 deletions.
diff --git a/ui/src/app/metadata/domain/action/entity.action.ts b/ui/src/app/metadata/domain/action/entity.action.ts
@@ -6,7 +6,10 @@ export const PREVIEW_ENTITY = '[Domain] Preview Entity';
 export class PreviewEntity implements Action {
     readonly type = PREVIEW_ENTITY;
 
-    constructor(public payload: MetadataEntity) { }
+    constructor(public payload: {
+        id: string,
+        entity: MetadataEntity
+    }) { }
 }
 
 export type Actions =

diff --git a/ui/src/app/metadata/domain/effect/entity.effect.spec.ts b/ui/src/app/metadata/domain/effect/entity.effect.spec.ts
@@ -48,7 +48,7 @@ describe('Entity Effects', () => {
         it('should open a modal window for a filter', fakeAsync(() => {
             spyOn(modal, 'open').and.returnValue({componentInstance: <any>{}});
             spyOn(idService, 'preview').and.returnValue(of('<foo></foo>'));
-            effects.openModal(new EntityAttributesFilterEntity());
+            effects.openModal({ id: 'foo', entity: new EntityAttributesFilterEntity()});
             expect(idService.preview).toHaveBeenCalled();
             tick(10);
             expect(modal.open).toHaveBeenCalled();
@@ -57,7 +57,7 @@ describe('Entity Effects', () => {
         it('should open a modal window for a provider', fakeAsync(() => {
             spyOn(modal, 'open').and.returnValue({ componentInstance: <any>{} });
             spyOn(providerService, 'preview').and.returnValue(of('<foo></foo>'));
-            effects.openModal(new FileBackedHttpMetadataResolver());
+            effects.openModal({id: 'foo', entity: new FileBackedHttpMetadataResolver()});
             expect(providerService.preview).toHaveBeenCalled();
             tick(10);
             expect(modal.open).toHaveBeenCalled();

diff --git a/ui/src/app/metadata/domain/effect/entity.effect.ts b/ui/src/app/metadata/domain/effect/entity.effect.ts
@@ -20,7 +20,7 @@ export class EntityEffects {
     previewEntityXml$ = this.actions$.pipe(
         ofType<entityActions.PreviewEntity>(entityActions.PREVIEW_ENTITY),
         map(action => action.payload),
-        tap(entity => this.openModal(entity))
+        tap(prev => this.openModal(prev))
     );
 
     constructor(
@@ -30,9 +30,10 @@ export class EntityEffects {
         private entityService: EntityIdService
     ) { }
 
-    openModal(entity: MetadataEntity): void {
-        let request: Observable<string> = entity.kind === MetadataTypes.FILTER ?
-            this.entityService.preview(entity.getId()) : this.providerService.preview(entity.getId());
+    openModal(prev: { id: string, entity: MetadataEntity }): void {
+        let { id, entity } = prev,
+            request: Observable<string> = entity.kind === MetadataTypes.FILTER ?
+            this.entityService.preview(id) : this.providerService.preview(id);
         request.subscribe(xml => {
             let modal = this.modalService.open(PreviewDialogComponent, {
                 size: 'lg',

diff --git a/ui/src/app/metadata/filter/container/edit-filter.component.html b/ui/src/app/metadata/filter/container/edit-filter.component.html
@@ -29,6 +29,7 @@
                 [schema]="schema$ | async"
                 [model]="model$ | async"
                 [validators]="definition.getValidators()"
+                [actions]="actions"
                 (onChange)="valueChangeSubject.next($event)"
                 (onErrorChange)="statusChangeSubject.next($event)"></sf-form>
         </div>

diff --git a/ui/src/app/metadata/filter/container/edit-filter.component.ts b/ui/src/app/metadata/filter/container/edit-filter.component.ts
@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { Subject, Observable, of } from 'rxjs';
+import { Subject, Observable } from 'rxjs';
 
 import * as fromFilter from '../reducer';
-import { MetadataFilterTypes, EntityAttributesFilter } from '../model';
+import { MetadataFilterTypes } from '../model';
 import { FormDefinition } from '../../../wizard/model';
-import { MetadataFilter, MetadataEntity } from '../../domain/model';
+import { MetadataFilter } from '../../domain/model';
 import { SchemaService } from '../../../schema-form/service/schema.service';
 import { UpdateFilterRequest } from '../action/collection.action';
 import { CancelCreateFilter, UpdateFilterChanges } from '../action/filter.action';
@@ -32,6 +32,8 @@ export class EditFilterComponent {
     filter: MetadataFilter;
     isValid: boolean;
 
+    actions: any;
+
     constructor(
         private store: Store<fromFilter.State>,
         private schemaService: SchemaService
@@ -50,6 +52,12 @@ export class EditFilterComponent {
         this.store
             .select(fromFilter.getFilter)
             .subscribe(filter => this.filter = filter);
+
+        this.actions = {
+            preview: (property: any, parameters: any) => {
+                this.preview(parameters.id);
+            }
+        };
     }
 
     save(): void {
@@ -60,8 +68,11 @@ export class EditFilterComponent {
         this.store.dispatch(new CancelCreateFilter());
     }
 
-    preview(entity: MetadataFilter): void {
-        this.store.dispatch(new PreviewEntity(new EntityAttributesFilterEntity(entity)));
+    preview(id: string): void {
+        this.store.dispatch(new PreviewEntity({
+            id,
+            entity: new EntityAttributesFilterEntity(this.filter)
+        }));
     }
 }
 
diff --git a/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.ts b/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.ts
@@ -79,7 +79,7 @@ export class DashboardResolversListComponent implements OnInit {
     }
 
     openPreviewDialog(entity: MetadataEntity): void {
-        this.store.dispatch(new PreviewEntity(entity));
+        this.store.dispatch(new PreviewEntity({ id: entity.getId(), entity }));
     }
 
     deleteResolver(entity: MetadataResolver): void {

diff --git a/ui/src/app/metadata/provider/container/provider-select.component.spec.ts b/ui/src/app/metadata/provider/container/provider-select.component.spec.ts
@@ -6,6 +6,7 @@ import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { ProviderSelectComponent } from './provider-select.component';
 import * as fromRoot from '../reducer';
 import * as fromWizard from '../../../wizard/reducer';
+import { MetadataProvider } from '../../domain/model';
 
 @Component({
     template: `
@@ -53,4 +54,15 @@ describe('Provider Select Component', () => {
     it('should instantiate the component', async(() => {
         expect(app).toBeTruthy();
     }));
+
+    describe('setDefinition method', () => {
+        it('should not dispatch an action if no provider is defined', () => {
+            app.setDefinition(null);
+            expect(store.dispatch).not.toHaveBeenCalled();
+        });
+        it('should dispatch an action if a provider is defined', () => {
+            app.setDefinition({} as MetadataProvider);
+            expect(store.dispatch).toHaveBeenCalled();
+        });
+    });
 });
diff --git a/ui/src/app/metadata/provider/container/provider-select.component.ts b/ui/src/app/metadata/provider/container/provider-select.component.ts
@@ -33,14 +33,15 @@ export class ProviderSelectComponent implements OnDestroy {
 
         this.provider$ = this.store.select(fromProviders.getSelectedProvider).pipe(skipWhile(p => !p));
 
-        this.provider$
-            .subscribe(provider => {
-                if (provider) {
-                    this.store.dispatch(new SetDefinition({
-                        ...MetadataProviderEditorTypes.find(def => def.type === provider['@type'])
-                    }));
-                }
-            });
+        this.provider$.subscribe(provider => this.setDefinition(provider));
+    }
+
+    setDefinition(provider: MetadataProvider): void {
+        if (provider) {
+            this.store.dispatch(new SetDefinition({
+                ...MetadataProviderEditorTypes.find(def => def.type === provider['@type'])
+            }));
+        }
     }
 
     ngOnDestroy() {

diff --git a/ui/src/app/schema-form/registry.ts b/ui/src/app/schema-form/registry.ts
@@ -16,6 +16,7 @@ import { CustomArrayComponent } from './widget/array/array.component';
 import { CustomIntegerComponent } from './widget/number/number.component';
 import { FilterTargetComponent } from './widget/filter-target/filter-target.component';
 import { ChecklistComponent } from './widget/check/checklist.component';
+import { IconButtonComponent } from './widget/button/icon-button.component';
 
 
 export class CustomWidgetRegistry extends WidgetRegistry {
@@ -55,6 +56,8 @@ export class CustomWidgetRegistry extends WidgetRegistry {
 
         this.register('filter-target', FilterTargetComponent);
 
+        this.register('icon-button', IconButtonComponent);
+
         /* NGX-Form */
         this.register('range', RangeWidget);
 

diff --git a/ui/src/app/schema-form/schema-form.module.ts b/ui/src/app/schema-form/schema-form.module.ts
@@ -17,6 +17,7 @@ import { CustomArrayComponent } from './widget/array/array.component';
 import { CustomIntegerComponent } from './widget/number/number.component';
 import { FilterTargetComponent } from './widget/filter-target/filter-target.component';
 import { ChecklistComponent } from './widget/check/checklist.component';
+import { IconButtonComponent } from './widget/button/icon-button.component';
 
 export const COMPONENTS = [
     BooleanRadioComponent,
@@ -29,7 +30,8 @@ export const COMPONENTS = [
     CustomArrayComponent,
     CustomIntegerComponent,
     FilterTargetComponent,
-    ChecklistComponent
+    ChecklistComponent,
+    IconButtonComponent
 ];
 
 @NgModule({

diff --git a/ui/src/app/schema-form/widget/button/icon-button.component.html b/ui/src/app/schema-form/widget/button/icon-button.component.html
@@ -0,0 +1,4 @@
+<button class="btn btn-link text-right" [ngSwitch]="button.id" (click)="this.action($event)">
+    <i class="fa fa-eye fa-lg text-success" *ngSwitchCase="'preview'"></i>
+    <i class="fa fa-floppy-o fa-lg text-info" *ngSwitchDefault></i>
+</button>
diff --git a/ui/src/app/schema-form/widget/button/icon-button.component.ts b/ui/src/app/schema-form/widget/button/icon-button.component.ts
@@ -0,0 +1,28 @@
+import {
+    Component, AfterViewInit,
+} from '@angular/core';
+import { ButtonWidget } from 'ngx-schema-form';
+import { ɵb as ActionRegistry } from 'ngx-schema-form';
+
+@Component({
+    selector: 'icon-button',
+    templateUrl: `./icon-button.component.html`
+})
+export class IconButtonComponent extends ButtonWidget implements AfterViewInit {
+
+    action = ($event) => {};
+
+    constructor(private actionRegistry: ActionRegistry) {
+        super();
+    }
+
+    ngAfterViewInit(): void {
+        this.action = (e) => {
+            let action = this.actionRegistry.get(this.button.id);
+            if (this.button.id && action) {
+                action(this.formProperty, this.button.parameters);
+            }
+            e.preventDefault();
+        };
+    }
+}
diff --git a/ui/src/app/schema-form/widget/filter-target/filter-target.component.html b/ui/src/app/schema-form/widget/filter-target/filter-target.component.html
@@ -97,9 +97,12 @@
             <ul class="list-group list-group-sm list-group-scroll">
                 <li class="list-group-item d-flex justify-content-between align-items-center" *ngFor="let id of targets">
                     {{ id }}
-                    <button class="btn btn-link text-right" (click)="removeId(id)">
-                        <i class="fa fa-trash fa-lg text-danger"></i>
-                    </button>
+                    <span>
+                        <sf-form-element-action *ngFor="let button of getButtonConfig(id)" [button]="button" [formProperty]="formProperty"></sf-form-element-action>
+                        <button class="btn btn-link text-right" (click)="removeId(id)">
+                            <i class="fa fa-trash fa-lg text-danger"></i>
+                        </button>
+                    </span>
                 </li>
             </ul>
         </div>

diff --git a/ui/src/app/schema-form/widget/filter-target/filter-target.component.ts b/ui/src/app/schema-form/widget/filter-target/filter-target.component.ts
@@ -61,7 +61,6 @@ export class FilterTargetComponent extends ObjectWidget implements OnDestroy, Af
     ngAfterViewInit(): void {
         super.ngAfterViewInit();
         this.script.setValue(this.targets[0]);
-
         this.search.setValidators(this.unique());
     }
 
@@ -80,6 +79,16 @@ export class FilterTargetComponent extends ObjectWidget implements OnDestroy, Af
         }
     }
 
+    getButtonConfig(id: string): any {
+        let buttons = this.formProperty.getProperty('value').schema.buttons;
+        return (buttons || []).map(btn => ({
+            ...btn,
+            parameters: {
+                id
+            }
+        }));
+    }
+
     get targets(): string[] {
         return this.formProperty.getProperty('value').value;
     }

diff --git a/ui/src/assets/schema/filter/entity-attributes.schema.json b/ui/src/assets/schema/filter/entity-attributes.schema.json
@@ -74,6 +74,13 @@
                 },
                 "value": {
                     "type": "array",
+                    "buttons": [
+                        {
+                            "id": "preview",
+                            "label": "Preview",
+                            "widget": "icon-button"
+                        }
+                    ],
                     "minItems": 1,
                     "uniqueItems": true,
                     "items": {