Add body sample to the right panel

lib/components/Method/method.css

@@ -31,11 +31,22 @@ h3 > span {
 .samples {
   color: white;
   width: 40%;
+  padding: 10px 20px;
 }
 
 responses-samples {
   display: block;
-  padding: 10px 20px;
+}
+
+.samples header {
+  font-size: 20px;
+  margin: 5px 0;
+}
+
+.samples schema-sample {
+  display: block;
+  padding: 5px;
+  background-color: rgb(18, 20, 39);
 }
 
 .method:after {

lib/components/Method/method.html

@@ -14,6 +14,13 @@
     <responses-list pointer="{{pointer}}/responses"> </responses-list>
   </div>
   <div class="samples">
-    <responses-samples pointer="{{pointer}}/responses"> </responses-samples>
+    <div *ng-if="data.bodyParam">
+      <header> Body sample </header>
+      <schema-sample pointer="{{data.bodyParam._pointer}}/schema"> </schema-sample>
+    </div>
+    <div>
+      <header> Responses samples </header>
+      <responses-samples pointer="{{pointer}}/responses"> </responses-samples>
+    </div>
   </div>
 <div>

lib/components/Method/method.js

@@ -5,12 +5,13 @@ import {RedocComponent, BaseComponent} from '../base';
 import {ParamsList} from '../ParamsList/params-list';
 import {ResponsesList} from '../ResponsesList/responses-list';
 import {ResponsesSamples} from '../ResponsesSamples/responses-samples';
+import {SchemaSample} from '../SchemaSample/schema-sample';
 
 @RedocComponent({
   selector: 'method',
   templateUrl: './lib/components/Method/method.html',
   styleUrls: ['./lib/components/Method/method.css'],
-  directives: [ParamsList, ResponsesList, ResponsesSamples]
+  directives: [ParamsList, ResponsesList, ResponsesSamples, SchemaSample]
 })
 export class Method extends BaseComponent {
   constructor(schemaMgr) {
@@ -22,5 +23,12 @@ export class Method extends BaseComponent {
     this.data.method = JsonPointer.baseName(this.pointer);
     this.data.path = JsonPointer.baseName(this.pointer, 2);
     this.data.methodInfo = this.componentSchema;
+    this.data.bodyParam = this.findBodyParam();
+  }
+
+  findBodyParam() {
+    let pathParams = this.schemaMgr.getMethodParams(JsonPointer.join(this.pointer, 'parameters'), true);
+    let bodyParam = pathParams.find(param => param.in === 'body');
+    return bodyParam;
   }
 }

lib/components/ParamsList/params-list.js

@@ -1,18 +1,8 @@
 'use strict';
 
-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',
@@ -26,16 +16,13 @@ export class ParamsList extends BaseComponent {
 
   prepareModel() {
     this.data = {};
-    let params = injectPointers(this.componentSchema, this.pointer) || [];
-    let pathParams = this.getPathParams() || [];
-    params = params.concat(pathParams);
-    params = this.resolveRefs(params);
+    let params = this.schemaMgr.getMethodParams(this.pointer, true);
     this.sortParams(params);
 
     // temporary handle body param
     if (params.length && params[params.length - 1].in === 'body') {
       let bodyParam = params.pop();
-      bodyParam.pointer = bodyParam.$$pointer;
+      bodyParam.pointer = bodyParam._pointer;
       this.data.bodyParam = bodyParam;
     }
 
@@ -43,29 +30,6 @@ export class ParamsList extends BaseComponent {
     this.data.params = params;
   }
 
-  getPathParams() {
-    let ptr = JsonPointer.dirName(this.pointer, 2) + '/parameters';
-    let pathParams = this.schemaMgr.byPointer(ptr);
-    if (Array.isArray(pathParams)) {
-      return injectPointers(pathParams, ptr);
-    }
-    if (pathParams && pathParams.$ref) {
-      return injectPointers(this.schemaMgr.byPointer(pathParams.$ref), pathParams.$ref);
-    }
-
-    return [];
-  }
-
-  resolveRefs(params) {
-    return params.map(param => {
-      if (param.$ref) {
-        return this.schemaMgr.byPointer(param.$ref);
-      } else {
-        return param;
-      }
-    });
-  }
-
   sortParams(params) {
     const sortOrder = {
       'path' : 0,

lib/components/ResponsesSamples/responses-samples.css

@@ -1,7 +1,3 @@
-header {
-  font-size: 20px;
-}
-
 tab, tabs {
   display: block;
 }

lib/components/ResponsesSamples/responses-samples.html

@@ -1,5 +1,5 @@
-<header> Responses samples </header>
-<tabs>
+<small *ng-if="!data.responses.length"> No samples </small>
+<tabs *ng-if="data.responses.length">
   <tab *ng-for="#response of data.responses" [tab-title]="response.code">
     <schema-sample [pointer]="response.pointer"><schema-sample>
   </tab>

lib/components/SchemaSample/schema-sample.js

@@ -21,12 +21,20 @@ export class SchemaSample extends BaseComponent {
     if (!this.componentSchema || !this.pointer) {
       return;
     }
+    let base = {};
     let sample;
-    if (this.componentSchema.examples && this.componentSchema.examples['application/json']) {
-      sample = this.componentSchema.examples['application/json'];
+
+    // got pointer not directly to the schema but e.g. to response obj
+    if (this.componentSchema.schema) {
+      base = this.componentSchema;
+      this.componentSchema = this.componentSchema.schema;
+    }
+
+    if (base.examples && base.examples['application/json']) {
+      sample = base.examples['application/json'];
     } else {
-      this.dereference(this.componentSchema.schema);
-      sample = SchemaSampler.instantiate(this.componentSchema.schema);
+      this.dereference(this.componentSchema);
+      sample = SchemaSampler.instantiate(this.componentSchema);
     }
 
     this.data.sample = sample;

lib/utils/SchemaManager.js

@@ -48,6 +48,43 @@ export class SchemaManager {
     return res;
   }
 
+  resolveRefs(obj) {
+    Object.keys(obj).forEach(key => {
+      if (obj[key].$ref) {
+        obj[key] = this.byPointer(obj[key].$ref);
+      }
+    });
+    return obj;
+  }
+
+  getMethodParams(methodPtr, resolveRefs) {
+    /* 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;
+      });
+    }
+
+    //get path params
+    let ptr = JsonPointer.dirName(methodPtr, 2) + '/parameters';
+    let pathParams = this.byPointer(ptr);
+    if (Array.isArray(pathParams)) {
+      pathParams = injectPointers(pathParams, ptr);
+    } else if (pathParams && pathParams.$ref) {
+      pathParams = injectPointers(this.byPointer(pathParams.$ref), pathParams.$ref);
+    } else {
+      pathParams = [];
+    }
+
+    let methodParams = injectPointers(this.byPointer(methodPtr), methodPtr) || [];
+    if (resolveRefs) {
+      methodParams = this.resolveRefs(methodParams);
+    }
+    return methodParams.concat(pathParams);
+  }
+
   /* returns ES6 Map */
   buildMenuTree() {
     let tag2MethodMapping = new Map();