Skip to content

Commit

Permalink
Refactored Response View
Browse files Browse the repository at this point in the history
  • Loading branch information
@mrin9
mrin9 committed Dec 4, 2018
1 parent a607fa2 commit 75c3ad4
Show file tree
Hide file tree
Showing 11 changed files with 559 additions and 346 deletions.
45 changes: 45 additions & 0 deletions .yarnclean
View file
@@ -0,0 +1,45 @@
# test directories
__tests__
test
tests
powered-test

# asset directories
docs
doc
website
images
assets

# examples
example
examples

# code coverage directories
coverage
.nyc_output

# build scripts
Makefile
Gulpfile.js
Gruntfile.js

# configs
appveyor.yml
circle.yml
codeship-services.yml
codeship-steps.yml
wercker.yml
.tern-project
.gitattributes
.editorconfig
.*ignore
.eslintrc
.jshintrc
.flowconfig
.documentup.json
.yarn-metadata.json
.travis.yml

# misc
*.md
3 changes: 2 additions & 1 deletion package.json
View file
Expand Up @@ -10,12 +10,13 @@
"axios": "^0.18.0",
"element-ui": "^2.4.11",
"swagger-parser": "^6.0.2",
"swagger2openapi": "^3.2.14",
"vue": "^2.5.17",
"vue-i18n": "^8.3.2",
"vue-multipane": "^0.9.5",
"vue2-collapse": "^1.0.15",
"vue-router": "^3.0.1",
"vue-slideout-panel": "^3.0.0",
"vue2-collapse": "^1.0.15",
"vuex": "^3.0.1",
"vuex-persist": "^2.0.0"
},
Expand Down
3 changes: 2 additions & 1 deletion src/assets/styles/index.scss
View file
Expand Up @@ -55,13 +55,14 @@ input, textarea, select, button {
.sw-section-heading{
font-size: 14px;
font-weight:bold;
margin: 16px 0 8px 0;
margin: 16px 0 4px 0;
}

span.sw-section-heading{
display:inline-block;
margin-right:16px;
}

.sw-gray-text{
font-size: 12px;
line-height: 12px;
Expand Down
13 changes: 7 additions & 6 deletions src/components/AppShell.vue
View file
Expand Up @@ -38,7 +38,7 @@
<el-option v-for="item in parsedSpec.servers" :key="item.url" :label="item.url" :value="item.url" >
<div style="display:flex; flex-direction:column">
<span>{{ item.url }}</span>
<span style="color: #8492a6; font-size:12px; line-height:12px;">{{ item.description }}</span>
<span style="color: #8492a6; font-size:12px; line-height:12px;">{{ item.description }} </span>
</div>
</el-option>
</el-select>
Expand All @@ -51,7 +51,7 @@

<div class="sw-tag-container" v-for="tag in parsedSpec.tags" v-if="tag.show" :key="tag.name">
<div style="font-size:16px;font-weight:bold; color:#ccc; margin:16px 0 4px 0;">{{tag.name}}</div>
<end-point :paths="tag.paths"></end-point>
<end-point :paths="tag.paths" :parameters="tag.parameters" ></end-point>
</div>

</div>
Expand All @@ -62,6 +62,7 @@
<script>
import EndPoint from '@/components/EndPoint';
import {parseSpec, debounce } from '@/lib/utils';
import ProcessSpec from '@/lib/parserUtils';
import MrinLogo from '@/components/Logo';
import store from '@/store';
Expand All @@ -71,8 +72,8 @@ export default {
return{
//specUrl: "https://petstore.swagger.io/v2/swagger.json",
//specUrl : "http://10.21.83.83:8080/api/swagger.json",
//specUrl : "https://raw.githubusercontent.com/APIs-guru/unofficial_openapi_specs/master/github.com/v3/swagger.yaml",
specUrl: "https://fakerestapi.azurewebsites.net/swagger/docs/v1",
specUrl : "https://raw.githubusercontent.com/APIs-guru/unofficial_openapi_specs/master/github.com/v3/swagger.yaml",
//specUrl: "https://fakerestapi.azurewebsites.net/swagger/docs/v1",
searchVal :"",
tagContainers:{}, // Each key is a container(tag-name) and the valu in it decides to show or hide a container
parsedSpec:{},
Expand All @@ -85,7 +86,8 @@ export default {
onExplore(){
let me = this;
parseSpec(me.specUrl).then(function(spec){
ProcessSpec(me.specUrl).then(function( spec ){
let serverUrl="";
me.searchVal="";
me.parsedSpec = spec;
Expand All @@ -101,7 +103,6 @@ export default {
}
}
me.isSpecLoaded=true;
me.isDevMode=true;
me.selectedApiServer = spec.servers[0].url;
store.commit("isDevMode", true);
Expand Down
146 changes: 47 additions & 99 deletions src/components/EndPoint.vue
View file
@@ -1,26 +1,35 @@
<template>

<div>
<div :class="'sw-collapse-wrapper ' + path.method + ' ' +(path.expanded?'sw-expanded':'sw-collapsed') " v-for="(path, index) in paths" v-if="path.show" :key="index">

<!-- Collapse Head -->
<div :class="'sw-collapse-header ' + path.method + ' ' +(path.expanded?'sw-expanded':'sw-collapsed') " @click="path.expanded = !path.expanded" >
<div :class="'sw-method ' + path.method"> {{path.method}} </div>
<div :class="'sw-path ' + (path.depricated?' sw-depricated':'') "> {{path.path}} </div>
<span style="color:orangered; margin:2px 0 0 5px;" v-if="path.depricated"> Depricated </span>
<div
v-for= "(fullPath, index) in paths"
v-if = "fullPath.show" :key="index"
:class="'sw-endpoint-wrapper ' + fullPath.method + ' ' + (fullPath.expanded?'sw-expanded':'sw-collapsed') "
>

<!-- EndPoint Head -->
<div
:class="'sw-endpoint-head ' + fullPath.method + ' ' +(fullPath.expanded?'sw-expanded':'sw-collapsed') "
@click="fullPath.expanded = !fullPath.expanded"
>
<div :class="'sw-method ' + fullPath.method"> {{fullPath.method}} </div>
<div :class="'sw-path ' + (fullPath.depricated?' sw-depricated':'') "> {{fullPath.path}} </div>
<span style="color:orangered; margin:2px 0 0 5px;" v-if="fullPath.depricated"> Depricated </span>
<div style="min-width:60px; flex:1"></div>
<div class="sw-end-point-descr"> {{ path.summary }} </div>
<div class="sw-end-point-descr"> {{ fullPath.summary }} </div>
</div>

<!-- Collapse Body -->
<div v-if="path.expanded" :class="'sw-collapse-body '+path.method">
<!-- EndPoint Body -->
<div v-if="fullPath.expanded" :class="'sw-endpoint-body '+fullPath.method">
<div class="sw-end-point-summary">
<div class="sw-end-point-title">{{path.summary}} </div>
<div class="sw-end-point-descr" v-if="path.summary !== path.description">{{path.description}}</div>
<div class="sw-end-point-title">{{fullPath.summary}} </div>
<div class="sw-end-point-descr" v-if="fullPath.summary !== fullPath.description">{{fullPath.description}}</div>
</div>
<div :style="'display:flex; margin-top:16px; flex-direction:'+layout ">
<request-parameters class="sw-request" :method="path.method" :url="path.path" :parameters="path.parameters" :consumes="path.consumes"></request-parameters>
<response-types :responses="path.responses" :produces="path.produces" class="sw-response"></response-types>
<!--
<request-parameters class="sw-request" :method="path.method" :url="path.path" :common-parameters="path.parameters" :parameters="path.parameters" :consumes="path.consumes"></request-parameters>
-->
<response-types class="sw-response" :responses="fullPath.responses" ></response-types>
</div>
</div>
</div>
Expand Down Expand Up @@ -61,51 +70,45 @@ export default {
<style scoped lang="scss">
@import "~@/assets/styles/_vars.scss";
.sw-collapse-wrapper {
.sw-endpoint-wrapper {
//margin:8px 0;
border: 1px solid transparent;
border-left-width: 5px;
border-top-color: #eee;
&.delete{
&.sw-expanded{
border: 1px solid $sw-red;
border-left-width: 5px;
}
&.put:hover,
&.put.sw-expanded{
border: 1px solid $sw-orange;
border-left-width: 5px;
}
&.put{
&.sw-expanded{
border: 1px solid $sw-orange;
border-left-width: 5px;
}
&.post:hover,
&.post.sw-expanded{
border: 1px solid $sw-info;
border-left-width: 5px;
}
&.post{
&.sw-expanded{
border: 1px solid $sw-info;
border-left-width: 5px;
}
&.get:hover,
&.get.sw-expanded{
border: 1px solid $sw-green;
border-left-width: 5px;
}
&.get{
&.sw-expanded{
border: 1px solid $sw-green;
border-left-width: 5px;
}
&.delete:hover,
&.delete.sw-expanded{
border: 1px solid $sw-red;
border-left-width: 5px;
}
}
.sw-collapse-header {
.sw-endpoint-head {
display:flex;
padding:8px 16px;
align-items: baseline;
cursor: pointer;
border-left:5px solid transparent;
&.sw-collapsed{
border-left:5px solid transparent;
}
&.delete.sw-expanded{
background-color: lighten($sw-red, 57%);
}
Expand All @@ -118,57 +121,14 @@ export default {
&.get.sw-expanded{
background-color: lighten($sw-green, 57%);
}
&.delete:hover{
background-color: lighten($sw-red, 57%);
border-left:5px solid $sw-red;
&.sw-expanded{
border-left:5px solid transparent;
}
&.sw-collapsed{
border-left:5px solid $sw-red;
}
}
&.put:hover{
background-color: lighten($sw-orange, 45%);
border-left:5px solid $sw-orange;
&.sw-expanded{
border-left:5px solid transparent;
}
&.sw-collapsed{
border-left:5px solid $sw-orange;
}
}
&.post:hover{
background-color: lighten($sw-info, 37%);
border-left:5px solid $sw-info;
&.sw-expanded{
border-left:5px solid transparent;
}
&.sw-collapsed{
border-left:5px solid $sw-info;
}
}
&.get:hover{
background-color: lighten($sw-green, 57%);
&.sw-expanded{
border-left:5px solid transparent;
}
&.sw-collapsed{
border-left:5px solid $sw-green;
}
}
}
.sw-collapse-body{
.sw-endpoint-body {
padding:16px 8px;
&.delete{ border-top: 1px solid $sw-red;}
&.put{ border-top: 1px solid $sw-orange;}
&.post{border-top: 1px solid $sw-info;}
&.get{ border-top: 1px solid $sw-green;}
&.post{border-top: 1px solid $sw-info; }
&.get{ border-top: 1px solid $sw-green; }
}
.sw-path{
Expand Down Expand Up @@ -219,36 +179,24 @@ export default {
text-transform:uppercase;
margin-right:5px;
&.delete{
//background-color: $sw-red;
border: 2px solid $sw-red;
//color:#efefef;
}
&.put{
//background-color: $sw-orange;
border: 2px solid $sw-orange;
color:#333;
}
&.post{
//background-color: $sw-info;
border: 2px solid $sw-info;
color:#333;
}
&.get{
//background-color: $sw-green;
border: 2px solid $sw-green;
color:#333;
}
}
.sw-response,
.sw-request{
//border:1px solid #ccc;
flex:1;
margin:5px;
padding:5px;
border-radius: 2px;
}
.sw-response{
//border:1px solid #ccc;
flex:1;
margin:5px;
padding:5px;
Expand Down
12 changes: 6 additions & 6 deletions src/components/RequestParameters.vue
View file
Expand Up @@ -5,25 +5,25 @@

<!-- Path Params -->
<div v-if="pathParams.length>0">
<div class="sw-param-type-title"> PATH PARAMETERS</div>
<div class="sw-section-heading"> PATH PARAMETERS</div>
<parameter-inputs :parameters="pathParams"></parameter-inputs>
</div>

<!-- Query Params -->
<div v-if="queryParams.length>0" >
<div class="sw-param-type-title"> QUERY PARAMETERS</div>
<div class="sw-section-heading"> QUERY PARAMETERS</div>
<parameter-inputs :parameters="queryParams"></parameter-inputs>
</div>

<!-- Form Params -->
<div v-if="formParams.length>0" >
<div class="sw-param-type-title"> FORM DATA PARAMETERS</div>
<div class="sw-section-heading"> FORM DATA PARAMETERS</div>
<parameter-inputs :parameters="formParams"></parameter-inputs>
</div>

<!-- Body Param -->
<div style="min-height:300px" v-if="bodyParams.length > 0 ">
<div class="sw-param-type-title"> BODY PARAMETERS</div>
<div class="sw-section-heading"> BODY PARAMETERS</div>

<el-tabs v-model="activeTab" style="border:1px solid #ccc;padding:8px;">
<el-tab-pane label="Example" name="bodyParamExample">
Expand All @@ -46,13 +46,13 @@

<!-- Header Params -->
<div v-if="headerParams.length>0">
<div class="sw-param-type-title"> HEADER PARAMETERS</div>
<div class="sw-section-heading"> HEADER PARAMETERS</div>
<parameter-inputs :parameters="headerParams"></parameter-inputs>
</div>

<!-- Cookie Params -->
<div v-if="cookieParams.length>0" >
<div class="sw-param-type-title"> COOKIE PARAMETERS</div>
<div class="sw-section-heading"> COOKIE PARAMETERS</div>
<parameter-inputs :parameters="cookieParams"></parameter-inputs>
</div>

Expand Down

0 comments on commit 75c3ad4

Please sign in to comment.