Merge pull request #196 from sdirix/hide-labels

Introduce new 'show' option for control labels
eclipsesource · Apr 1, 2016 · d966103 · d966103
2 parents 66e6d07 + 176dafc
commit d966103
Show file tree

Hide file tree

Showing 7 changed files with 303 additions and 18 deletions.
diff --git 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
@@ -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
@@ -0,0 +1,4 @@
+.jsf label {
+    display: block;
+    min-height: 20px;
+}
diff --git a/components/renderers/jsonforms-renderers.spec.ts b/components/renderers/jsonforms-renderers.spec.ts
@@ -0,0 +1,242 @@
+/// <reference path="../references.ts"/>
+
+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('<jsonforms schema="schema" ui-schema="uiSchema" data="data"/>')(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('<jsonforms schema="schema" ui-schema="uiSchema" data="data"/>')(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('<jsonforms schema="schema" ui-schema="uiSchema" data="data"/>')(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('<jsonforms schema="schema" ui-schema="uiSchema" data="data"/>')(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('<jsonforms schema="schema" ui-schema="uiSchema" data="data"/>')(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('<jsonforms schema="schema" ui-schema="uiSchema" data="data"/>')(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('<jsonforms schema="schema" ui-schema="uiSchema" data="data"/>')(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('<jsonforms schema="schema" ui-schema="uiSchema" data="data"/>')(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('<jsonforms schema="schema" ui-schema="uiSchema" data="data"/>')(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('<jsonforms schema="schema" ui-schema="uiSchema" data="data"/>')(scope);
+        scope.$digest();
+        expect(el.find("label").text()).toBeFalsy();
+    }));
+});
diff --git 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), <boolean>labelProperty);
+                } else {
+                    return new LabelObject(undefined, <boolean>labelProperty);
+                }
+            } else if (typeof labelProperty === "string") {
+                return new LabelObject(<string>labelProperty, true);
+            } else if (typeof labelProperty === "object") {
+                var show = labelProperty.hasOwnProperty("show") ? (<ILabelObject>labelProperty).show : true;
+                var label = labelProperty.hasOwnProperty("text") ? (<ILabelObject>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
@@ -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
@@ -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;
-}