feat: Display a div/fieldset/details element

jscharett · jscharett · commit 0e41e4aca8f9 · 2019-09-03T15:28:47.000+02:00
Allows a div, fieldset or details element to be
created inside the form via json.  The element
will then hold various widgets based on the
"items" property set in the layout
diff --git a/projects/demo-e2e/src/pages/app.po.ts b/projects/demo-e2e/src/pages/app.po.ts
@@ -13,7 +13,8 @@ export class AppPage {
 
     private readonly forms: Map<string, typeof Form> = new Map<string, typeof Form>([
         ['Hidden', Form],
-        ['Buttons', ButtonsForm]
+        ['Buttons', ButtonsForm],
+        ['Containers', Form]
     ]);
 
     private static async insertConsoleTracing(): Promise<void> {
diff --git a/projects/demo-e2e/src/pages/form.po.ts b/projects/demo-e2e/src/pages/form.po.ts
@@ -2,7 +2,7 @@ import { by, element, ElementFinder } from 'protractor';
 
 export class Form {
     private readonly formSelector = by.css('jsf-json-schema-form');
-    private readonly widgetSelector = by.css('jsf-select-widget:first-child');
+    private readonly widgetSelector = by.css('jsf-select-widget > *:first-child');
     private readonly controlSelector = by.css('input, button, textarea, select');
 
     async getWidgetCount(): Promise<number> {
@@ -37,6 +37,14 @@ export class Form {
         return this.getControl(controlName).getText();
     }
 
+    async getContainerAttribute(containerType: string, attribute: string): Promise<string> {
+        return this.getContainer(containerType).getAttribute(attribute);
+    }
+
+    getContainer(containerType: string): ElementFinder {
+        return element(this.formSelector).element(by.css(`jsf-container > ${ containerType }`));
+    }
+
     private getControl(controlName: string): ElementFinder {
         return element(this.formSelector).element(by.name(controlName));
     }
diff --git a/projects/demo-e2e/src/tests/examples/ngx/containers.e2e-spec.ts b/projects/demo-e2e/src/tests/examples/ngx/containers.e2e-spec.ts
@@ -0,0 +1,70 @@
+import { AppPage, Form } from '@demo-e2e';
+
+import { by } from 'protractor';
+
+import { verifyElementAttributes } from '../../../utils';
+
+describe('container example', () => {
+    let page: AppPage;
+
+    beforeEach(async () => {
+        page = new AppPage();
+        await page.navigateTo();
+    });
+
+    it('should have 3 widgets and 0 controls', async () => {
+        const form: Form = await page.selectExample('Containers');
+        const numWidgets = 3;
+        await expect(form.getWidgetCount()).toEqual(numWidgets);
+        await expect(form.getControlCount()).toEqual(0);
+    });
+
+    it('should have a div', async () => {
+        const form: Form = await page.selectExample('Containers');
+        await Promise.all([
+            expect(form.getContainerAttribute('div', 'id')).toBeDefined(),
+            verifyElementAttributes(form.getContainer('div'), {
+                accesskey: 'd',
+                description: 'This is a div container',
+                htmlClass: 'div',
+                style: 'color: red;',
+                tabindex: 3
+            })
+        ]);
+    });
+
+    /**
+     * @todo Verify disabled and form properties
+     */
+    it('should have a fieldset/legend', async () => {
+        const form: Form = await page.selectExample('Containers');
+        await Promise.all([
+            expect(form.getContainerAttribute('fieldset', 'id')).toBeDefined(),
+            expect(form.getContainerAttribute('fieldset', 'name')).toBe('fields'),
+            expect(form.getContainer('fieldset').element(by.tagName('legend')).getText()).toBe('Fields'),
+            verifyElementAttributes(form.getContainer('fieldset'), {
+                accesskey: 'f',
+                description: 'This is a fieldset container',
+                htmlClass: 'fieldset',
+                style: 'color: green;',
+                tabindex: 2
+            })
+        ]);
+    });
+
+    it('should have a details/summary', async () => {
+        const form: Form = await page.selectExample('Containers');
+        await Promise.all([
+            expect(form.getContainerAttribute('details', 'id')).toBeDefined(),
+            expect(form.getContainerAttribute('details', 'open')).toBeDefined(),
+            expect(form.getContainer('details').element(by.tagName('summary')).getText()).toBe('Details'),
+            verifyElementAttributes(form.getContainer('details'), {
+                accesskey: 's',
+                description: 'This is a details container',
+                htmlClass: 'details',
+                style: 'color: blue;',
+                tabindex: 1
+            })
+        ]);
+    });
+});
diff --git a/projects/demo-e2e/src/utils.ts b/projects/demo-e2e/src/utils.ts
@@ -0,0 +1,22 @@
+import { ElementFinder } from 'protractor';
+
+export async function verifyElementAttributes(elementFinder: ElementFinder, expectedAttributes: {
+    accesskey: string;
+    description: string;
+    htmlClass: string;
+    style: string;
+    tabindex: number;
+}): Promise<void> {
+    const tabIndex = await elementFinder.getAttribute('tabindex');
+    const expectationPromise = expectedAttributes.tabindex === undefined
+        ? expect(tabIndex).toBeNull()
+        : expect(tabIndex).toEqual(expectedAttributes.tabindex.toString());
+
+    await Promise.all([
+        expectationPromise,
+        expect(await elementFinder.getAttribute('style')).toEqual(expectedAttributes.style),
+        expect(await elementFinder.getAttribute('title')).toEqual(expectedAttributes.description),
+        expect(await elementFinder.getAttribute('accesskey')).toEqual(expectedAttributes.accesskey),
+        expect((await elementFinder.getAttribute('class')).split(' ')).toContain(expectedAttributes.htmlClass)
+    ]);
+}
diff --git a/projects/demo/src/assets/examples/examples.json b/projects/demo/src/assets/examples/examples.json
@@ -16,6 +16,10 @@
                 "name": "Buttons",
                 "file": "buttons"
             },
+            {
+                "name": "Containers",
+                "file": "containers"
+            },
             {
                 "name": "Hidden",
                 "file": "hidden"
diff --git a/projects/demo/src/assets/examples/ngx/containers.json b/projects/demo/src/assets/examples/ngx/containers.json
@@ -0,0 +1,50 @@
+{
+    "schema": {
+        "type": "object",
+        "properties": {
+            "items": {
+                "type": "array",
+                "items": {
+                    "type": "string",
+                    "title": "Item",
+                    "default": "New Item"
+                }
+            }
+        }
+    },
+    "layout": [{
+        "type": "div",
+        "items": [],
+        "accesskey": "d",
+        "style": {
+            "color": "red"
+        },
+        "htmlClass": "div",
+        "description": "This is a div container",
+        "tabindex": 3
+    }, {
+        "type": "fieldset",
+        "title": "Fields",
+        "items": [],
+        "accesskey": "f",
+        "style": {
+            "color": "green"
+        },
+        "htmlClass": "fieldset",
+        "description": "This is a fieldset container",
+        "tabindex": 2,
+        "name": "fields"
+    }, {
+        "type": "details",
+        "title": "Details",
+        "expandable": true,
+        "items": [],
+        "accesskey": "s",
+        "style": {
+            "color": "blue"
+        },
+        "htmlClass": "details",
+        "description": "This is a details container",
+        "tabindex": 1
+    }]
+}
diff --git a/projects/ngx-json-schema-form/src/docs/pages/introduction.md b/projects/ngx-json-schema-form/src/docs/pages/introduction.md
@@ -174,7 +174,9 @@ There are numerous attributes that can be set on a widget which are set via the
     "htmlClass": "input-sm",
     "name": "name",
     "readonly": true,
-    "style": "color: #333;",
+    "style": {
+        "color": "#333"
+    },
     "tabindex": 2,
     "title": "Name"
 }]
diff --git a/projects/ngx-json-schema-form/src/lib/container/container.component.html b/projects/ngx-json-schema-form/src/lib/container/container.component.html
@@ -0,0 +1,44 @@
+<ng-container [ngSwitch]="layoutNode.type">
+    <ng-container *ngSwitchCase="'div'">
+        <div
+            [attr.accesskey]="options.accesskey"
+            [attr.class]="options.htmlClass"
+            [attr.tabindex]="options.tabindex"
+            [attr.title]="options.description"
+            [ngStyle]="options.style"
+        >
+            <ng-container *ngTemplateOutlet="widgets"></ng-container>
+        </div>
+    </ng-container>
+    <ng-container *ngSwitchCase="'fieldset'">
+        <fieldset
+            [attr.accesskey]="options.accesskey"
+            [attr.class]="options.htmlClass"
+            [attr.tabindex]="options.tabindex"
+            [attr.title]="options.description"
+            [ngStyle]="options.style"
+            [name]="layoutNode.name"
+        >
+            <legend>{{ layoutNode.options.title }}</legend>
+            <ng-container *ngTemplateOutlet="widgets"></ng-container>
+        </fieldset>
+    </ng-container>
+    <ng-container *ngSwitchCase="'details'">
+        <details
+            [attr.accesskey]="options.accesskey"
+            [attr.class]="options.htmlClass"
+            [attr.tabindex]="options.tabindex"
+            [attr.title]="options.description"
+            [ngStyle]="options.style"
+        >
+            <summary>{{ layoutNode.options.title }}</summary>
+            <ng-container *ngTemplateOutlet="widgets"></ng-container>
+        </details>
+    </ng-container>
+</ng-container>
+<ng-template #widgets>
+    <jsf-select-widget
+        *ngFor="let _layoutNode of layoutNode.items; trackBy: trackByFn;"
+        [layoutNode]="_layoutNode"
+    ></jsf-select-widget>
+</ng-template>
diff --git a/projects/ngx-json-schema-form/src/lib/container/container.component.scss b/projects/ngx-json-schema-form/src/lib/container/container.component.scss
diff --git a/projects/ngx-json-schema-form/src/lib/container/container.component.spec.ts b/projects/ngx-json-schema-form/src/lib/container/container.component.spec.ts
@@ -0,0 +1,47 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LayoutNode } from '../core/models/layout-node';
+
+import { JsonSchemaFormService } from '../form/services/json-schema-form.service';
+
+import { ContainerComponent } from './container.component';
+
+describe('ContainerComponent', () => {
+    let component: ContainerComponent;
+    let fixture: ComponentFixture<ContainerComponent>;
+
+    beforeEach(async () => {
+        const mockFormService: JsonSchemaFormService = jasmine.createSpyObj('JsonSchemaFormService', {
+            initializeControl: true
+        });
+        (<jasmine.Spy>mockFormService.initializeControl).and.callFake((comp) => {
+            comp.options = comp.layoutNode.options;
+        });
+
+        await TestBed.configureTestingModule({
+            declarations: [ ContainerComponent ],
+            providers: [{
+                provide: JsonSchemaFormService,
+                useValue: mockFormService
+            }],
+            schemas: [ NO_ERRORS_SCHEMA ]
+        })
+        .compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ContainerComponent);
+        component = fixture.componentInstance;
+        component.layoutNode = {id: '0', options: {}, type: 'div', items: []} as any as LayoutNode;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should return index for tracking', () => {
+        expect(component.trackByFn(1)).toEqual(1);
+    });
+});
diff --git a/projects/ngx-json-schema-form/src/lib/container/container.component.ts b/projects/ngx-json-schema-form/src/lib/container/container.component.ts
@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+
+import { Widget } from '../core/decorators/widget.decorator';
+import { ElementDataStorageService } from '../core/services/element-data-storage.service';
+import { AbstractWidget } from '../core/widget/widget';
+
+import { JsonSchemaFormService } from '../form/services/json-schema-form.service';
+
+/** Displays a div, fieldset or details element and renders children inside it */
+@Widget({
+    types: ['div', 'fieldset', 'details']
+})
+@Component({
+    selector: 'jsf-container',
+    styleUrls: ['./container.component.scss'],
+    templateUrl: './container.component.html'
+})
+export class ContainerComponent extends AbstractWidget {
+
+    constructor(jsf: JsonSchemaFormService, elementDataStorage: ElementDataStorageService) {
+        super(jsf, elementDataStorage);
+    }
+
+    trackByFn(index) {
+        return index;
+    }
+
+}
diff --git a/projects/ngx-json-schema-form/src/lib/container/container.module.ts b/projects/ngx-json-schema-form/src/lib/container/container.module.ts
@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { SelectWidgetModule } from '../select-widget/select-widget.module';
+
+import { ContainerComponent } from './container.component';
+
+@NgModule({
+    declarations: [ ContainerComponent ],
+    entryComponents: [ ContainerComponent ],
+    exports: [ ContainerComponent ],
+    imports: [ CommonModule, SelectWidgetModule ]
+})
+export class ContainerModule { }
diff --git a/projects/ngx-json-schema-form/src/lib/container/index.ts b/projects/ngx-json-schema-form/src/lib/container/index.ts
@@ -0,0 +1,2 @@
+export { ContainerComponent } from './container.component';
+export { ContainerModule } from './container.module';
diff --git a/projects/ngx-json-schema-form/src/lib/core/index.ts b/projects/ngx-json-schema-form/src/lib/core/index.ts
@@ -1,6 +1,6 @@
-export * from './decorators/';
-export * from './interfaces/';
-export * from './models/';
-export * from './services/';
-export * from './widget/';
+export * from './decorators';
+export * from './interfaces';
+export * from './models';
+export * from './services';
+export * from './widget';
 export { CoreModule } from './core.module';
diff --git a/projects/ngx-json-schema-form/src/lib/core/interfaces/layout-item.data.ts b/projects/ngx-json-schema-form/src/lib/core/interfaces/layout-item.data.ts
@@ -1,13 +1,17 @@
 import { LayoutOptions } from './layout-options.data';
 
-/**  */
+/** Properties used to specify how to layout a piece of data in the form */
 export interface LayoutItem {
+    /** Layout items to render for a container widget */
+    items?: Array<LayoutItem>;
+    /** HTML template for rendering custom buttons */
+    content?: string;
     /** Object path to map this item to a data value */
     key?: string;
     /** Name for the item.  Will be used as the input[name] */
     name?: string;
     /**
-     * Container for options to set on widgets.
+     * Options to set on widgets.
      * NOTE: this is optional as any undeclared property will automatically be put into an options contianer
      */
     options?: LayoutOptions;
diff --git a/projects/ngx-json-schema-form/src/lib/core/interfaces/layout-options.data.ts b/projects/ngx-json-schema-form/src/lib/core/interfaces/layout-options.data.ts
@@ -1,3 +1,4 @@
+/** Options for a particular Layout */
 export interface LayoutOptions {
     /* Global HTML attributes */
     /** See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey} */
@@ -31,5 +32,8 @@ export interface LayoutOptions {
         width?: number;
     };
 
+    /** Whether or not a container widget is expandable */
+    expandable?: boolean;
+
     [others: string]: any;
 }
diff --git a/projects/ngx-json-schema-form/src/lib/core/models/layout-node.spec.ts b/projects/ngx-json-schema-form/src/lib/core/models/layout-node.spec.ts
diff --git a/projects/ngx-json-schema-form/src/lib/core/models/layout-node.ts b/projects/ngx-json-schema-form/src/lib/core/models/layout-node.ts
diff --git a/projects/ngx-json-schema-form/src/lib/form/services/layout.service.spec.ts b/projects/ngx-json-schema-form/src/lib/form/services/layout.service.spec.ts
diff --git a/projects/ngx-json-schema-form/src/lib/form/services/layout.service.ts b/projects/ngx-json-schema-form/src/lib/form/services/layout.service.ts
diff --git a/projects/ngx-json-schema-form/src/lib/index.ts b/projects/ngx-json-schema-form/src/lib/index.ts
diff --git a/projects/ngx-json-schema-form/src/lib/json-schema-form.module.ts b/projects/ngx-json-schema-form/src/lib/json-schema-form.module.ts
