Merge pull request #192 from edgarmueller/master

Beef up examples
eclipsesource · Mar 4, 2016 · 7962797 · 7962797
2 parents feff9b6 + db183d2
commit 7962797
Show file tree

Hide file tree

Showing 30 changed files with 239 additions and 127 deletions.
diff --git a/components/renderers/controls/array/array-renderer.ts b/components/renderers/controls/array/array-renderer.ts
@@ -2,7 +2,7 @@
 
 class ArrayRenderer implements JSONForms.IRenderer {
 
-    protected maxSize = 99;
+    protected maxSize = 100;
     priority = 99;
 
     constructor(private renderService: JSONForms.IRenderService, private pathResolver: JSONForms.IPathResolver) { }
@@ -96,7 +96,7 @@ class ArrayRenderer implements JSONForms.IRenderer {
             return controlDescription;
         } else {
             let submitElement = {};
-            let supportsSubmit = element.options != undefined && element.options['submit'];
+            let supportsSubmit = !(element.options != undefined && element.options['submit'] == false);
             let generatedGroups = this.createControlGroupPerItem(schemaPath, items, data == undefined ? 0 : data.length);
             let buttonText = JSONForms.PathUtil.beautifiedLastFragment(schemaPath);
 
@@ -111,7 +111,8 @@ class ArrayRenderer implements JSONForms.IRenderer {
                   <jsonforms-dynamic-widget ng-repeat="submitRenderDescription in element.submitControls" element="submitRenderDescription">
                   </jsonforms-dynamic-widget>
                </fieldset>
-               <input ng-show="${supportsSubmit}" type="button" value="Add to ${buttonText}" ng-click="element.submitCallback()" ng-model="element.submitElement">
+               <input class="btn btn-primary"
+                      ng-show="${supportsSubmit}" type="button" value="Add to ${buttonText}" ng-click="element.submitCallback()" ng-model="element.submitElement">
                </input>
              </jsonforms-layout>`;
 
@@ -122,7 +123,7 @@ class ArrayRenderer implements JSONForms.IRenderer {
                 containerDescription['submitControls'] = this.createControlsForSubmit(items, schemaPath, submitElement, services);
                 if (data == undefined) {
                     containerDescription["instance"][containerDescription['path']] = [];
-                    data = [];
+                    data = containerDescription["instance"][containerDescription['path']];
                 }
                 containerDescription['submitCallback'] = () => data.push(_.clone(submitElement));
             }

diff --git a/components/renderers/controls/boolean/boolean-renderer.spec.ts b/components/renderers/controls/boolean/boolean-renderer.spec.ts
@@ -22,7 +22,7 @@ describe('Boolean renderer', () => {
         scope.data = { "vegetarian": true };
         let el = $compile('<jsonforms schema="schema" ui-schema="uiSchema" data="data"/>')(scope);
         scope.$digest();
-        let input = angular.element(el[0].getElementsByClassName('jsf-control'));
+        let input = angular.element(el[0].getElementsByClassName('jsf-control-boolean'));
         expect(input.attr("disabled")).toBeDefined();
     }));
 });
diff --git a/components/renderers/controls/boolean/boolean-renderer.ts b/components/renderers/controls/boolean/boolean-renderer.ts
@@ -7,7 +7,7 @@ class BooleanRenderer implements JSONForms.IRenderer {
     render(element: IControlObject, subSchema: SchemaElement, schemaPath: string, services: JSONForms.Services) {
         var control = JSONForms.RenderDescriptionFactory.createControlDescription(schemaPath,  services, element);
         control['template'] = `<jsonforms-control>
-          <input type="checkbox" id="${schemaPath}" class="jsf-control jsf-control-boolean" ${element.readOnly ? 'disabled="disabled"' : ''} data-jsonforms-validation data-jsonforms-model/>
+          <input type="checkbox" id="${schemaPath}" class="jsf-control-boolean" ${element.readOnly ? 'disabled="disabled"' : ''} data-jsonforms-validation data-jsonforms-model/>
         </jsonforms-control>`;
         return control;
     }

diff --git a/components/renderers/controls/control.html b/components/renderers/controls/control.html
@@ -1,10 +1,10 @@
-<div class="col-sm-{{element.size}} form-group top-buffer" ng-hide="element.hide">
+<div class="col-sm-{{element.size}} jsf-control form-group top-buffer" ng-hide="element.hide">
     <div class="row">
-        <label ng-if="element.label" for="element.id">{{element.label}}</label>
+        <label ng-if="element.label" for="{{element.id}}">{{element.label}}</label>
     </div>
-    <div class="row" style="padding-right: 1em" ng-transclude>
+    <div class="row" ng-transclude>
     </div>
-    <div class="row" style="padding-right: 1em">
-        <alert ng-repeat="alert in element.alerts" type="{{alert.type}}" class="top-buffer-s jsf-alert">{{alert.msg}}</alert>
+    <div class="row">
+        <alert ng-repeat="alert in element.alerts" type="{{alert.type}}" >{{alert.msg}}</alert>
     </div>
 </div>
diff --git a/components/renderers/controls/datetime/datetime-renderer.spec.ts b/components/renderers/controls/datetime/datetime-renderer.spec.ts
@@ -37,7 +37,7 @@ describe('DateTimeTest', () => {
         scope.data = { "birthDate": "1985-06-02 20:15:36" };
         let el = $compile('<jsonforms schema="schema" ui-schema="uiSchema" data="data"/>')(scope);
         scope.$digest();
-        let input = angular.element(el[0].getElementsByClassName('jsf-control'));
+        let input = angular.element(el[0].getElementsByClassName('jsf-control-datetime'));
         expect(input.attr("readonly")).toBeDefined();
     }));
     // TODO: add test cases to check whether validation works

diff --git a/components/renderers/controls/datetime/datetime-renderer.ts b/components/renderers/controls/datetime/datetime-renderer.ts
@@ -13,7 +13,7 @@ class DatetimeRenderer implements JSONForms.IRenderer {
         control['template'] =
             `<jsonforms-control>
             <div class="input-group">
-              <input type="text" ${element.readOnly ? 'readonly' : ''} datepicker-popup="dd.MM.yyyy" close-text="Close" is-open="element.isOpen" id="${schemaPath}" class="form-control jsf-control jsf-control-datetime" data-jsonforms-model  data-jsonforms-validation/>
+              <input type="text" ${element.readOnly ? 'readonly' : ''} datepicker-popup="dd.MM.yyyy" close-text="Close" is-open="element.isOpen" id="${schemaPath}" class="form-control jsf-control-datetime" data-jsonforms-model  data-jsonforms-validation/>
                  <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="element.openDate($event)">
                      <i class="glyphicon glyphicon-calendar"></i>

diff --git a/components/renderers/controls/integer/integer-renderer.spec.ts b/components/renderers/controls/integer/integer-renderer.spec.ts
@@ -22,7 +22,7 @@ describe('Integer renderer', () => {
         scope.data = { "age": 30 };
         let el = $compile('<jsonforms schema="schema" ui-schema="uiSchema" data="data"/>')(scope);
         scope.$digest();
-        let input = angular.element(el[0].getElementsByClassName('jsf-control'));
+        let input = angular.element(el[0].getElementsByClassName('jsf-control-integer'));
         expect(input.attr("readonly")).toBeDefined();
     }));
 });
diff --git a/components/renderers/controls/integer/integer-renderer.ts b/components/renderers/controls/integer/integer-renderer.ts
@@ -7,7 +7,7 @@ class IntegerRenderer implements JSONForms.IRenderer {
     render(element: IControlObject, subSchema: SchemaElement, schemaPath: string, services: JSONForms.Services): JSONForms.IRenderDescription {
         var control = JSONForms.RenderDescriptionFactory.createControlDescription(schemaPath, services, element);
         control['template'] = `<jsonforms-control>
-          <input type="number" step="1" id="${schemaPath}" class="form-control jsf-control jsf-control-integer" ${element.readOnly ? 'readonly' : ''} data-jsonforms-validation data-jsonforms-model/>
+          <input type="number" step="1" id="${schemaPath}" class="form-control jsf-control-integer" ${element.readOnly ? 'readonly' : ''} data-jsonforms-validation data-jsonforms-model/>
         </jsonforms-control>`;
         return control;
     }

diff --git a/components/renderers/controls/number/number-renderer.spec.ts b/components/renderers/controls/number/number-renderer.spec.ts
@@ -22,7 +22,7 @@ describe('Number renderer', () => {
         scope.data = { "height": 1.76 };
         let el = $compile('<jsonforms schema="schema" ui-schema="uiSchema" data="data"/>')(scope);
         scope.$digest();
-        let input = angular.element(el[0].getElementsByClassName('jsf-control'));
+        let input = angular.element(el[0].getElementsByClassName('jsf-control-number'));
         expect(input.attr("readonly")).toBeDefined();
     }));
 });
diff --git a/components/renderers/controls/number/number-renderer.ts b/components/renderers/controls/number/number-renderer.ts
@@ -7,7 +7,7 @@ class NumberRenderer implements JSONForms.IRenderer {
     render(element: IControlObject, subSchema: SchemaElement, schemaPath: string, services: JSONForms.Services) {
         var control = JSONForms.RenderDescriptionFactory.createControlDescription(schemaPath, services, element);
         control['template'] = `<jsonforms-control>
-          <input type="number" step="0.01" id="${schemaPath}" class="form-control jsf-control jsf-control-number" ${element.readOnly ? 'readonly' : ''} data-jsonforms-validation data-jsonforms-model/>
+          <input type="number" step="0.01" id="${schemaPath}" class="form-control jsf-control-number" ${element.readOnly ? 'readonly' : ''} data-jsonforms-validation data-jsonforms-model/>
         </jsonforms-control>`;
         return control;
     }

diff --git a/components/renderers/controls/string/string-renderer.spec.ts b/components/renderers/controls/string/string-renderer.spec.ts
@@ -22,7 +22,7 @@ describe('String renderer', () => {
         scope.data = { "vegetarian": true };
         let el = $compile('<jsonforms schema="schema" ui-schema="uiSchema" data="data"/>')(scope);
         scope.$digest();
-        let input = angular.element(el[0].getElementsByClassName('jsf-control'));
+        let input = angular.element(el[0].getElementsByClassName('jsf-control-string'));
         expect(input.attr("readonly")).toBeDefined();
     }));
 });
diff --git a/components/renderers/controls/string/string-renderer.ts b/components/renderers/controls/string/string-renderer.ts
@@ -9,15 +9,14 @@ class StringRenderer implements JSONForms.IRenderer {
     render(element: IControlObject, subSchema: SchemaElement, schemaPath: string, services: JSONForms.Services): JSONForms.IRenderDescription {
         var control = JSONForms.RenderDescriptionFactory.createControlDescription(schemaPath, services, element);
         control['template'] = `<jsonforms-control>
-          <input type="text" id="${schemaPath}" class="form-control jsf-control jsf-control-string" ${element.readOnly ? 'readonly' : ''} data-jsonforms-model data-jsonforms-validation/>
+          <input type="text" id="${schemaPath}" class="form-control jsf-control-string" ${element.readOnly ? 'readonly' : ''} data-jsonforms-model data-jsonforms-validation/>
         </jsonforms-control>`;
         return control;
     }
 
     isApplicable(uiElement: IUISchemaElement, subSchema: SchemaElement, schemaPath: string):boolean {
         return uiElement.type == 'Control' && subSchema !== undefined && subSchema.type == 'string';
     }
-
 }
 
 angular.module('jsonforms.renderers.controls.string').run(['RenderService', (RenderService) => {

diff --git a/components/renderers/extras/label/label-renderer.ts b/components/renderers/extras/label/label-renderer.ts
@@ -6,12 +6,12 @@ class LabelRenderer implements JSONForms.IRenderer {
 
     render(element:IUISchemaElement, schema: SchemaElement, schemaPath: string, services: JSONForms.Services): JSONForms.IRenderDescription {
         var text = element['text'];
-        var size = 99;
+        var size = 100;
 
         return {
             "type": "Widget",
             "size": size,
-            "template": ` <jsonforms-widget><div class="jsf-label">${text}</div></jsonforms-widget>`
+            "template": ` <jsonforms-widget class="jsf-label">${text}<hr></jsonforms-widget>`
         };
     }
 

diff --git a/components/renderers/jsonforms-renderers.ts b/components/renderers/jsonforms-renderers.ts
@@ -91,7 +91,7 @@ module JSONForms {
     export class ControlRenderDescription implements IControlRenderDescription {
 
         public type = "Control";
-        public size = 99;
+        public size = 100;
         public alerts: any[] = []; // TODO IAlert type missing
         public label: string;
         public rule: IRule;

diff --git a/components/renderers/layouts/group/group-renderer.ts b/components/renderers/layouts/group/group-renderer.ts
@@ -18,7 +18,7 @@ class GroupRenderer implements JSONForms.IRenderer {
                </fieldset>
              </jsonforms-layout>`;
 
-        return JSONForms.RenderDescriptionFactory.createContainerDescription(99, renderedElements, template, services, element);
+        return JSONForms.RenderDescriptionFactory.createContainerDescription(100, renderedElements, template, services, element);
     }
 
     isApplicable(uiElement: IUISchemaElement, subSchema: SchemaElement, schemaPath): boolean {

diff --git a/components/renderers/layouts/horizontal/horizontal-renderer.ts b/components/renderers/layouts/horizontal/horizontal-renderer.ts
@@ -8,7 +8,7 @@ class HorizontalRenderer implements JSONForms.IRenderer {
 
     render(element: ILayout, subSchema: SchemaElement, schemaPath:String, services: JSONForms.Services): JSONForms.IContainerRenderDescription {
 
-        var maxSize = 99;
+        var maxSize = 100;
 
         var renderedElements = JSONForms.RenderDescriptionFactory.renderElements(
             element.elements, this.renderService, services);
@@ -18,11 +18,12 @@ class HorizontalRenderer implements JSONForms.IRenderer {
             renderedElements[j].size = individualSize;
         }
 
-        var template =`<jsonforms-layout><fieldset>
-                   <div class="row">
-                     <jsonforms-dynamic-widget ng-repeat="child in element.elements" element="child"></jsonforms-dynamic-widget>
-                   </div>
-                 </fieldset></jsonforms-layout>`;
+        var template =`<jsonforms-layout class="jsf-horizontal-layout">
+          <fieldset>
+            <div class="row">
+              <jsonforms-dynamic-widget ng-repeat="child in element.elements" element="child"></jsonforms-dynamic-widget>
+            </div>
+          </fieldset></jsonforms-layout>`;
 
         return JSONForms.RenderDescriptionFactory.createContainerDescription(maxSize, renderedElements, template, services, element);
     };

diff --git a/components/renderers/layouts/vertical/vertial.spec.ts b/components/renderers/layouts/vertical/vertial.spec.ts
@@ -12,7 +12,7 @@ describe('VerticalLayout', () => {
     beforeEach(module('components/renderers/controls/control.html'));
 
     it("should not support labels", inject(($rootScope, $compile) => {
-        var scope = $rootScope.$new();
+        let scope = $rootScope.$new();
         scope.schema = {
             "properties": {
                 "foo": { "type": "string" }
@@ -30,9 +30,11 @@ describe('VerticalLayout', () => {
             ]
         };
         scope.data = { "name": "John Doe "};
-        var el = $compile('<jsonforms schema="schema" ui-schema="uiSchema" data="data"/>')(scope);
+        let el = $compile('<jsonforms schema="schema" ui-schema="uiSchema" data="data"/>')(scope);
         scope.$digest();
-        var div = el.find('div');
-        expect(div.hasClass('jsf-vertical-layout')).toBeTruthy();
+        let div = el.find('div');
+        console.log(div.children());
+        let layout = angular.element(div.children()[0]);
+        expect(layout.hasClass('jsf-vertical-layout')).toBeTruthy();
     }));
 });
diff --git a/components/renderers/layouts/vertical/vertical-renderer.ts b/components/renderers/layouts/vertical/vertical-renderer.ts
@@ -9,14 +9,14 @@ class VerticalRenderer implements JSONForms.IRenderer {
     render(element: ILayout, subSchema: SchemaElement, schemaPath: string, services: JSONForms.Services): JSONForms.IContainerRenderDescription {
         var renderedElements = JSONForms.RenderDescriptionFactory.renderElements(
             element.elements, this.renderService, services);
-        var template = `<jsonforms-layout class="jsf-vertical-layout">
-              <fieldset>
+        var template = `<div ng-show='element.elements.length'>
+          <jsonforms-layout class="jsf-vertical-layout">
                 <jsonforms-dynamic-widget ng-repeat="child in element.elements" element="child">
                 </jsonforms-dynamic-widget>
-             </fieldset>
-            </jsonforms-layout>`;
+          </jsonforms-layout>
+        </div>`;
 
-        return JSONForms.RenderDescriptionFactory.createContainerDescription(99, renderedElements, template, services, element);
+        return JSONForms.RenderDescriptionFactory.createContainerDescription(100, renderedElements, template, services, element);
     }
 
     isApplicable(uiElement: IUISchemaElement, jsonSchema: SchemaElement, schemaPath) :boolean {

diff --git a/components/services/services.ts b/components/services/services.ts
@@ -108,7 +108,7 @@ module JSONForms{
             results['errors'].forEach((error) => {
                 if (error['schemaPath'].indexOf("required") != -1) {
                     var propName = error['dataPath'] + "/" + error['params']['key'];
-                    this.validationResults.get(instance)[propName] = "Missing property";
+                    this.validationResults.get(instance)[propName] = "Required";
                 } else {
                     this.validationResults.get(instance)[error['dataPath']] = error['message'];
                 }

diff --git a/examples/app/arrays/arrays.html b/examples/app/arrays/arrays.html
@@ -1,4 +1,4 @@
-<div class="panel panel-default">
+<div class="panel">
     <div class="panel-heading">
         <h3>Bound data</h3>
     </div>
@@ -7,8 +7,7 @@ <h3>Bound data</h3>
     </div>
 </div>
 
-<div class="panel panel-default">
-
+<div class="panel">
     <div class="panel-heading">
         <h3>JSONForms generated Forms</h3>
     </div>

diff --git a/examples/app/custom/custom.html b/examples/app/custom/custom.html
@@ -1,19 +1,18 @@
-
-<div class="panel panel-default">
+<div class="panel">
     <div class="panel-heading">
-        <h3>Bound data</h3>
+        <h3>JSONForms generated Forms</h3>
     </div>
     <div class="panel-body">
-        {{vm.formattedData()}}
+        <jsonforms schema="vm.schema" ui-schema="vm.uiSchema" data="vm.data"></jsonforms>
     </div>
 </div>
 
-<div class="panel panel-default">
+<div class="panel">
     <div class="panel-heading">
-        <h3>JSONForms generated Forms</h3>
+        <h3>Bound data</h3>
     </div>
     <div class="panel-body">
-        <jsonforms schema="vm.schema" ui-schema="vm.uiSchema" data="vm.data"></jsonforms>
+        <pre>{{vm.formattedData()}}</pre>
     </div>
 </div>
 
diff --git a/examples/app/default-ui/defaultui.html b/examples/app/default-ui/defaultui.html
@@ -1,18 +1,17 @@
-<div class="panel panel-default">
+<div class="panel">
     <div class="panel-heading">
-        <h3>Bound data</h3>
+        <h3>JSONForms generated default Forms</h3>
     </div>
     <div class="panel-body">
-        {{vm.formattedData()}}
+        <jsonforms schema="vm.schema" ui-schema="vm.uiSchema" data="vm.data"></jsonforms>
     </div>
 </div>
-
-<div class="panel panel-default">
+<div class="panel">
     <div class="panel-heading">
-        <h3>JSONForms generated default Forms</h3>
+        <h3>Bound data</h3>
     </div>
     <div class="panel-body">
-        <jsonforms schema="vm.schema" ui-schema="vm.uiSchema" data="vm.data"></jsonforms>
+        <pre>{{vm.formattedData()}}</pre>
     </div>
 </div>
 

diff --git a/examples/app/default/default-schema.html b/examples/app/default/default-schema.html
@@ -1,18 +1,18 @@
-<div class="panel panel-default">
+<div class="panel">
     <div class="panel-heading">
-        <h3>Bound data</h3>
+        <h3>JSONForms generated default schema and default forms</h3>
     </div>
     <div class="panel-body">
-        {{vm.formattedData()}}
+        <jsonforms schema="vm.schema" ui-schema="vm.uiSchema" data="vm.data"></jsonforms>
     </div>
 </div>
 
-<div class="panel panel-default">
+<div class="panel">
     <div class="panel-heading">
-        <h3>JSONForms generated default schema and default forms</h3>
+        <h3>Bound data</h3>
     </div>
     <div class="panel-body">
-        <jsonforms schema="vm.schema" ui-schema="vm.uiSchema" data="vm.data"></jsonforms>
+        <pre>{{vm.formattedData()}}</pre>
     </div>
 </div>