Group operation parameters by type (fixes #23)

lib/components/ParamsList/params-list.html

@@ -1,6 +1,8 @@
 <h2 class="param-list-header" *ngIf="data.params.length"> Parameters </h2>
-<div class="params-wrap">
-  <div *ngFor="#param of data.params" class="param">
+<template ngFor [ngForOf]="data.params" #paramType="$implicit">
+  <header class="paramType"> {{paramType.place}} Parameters </header>
+  <div class="params-wrap">
+    <div *ngFor="#param of paramType.params" class="param">
         <div class="param-name">
           <span class="param-name-content"> {{param.name}} </span>
         </div>
@@ -16,7 +18,8 @@
           <div class="param-description" innerHtml="{{param.description | marked}}"></div>
         </div>
     </div>
-</div>
+  </div>
+</template>
 
 <div *ngIf="data.bodyParam">
   <h2 class="param-list-header" *ngIf="data.bodyParam"> Request Body </h2>

lib/components/ParamsList/params-list.js

@@ -4,6 +4,11 @@ import {RedocComponent, BaseComponent} from '../base';
 import JsonSchema from '../JsonSchema/json-schema';
 import JsonSchemaLazy from '../JsonSchema/json-schema-lazy';
 
+function safePush(obj, prop, item) {
+  if (!obj[prop]) obj[prop] = [];
+  obj[prop].push(item);
+}
+
 @RedocComponent({
   selector: 'params-list',
   templateUrl: './lib/components/ParamsList/params-list.html',
@@ -17,34 +22,36 @@ export default class ParamsList extends BaseComponent {
 
   prepareModel() {
     this.data = {};
-    let params = this.schemaMgr.getMethodParams(this.pointer, true);
-    this.sortParams(params);
+    let paramsList = this.schemaMgr.getMethodParams(this.pointer, true);
 
-    // temporary handle body param
-    if (params.length && params[params.length - 1].in === 'body') {
-      let bodyParam = params.pop();
-      bodyParam.pointer = bodyParam._pointer;
-      this.data.bodyParam = bodyParam;
-    }
-
-    params = params.map((paramData) => {
+    paramsList = paramsList.map((paramData) => {
       let propPointer = paramData._pointer;
       return JsonSchema.injectPropData(paramData, paramData.name, propPointer);
     });
 
-    this.data.noParams = !(params.length || this.data.bodyParam);
+    let paramsMap = this.orderParams(paramsList);
+
+    if (paramsMap.body && paramsMap.body.length) {
+      let bodyParam = paramsMap.body[0];
+      bodyParam.pointer = bodyParam._pointer;
+      this.data.bodyParam = bodyParam;
+      delete paramsMap.body;
+    }
+
+    this.data.noParams = !(Object.keys(paramsMap).length || this.data.bodyParam);
+
+    let paramsPlaces = ['path', 'query', 'formData', 'header', 'body'];
+    let params = [];
+    paramsPlaces.forEach(place => {
+      if (paramsMap[place] && paramsMap[place].length)
+        params.push({place: place, params: paramsMap[place]});
+    });
     this.data.params = params;
   }
 
-  sortParams(params) {
-    const sortOrder = {
-      'path' : 0,
-      'query' : 10,
-      'formData' : 20,
-      'header': 40,
-      'body': 50
-    };
-
-    params.sort((a, b) => sortOrder[a.in] - sortOrder[b.in]);
+  orderParams(params) {
+    let res = {};
+    params.forEach((param) => safePush(res, param.in, param));
+    return res;
   }
 }

lib/components/ParamsList/params-list.scss

@@ -9,10 +9,15 @@
 
 @import '../JsonSchema/json-schema-common';
 
+header.paramType {
+  margin: 10px 0;
+  text-transform: capitalize;
+}
 
 // paramters can't be multilevel so table representation works for it without javascript
 .params-wrap {
   display: table;
+  width: 100%;
 }
 
 .param-name {
@@ -22,6 +27,7 @@
 
 .param-info {
   display: table-cell;
+  width: 100%;
 }
 
 .param {