add 2 attributes schema-expand-level and schema-description-expanded

Author: mrin9

docs/api.html

@@ -119,27 +119,27 @@ <h2> Attributes</h2>
         <table class="m-table">
           <tr>
             <td class=" attr-col mono-bold right">nav-bg-color </td>
-            <td class="gray"> <span class='bold dark-gray'>Navigation bar's background color</span></span> </td>
+            <td class="gray"> Navigation bar's background color </td>
             <td class='default-col'></td>
           </tr>          
           <tr>
             <td class=" attr-col mono-bold right">nav-text-color </td>
-            <td class="gray"> <span class='bold dark-gray'>Navigation bar's Text color</span></span> </td>
+            <td class="gray"> Navigation bar's Text color </td>
             <td class='default-col'></td>
           </tr>          
           <tr>
             <td class=" attr-col mono-bold right">nav-hover-bg-color </td>
-            <td class="gray"> <span class='bold dark-gray'>background color of the navigation item on mouse-over</span></span> </td>
+            <td class="gray">background color of the navigation item on mouse-over </td>
             <td class='default-col'></td>
           </tr>          
           <tr>
             <td class=" attr-col mono-bold right">nav-hover-text-color </td>
-            <td class="gray"> <span class='bold dark-gray'>text color of the navigation item on mouse-over</span></span> </td>
+            <td class="gray"> text color of the navigation item on mouse-over </td>
             <td class='default-col'></td>
           </tr>          
           <tr>
             <td class=" attr-col mono-bold right">nav-accent-color </td>
-            <td class="gray"> <span class='bold dark-gray'>Current selected item indicator</span></span> </td>
+            <td class="gray"> Current selected item indicator</td>
             <td class='default-col'></td>
           </tr>          
         </table>
@@ -155,25 +155,36 @@ <h2> Attributes</h2>
             </td>
             <td class='default-col'>row</td>
           </tr>
-          <tr>
-            <td class="mono-bold right">schema-style </td>
-            <td class="gray"> <span class='bold dark-gray'>Allowed:<span class='blue'> tree, table</span></span> - Two different ways to display object-schemas in the responses and request bodies </td>
-            <td>tree</td>
-          </tr>
           <tr>
             <td class="mono-bold right">render-style </td>
-            <td class="gray"><span class='bold dark-gray'>Allowed:<span class='blue'> read, view</span></span> - determines display of api-docs. Currently there are two modes supported. 
-              'read' - more suitable for reading and 'view' more frendly for quick exploring </td>
+            <td class="gray"><span class='bold dark-gray'>Allowed:<span class='blue'> read, view</span></span> - 
+              determines display of api-docs. Currently there are two modes supported. 
+              'read' - more suitable for reading and 'view' more frendly for quick exploring 
+            </td>
             <td>view</td>
           </tr>
           <tr>
-            <td class="mono-bold right">api-list-style</td>
+            <td class="mono-bold right">schema-style </td>
+            <td class="gray"> <span class='bold dark-gray'>Allowed:<span class='blue'> tree, table</span></span> - 
+              Two different ways to display object-schemas in the responses and request bodies 
+            </td>
+            <td>tree</td>
+          </tr>
+          <tr>
+            <td class="mono-bold right">schema-expand-level </td>
             <td class="gray">
-              <span class='bold dark-gray'>Allowed:<span class='blue'> group-by-tag, group-by-path</span></span> -
-               This controls how the API litings are grouped. this can be changed from the UI too (applied only in view mode)
+              Schema's are expanded by default, use this attribute to controll how many levels in the schema should be expanded
             </td>
-            <td>group-by-tag</td>
+            <td>999</td>
           </tr>
+          <tr>
+            <td class="mono-bold right">schema-description-expanded </td>
+            <td class="gray"> <span class='bold dark-gray'>Allowed:<span class='blue'> true, false</span></span> - 
+              Constraint and descriptions information of fields in the schema are collapsed to show only the first line. 
+              Set it to true if you want them to fully expanded 
+            </td>
+            <td>false</td>
+          </tr>  
           <tr>
             <td class="mono-bold right">default-schema-tab</td>
             <td class="gray">
@@ -183,6 +194,14 @@ <h2> Attributes</h2>
             </td>
             <td>model</td>
           </tr>
+          <tr>
+            <td class="mono-bold right">api-list-style</td>
+            <td class="gray">
+              <span class='bold dark-gray'>Allowed:<span class='blue'> group-by-tag, group-by-path</span></span> -
+               This controls how the API litings are grouped. this can be changed from the UI too (applied only in view mode)
+            </td>
+            <td>group-by-tag</td>
+          </tr>
         </table>
 
         <div class='table-title'> Hide/Show Sections </div>

src/components/api-request.js

@@ -15,6 +15,44 @@ import '@/components/schema-tree';
 import '@/components/tag-input';
 
 export default class ApiRequest extends LitElement {
+  constructor() {
+    super();
+    this.responseMessage = '';
+    this.responseStatus = 'success';
+    this.responseHeaders = '';
+    this.responseText = '';
+    this.responseUrl = '';
+    this.curlSyntax = '';
+    this.activeResponseTab = 'response'; // allowed values: response, headers, curl
+  }
+
+  static get properties() {
+    return {
+      apiKeyName: { type: String, attribute: 'api-key-name' },
+      apiKeyValue: { type: String, attribute: 'api-key-value' },
+      apiKeyLocation: { type: String, attribute: 'api-key-location' },
+      selectedServer: { type: String, attribute: 'selected-server' },
+      method: { type: String },
+      path: { type: String },
+      parameters: { type: Array },
+      request_body: { type: Object },
+      parser: { type: Object },
+      accept: { type: String },
+      responseMessage: { type: String, attribute: false },
+      responseText: { type: String, attribute: false },
+      responseHeaders: { type: String, attribute: false },
+      responseStatus: { type: String, attribute: false },
+      responseUrl: { type: String, attribute: false },
+      allowTry: { type: String, attribute: 'allow-try' },
+      renderStyle: { type: String, attribute: 'render-style' },
+      schemaStyle: { type: String, attribute: 'schema-style' },
+      activeSchemaTab: { type: String, attribute: 'active-schema-tab' },
+      schemaExpandLevel: { type: Number, attribute: 'schema-expand-level' },
+      schemaDescriptionExpanded: { type: String, attribute: 'schema-description-expanded' },
+      activeResponseTab: { type: String }, // internal tracking of response-tab not exposed as a attribute
+    };
+  }
+
   render() {
     return html`
     ${TableStyles}
@@ -87,42 +125,6 @@ export default class ApiRequest extends LitElement {
     `;
   }
 
-  constructor() {
-    super();
-    this.responseMessage = '';
-    this.responseStatus = 'success';
-    this.responseHeaders = '';
-    this.responseText = '';
-    this.responseUrl = '';
-    this.curlSyntax = '';
-    this.activeResponseTab = 'response'; // allowed values: response, headers, curl
-  }
-
-  static get properties() {
-    return {
-      apiKeyName: { type: String, attribute: 'api-key-name' },
-      apiKeyValue: { type: String, attribute: 'api-key-value' },
-      apiKeyLocation: { type: String, attribute: 'api-key-location' },
-      selectedServer: { type: String, attribute: 'selected-server' },
-      method: { type: String },
-      path: { type: String },
-      parameters: { type: Array },
-      request_body: { type: Object },
-      parser: { type: Object },
-      accept: { type: String },
-      responseMessage: { type: String, attribute: false },
-      responseText: { type: String, attribute: false },
-      responseHeaders: { type: String, attribute: false },
-      responseStatus: { type: String, attribute: false },
-      responseUrl: { type: String, attribute: false },
-      allowTry: { type: String, attribute: 'allow-try' },
-      renderStyle: { type: String, attribute: 'render-style' },
-      schemaStyle: { type: String, attribute: 'schema-style' },
-      activeSchemaTab: { type: String, attribute: 'active-schema-tab' },
-      activeResponseTab: { type: String }, // internal tracking of response-tab not exposed as a attribute
-    };
-  }
-
   /* eslint-disable indent */
   inputParametersTemplate(paramType) {
     let title = '';
@@ -438,13 +440,17 @@ export default class ApiRequest extends LitElement {
                     style = 'display: ${(shortMimeTypes[k] === 'json' ? 'block' : 'none')};'
                     render-style = '${this.renderStyle}'
                     .data = '${reqSchemaTree[shortMimeTypes[k]]}'
+                    schema-expand-level = "${this.schemaExpandLevel}"
+                    schema-description-expanded = "${this.schemaDescriptionExpanded}"
                   > </schema-table>`
                 : html`
                   <schema-tree 
                     class = '${shortMimeTypes[k]}'
                     style = 'display: ${(shortMimeTypes[k] === 'json' ? 'block' : 'none')};'
                     render-style = '${this.renderStyle}'
                     .data = '${reqSchemaTree[shortMimeTypes[k]]}'
+                    schema-expand-level = "${this.schemaExpandLevel}"
+                    schema-description-expanded = "${this.schemaDescriptionExpanded}"
                   > </schema-tree>`
               }
             `)}

src/components/api-response.js

@@ -19,6 +19,20 @@ export default class ApiResponse extends LitElement {
     this.activeSchemaTab = 'model';
   }
 
+  static get properties() {
+    return {
+      responses: { type: Object },
+      parser: { type: Object },
+      schemaStyle: { type: String, attribute: 'schema-style' },
+      renderStyle: { type: String, attribute: 'render-style' },
+      selectedStatus: { type: String },
+      selectedMimeType: { type: String },
+      activeSchemaTab: { type: String, attribute: 'active-schema-tab' },
+      schemaExpandLevel: { type: Number, attribute: 'schema-expand-level' },
+      schemaDescriptionExpanded: { type: String, attribute: 'schema-description-expanded' },
+    };
+  }
+
   render() {
     return html`
     ${FontStyles}
@@ -72,18 +86,6 @@ export default class ApiResponse extends LitElement {
     `;
   }
 
-  static get properties() {
-    return {
-      responses: { type: Object },
-      parser: { type: Object },
-      schemaStyle: { type: String, attribute: 'schema-style' },
-      renderStyle: { type: String, attribute: 'render-style' },
-      selectedStatus: { type: String },
-      selectedMimeType: { type: String },
-      activeSchemaTab: { type: String, attribute: 'active-schema-tab' },
-    };
-  }
-
   /* eslint-disable indent */
   responseTemplate() {
     if (!this.responses) { return ''; }
@@ -233,12 +235,16 @@ export default class ApiResponse extends LitElement {
             class = 'border'
             render-style = '${this.renderStyle}'
             .data = '${mimeRespDetails.schemaTree}'
+            schema-expand-level = "${this.schemaExpandLevel}"
+            schema-description-expanded = "${this.schemaDescriptionExpanded}"
           > </schema-tree> `
         : html`
           <schema-tree
             class = 'border'
             render-style = '${this.renderStyle}'
             .data = '${mimeRespDetails.schemaTree}'
+            schema-expand-level = "${this.schemaExpandLevel}"
+            schema-description-expanded = "${this.schemaDescriptionExpanded}"
           > </schema-tree>`
       }`;
   }

src/components/end-point.js

@@ -6,6 +6,28 @@ import '@/components/api-request';
 import '@/components/api-response';
 
 export default class EndPoint extends LitElement {
+  constructor() {
+    super();
+    this.accept = '';
+  }
+
+  static get properties() {
+    return {
+      apiKeyName: { type: String, attribute: 'api-key-name' },
+      apiKeyValue: { type: String, attribute: 'api-key-value' },
+      apiKeyLocation: { type: String, attribute: 'api-key-location' },
+      selectedServer: { type: String, attribute: 'selected-server' },
+      layout: { type: String },
+      path: { type: Object },
+      allowTry: { type: String, attribute: 'allow-try' },
+      renderStyle: { type: String, attribute: 'render-style' },
+      schemaStyle: { type: String, attribute: 'schema-style' },
+      defaultSchemaTab: { type: String, attribute: 'default-schema-tab' },
+      schemaExpandLevel: { type: Number, attribute: 'schema-expand-level' },
+      schemaDescriptionExpanded: { type: String, attribute: 'schema-description-expanded' },
+    };
+  }
+
   /* eslint-disable indent */
   render() {
     return html`
@@ -81,39 +103,23 @@ export default class EndPoint extends LitElement {
           allow-try = "${this.allowTry}"
           accept = "${this.accept}"
           schema-style = "${this.schemaStyle}" 
+          schema-expand-level = "${this.schemaExpandLevel}"
+          schema-description-expanded = "${this.schemaDescriptionExpanded}"
         > </api-request>
 
         <api-response  
           class="response" 
           active-schema-tab = "${this.defaultSchemaTab}" 
           schema-style="${this.schemaStyle}"
           .responses="${this.path.responses}"
+          schema-expand-level = "${this.schemaExpandLevel}"
+          schema-description-expanded = "${this.schemaDescriptionExpanded}"
         > </api-response>
       </div>
     </div>`;
   }
   /* eslint-enable indent */
 
-  constructor() {
-    super();
-    this.accept = '';
-  }
-
-  static get properties() {
-    return {
-      apiKeyName: { type: String, attribute: 'api-key-name' },
-      apiKeyValue: { type: String, attribute: 'api-key-value' },
-      apiKeyLocation: { type: String, attribute: 'api-key-location' },
-      selectedServer: { type: String, attribute: 'selected-server' },
-      layout: { type: String },
-      path: { type: Object },
-      allowTry: { type: String, attribute: 'allow-try' },
-      renderStyle: { type: String, attribute: 'render-style' },
-      schemaStyle: { type: String, attribute: 'schema-style' },
-      defaultSchemaTab: { type: String, attribute: 'default-schema-tab' },
-    };
-  }
-
   toggleExpand() {
     if (this.path.expanded) {
       this.path.expanded = false; // collapse

src/components/end-points-expanded.js

@@ -6,6 +6,24 @@ import '@/components/api-response';
 import FontStyles from '@/styles/font-styles';
 
 export default class EndPointsExpanded extends LitElement {
+  static get properties() {
+    return {
+      apiKeyName: { type: String, attribute: 'api-key-name' },
+      apiKeyValue: { type: String, attribute: 'api-key-value' },
+      apiKeyLocation: { type: String, attribute: 'api-key-location' },
+      selectedServer: { type: String, attribute: 'selected-server' },
+      layout: { type: String },
+      paths: { type: Object },
+      matchPaths: { type: String, attribute: 'match-paths' },
+      allowTry: { type: String, attribute: 'allow-try' },
+      renderStyle: { type: String, attribute: 'render-style' },
+      schemaStyle: { type: String, attribute: 'schema-style' },
+      defaultSchemaTab: { type: String, attribute: 'default-schema-tab' },
+      schemaExpandLevel: { type: Number, attribute: 'schema-expand-level' },
+      schemaDescriptionExpanded: { type: String, attribute: 'schema-description-expanded' },
+    };
+  }
+
   /* eslint-disable indent */
   render() {
     return html`
@@ -66,13 +84,17 @@ export default class EndPointsExpanded extends LitElement {
           render-style="${this.renderStyle}" 
           schema-style = "${this.schemaStyle}"
           active-schema-tab = "${this.defaultSchemaTab}"
+          schema-expand-level = "${this.schemaExpandLevel}"
+          schema-description-expanded = "${this.schemaDescriptionExpanded}"
         > </api-request>
         <api-response
           class = 'response-panel'
           schema-style="${this.schemaStyle}"
           render-style="${this.renderStyle}"
-          active-schema-tab = "${this.defaultSchemaTab}" 
+          active-schema-tab = "${this.defaultSchemaTab}"
           .responses="${path.responses}"
+          schema-expand-level = "${this.schemaExpandLevel}"
+          schema-description-expanded = "${this.schemaDescriptionExpanded}"
         > </api-response>
       </div>
     </div>
@@ -89,23 +111,6 @@ export default class EndPointsExpanded extends LitElement {
     });
     this.dispatchEvent(added);
   }
-
-
-  static get properties() {
-    return {
-      apiKeyName: { type: String, attribute: 'api-key-name' },
-      apiKeyValue: { type: String, attribute: 'api-key-value' },
-      apiKeyLocation: { type: String, attribute: 'api-key-location' },
-      selectedServer: { type: String, attribute: 'selected-server' },
-      layout: { type: String },
-      paths: { type: Object },
-      matchPaths: { type: String, attribute: 'match-paths' },
-      allowTry: { type: String, attribute: 'allow-try' },
-      renderStyle: { type: String, attribute: 'render-style' },
-      schemaStyle: { type: String, attribute: 'schema-style' },
-      defaultSchemaTab: { type: String, attribute: 'default-schema-tab' },
-    };
-  }
 }
 // Register the element with the browser
 customElements.define('end-points-expanded', EndPointsExpanded);