diff --git a/Gruntfile.js b/Gruntfile.js index 89bb2753e..7b2914f6f 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -27,7 +27,7 @@ module.exports = function(grunt) { dest: 'temp/services.js' }, jsonforms_module: { - src: ['components/**/jsonforms-*.js'], + src: ['components/**/jsonforms-*.js', '!components/**/*.spec.js'], filter: 'isFile', dest: 'temp/jsonforms-module.js' }, diff --git a/components/generators/uischema/jsonforms-uischemagenerator.ts b/components/generators/uischema/jsonforms-uischemagenerator.ts index 9f9cf5afb..80f792aa5 100644 --- a/components/generators/uischema/jsonforms-uischemagenerator.ts +++ b/components/generators/uischema/jsonforms-uischemagenerator.ts @@ -58,7 +58,7 @@ module JSONForms{ private addLabel = (layout: ILayout, labelName: string) => { if (labelName && labelName != "") { // add label with name - var label:ILabel = { + var label = { type: "Label", text: PathUtil.beautify(labelName) }; diff --git a/components/renderers/controls/control.css b/components/renderers/controls/control.css new file mode 100644 index 000000000..1e6d0f0be --- /dev/null +++ b/components/renderers/controls/control.css @@ -0,0 +1,4 @@ +.jsf label { + display: block; + min-height: 20px; +} \ No newline at end of file diff --git a/components/renderers/jsonforms-renderers.spec.ts b/components/renderers/jsonforms-renderers.spec.ts new file mode 100644 index 000000000..4b6515984 --- /dev/null +++ b/components/renderers/jsonforms-renderers.spec.ts @@ -0,0 +1,242 @@ +/// + +describe('Generic renderer', () => { + + // load all necessary modules and templates + beforeEach(module('jsonforms.form')); + beforeEach(module('jsonforms.renderers.controls.string')); + + beforeEach(module('components/form/form.html')); + beforeEach(module('components/renderers/controls/control.html')); + + it("should render the provided label string", inject(($rootScope, $compile) => { + let scope = $rootScope.$new(); + scope.schema = { + "properties": { + "name": { + "type": "string" + } + } + }; + scope.uiSchema = { + "type": "Control", + "label": "LabeL", + "scope": { + "$ref": "#/properties/name" + } + }; + scope.data = { "name": "My Name" }; + let el = $compile('')(scope); + scope.$digest(); + expect(el.find("label").text()).toEqual("LabeL"); + })); + + it("should render the default label if no label is provided", inject(($rootScope, $compile) => { + let scope = $rootScope.$new(); + scope.schema = { + "properties": { + "name": { + "type": "string" + } + } + }; + scope.uiSchema = { + "type": "Control", + "scope": { + "$ref": "#/properties/name" + } + }; + scope.data = { "name": "My Name" }; + let el = $compile('')(scope); + scope.$digest(); + expect(el.find("label").text()).toEqual("Name"); + })); + + it("should render the default label if label is set to true", inject(($rootScope, $compile) => { + let scope = $rootScope.$new(); + scope.schema = { + "properties": { + "name": { + "type": "string" + } + } + }; + scope.uiSchema = { + "type": "Control", + "label": true, + "scope": { + "$ref": "#/properties/name" + } + }; + scope.data = { "name": "My Name" }; + let el = $compile('')(scope); + scope.$digest(); + expect(el.find("label").text()).toEqual("Name"); + })); + + it("should hide the label when label is set to false", inject(($rootScope, $compile) => { + let scope = $rootScope.$new(); + scope.schema = { + "properties": { + "name": { + "type": "string" + } + } + }; + scope.uiSchema = { + "type": "Control", + "label": false, + "scope": { + "$ref": "#/properties/name" + } + }; + scope.data = { "name": "My Name" }; + let el = $compile('')(scope); + scope.$digest(); + expect(el.find("label").text()).toBeFalsy(); + })); + + it("should render the default label if an empty object is given", inject(($rootScope, $compile) => { + let scope = $rootScope.$new(); + scope.schema = { + "properties": { + "name": { + "type": "string" + } + } + }; + scope.uiSchema = { + "type": "Control", + "label": {}, + "scope": { + "$ref": "#/properties/name" + } + }; + scope.data = { "name": "My Name" }; + let el = $compile('')(scope); + scope.$digest(); + expect(el.find("label").text()).toEqual("Name"); + })); + + it("should render the provided label object with the given text attribute", inject(($rootScope, $compile) => { + let scope = $rootScope.$new(); + scope.schema = { + "properties": { + "name": { + "type": "string" + } + } + }; + scope.uiSchema = { + "type": "Control", + "label": { + "text": "LabeL" + }, + "scope": { + "$ref": "#/properties/name" + } + }; + scope.data = { "name": "My Name" }; + let el = $compile('')(scope); + scope.$digest(); + expect(el.find("label").text()).toEqual("LabeL"); + })); + + it("should render the provided label object with text attribute and show attribute set to true", inject(($rootScope, $compile) => { + let scope = $rootScope.$new(); + scope.schema = { + "properties": { + "name": { + "type": "string" + } + } + }; + scope.uiSchema = { + "type": "Control", + "label": { + "text": "LabeL", + "show": true + }, + "scope": { + "$ref": "#/properties/name" + } + }; + scope.data = { "name": "My Name" }; + let el = $compile('')(scope); + scope.$digest(); + expect(el.find("label").text()).toEqual("LabeL"); + })); + + it("should hide the label when show attribute is set to false", inject(($rootScope, $compile) => { + let scope = $rootScope.$new(); + scope.schema = { + "properties": { + "name": { + "type": "string" + } + } + }; + scope.uiSchema = { + "type": "Control", + "label": { + "show": false + }, + "scope": { + "$ref": "#/properties/name" + } + }; + scope.data = { "name": "My Name" }; + let el = $compile('')(scope); + scope.$digest(); + expect(el.find("label").text()).toBeFalsy(); + })); + + it("should render the default label when show attribute is set to true", inject(($rootScope, $compile) => { + let scope = $rootScope.$new(); + scope.schema = { + "properties": { + "name": { + "type": "string" + } + } + }; + scope.uiSchema = { + "type": "Control", + "label": { + "show": true + }, + "scope": { + "$ref": "#/properties/name" + } + }; + scope.data = { "name": "My Name" }; + let el = $compile('')(scope); + scope.$digest(); + expect(el.find("label").text()).toEqual("Name"); + })); + + it("should hide the label when text is defined but show is set to false", inject(($rootScope, $compile) => { + let scope = $rootScope.$new(); + scope.schema = { + "properties": { + "name": { + "type": "string" + } + } + }; + scope.uiSchema = { + "type": "Control", + "label": { + "text": "LabeL", + "show": false + }, + "scope": { + "$ref": "#/properties/name" + } + }; + scope.data = { "name": "My Name" }; + let el = $compile('')(scope); + scope.$digest(); + expect(el.find("label").text()).toBeFalsy(); + })); +}); \ No newline at end of file diff --git a/components/renderers/jsonforms-renderers.ts b/components/renderers/jsonforms-renderers.ts index 518a80b19..d3411f36a 100644 --- a/components/renderers/jsonforms-renderers.ts +++ b/components/renderers/jsonforms-renderers.ts @@ -127,13 +127,13 @@ module JSONForms { this.setupModelChangedCallback(); } - private createLabel(schemaPath: string, label?: string): string { + private createLabel(schemaPath:string, label?:IWithLabel):string { var stringBuilder = ""; - if (label) { - stringBuilder += label; - } else { - // default label - stringBuilder += PathUtil.beautifiedLastFragment(schemaPath); + + var labelObject = LabelObjectUtil.getElementLabelObject(label, schemaPath); + + if (labelObject.show) { + stringBuilder += labelObject.text; } if (this.isRequired(schemaPath)) { @@ -143,6 +143,10 @@ module JSONForms { return stringBuilder; } + private displayLabel(labelAlignment:string):boolean { + return labelAlignment === "NONE"; + } + private isRequired(schemaPath: string): boolean { var path = PathUtil.inits(schemaPath); var lastFragment = PathUtil.lastFragment(path); @@ -191,4 +195,34 @@ module JSONForms { } } + + export class LabelObjectUtil { + public static getElementLabelObject(labelProperty:IWithLabel, schemaPath:string):ILabelObject { + if (typeof labelProperty === "boolean") { + if (labelProperty) { + return new LabelObject(PathUtil.beautifiedLastFragment(schemaPath), labelProperty); + } else { + return new LabelObject(undefined, labelProperty); + } + } else if (typeof labelProperty === "string") { + return new LabelObject(labelProperty, true); + } else if (typeof labelProperty === "object") { + var show = labelProperty.hasOwnProperty("show") ? (labelProperty).show : true; + var label = labelProperty.hasOwnProperty("text") ? (labelProperty).text : PathUtil.beautifiedLastFragment(schemaPath); + return new LabelObject(label, show); + } else { + return new LabelObject(PathUtil.beautifiedLastFragment(schemaPath), true); + } + } + } + + export class LabelObject implements ILabelObject { + public text:string; + public show:boolean; + + constructor(text:string, show:boolean) { + this.text = text; + this.show = show; + } + } } diff --git a/examples/app/local/local.controller.js b/examples/app/local/local.controller.js index b702a2e00..cdf7b92d0 100644 --- a/examples/app/local/local.controller.js +++ b/examples/app/local/local.controller.js @@ -72,7 +72,10 @@ angular.module('makeithappen').controller('LocalController', function() { "elements": [ { "type": "Control", - "label": "Name", + "label": { + "text": "Name", + "show": true + }, "scope": { "$ref": "#/properties/name" }, @@ -89,7 +92,9 @@ angular.module('makeithappen').controller('LocalController', function() { }, { "type": "Control", - "label": "Age", + "label": { + "text": "Age" + }, "scope": { "$ref": "#/properties/personalData/properties/age" } diff --git a/typings/schemas/uischema.d.ts b/typings/schemas/uischema.d.ts index 48965e5a4..7ad22d87f 100644 --- a/typings/schemas/uischema.d.ts +++ b/typings/schemas/uischema.d.ts @@ -16,11 +16,16 @@ interface ILeafCondition extends ICondition { expectedValue: any; } -interface WithLabel { - label?: string +interface IWithLabel { + label?: string | boolean | ILabelObject } -interface IUISchemaElement extends WithLabel { +interface ILabelObject { + text?: string + show?: boolean +} + +interface IUISchemaElement extends IWithLabel { type: string; rule?: IRule; } @@ -52,8 +57,3 @@ interface IArrayControlObject extends IControlObject { interface IColumnControlObject extends IControlObject { } - -//Label -interface ILabel extends IUISchemaElement { - text: string; -}