Group operation parameters by type (fixes #23)

lib/components/ParamsList/params-list.html

@@ -1,22 +1,25 @@
 <h2 class="param-list-header" *ngIf="data.params.length"> Parameters </h2>
-<div class="params-wrap">
+<template ngFor [ngForOf]="data.params" #paramType="$implicit">
-  <div *ngFor="#param of data.params" class="param">
+  <header class="paramType"> {{paramType.place}} Parameters </header>
-      <div class="param-name">
+  <div class="params-wrap">
-        <span class="param-name-content"> {{param.name}} </span>
+    <div *ngFor="#param of paramType.params" class="param">
-      </div>
+        <div class="param-name">
-      <div class="param-info">
+          <span class="param-name-content"> {{param.name}} </span>
-        <div>
-          <span class="param-type {{param.type}}" [ngClass]="{'with-hint': param._displayTypeHint}"
-          title="{{param._displayTypeHint}}"> {{param._displayType}} {{param._displayFormat}}</span>
-          <span *ngIf="param.required" class="param-required">Required</span>
-          <div *ngIf="param.enum" class="param-enum">
-            <span *ngFor="#enumItem of param.enum" class="enum-value {{enumItem.type}}"> {{enumItem.val | json}} </span>
-          </div>
         </div>
-        <div class="param-description" innerHtml="{{param.description | marked}}"></div>
+        <div class="param-info">
-      </div>
+          <div>
+            <span class="param-type {{param.type}}" [ngClass]="{'with-hint': param._displayTypeHint}"
+            title="{{param._displayTypeHint}}"> {{param._displayType}} {{param._displayFormat}}</span>
+            <span *ngIf="param.required" class="param-required">Required</span>
+            <div *ngIf="param.enum" class="param-enum">
+              <span *ngFor="#enumItem of param.enum" class="enum-value {{enumItem.type}}"> {{enumItem.val | json}} </span>
+            </div>
+          </div>
+          <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);
+    let paramsList = this.schemaMgr.getMethodParams(this.pointer, true);
-    this.sortParams(params);
 
-    // temporary handle body param
+    paramsList = paramsList.map((paramData) => {
-    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) => {
       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) {
+  orderParams(params) {
-    const sortOrder = {
+    let res = {};
-      'path' : 0,
+    params.forEach((param) => safePush(res, param.in, param));
-      'query' : 10,
+    return res;
-      'formData' : 20,
-      'header': 40,
-      'body': 50
-    };
-
-    params.sort((a, b) => sortOrder[a.in] - sortOrder[b.in]);
   }
 }

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 {