feat: now show response headers in documentation

koumoul-dev · Aug 14, 2018 · 70c2d3f · 70c2d3f
1 parent f04d64e
commit 70c2d3f
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 5 deletions.
diff --git a/src/OpenApi.vue b/src/OpenApi.vue
@@ -55,9 +55,9 @@
         <md-tabs md-right class="md-transparent" style="margin-top:-54px">
           <md-tab md-label="Documentation">
             <h4 v-if="(selectedEntry.parameters && selectedEntry.parameters.length) || selectedEntry.requestBody">Parameters</h4>
-            <parameters-table :selectedEntry="selectedEntry" :openSchemaDialog="openSchemaDialog" :openExamplesDialog="openExamplesDialog"></parameters-table>
+            <parameters-table :selectedEntry="selectedEntry" :openSchemaDialog="openSchemaDialog" :openExamplesDialog="openExamplesDialog" />
             <h4>Responses</h4>
-            <responses-table :selectedEntry="selectedEntry" :openSchemaDialog="openSchemaDialog" :openExamplesDialog="openExamplesDialog"></responses-table>
+            <responses-table :selectedEntry="selectedEntry" :openSchemaDialog="openSchemaDialog" :openExamplesDialog="openExamplesDialog" :openFieldsDialog="openFieldsDialog" />
           </md-tab>
           <md-tab v-if="api.servers && api.servers.length" md-label="Make request">
             <md-layout md-row>
@@ -116,6 +116,41 @@
     </md-dialog-actions>
   </md-dialog>
 
+  <md-dialog ref="fieldsDialog" class="fields-dialog">
+    <md-dialog-title>Fields</md-dialog-title>
+
+    <md-dialog-content>
+       <md-table>
+         <md-table-header>
+           <md-table-row>
+             <md-table-head>Name</md-table-head>
+             <md-table-head>Description</md-table-head>
+             <md-table-head>Type</md-table-head>
+             <md-table-head>Values</md-table-head>
+           </md-table-row>
+         </md-table-header>
+
+         <md-table-body>
+           <md-table-row v-for="(field, name) in currentFields" :key="name">
+             <md-table-cell>{{name}}</md-table-cell>
+             <md-table-cell v-html="marked(field.description || '')"></md-table-cell>
+             <md-table-cell v-if="field.schema.type !== 'array'">{{field.schema.type}}</md-table-cell>
+             <md-table-cell v-if="field.schema.type === 'array'">{{field.schema.items.type}} array</md-table-cell>
+             <md-table-cell v-if="field.schema.type !== 'array' && field.schema.enum">{{field.schema.enum.join(', ')}}</md-table-cell>
+             <md-table-cell v-if="field.schema.type === 'array'">
+               <div style="overflow-y:scroll;max-height:200px;">{{(field.schema.items.enum || []).join(', ')}}</div>
+             </md-table-cell>
+             <md-table-cell v-else />
+           </md-table-row>
+         </md-table-body>
+       </md-table>
+    </md-dialog-content>
+
+    <md-dialog-actions>
+      <md-button @click.native="$refs.fieldsDialog.close()">ok</md-button>
+    </md-dialog-actions>
+  </md-dialog>
+
 </div>
 </template>
 
@@ -171,6 +206,7 @@ export default {
     selectedEntry: null,
     currentSchema: ' ',
     currentExamples: {},
+    currentFields: {},
     currentRequest: {
       contentType: '',
       body: '',
@@ -242,6 +278,10 @@ export default {
       this.currentExamples = examples
       this.$refs.examplesDialog.open()
     },
+    openFieldsDialog(fields) {
+      this.currentFields = fields
+      this.$refs.fieldsDialog.open()
+    },
     request() {
       this.currentResponse = null
       fetch(this.currentRequest, this.selectedEntry, this.api).then(res => {

diff --git a/src/ResponsesTable.vue b/src/ResponsesTable.vue
@@ -6,6 +6,7 @@
         <md-table-head>Response</md-table-head>
         <md-table-head>Type</md-table-head>
         <md-table-head>Schema</md-table-head>
+        <md-table-head>Headers</md-table-head>
         <md-table-head>Examples</md-table-head>
       </md-table-row>
     </md-table-header>
@@ -14,19 +15,28 @@
       <md-table-row v-for="(response, code) in selectedEntry.responses" :key="code">
         <md-table-cell>{{code}}</md-table-cell>
         <md-table-cell v-html="marked(response.description || '')"></md-table-cell>
-        <md-table-cell v-if="!response.content"></md-table-cell>
+
         <md-table-cell v-if="response.content">
           <md-select v-model="response.selectedType">
             <md-option v-for="(value, content) in response.content" :key="content" :value="content">{{content}}</md-option>
           </md-select>
         </md-table-cell>
-        <md-table-cell v-if="!response.content || !response.content[response.selectedType].schema"></md-table-cell>
+        <md-table-cell v-else />
+
         <md-table-cell v-if="response.content && response.content[response.selectedType].schema">
           <md-icon class="md-accent" @click.native="openSchemaDialog(response.content[response.selectedType].schema)" style="cursor:pointer">open_in_new</md-icon>
         </md-table-cell>
+        <md-table-cell v-else />
+
+        <md-table-cell v-if="response.headers">
+          <md-icon class="md-accent" @click.native="openFieldsDialog(response.headers)" style="cursor:pointer">open_in_new</md-icon>
+        </md-table-cell>
+        <md-table-cell v-else />
+
         <md-table-cell>
           <md-icon class="md-accent" v-if="examples(response)" @click.native="openExamplesDialog(examples(response))" style="cursor:pointer">open_in_new</md-icon>
         </md-table-cell>
+
       </md-table-row>
     </md-table-body>
   </md-table>
@@ -36,7 +46,7 @@
 import marked from 'marked'
 
 export default {
-  props: [ 'selectedEntry', 'openSchemaDialog', 'openExamplesDialog' ],
+  props: [ 'selectedEntry', 'openSchemaDialog', 'openExamplesDialog', 'openFieldsDialog'],
   methods: {
     marked,
     examples(response) {