Merge pull request #77 from edgarmueller/master

Closes issues #74, #75 and #76
eclipsesource · Aug 26, 2015 · 2964c8f · 2964c8f
2 parents 55f52f9 + cf1b7e5
commit 2964c8f
Show file tree

Hide file tree

Showing 19 changed files with 238 additions and 284 deletions.
diff --git a/app/embed-index.html b/app/embed-index.html
@@ -31,6 +31,7 @@
 
     <script src="bower_components/traverse/traverse.js"></script>
     <script src="bower_components/json-refs/browser/json-refs.js" type="text/javascript"></script>
+    <script src="bower_components/tv4/tv4.js"></script>
 
     <script src="js/jsonforms.js" type="text/javascript"></script>
 

diff --git a/app/js/LocalController.js b/app/js/LocalController.js
@@ -102,7 +102,7 @@ angular.module('makeithappen').controller('LocalController', ['$scope', function
     $scope.data = {
         name: 'John Doe',
         age: 36,
-        height: "1.76",
+        height: 1.76,
         vegetarian: false,
         birthDate: "02.06.1985",
         nationality: "US"

diff --git a/app/js/MyControl.js b/app/js/MyControl.js
@@ -1,30 +1,21 @@
 var app = angular.module('makeithappen');
-app.run(['RenderService', 'ReferenceResolver', function(RenderService, ReferenceResolver) {
+app.run(['JSONForms.RenderService', 'JSONForms.RenderDescriptionFactory', function(RenderService, RenderDescriptionFactory) {
 
-    function MyControl(refResolver) {
+    function MyControl() {
 
         return {
             priority: 100,
             render: function(element, subSchema, schemaPath, dataProvider) {
-                return {
-                    "type": "Control",
-                    "size": 99,
-                    "id": schemaPath,
-                    "path": [refResolver.normalize(schemaPath)],
-                    "instance": dataProvider.data,
-                    "label": 'My Custom Control',
-                    "template": '<input type="text" style="background-color: greenyellow" id="element.id" class="form-control qb-control qb-control-string" data-jsonforms-model/>'
-                };
+                var control = RenderDescriptionFactory.createControlDescription(dataProvider.data, subSchema, schemaPath);
+                control['template'] = '<input type="text" style="background-color: #3278b3; color: #8dd0ff" class="form-control" data-jsonforms-model data-jsonforms-validation />'
+                return control;
             },
 
             isApplicable: function (element, subSchema, schemaPath) {
-                if (element.hasOwnProperty('scope')) {
-                    return subSchema.type == "string" && schemaPath === "#/properties/firstName";
-                }
-                return false;
+                return element.type == "Control" && schemaPath.endsWith("firstName");
             }
         }
     }
 
-    RenderService.register(new MyControl(ReferenceResolver));
+    RenderService.register(new MyControl());
 }]);
diff --git a/app/js/MyController.js b/app/js/MyController.js
@@ -4,14 +4,11 @@ angular.module('makeithappen').controller('MyController', ['$scope', function($s
         "type": "object",
         "properties": {
             "firstName": {
-                "type": "string"
+                "type": "string",
+                "minLength": 3
             },
-            "lastName": {
-                "type": "string"
-            },
-            "age": {
-                "type": "integer"
-            }
+            "lastName": { "type": "string" },
+            "age": { "type": "integer" }
         }
     };
     $scope.uiSchema = {
@@ -20,23 +17,17 @@ angular.module('makeithappen').controller('MyController', ['$scope', function($s
             {
                 "type": "Control",
                 "label": "First name",
-                "scope": {
-                    "$ref": "#/properties/firstName"
-                }
+                "scope": { "$ref": "#/properties/firstName" }
             },
             {
                 "type": "Control",
                 "label": "Last name",
-                "scope": {
-                    "$ref": "#/properties/lastName"
-                }
+                "scope": { "$ref": "#/properties/lastName" }
             },
             {
                 "type": "Control",
                 "label": "Age",
-                "scope": {
-                    "$ref": "#/properties/age"
-                }
+                "scope": { "$ref": "#/properties/age" }
             }
         ]
     };

diff --git a/bower.json b/bower.json
@@ -27,6 +27,7 @@
     "ui-utils": "0.1.1",
     "jquery": "1.11.x",
     "json-refs": "~0.2.0",
-    "angular-resource": "~1.2.x"
+    "angular-resource": "~1.2.x",
+    "tv4": "1.2.3"
   }
 }
diff --git a/js/directives.ts b/js/directives.ts
@@ -4,14 +4,14 @@
 var jsonFormsDirectives = angular.module('jsonForms.directives', ['jsonForms.services']);
 declare var JsonRefs;
 
-class JsonFormsDiretiveController {
+class JsonFormsDirectiveController {
 
-    static $inject = ['RenderService', 'ReferenceResolver', 'UISchemaGenerator', '$scope', '$q'];
+    static $inject = ['JSONForms.RenderService', 'ReferenceResolver', 'UISchemaGenerator', '$scope', '$q'];
 
     constructor(
-        private RenderService:jsonforms.services.IRenderService,
-        private ReferenceResolver:jsonforms.services.IReferenceResolver,
-        private UISchemaGenerator:jsonforms.services.IUISchemaGenerator,
+        private RenderService: JSONForms.IRenderService,
+        private ReferenceResolver: JSONForms.IReferenceResolver,
+        private UISchemaGenerator: JSONForms.IUISchemaGenerator,
         private $scope:JsonFormsDirectiveScope,
         private $q: ng.IQService
     ) {
@@ -26,7 +26,7 @@ class JsonFormsDiretiveController {
             var uiSchemaDeferred = $q.defer();
 
             $q.when(uiSchemaDeferred.promise).then(function (uiSchema) {
-                schema['uiSchema'] = uiSchema;
+                //schema['uiSchema'] = uiSchema;
                 //  build mapping of ui paths to schema refs
                 //ReferenceResolver.addUiPathToSchemaRefMapping(JsonRefs.findRefs(uiSchema));
                 JsonRefs.resolveRefs(schema, {}, function (err, resolvedSchema, meta) {
@@ -54,11 +54,11 @@ class JsonFormsDiretiveController {
             var uiSchema = values[1];
             var data = values[2];
 
-            var dataProvider: jsonforms.services.IDataProvider;
+            var dataProvider: JSONForms.IDataProvider;
             if ($scope.asyncDataProvider) {
                 dataProvider = $scope.asyncDataProvider;
             } else {
-                dataProvider = new jsonforms.services.DefaultDataProvider($q, data);
+                dataProvider = new JSONForms.DefaultDataProvider($q, data);
             }
 
             RenderService.registerSchema(schema);
@@ -103,7 +103,7 @@ class JsonFormsDiretiveController {
     }
 
     private fetchData() {
-        var dataProvider: jsonforms.services.IDataProvider = <jsonforms.services.IDataProvider> this.$scope.asyncDataProvider;
+        var dataProvider: JSONForms.IDataProvider = <JSONForms.IDataProvider> this.$scope.asyncDataProvider;
         var data = this.$scope.data;
 
         if (dataProvider && data) {
@@ -129,23 +129,17 @@ interface JsonFormsDirectiveScope extends ng.IScope {
 
     asyncSchema: () => any;
     asyncUiSchema: () => any;
-    asyncDataProvider: jsonforms.services.IDataProvider;
+    asyncDataProvider: JSONForms.IDataProvider;
 }
 
 class RecElement implements ng.IDirective {
 
-    constructor(private recursionHelper:jsonforms.services.RecursionHelper) {
+    constructor(private recursionHelper:JSONForms.RecursionHelper) {
     }
 
     restrict = "E";
     replace = true;
-    scope = {
-        element: '=',
-        bindings: '=',
-        topOpenDate: '=',
-        topValidateNumber: '=',
-        topValidateInteger: '='
-    };
+    scope = { element: '=' };
     templateUrl = 'templates/element.html';
 
     compile: ng.IDirectiveCompileFn = (element, attr, trans) => {
@@ -159,13 +153,7 @@ jsonFormsDirectives.directive('control', function ():ng.IDirective {
     return {
         restrict: "E",
         replace: true,
-        scope: {
-            control: '=',
-            bindings: '=',
-            topOpenDate: '=',
-            topValidateNumber: '=',
-            topValidateInteger: '='
-        },
+        scope: { control: '=' },
         templateUrl: 'templates/control.html'
     };
 }).directive('jsonforms', function ():ng.IDirective {
@@ -183,11 +171,16 @@ jsonFormsDirectives.directive('control', function ():ng.IDirective {
         },
         // TODO: fix template for tests
         templateUrl: 'templates/form.html',
-        controller: JsonFormsDiretiveController
+        controller: JsonFormsDirectiveController
     }
-}).directive('recelement', ['RecursionHelper', (recHelper: jsonforms.services.RecursionHelper): ng.IDirective => {
+}).directive('recelement', ['RecursionHelper', (recHelper: JSONForms.RecursionHelper): ng.IDirective => {
     return new RecElement(recHelper);
 }]).directive('dynamicWidget', ['$compile', function ($compile: ng.ICompileService) {
+    var replaceJSONFormsAttributeInTemplate = (template: string): string => {
+        return template
+            .replace("data-jsonforms-model",      "ng-model='element.instance[element.path]'")
+            .replace("data-jsonforms-validation", `ng-change='element.validate()'`);
+    };
     return {
         restrict: 'E',
         scope: {
@@ -197,11 +190,13 @@ jsonFormsDirectives.directive('control', function ():ng.IDirective {
         link: function(scope, element) {
             if (scope.element.templateUrl) {
                 $.get(scope.element.templateUrl, function(template) {
-                    var compiledTemplate = $compile(template.replace("data-jsonforms-model", "ng-model='element.instance[element.path]'"))(scope);
+                    var updatedTemplate = replaceJSONFormsAttributeInTemplate(template);
+                    var compiledTemplate = $compile(updatedTemplate)(scope);
                     element.replaceWith(compiledTemplate);
                 })
             } else {
-                var template = $compile(scope.element.template.replace("data-jsonforms-model", "ng-model='element.instance[element.path]'"))(scope);
+                var updatedTemplate = replaceJSONFormsAttributeInTemplate(scope.element.template);
+                var template = $compile(updatedTemplate)(scope);
                 element.replaceWith(template);
             }
         }

diff --git a/js/renderers/ArrayControl.ts b/js/renderers/ArrayControl.ts
@@ -1,22 +1,22 @@
 /// <reference path="../../typings/angularjs/angular.d.ts"/>
 /// <reference path="../services.ts"/>
 
-class ArrayControl implements jsonforms.services.IRenderer {
+class ArrayControl implements JSONForms.IRenderer {
 
 
     private maxSize = 99;
 
     priority = 2;
 
-    constructor(private refResolver: jsonforms.services.IReferenceResolver, private scope: ng.IScope) {
+    constructor(private refResolver: JSONForms.IReferenceResolver, private scope: ng.IScope) {
 
     }
 
     isApplicable(element: IUISchemaElement, subSchema: SchemaElement, schemaPath: string):boolean {
         return element.type == 'Control' && subSchema.type == 'array';
     }
 
-    render(element: IControlObject, subSchema: SchemaElement, schemaPath: string, dataProvider: jsonforms.services.IDataProvider): jsonforms.services.IResult {
+    render(element: IControlObject, subSchema: SchemaElement, schemaPath: string, dataProvider: JSONForms.IDataProvider): JSONForms.IRenderDescription {
 
         var control = this.createTableUIElement(element,dataProvider);
         // init
@@ -46,7 +46,7 @@ class ArrayControl implements jsonforms.services.IRenderer {
     //    }
     //}
 
-    private createTableUIElement(element, dataProvider: jsonforms.services.IDataProvider) {
+    private createTableUIElement(element, dataProvider: JSONForms.IDataProvider) {
 
         // TODO: how to configure paging/filtering
         var paginationEnabled = dataProvider.fetchPage !== undefined;
@@ -139,6 +139,6 @@ class ArrayControl implements jsonforms.services.IRenderer {
 
 var app = angular.module('jsonForms.table', []);
 
-app.run(['RenderService', 'ReferenceResolver', '$rootScope', function(RenderService, ReferenceResolver, $rootScope) {
+app.run(['JSONForms.RenderService', 'ReferenceResolver', '$rootScope', function(RenderService, ReferenceResolver, $rootScope) {
     RenderService.register(new ArrayControl(ReferenceResolver, $rootScope));
 }]);
diff --git a/js/renderers/BooleanControl.ts b/js/renderers/BooleanControl.ts
@@ -1,22 +1,13 @@
 ///<reference path="..\services.ts"/>
 
-class BooleanControl implements jsonforms.services.IRenderer {
+class BooleanControl implements JSONForms.IRenderer {
 
     priority = 2;
 
-    constructor(private refResolver: jsonforms.services.IReferenceResolver) { }
-
-    render(element: IUISchemaElement, subSchema: SchemaElement, schemaPath: string, dataProvider: jsonforms.services.IDataProvider) {
-        return {
-            "type": "Control",
-            "size": 99,
-            "label": element['label'],
-            path: [this.refResolver.normalize(schemaPath)],
-            "instance": dataProvider.data,
-            "template": `<div class="checkbox-inline">
-            <input type="checkbox" id="${schemaPath}" class="qb-control qb-control-boolean" data-jsonforms-model/>
-            </div>`
-        };
+    render(element: IUISchemaElement, subSchema: SchemaElement, schemaPath: string, dataProvider: JSONForms.IDataProvider) {
+        var control = new JSONForms.ControlRenderDescription(dataProvider.data, subSchema, schemaPath);
+        control['template'] = `<input type="checkbox" id="${schemaPath}" class="qb-control qb-control-boolean" ui-validate="\'element.validate($value)\'" data-jsonforms-model/>`;
+        return control;
     }
 
     isApplicable(uiElement: IUISchemaElement, subSchema: SchemaElement, schemaPath: string):boolean {
@@ -26,6 +17,6 @@ class BooleanControl implements jsonforms.services.IRenderer {
 
 var app = angular.module('jsonForms.booleanControl', []);
 
-app.run(['RenderService', 'ReferenceResolver', function(RenderService, ReferenceResolver) {
-    RenderService.register(new BooleanControl(ReferenceResolver));
+app.run(['JSONForms.RenderService', function(RenderService) {
+    RenderService.register(new BooleanControl());
 }]);
diff --git a/js/renderers/DatetimeControl.ts b/js/renderers/DatetimeControl.ts
@@ -1,29 +1,19 @@
 ///<reference path="..\services.ts"/>
 
-class DatetimeControl implements jsonforms.services.IRenderer {
+class DatetimeControl implements JSONForms.IRenderer {
 
     priority = 3;
 
-    constructor(private refResolver: jsonforms.services.IReferenceResolver) { }
-
-    render(element: IUISchemaElement, subSchema: SchemaElement, schemaPath: string, dataProvider: jsonforms.services.IDataProvider): jsonforms.services.IResult {
-        //var path = this.refResolver.normalize(this.refResolver.getSchemaRef(uiPath));
-        var options = {
-            "type": "Control",
-            "size": 99,
-            "label": element['label'],
-            "path": [this.refResolver.normalize(schemaPath)],
-            "instance": dataProvider.data,
-            "isOpen": false,
-            // TODO: pefix
-            "templateUrl": '../templates/datetime.html',
-            openDate: function($event) {
-                $event.preventDefault();
-                $event.stopPropagation();
-                options.isOpen = true;
-            }
+    render(element: IUISchemaElement, subSchema: SchemaElement, schemaPath: string, dataProvider: JSONForms.IDataProvider): JSONForms.IRenderDescription {
+        var control = new JSONForms.ControlRenderDescription(dataProvider.data, subSchema, schemaPath);
+        control['templateUrl'] = '../templates/datetime.html';
+        control['isOpen'] = false;
+        control['openDate'] = function($event) {
+            $event.preventDefault();
+            $event.stopPropagation();
+            control['isOpen'] = true;
         };
-        return options;
+        return control;
     }
 
     isApplicable(uiElement: IUISchemaElement, subSchema: SchemaElement, schemaPath: string): boolean {
@@ -34,6 +24,6 @@ class DatetimeControl implements jsonforms.services.IRenderer {
 
 var app = angular.module('jsonForms.datetimeControl', []);
 
-app.run(['RenderService', 'ReferenceResolver', '$rootScope', function(RenderService, ReferenceResolver, $scope) {
-    RenderService.register(new DatetimeControl((ReferenceResolver)));
+app.run(['JSONForms.RenderService', function(RenderService) {
+    RenderService.register(new DatetimeControl());
 }]);