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

Merge pull request #1004 from liyasthomas/feat/doc

Browse Source
This commit is contained in:
Liyas Thomas
2020-07-18 17:56:12 +05:30
committed by GitHub
parent f653901e8b 193b7ae0e6
commit 1fbfa23908
6 changed files with 334 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
components/collections/collection.vue
View File

@@ -1,39 +1,47 @@
<template> <template>
<div> <div>
<div class="flex-wrap"> <div class="flex-wrap">
<button class="icon" @click="toggleShowChildren">
<i class="material-icons" v-show="!showChildren">arrow_right</i>
<i class="material-icons" v-show="showChildren">arrow_drop_down</i>
<i class="material-icons">folder</i>
<span>{{ collection.name }}</span>
</button>
<div> <div>
<button class="icon" @click="toggleShowChildren"> <button
<i class="material-icons" v-show="!showChildren">arrow_right</i> v-if="doc"
<i class="material-icons" v-show="showChildren">arrow_drop_down</i> class="icon"
<i class="material-icons">folder</i> @click="$emit('select-collection')"
<span>{{ collection.name }}</span> v-tooltip.left="$t('import')"
>
<i class="material-icons">topic</i>
</button> </button>
<v-popover>
<button class="tooltip-target icon" v-tooltip.left="$t('more')">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button class="icon" @click="$emit('add-folder')" v-close-popover>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</button>
</div>
<div>
<button class="icon" @click="$emit('edit-collection')" v-close-popover>
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button class="icon" @click="removeCollection" v-close-popover>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
</template>
</v-popover>
</div> </div>
<v-popover>
<button class="tooltip-target icon" v-tooltip.left="$t('more')">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button class="icon" @click="$emit('add-folder')" v-close-popover>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</button>
</div>
<div>
<button class="icon" @click="$emit('edit-collection')" v-close-popover>
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button class="icon" @click="removeCollection" v-close-popover>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
</template>
</v-popover>
</div> </div>
<div v-show="showChildren"> <div v-show="showChildren">
@@ -43,6 +51,7 @@
:folder="folder" :folder="folder"
:folderIndex="index" :folderIndex="index"
:collection-index="collectionIndex" :collection-index="collectionIndex"
:doc="doc"
@edit-folder="editFolder(collectionIndex, folder, index)" @edit-folder="editFolder(collectionIndex, folder, index)"
@edit-request="$emit('edit-request', $event)" @edit-request="$emit('edit-request', $event)"
/> />
@@ -58,6 +67,7 @@
:collection-index="collectionIndex" :collection-index="collectionIndex"
:folder-index="-1" :folder-index="-1"
:request-index="index" :request-index="index"
:doc="doc"
@edit-request=" @edit-request="
$emit('edit-request', { $emit('edit-request', {
request, request,
@@ -97,6 +107,7 @@ export default {
props: { props: {
collectionIndex: Number, collectionIndex: Number,
collection: Object, collection: Object,
doc: Boolean,
}, },
data() { data() {
return { return {

2
components/collections/folder.vue
View File

@@ -38,6 +38,7 @@
:collection-index="collectionIndex" :collection-index="collectionIndex"
:folder-index="folderIndex" :folder-index="folderIndex"
:request-index="index" :request-index="index"
:doc="doc"
@edit-request=" @edit-request="
$emit('edit-request', { $emit('edit-request', {
request, request,
@@ -77,6 +78,7 @@ export default {
folder: Object, folder: Object,
collectionIndex: Number, collectionIndex: Number,
folderIndex: Number, folderIndex: Number,
doc: Boolean,
}, },
components: { components: {
request: () => import("./request"), request: () => import("./request"),

13
components/collections/index.vue
View File

@@ -70,26 +70,22 @@ TODO:
<collection <collection
:collection-index="index" :collection-index="index"
:collection="collection" :collection="collection"
:doc="doc"
@edit-collection="editCollection(collection, index)" @edit-collection="editCollection(collection, index)"
@add-folder="addFolder(collection, index)" @add-folder="addFolder(collection, index)"
@edit-folder="editFolder($event)" @edit-folder="editFolder($event)"
@edit-request="editRequest($event)" @edit-request="editRequest($event)"
@select-collection="$emit('use-collection', collection)"
/> />
</li> </li>
</ul> </ul>
</div> </div>
<nuxt-link :to="localePath('doc')" :aria-label="$t('documentation')">
<button class="icon">
<i class="material-icons">topic</i>
<span>{{ $t("generate_docs") }}</span>
</button>
</nuxt-link>
</pw-section> </pw-section>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.virtual-list { .virtual-list {
max-height: calc(100vh - 290px); max-height: calc(100vh - 245px);
} }
ul { ul {
@@ -113,6 +109,9 @@ export default {
editRequest: () => import("./editRequest"), editRequest: () => import("./editRequest"),
importExportCollections: () => import("./importExportCollections"), importExportCollections: () => import("./importExportCollections"),
}, },
props: {
doc: Boolean,
},
data() { data() {
return { return {
showModalAdd: false, showModalAdd: false,

7
components/collections/request.vue
View File

@@ -1,7 +1,11 @@
<template> <template>
<div class="flex-wrap"> <div class="flex-wrap">
<div> <div>
<button class="icon" @click="selectRequest()" v-tooltip="$t('use_request')"> <button
class="icon"
@click="!doc ? selectRequest() : {}"
v-tooltip="!doc ? $t('use_request') : ''"
>
<i class="material-icons">insert_drive_file</i> <i class="material-icons">insert_drive_file</i>
<span>{{ request.name }}</span> <span>{{ request.name }}</span>
</button> </button>
@@ -50,6 +54,7 @@ export default {
collectionIndex: Number, collectionIndex: Number,
folderIndex: Number, folderIndex: Number,
requestIndex: Number, requestIndex: Number,
doc: Boolean,
}, },
methods: { methods: {
syncCollections() { syncCollections() {

2
components/layout/sidenav.vue
View File

@@ -126,7 +126,7 @@
<nav class="secondary-nav"> <nav class="secondary-nav">
<ul> <ul>
<li> <li>
<a href="#collections" v-tooltip.right="$t('collections')"> <a href="#import" v-tooltip.right="$t('import')">
<i class="material-icons">folder</i> <i class="material-icons">folder</i>
</a> </a>
</li> </li>

527
pages/doc.vue
View File

@@ -1,262 +1,285 @@
<template> <template>
<div class="page"> <div class="page">
<pw-section class="blue" :label="$t('collections')" ref="collections"> <div class="content">
<ul> <div class="page-columns inner-left">
<li> <pw-section class="blue" :label="$t('import')" ref="import">
<p class="info"> <ul>
{{ $t("generate_docs_message") }} <li>
</p> <p class="info">
</li> {{ $t("generate_docs_message") }}
</ul> </p>
<ul> </li>
<li> </ul>
<label for="collectionUpload"> <ul>
<button class="icon" @click="$refs.collectionUpload.click()" v-tooltip="$t('json')"> <li>
<i class="material-icons">folder</i> <div class="flex-wrap">
<span>{{ $t("import_collections") }}</span> <label for="collectionUpload">
</button> <button
</label> class="icon"
<input @click="$refs.collectionUpload.click()"
ref="collectionUpload" v-tooltip="$t('json')"
name="collectionUpload" >
type="file" <i class="material-icons">folder</i>
@change="uploadCollection" <span>{{ $t("import_collections") }}</span>
/> </button>
</li> </label>
</ul> <input
<ul> ref="collectionUpload"
<li> name="collectionUpload"
<Editor type="file"
v-model="collectionJSON" @change="uploadCollection"
:lang="'json'" />
:lint="false" <div>
:options="{ <button
maxLines: '16', class="icon"
minLines: '8', @click="collectionJSON = '[]'"
fontSize: '16px', v-tooltip.bottom="$t('clear')"
autoScrollEditorIntoView: true, >
showPrintMargin: false, <i class="material-icons">clear_all</i>
useWorker: false, </button>
}" </div>
/> </div>
</li> </li>
</ul> </ul>
<ul> <ul>
<li> <li>
<button class="icon" @click="getDoc"> <Editor
<i class="material-icons">topic</i> v-model="collectionJSON"
<span>{{ $t("generate_docs") }}</span> :lang="'json'"
</button> :lint="false"
</li> :options="{
</ul> maxLines: '16',
</pw-section> minLines: '8',
fontSize: '16px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
}"
/>
</li>
</ul>
<ul>
<li>
<button class="icon" @click="getDoc">
<i class="material-icons">topic</i>
<span>{{ $t("generate_docs") }}</span>
</button>
</li>
</ul>
</pw-section>
<pw-section class="green" label="Documentation" ref="documentation"> <pw-section class="green" label="Documentation" ref="documentation">
<p v-if="this.items.length === 0" class="info"> <p v-if="this.items.length === 0" class="info">
{{ $t("generate_docs_first") }} {{ $t("generate_docs_first") }}
</p> </p>
<div> <div>
<span class="collection" v-for="(collection, index) in this.items" :key="index"> <span class="collection" v-for="(collection, index) in this.items" :key="index">
<h2> <h2>
<i class="material-icons">folder</i> <i class="material-icons">folder</i>
{{ collection.name || $t("none") }} {{ collection.name || $t("none") }}
</h2> </h2>
<span class="folder" v-for="(folder, index) in collection.folders" :key="index"> <span class="folder" v-for="(folder, index) in collection.folders" :key="index">
<h3> <h3>
<i class="material-icons">folder_open</i> <i class="material-icons">folder_open</i>
{{ folder.name || $t("none") }} {{ folder.name || $t("none") }}
</h3> </h3>
<span class="request" v-for="(request, index) in folder.requests" :key="index"> <span class="request" v-for="(request, index) in folder.requests" :key="index">
<h4> <h4>
<i class="material-icons">insert_drive_file</i> <i class="material-icons">insert_drive_file</i>
{{ request.name || $t("none") }} {{ request.name || $t("none") }}
</h4> </h4>
<p class="doc-desc" v-if="request.url"> <p class="doc-desc" v-if="request.url">
<span> <span>
{{ $t("url") }}: <code>{{ request.url || $t("none") }}</code> {{ $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.bodyParam">{{ $t("payload") }}</h4>
<span v-if="request.bodyParam">
<p v-for="payload in request.bodyParam" :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>
</p> </span>
<p class="doc-desc" v-if="request.path"> <span
<span> class="request"
{{ $t("path") }}: v-for="(request, index) in collection.requests"
<code>{{ request.path || $t("none") }}</code> :key="`request-${index}`"
</span> >
</p> <h4>
<p class="doc-desc" v-if="request.method"> <i class="material-icons">insert_drive_file</i>
<span> {{ request.name || $t("none") }}
{{ $t("method") }}: </h4>
<code>{{ request.method || $t("none") }}</code> <p class="doc-desc" v-if="request.url">
</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> <span>
{{ header.key || $t("none") }}: {{ $t("url") }}: <code>{{ request.url || $t("none") }}</code>
<code>{{ header.value || $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.bodyParam">{{ $t("payload") }}</h4>
<span v-if="request.bodyParam">
<p v-for="payload in request.bodyParam" :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> </span>
</p> </p>
</span> </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.bodyParam">{{ $t("payload") }}</h4>
<span v-if="request.bodyParam">
<p v-for="payload in request.bodyParam" :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> </div>
<span </pw-section>
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.bodyParam">{{ $t("payload") }}</h4>
<span v-if="request.bodyParam">
<p v-for="payload in request.bodyParam" :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>
</div> </div>
</pw-section>
<aside class="sticky-inner inner-right">
<collections @use-collection="useSelectedCollection($event)" :doc="true" />
</aside>
</div>
</div> </div>
</template> </template>
@@ -309,6 +332,7 @@ export default {
components: { components: {
"pw-section": () => import("~/components/layout/section"), "pw-section": () => import("~/components/layout/section"),
Editor: AceEditor, Editor: AceEditor,
collections: () => import("~/components/collections"),
}, },
data() { data() {
return { return {
@@ -349,6 +373,11 @@ export default {
}) })
} }
}, },
useSelectedCollection(collection) {
let importCollection = `[${JSON.stringify(collection, null, 2)}]`
this.collectionJSON = JSON.stringify(JSON.parse(importCollection), null, 2)
},
}, },
head() { head() {
return { return {