Merge 88e8424 into d616d57

eclipsesource · Nov 11, 2015 · 505c19a · 505c19a
2 parents d616d57 + 88e8424
commit 505c19a
Show file tree

Hide file tree

Showing 5 changed files with 163 additions and 65 deletions.
diff --git a/components/app.ts b/components/app.ts
@@ -30,4 +30,5 @@ angular.module('jsonforms', [
     'jsonforms.renderers.layouts.categories.categorization',
     'jsonforms.renderers.layouts.categories.category',
     'jsonforms.renderers.extras.label',
+    'jsonforms.renderers.layouts.masterdetail',
 ]);
diff --git a/components/form/form-directive.ts b/components/form/form-directive.ts
@@ -168,6 +168,7 @@ angular.module('jsonforms.form').directive('jsonforms', ():ng.IDirective => {
         link: (scope, el, attrs, ctrl) => {
             scope['element'] = el;
             scope.$watch('uiSchema', () => { ctrl.init(); });
+            scope.$watch('data', () => { ctrl.init(); });
         }
     }
 });
diff --git a/components/renderers/layouts/masterdetail/masterdetail-renderer.ts b/components/renderers/layouts/masterdetail/masterdetail-renderer.ts
@@ -0,0 +1,44 @@
+///<reference path="../../../references.ts"/>
+
+class MasterDetailRenderer implements JSONForms.IRenderer {
+
+    priority = 1;
+
+    constructor(private renderService: JSONForms.IRenderService) { }
+
+    render(element: IUISchemaElement, subSchema: SchemaElement, schemaPath: string, services: JSONForms.Services): JSONForms.IContainerRenderDescription {
+        var control = JSONForms.RenderDescriptionFactory.createControlDescription(schemaPath, services, "");
+        var template = `
+        <div class="row">
+            <!-- Master -->
+            <div class="col-sm-30">
+                <masterdetail-collection element="element" collection="element.schema.properties"></masterdetail-collection>
+            </div>
+            <!-- Detail -->
+            <div class="col-sm-70">
+                <jsonforms schema="element.selectedSchema" data="element.selectedChild" ng-if="element.selectedChild"></jsonforms>
+            </div>
+        </div>
+        `;
+        control['template'] = template;
+        control['schema']=subSchema;
+        control['filter']=(properties) => {
+            var result = {};
+            angular.forEach(properties, function(value, key) {
+                if (value.type=='array' && value.items.type=='object') {
+                    result[key] = value;
+                }
+            });
+            return result;
+        }
+        return control;
+    }
+
+    isApplicable(uiElement: IUISchemaElement, jsonSchema: SchemaElement, schemaPath): boolean {
+        return uiElement.type == "MasterDetailLayout" && jsonSchema !== undefined && jsonSchema.type == 'object';
+    }
+}
+
+angular.module('jsonforms.renderers.layouts.masterdetail').run(['RenderService', (RenderService) => {
+    RenderService.register(new MasterDetailRenderer(RenderService));
+}]);
diff --git a/components/renderers/layouts/masterdetail/masterdetail.ts b/components/renderers/layouts/masterdetail/masterdetail.ts
@@ -0,0 +1,50 @@
+///<reference path="../../../references.ts"/>
+
+angular.module('jsonforms.renderers.layouts.masterdetail', ['jsonforms.renderers.layouts']);
+angular.module('jsonforms.renderers.layouts.masterdetail')
+.directive('masterdetailCollection', function ():ng.IDirective {
+    return {
+        restrict: "E",
+        replace: true,
+        scope: {
+            collection: '=',
+            element:'='
+        },
+        template:
+        `
+        <div>
+            <accordion close-others="false">
+                <accordion-group is-open="status_attribute.open" ng-repeat="(key, value) in element.filter(collection)">
+                    <accordion-heading>
+                        {{key}} <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status_attribute.open, 'glyphicon-chevron-right': !status_attribute.open}"></i>
+                    </accordion-heading>
+                    <accordion close-others="false">
+                        <accordion-group is-open="status_object.open" ng-repeat="child in element.instance[key]">
+                            <accordion-heading>
+                                <span ng-click="element.selectedChild=child;element.selectedSchema=value.items;">{{child.name}}<!-- label provider needed --></span><i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status_object.open, 'glyphicon-chevron-right': !status_object.open}"></i>
+                            </accordion-heading>
+                            <masterdetail-member element="element" member="value.items"></masterdetail-member>
+                        </accordion-group>
+                    </accordion>
+                </accordion-group>
+            </accordion>
+        </div>
+        `
+    }
+})
+.directive('masterdetailMember', function ($compile):ng.IDirective {
+    return {
+        restrict: "E",
+        replace: true,
+        scope: {
+            member: '=',
+            element:'='
+        },
+        link: function (scope, element, attrs) {
+            $compile('<masterdetail-collection collection="member.properties" element="element"></masterdetail-collection>')
+            (scope, function(cloned, scope){
+                element.replaceWith(cloned);
+            });
+        }
+    }
+});
diff --git a/examples/js/LocalController.js b/examples/js/LocalController.js
@@ -33,6 +33,14 @@ angular.module('makeithappen').controller('LocalController', ['$scope', function
             },
             "occupation": {
                 "type": "string"
+            },
+            "test_wrong": {
+                "type": "array",
+                "items": {"type":"string"}
+            },
+            "test_correct": {
+                "type": "array",
+                "items": {"type":"object","properties": {"name": {"type": "string"}}}
             }
         },
         "required": ["occupation"]
@@ -145,32 +153,23 @@ angular.module('makeithappen').controller('LocalController', ['$scope', function
     };
 
     $scope.usersSchema = {
-        "type": "array",
-        "items": $scope.schema
+        "type": "object",
+        "properties": {
+            "users":{
+                "type": "array",
+                "items": $scope.schema
+            },
+            "enemies":{
+                "type": "array",
+                "items": $scope.schema
+            }
+        }
     };
     $scope.usersUiSchema = {
-        "type": "Control",
+        "type":"MasterDetailLayout",
         "scope": {
             "$ref": "#"
         },
-        "columns": [
-            {
-                "label": "Name",
-                "scope": {
-                    "$ref": "#/items/properties/name"
-                }
-            },
-            {
-                "label": "Age",
-                "scope": {
-                    "$ref": "#/items/properties/personalData/properties/age"
-                }
-            }
-        ],
-        "options": {
-            "enableFiltering": true,
-            "paginationPageSizes": [5, 10, 20]
-        }
     };
 
     $scope.data = {
@@ -179,51 +178,54 @@ angular.module('makeithappen').controller('LocalController', ['$scope', function
         birthDate: "02.06.1985",
         nationality: "US"
     };
-    $scope.users = [
-        $scope.data,
-        {
-            name: 'Todd',
-            age: 33
-        },
-        {
-            name: 'Jimmy',
-            age: 34
-        },
-        {
-            name: 'Max',
-            age: 35
-        },
-        {
-            name: 'Jonas',
-            age: 34
-        },
-        {
-            name: 'Edgar',
-            age: 30
-        },
-        {
-            name: 'Eugen',
-            age: 28
-        },
-        {
-            name: 'Johannes',
-            age: 26
-        },
-        {
-            name: 'Alex',
-            age: 25
-        },
-        {
-            name: 'Stefan',
-            age: 27
-        },
-        {
-            name: 'Eva',
-            age: 30
-        }
-    ];
+    $scope.users ={
+        "users":
+        [
+            $scope.data,
+            {
+                name: 'Todd',
+                personalData:{age: 33}
+            },
+            {
+                name: 'Jimmy',
+                personalData:{age: 32}
+            },
+            {
+                name: 'Max',
+                personalData:{age: 35}
+            },
+            {
+                name: 'Jonas',
+                personalData:{age: 34}
+            },
+            {
+                name: 'Edgar',
+                personalData:{age: 30}
+            },
+            {
+                name: 'Eugen',
+                personalData:{age: 29}
+            },
+            {
+                name: 'Johannes',
+                personalData:{age: 26}
+            },
+            {
+                name: 'Alex',
+                personalData:{age: 25}
+            },
+            {
+                name: 'Stefan',
+                personalData:{age: 27}
+            },
+            {
+                name: 'Eva',
+                personalData:{age: 30}
+            }
+        ]
+    };
 
     $scope.formattedData = function() {
-        return JSON.stringify($scope.data, null, 4);
+        return JSON.stringify($scope.users, null, 4);
     };
 }]);