Merge pull request #191 from eneufeld/fix_masterdetail

Fixes for MasterDetail Renderer
eclipsesource · Mar 3, 2016 · feff9b6 · feff9b6
2 parents db5ea17 + 5483d26
commit feff9b6
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 18 deletions.
diff --git a/components/renderers/layouts/masterdetail/masterdetail-directives.ts b/components/renderers/layouts/masterdetail/masterdetail-directives.ts
@@ -4,28 +4,39 @@ class MasterDetailCollectionDirective implements ng.IDirective {
     restrict = "E";
     replace = true;
     scope = {
-        collection: '=',
+        properties: '=',
+        instance: '=',
         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-group is-open="status_attribute.open" ng-repeat="(key, value) in element.filter(properties)" ng-class="{'jsf-masterdetail-empty':isEmptyInstance(key)}">
+                    <accordion-heading class="jsf-masterdetail-header">
+                        <span class="jsf-masterdetail-property">{{key}}</span> <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status_attribute.open, 'glyphicon-chevron-right': !status_attribute.open}" ng-show="!isEmptyInstance(key)"></i>
                     </accordion-heading>
-                    <accordion close-others="false">
-                        <accordion-group is-open="status_object.open" ng-repeat="child in element.instance[key]">
+
+                    <accordion close-others="false" ng-show="!isEmptyInstance(key)">
+                        <accordion-group is-open="status_object.open" ng-repeat="child in instance[key]" ng-class="{'jsf-masterdetail-empty':!hasKeys(value.items)}">
                             <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>
+                                <span ng-click="element.selectedChild=child;element.selectedSchema=value.items;" ng-class="{'jsf-masterdetail-selected':element.selectedChild==child}">{{child.name!=undefined?child.name:child}}<!-- label provider needed --></span>
+                                <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status_object.open, 'glyphicon-chevron-right': !status_object.open}" ng-if="hasKeys(value.items)"></i>
                             </accordion-heading>
-                            <jsonforms-masterdetail-member element="element" member="value.items"></jsonforms-masterdetail-member>
+                            <jsonforms-masterdetail-member element="element" child-schema="value.items" child-data="child"></jsonforms-masterdetail-member>
                         </accordion-group>
                     </accordion>
                 </accordion-group>
             </accordion>
         </div>
-        `
+        `;
+    link = (scope, element) => {
+        scope.hasKeys=function(schemaToCheck){
+            return Object.keys(scope.element.filter(schemaToCheck.properties)).length!=0;
+        };
+        scope.isEmptyInstance=function(key){
+            return scope.instance[key]==undefined || scope.instance[key].length==0;
+        }
+    };
 }
 
 // TODO (?) http://stackoverflow.com/questions/23535994/implementing-angularjs-directives-as-classes-in-typescript
@@ -37,17 +48,20 @@ class MasterDetailMember implements ng.IDirective {
     restrict = "E";
     replace = true;
     scope = {
-        member: '=',
-        element: '='
+        childSchema: '=',
+        childData: '=',
+        element: '=',
     };
     link = (scope, element) => {
-        this.$compile('<jsonforms-masterdetail-collection collection="member.properties" element="element"></jsonforms-masterdetail-collection>')
-        (scope, (cloned) => {
-            element.replaceWith(cloned);
-        });
+        if(Object.keys(scope.element.filter(scope.childSchema.properties)).length!=0){
+            this.$compile('<jsonforms-masterdetail-collection properties="childSchema.properties" element="element" instance="childData"></jsonforms-masterdetail-collection>')
+            (scope, (cloned) => {
+                element.replaceWith(cloned);
+            });
+        }
     }
 }
 
 angular.module('jsonforms.renderers.layouts.masterdetail')
     .directive('jsonformsMasterdetailCollection', () => new MasterDetailCollectionDirective)
-    .directive('jsonformsMasterdetailMember', ($compile) => new MasterDetailMember($compile));
+    .directive('jsonformsMasterdetailMember', ($compile) => new MasterDetailMember($compile));
diff --git a/components/renderers/layouts/masterdetail/masterdetail-renderer.ts b/components/renderers/layouts/masterdetail/masterdetail-renderer.ts
@@ -11,8 +11,8 @@ class MasterDetailRenderer implements JSONForms.IRenderer {
         control['template'] = `
         <div class="row">
             <!-- Master -->
-            <div class="col-sm-30">
-                <jsonforms-masterdetail-collection element="element" collection="element.schema.properties"></jsonforms-masterdetail-collection>
+            <div class="col-sm-30 jsf-masterdetail">
+                <jsonforms-masterdetail-collection element="element" properties="element.schema.properties" instance="element.instance"></jsonforms-masterdetail-collection>
             </div>
             <!-- Detail -->
             <div class="col-sm-70">

diff --git a/components/renderers/layouts/masterdetail/masterdetail.css b/components/renderers/layouts/masterdetail/masterdetail.css
@@ -0,0 +1,29 @@
+.jsf-masterdetail{}
+.jsf .jsf-masterdetail .panel-body {
+  padding-bottom: 0;
+}
+.jsf .jsf-masterdetail .panel-group {
+  margin-bottom: 5px;
+}
+
+.jsf .jsf-masterdetail .jsf-masterdetail-empty .panel-body {
+  padding-bottom: 0;
+  padding-top: 0;
+}
+.jsf .jsf-masterdetail .jsf-masterdetail-empty .panel-heading + .panel-collapse .panel-body {
+    border-width: 0;
+}
+.jsf .jsf-masterdetail .jsf-masterdetail-empty .panel-group {
+  margin-bottom: 0;
+  border-width: 0;
+}
+.jsf-masterdetail-selected{
+    font-weight: bold;
+}
+.jsf-masterdetail-property{
+    font-style: italic;
+    color:#888888;
+}
+.jsf-masterdetail-header {
+    text-decoration: none;
+}