Added simple paramaters list

lib/components/Method/method.html

@@ -6,3 +6,4 @@
 <p class="method-summary">
   {{data.methodInfo.description}}
 </p>
+<params-list pointer="{{pointer}}/parameters"> </params-list>

lib/components/Method/method.js

@@ -2,11 +2,13 @@
 
 import {JsonPointer} from '../../utils/JsonPointer';
 import {RedocComponent, BaseComponent} from '../base';
+import {ParamsList} from '../ParamsList/params-list';
 
 @RedocComponent({
   selector: 'method',
   templateUrl: './lib/components/Method/method.html',
-  styleUrls: ['./lib/components/Method/method.css']
+  styleUrls: ['./lib/components/Method/method.css'],
+  directives: [ParamsList]
 })
 export class Method extends BaseComponent {
   constructor(schemaMgr) {

lib/components/MethodsList/methods-list.css

@@ -0,0 +1,5 @@
+method {
+  padding-bottom: 50px;
+  display: block;
+  border-bottom: 1px solid silver;
+}

lib/components/MethodsList/methods-list.js

@@ -7,6 +7,7 @@ import {Method} from '../Method/method';
 @RedocComponent({
   selector: 'methods-list',
   templateUrl: './lib/components/MethodsList/methods-list.html',
+  styleUrls: ['./lib/components/MethodsList/methods-list.css'],
   directives: [Method]
 })
 export class MethodsList extends BaseComponent {

lib/components/ParamsList/params-list.css

@@ -0,0 +1,24 @@
+h4 {
+  font-size: 16px;
+  font-weight: 200;
+  color: black;
+}
+
+.param {
+  padding: 10px 0;
+}
+
+.param > span {
+  padding: 5px 10px;
+  vertical-align: middle;
+}
+
+.param-name {
+  font-weight: bold;
+}
+
+.param-type {
+  padding: 2px 10px;
+  background-color: #EAEAEA;
+  border: silver 1px solid;
+}

lib/components/ParamsList/params-list.html

@@ -0,0 +1,18 @@
+<h4> Parameters </h4>
+<small class="no-params" *ng-if="data.noParams"> No parameters </small>
+<div *ng-for="#param of data.params">
+  <div class="param">
+    <span class="param-name">{{param.name}}</span>
+    <span class="param-type" [ng-class]="param.type">{{param.type}}</span>
+    <span class="param-description">{{param.description}}</span>
+  </div>
+</div>
+<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"
+    [ng-class]="data.bodyParam.type">{{data.bodyParam.type}}</span>
+  <span class="param-description" *ng-if="data.bodyParamdescription" >
+    {{data.bodyParam.description}}
+  </span>
+  <span> <em>Body Schema would be somewhere here (unimplemented yet) </em></span>
+</div>

lib/components/ParamsList/params-list.js

@@ -0,0 +1,59 @@
+'use strict';
+
+import {JsonPointer} from '../../utils/JsonPointer';
+import {RedocComponent, BaseComponent} from '../base';
+
+@RedocComponent({
+  selector: 'params-list',
+  templateUrl: './lib/components/ParamsList/params-list.html',
+  styleUrls: ['./lib/components/ParamsList/params-list.css']
+})
+export class ParamsList extends BaseComponent {
+  constructor(schemaMgr) {
+    super(schemaMgr);
+  }
+
+  prepareModel() {
+    this.data = {};
+    let params = this.componentSchema;
+    let pathParams = this.getPathParams();
+    if (pathParams) params.concat(pathParams);
+    this.sortParams(params);
+
+    // temporary hanlde 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)})`;
+      this.data.bodyParam = bodyParam;
+    }
+
+    this.data.noParams = !(params.length || this.data.bodyParam);
+    this.data.params = params;
+  }
+
+  getPathParams() {
+    let ptr = JsonPointer.dirName(this.pointer, 2) + '/parameters';
+    let pathParams = this.schemaMgr.byPointer(ptr);
+    if (Array.isArray(pathParams)) {
+      return pathParams;
+    }
+    if (pathParams && pathParams.$ref) {
+      return this.schemaMgr.byPointer(pathParams.$ref);
+    }
+
+    return [];
+  }
+
+  sortParams(params) {
+    const sortOrder = {
+      'path' : 0,
+      'query' : 10,
+      'formData' : 20,
+      'header': 40,
+      'body': 50
+    };
+
+    params.sort((a, b) => sortOrder[a] - sortOrder[b]);
+  }
+}

lib/utils/JsonPointer.js

@@ -5,7 +5,6 @@ import JsonPointerLib from 'json-pointer';
  * Wrapper for JsonPointer. Provides common operations
  */
 export class JsonPointer extends JsonPointerLib {
-
   /**
    * returns last JsonPointer token
    * if level > 1 returns levels last (second last/third last)
@@ -19,6 +18,31 @@ export class JsonPointer extends JsonPointerLib {
      let tokens = JsonPointer.parse(pointer);
      return tokens[tokens.length - (level)];
    }
-}
 
+   /**
+    * returns dirname of pointer
+    * if level > 1 returns corresponding dirname in the hierarchy
+    * @example
+    * // returns /path/0
+    * JsonPointerHelper.dirName('/path/0/subpath')
+    * // returns /path
+    * JsonPointerHelper.dirName('/path/foo/subpath', 2)
+    */
+   static dirName(pointer, level=1) {
+     let tokens = JsonPointer.parse(pointer);
+     return JsonPointer.compile(tokens.slice(0, tokens.length - level));
+   }
+
+   /**
+    * overridden JsonPointer original parse to take care of prefixing '#' symbol
+    * that is not valid JsonPointer
+    */
+   static parse(pointer) {
+     let ptr = pointer;
+     if (ptr.charAt(0) === '#') {
+       ptr = ptr.substring(1);
+     }
+     return JsonPointerLib.parse(ptr);
+   }
+}
 export default JsonPointer;

lib/utils/SchemaManager.js

@@ -40,7 +40,11 @@ export class SchemaManager {
   }
 
   byPointer(pointer) {
-    return JsonPointer.get(this._schema, pointer);
+    let res = null;
+    try {
+      res = JsonPointer.get(this._schema, pointer);
+    } catch(e)  {/*skip*/ }
+    return res;
   }
 
 }