Displaying in-body param schema

lib/components/ParamsList/params-list.css

@@ -10,7 +10,7 @@ h4 {
 
 .param > span {
   padding: 5px 10px;
-  vertical-align: middle;
+  vertical-align: top;
 }
 
 .param-name {
@@ -18,7 +18,12 @@ h4 {
 }
 
 .param-type {
-  padding: 2px 10px;
   background-color: #EAEAEA;
   border: silver 1px solid;
 }
+
+.body-schema {
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 10px;
+}

lib/components/ParamsList/params-list.html

@@ -1,5 +1,6 @@
 <h4> Parameters </h4>
 <small class="no-params" *ng-if="data.noParams"> No parameters </small>
+<!-- General parameters -->
 <div *ng-for="#param of data.params">
   <div class="param">
     <span class="param-name">{{param.name}}</span>
@@ -7,12 +8,14 @@
     <span class="param-description">{{param.description}}</span>
   </div>
 </div>
+<!-- in-body parameter -->
 <div class="param body-param" *ng-if="data.bodyParam">
   <span class="param-name">{{data.bodyParam.name}}</span>
-  <span class="param-type" *ng-if="data.bodyParam.type"
+  <div class="body-schema">
-    [ng-class]="data.bodyParam.type">{{data.bodyParam.type}}</span>
+    <schema
-  <span class="param-description" *ng-if="data.bodyParamdescription" >
+      [title]="data.bodyParam.type"
-    {{data.bodyParam.description}}
+      [description]="data.bodyParam.description"
-  </span>
+      pointer="{{data.bodyParam.pointer}}/schema">
-  <span> <em>Body Schema would be somewhere here (unimplemented yet) </em></span>
+    </schema>
+  </div>
 </div>

lib/components/ParamsList/params-list.js

@@ -2,11 +2,22 @@
 
 import {JsonPointer} from '../../utils/JsonPointer';
 import {RedocComponent, BaseComponent} from '../base';
+import {JsonSchemaView} from '../JsonSchemaView/json-schema-view';
+
+/* inject JsonPointer into array elements */
+function injectPointers(array, root) {
+  if (!array) return array;
+  return array.map((element, idx) => {
+    element.$$pointer = JsonPointer.join(root, idx);
+    return element;
+  });
+}
 
 @RedocComponent({
   selector: 'params-list',
   templateUrl: './lib/components/ParamsList/params-list.html',
-  styleUrls: ['./lib/components/ParamsList/params-list.css']
+  styleUrls: ['./lib/components/ParamsList/params-list.css'],
+  directives: [JsonSchemaView]
 })
 export class ParamsList extends BaseComponent {
   constructor(schemaMgr) {
@@ -15,17 +26,18 @@ export class ParamsList extends BaseComponent {
 
   prepareModel() {
     this.data = {};
-    let params = this.componentSchema || [];
+    let params = injectPointers(this.componentSchema, this.pointer) || [];
     let pathParams = this.getPathParams() || [];
     params = params.concat(pathParams);
     params = this.resolveRefs(params);
     this.sortParams(params);
 
-    // temporary hanlde body param
+    // temporary handle body param
     if (params.length && params[params.length - 1].in === 'body') {
       let bodyParam = params.pop();
       bodyParam.type = bodyParam.schema.type
-        || `Object(${JsonPointer.baseName(bodyParam.schema.$ref)})`;
+        || JsonPointer.baseName(bodyParam.schema.$ref);
+      bodyParam.pointer = bodyParam.$$pointer;
       this.data.bodyParam = bodyParam;
     }
 
@@ -37,10 +49,10 @@ export class ParamsList extends BaseComponent {
     let ptr = JsonPointer.dirName(this.pointer, 2) + '/parameters';
     let pathParams = this.schemaMgr.byPointer(ptr);
     if (Array.isArray(pathParams)) {
-      return pathParams;
+      return injectPointers(pathParams, ptr);
     }
     if (pathParams && pathParams.$ref) {
-      return this.schemaMgr.byPointer(pathParams.$ref);
+      return injectPointers(this.schemaMgr.byPointer(pathParams.$ref), pathParams.$ref);
     }
 
     return [];

lib/components/base.js

@@ -71,6 +71,7 @@ export class BaseComponent {
   onInit() {
     this.componentSchema = this.schemaMgr.byPointer(this.pointer || '');
     this.prepareModel();
+    this.init();
   }
 
   /**
@@ -78,5 +79,11 @@ export class BaseComponent {
    * @abstract
    */
   prepareModel() {}
+
+  /**
+   * Used to initialize component. Run after prepareModel
+   * @abstract
+   */
+  init() {}
 }
 BaseComponent.parameters = [[SchemaManager]];

lib/utils/JsonPointer.js

@@ -44,6 +44,20 @@ export class JsonPointer extends JsonPointerLib {
      }
      return JsonPointerLib._origParse(ptr);
    }
+
+   /**
+   * Creates a JSON pointer path, by joining one or more tokens to a base path.
+   *
+   * @param {string} base - The base path
+   * @param {string|string[]} tokens - The token(s) to append (e.g. ["name", "first"])
+   * @returns {string}
+   */
+   static join(base, tokens) {
+     // TODO: optimize
+     let baseTokens = JsonPointer.parse(base);
+     let resTokens = baseTokens.concat(tokens);
+     return JsonPointer.compile(resTokens);
+   }
 }
 
 JsonPointerLib._origParse = JsonPointerLib.parse;