display array schema

lib/components/JsonSchema/json-schema.html

@@ -1,5 +1,5 @@
 <small *ng-if="errorMessage">{{errorMessage}}</small>
-<div class="params-wrap">
+<div class="params-wrap" [ng-class]="{'params-array': _isArray}">
   <div *ng-for="#prop of data.properties" class="param-wrap">
     <div class="param">
       <div class="param-name">
@@ -7,13 +7,13 @@
       </div>
       <div class="param-info">
         <div>
-          <span class="param-type" [ng-class]="prop.type">{{prop.type}} {{prop.format}}</span>
+          <span class="param-type" [ng-class]="prop.type">{{prop._displayType}} {{prop.format}}</span>
           <span *ng-if="prop.isRequired" class="param-required">Required</span>
         </div>
         <div class="param-description" inner-html="{{prop.description | marked}}"></div>
       </div>
     </div>
-    <div class="param-schema" *ng-if="prop._pointer">
+    <div class="param-schema" [ng-class]="{'param-array': prop._isArray}" *ng-if="prop._pointer">
       <json-schema pointer="{{prop._pointer}}">
       </json-schema>
     </div>

lib/components/JsonSchema/json-schema.js

@@ -25,11 +25,23 @@ export default class JsonSchema extends BaseComponent {
     let schema = this.componentSchema;
     this.data = {};
     this.data.properties = [];
-    if (schema.type !== 'object') {
+    if (schema.type !== 'object' && schema.type !== 'array') {
       // TODO
-      this.errorMessage = 'Non-object (array-based) schemas are not implemented yet';
+      this.errorMessage = 'Non-object and non-array schemas are not implemented yet';
       return;
     }
+
+    if (schema.type === 'array') {
+      this._isArray = true;
+      this.pointer = schema.items._pointer || this.pointer;
+      schema = schema.items;
+    }
+
+    if (schema.type === 'object') {
+      this.pointer = schema._pointer || this.pointer;
+    }
+
+
     if (!schema.properties) return;
     let props = Object.keys(schema.properties).map(prop => {
       let propData = schema.properties[prop];
@@ -53,18 +65,19 @@ export default class JsonSchema extends BaseComponent {
   injectPropData(prop, propData) {
     propData._name = prop;
     propData.isRequired = this.requiredMap[prop];
-
+    propData._displayType = propData.type;
     if (propData.type === 'array') {
       let itemType = propData.items.type;
       if (itemType === 'object') {
         itemType = propData.items.title || 'object';
-        propData._pointer = propData.items._pointer;
+        propData._pointer = this.pointer + '/properties/' + prop;
       }
-      propData.type = `array of ${itemType}`;
+      propData._displayType= `array of ${itemType}`;
+      propData._isArray = true;
     }
 
     if (propData.type === 'object') {
-      propData.type = propData.title || 'object';
+      propData._displayType = propData.title || 'object';
     }
   }
 

lib/components/JsonSchema/json-schema.scss

@@ -122,3 +122,44 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
 .param-schema .param-wrap:first-of-type .param-name:before {
   display: none !important;
 }
+
+
+/* styles for array-schema for array */
+$array-marker-font-sz: 12px;
+$array-marker-line-height: 1.5;
+.params-wrap.params-array:before, .params-wrap.params-array:after {
+  display: block;
+  font-weight: bold;
+  color: #999;
+  font-size: $array-marker-font-sz;
+  line-height: $array-marker-line-height;
+}
+
+.params-wrap.params-array:after {
+  content: "]";
+}
+
+.params-wrap.params-array:before {
+  content: "Array [";
+}
+
+.params-wrap.params-array {
+  padding-left: $bullet-margin;
+}
+
+.param-schema.param-array:before {
+  bottom: ($array-marker-font-sz * $array-marker-line-height) / 2;
+  width: $bullet-margin;
+  border-left-style: dashed;
+  border-bottom: $lines-width dashed $tree-lines-color;
+}
+
+.params-wrap.params-array > .param-wrap:first-of-type > .param > .param-name:after {
+  content: "";
+  display: block;
+  position: absolute;
+  left: -$lines-width;
+  top: 0;
+  border-left: $line-border-erase;
+  height: ($param-name-height/2) + $cell-padding;
+}

lib/components/base.js

@@ -79,7 +79,8 @@ export class BaseComponent {
    * simple in-place schema dereferencing. Schema is already bundled so no need in global dereferencing.
    * TODO: doesn't support circular references
    */
-  dereference(schema = this.componentSchema) {
+  dereference(schema = Object.assign({}, this.componentSchema)) {
+    //schema = Object.assign({}, schema);
     if (schema && schema.$ref) {
       let resolved = this.schemaMgr.byPointer(schema.$ref);
       let baseName = JsonPointer.baseName(schema.$ref);
@@ -96,6 +97,7 @@ export class BaseComponent {
         this.dereference(value);
       }
     });
+    this.componentSchema = schema;
   }
 
   joinAllOf(schema = this.componentSchema) {