btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

Fix folder nesting in document generation (#1602)

Browse Source
This commit is contained in:
Osheen Sachdev
2021-04-15 06:24:55 +05:30
committed by GitHub
parent 4d5332fef7
commit 6878498b2e
4 changed files with 230 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
components/docs/Collection.vue Normal file
View File

@@ -0,0 +1,36 @@
<template>
<div class="collection">
<h2>
<i class="material-icons">folder</i>
{{ collection.name || $t("none") }}
</h2>
<span class="folder" v-for="(folder, index) in collection.folders" :key="index">
<DocsFolder :folder="folder" />
</span>
<div v-for="(request, index) in collection.requests" :key="index">
<DocsRequest :request="request" />
</div>
</div>
</template>
<script>
export default {
props: {
collection: Object,
},
}
</script>
<style lang="scss" scoped>
.collection {
@apply flex;
@apply flex-col;
@apply justify-center;
@apply flex-1;
@apply p-4;
.material-icons {
@apply mr-4;
}
}
</style>

42
components/docs/Folder.vue Normal file
View File

@@ -0,0 +1,42 @@
<template>
<div class="folder">
<h3>
<i class="material-icons">folder_open</i>
{{ folder.name || $t("none") }}
</h3>
<div v-for="(folder, index) in folder.folders" :key="index">
<DocsFolder :folder="folder" />
</div>
<div v-for="(request, index) in folder.requests" :key="index">
<DocsRequest :request="request" />
</div>
</div>
</template>
<script>
export default {
props: {
folder: Object,
},
}
</script>
<style lang="scss" scoped>
.folder {
@apply flex;
@apply flex-col;
@apply justify-center;
@apply flex-1;
@apply p-4;
.material-icons {
@apply mr-4;
}
}
.folder {
@apply border-l;
@apply border-brdColor;
@apply mt-4;
}
</style>

150
components/docs/Request.vue Normal file
View File

@@ -0,0 +1,150 @@
<template>
<div class="request">
<h4>
<i class="material-icons">insert_drive_file</i>
{{ request.name || $t("none") }}
</h4>
<p class="doc-desc" v-if="request.url">
<span>
{{ $t("url") }}: <code>{{ request.url || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.path">
<span>
{{ $t("path") }}:
<code>{{ request.path || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.method">
<span>
{{ $t("method") }}:
<code>{{ request.method || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.auth">
<span>
{{ $t("authentication") }}:
<code>{{ request.auth || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.httpUser">
<span>
{{ $t("username") }}:
<code>{{ request.httpUser || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.httpPassword">
<span>
{{ $t("password") }}:
<code>{{ request.httpPassword || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.bearerToken">
<span>
{{ $t("token") }}:
<code>{{ request.bearerToken || $t("none") }}</code>
</span>
</p>
<h4 v-if="request.headers">{{ $t("headers") }}</h4>
<span v-if="request.headers">
<p v-for="header in request.headers" :key="header.key" class="doc-desc">
<span>
{{ header.key || $t("none") }}:
<code>{{ header.value || $t("none") }}</code>
</span>
</p>
</span>
<h4 v-if="request.params">{{ $t("parameters") }}</h4>
<span v-if="request.params">
<p v-for="parameter in request.params" :key="parameter.key" class="doc-desc">
<span>
{{ parameter.key || $t("none") }}:
<code>{{ parameter.value || $t("none") }}</code>
</span>
</p>
</span>
<h4 v-if="request.bodyParams">{{ $t("payload") }}</h4>
<span v-if="request.bodyParams">
<p v-for="payload in request.bodyParams" :key="payload.key" class="doc-desc">
<span>
{{ payload.key || $t("none") }}:
<code>{{ payload.value || $t("none") }}</code>
</span>
</p>
</span>
<p class="doc-desc" v-if="request.rawParams">
<span>
{{ $t("parameters") }}:
<code>{{ request.rawParams || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.contentType">
<span>
{{ $t("content_type") }}:
<code>{{ request.contentType || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.requestType">
<span>
{{ $t("request_type") }}:
<code>{{ request.requestType || $t("none") }}</code>
</span>
</p>
</div>
</template>
<script>
export default {
props: {
request: Object,
},
}
</script>
<style scoped lang="scss">
.request {
@apply flex;
@apply flex-col;
@apply justify-center;
@apply flex-1;
@apply p-4;
.material-icons {
@apply mr-4;
}
}
.request {
@apply border;
@apply border-brdColor;
@apply rounded-lg;
@apply mt-4;
h4 {
@apply mt-4;
}
}
.doc-desc {
@apply flex;
@apply flex-col;
@apply justify-center;
@apply flex-1;
@apply p-4;
.material-icons {
@apply mr-4;
}
}
.doc-desc {
@apply text-fgLightColor;
@apply border-b;
@apply border-dashed;
@apply border-brdColor;
@apply m-0;
&:last-child {
@apply border-b-0;
}
}
</style>

246
pages/doc.vue
View File

@@ -76,204 +76,8 @@
</div>
</div>
<div>
<span class="collection" v-for="(collection, index) in this.items" :key="index">
<h2>
<i class="material-icons">folder</i>
{{ collection.name || $t("none") }}
</h2>
<span class="folder" v-for="(folder, index) in collection.folders" :key="index">
<h3>
<i class="material-icons">folder_open</i>
{{ folder.name || $t("none") }}
</h3>
<span class="request" v-for="(request, index) in folder.requests" :key="index">
<h4>
<i class="material-icons">insert_drive_file</i>
{{ request.name || $t("none") }}
</h4>
<p class="doc-desc" v-if="request.url">
<span>
{{ $t("url") }}: <code>{{ request.url || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.path">
<span>
{{ $t("path") }}:
<code>{{ request.path || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.method">
<span>
{{ $t("method") }}:
<code>{{ request.method || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.auth">
<span>
{{ $t("authentication") }}:
<code>{{ request.auth || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.httpUser">
<span>
{{ $t("username") }}:
<code>{{ request.httpUser || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.httpPassword">
<span>
{{ $t("password") }}:
<code>{{ request.httpPassword || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.bearerToken">
<span>
{{ $t("token") }}:
<code>{{ request.bearerToken || $t("none") }}</code>
</span>
</p>
<h4 v-if="request.headers.length > 0">{{ $t("headers") }}</h4>
<span v-if="request.headers">
<p v-for="header in request.headers" :key="header.key" class="doc-desc">
<span>
{{ header.key || $t("none") }}:
<code>{{ header.value || $t("none") }}</code>
</span>
</p>
</span>
<h4 v-if="request.params.length > 0">{{ $t("parameters") }}</h4>
<span v-if="request.params">
<p v-for="parameter in request.params" :key="parameter.key" class="doc-desc">
<span>
{{ parameter.key || $t("none") }}:
<code>{{ parameter.value || $t("none") }}</code>
</span>
</p>
</span>
<h4 v-if="request.bodyParams">{{ $t("payload") }}</h4>
<span v-if="request.bodyParams">
<p v-for="payload in request.bodyParams" :key="payload.key" class="doc-desc">
<span>
{{ payload.key || $t("none") }}:
<code>{{ payload.value || $t("none") }}</code>
</span>
</p>
</span>
<p class="doc-desc" v-if="request.rawParams">
<span>
{{ $t("parameters") }}:
<code>{{ request.rawParams || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.contentType">
<span>
{{ $t("content_type") }}:
<code>{{ request.contentType || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.requestType">
<span>
{{ $t("request_type") }}:
<code>{{ request.requestType || $t("none") }}</code>
</span>
</p>
</span>
</span>
<span
class="request"
v-for="(request, index) in collection.requests"
:key="`request-${index}`"
>
<h4>
<i class="material-icons">insert_drive_file</i>
{{ request.name || $t("none") }}
</h4>
<p class="doc-desc" v-if="request.url">
<span>
{{ $t("url") }}: <code>{{ request.url || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.path">
<span>
{{ $t("path") }}: <code>{{ request.path || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.method">
<span>
{{ $t("method") }}:
<code>{{ request.method || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.auth">
<span>
{{ $t("authentication") }}:
<code>{{ request.auth || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.httpUser">
<span>
{{ $t("username") }}:
<code>{{ request.httpUser || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.httpPassword">
<span>
{{ $t("password") }}:
<code>{{ request.httpPassword || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.bearerToken">
<span>
{{ $t("token") }}:
<code>{{ request.bearerToken || $t("none") }}</code>
</span>
</p>
<h4 v-if="request.headers.length > 0">{{ $t("headers") }}</h4>
<span v-if="request.headers">
<p v-for="header in request.headers" :key="header.key" class="doc-desc">
<span>
{{ header.key || $t("none") }}:
<code>{{ header.value || $t("none") }}</code>
</span>
</p>
</span>
<h4 v-if="request.params.length > 0">{{ $t("parameters") }}</h4>
<span v-if="request.params">
<p v-for="parameter in request.params" :key="parameter.key" class="doc-desc">
<span>
{{ parameter.key || $t("none") }}:
<code>{{ parameter.value || $t("none") }}</code>
</span>
</p>
</span>
<h4 v-if="request.bodyParams">{{ $t("payload") }}</h4>
<span v-if="request.bodyParams">
<p v-for="payload in request.bodyParams" :key="payload.key" class="doc-desc">
<span>
{{ payload.key || $t("none") }}:
<code>{{ payload.value || $t("none") }}</code>
</span>
</p>
</span>
<p class="doc-desc" v-if="request.rawParams">
<span>
{{ $t("parameters") }}:
<code>{{ request.rawParams || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.contentType">
<span>
{{ $t("content_type") }}:
<code>{{ request.contentType || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.requestType">
<span>
{{ $t("request_type") }}:
<code>{{ request.requestType || $t("none") }}</code>
</span>
</p>
</span>
<span v-for="(collection, index) in this.items" :key="index">
<DocsCollection :collection="collection" />
</span>
</div>
</div>
@@ -287,52 +91,6 @@
</div>
</template>
<style scoped lang="scss">
.collection,
.doc-desc,
.folder,
.request {
@apply flex;
@apply flex-col;
@apply justify-center;
@apply flex-1;
@apply p-4;
.material-icons {
@apply mr-4;
}
}
.folder {
@apply border-l;
@apply border-brdColor;
@apply mt-4;
}
.request {
@apply border;
@apply border-brdColor;
@apply rounded-lg;
@apply mt-4;
h4 {
@apply mt-4;
}
}
.doc-desc {
@apply text-fgLightColor;
@apply border-b;
@apply border-dashed;
@apply border-brdColor;
@apply m-0;
&:last-child {
@apply border-b-0;
}
}
</style>
<script>
import { fb } from "~/helpers/fb"
import Mustache from "mustache"