mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
849 lines
28 KiB
849 lines
28 KiB
3 years ago
|
<!-- eslint-disable --><template>
|
||
4 years ago
|
<v-container fluid class="api-client grid-list-xs pa-0 " style="height: 100%;">
|
||
|
<splitpanes style="height:100%;" class="xc-theme">
|
||
|
<pane min-size="20" max-size="50" size="30" style="overflow: auto">
|
||
|
<v-tabs height="32">
|
||
|
<v-tab>History</v-tab>
|
||
|
<v-tab>Collection</v-tab>
|
||
|
|
||
|
<v-tab-item style="border-top: 1px solid grey">
|
||
|
<div class="apis-list">
|
||
|
<div v-for="(api,i) in $store.state.apiClient.list" :key="i" class="pa-0 ma-0 ">
|
||
|
<v-list-item dense two-line @click="apiClickedOnList(api)">
|
||
3 years ago
|
<v-hover v-slot="{ hover }">
|
||
4 years ago
|
<v-list-item-content>
|
||
|
<v-list-item-title class="grey--text">
|
||
3 years ago
|
<v-btn
|
||
|
class="pl-0 ml-0"
|
||
|
small
|
||
|
text
|
||
|
:tooltip="api.url"
|
||
|
:color="apiMeta[api.type].color"
|
||
4 years ago
|
>
|
||
|
<b>
|
||
3 years ago
|
<v-icon
|
||
|
class="mx-0 ml-n2"
|
||
|
:class="{'white--text': !api.response || !api.response.status,'red--text': api.response && api.response.status >= 400, 'green--text':api.response && api.response.status < 400}"
|
||
|
>
|
||
4 years ago
|
mdi-circle-small
|
||
|
</v-icon>
|
||
3 years ago
|
{{ api.type }} </b>
|
||
4 years ago
|
</v-btn>
|
||
|
|
||
3 years ago
|
{{ api.url }}
|
||
4 years ago
|
</v-list-item-title>
|
||
|
<v-list-item-subtitle v-show="!i || hover" class="text-right">
|
||
|
<span v-show="!i && !hover" class="grey--text text--darken-1 caption">(Last invoked API)</span>
|
||
3 years ago
|
<v-btn v-show="hover" small text class=" " @click="apiDeleteFromList(i)">
|
||
|
<v-icon small>
|
||
|
mdi-delete
|
||
|
</v-icon>
|
||
4 years ago
|
</v-btn>
|
||
|
</v-list-item-subtitle>
|
||
|
</v-list-item-content>
|
||
|
</v-hover>
|
||
|
</v-list-item>
|
||
3 years ago
|
<v-divider />
|
||
4 years ago
|
</div>
|
||
|
</div>
|
||
|
</v-tab-item>
|
||
|
<v-tab-item style="border-top: 1px solid grey">
|
||
|
<v-row class="pa-0 ma-0 pa-2 pl-2">
|
||
|
<div class="primary--text cursor-pointer" @click="openApiFileCollection">
|
||
3 years ago
|
<x-icon
|
||
|
class="mr-1 cursor-pointer"
|
||
|
color="primary"
|
||
|
tooltip="Create New API Collection"
|
||
|
@click="openNewCollection('/')"
|
||
|
>
|
||
|
mdi-folder-plus-outline
|
||
4 years ago
|
</x-icon>
|
||
|
|
||
3 years ago
|
<x-icon class="mr-1" color="primary" tooltip="Open API Collection">
|
||
|
mdi-folder-open-outline
|
||
|
</x-icon>
|
||
4 years ago
|
</div>
|
||
|
</v-row>
|
||
3 years ago
|
<v-divider />
|
||
|
<v-expansion-panels v-model="curApiCollectionPanel" accordion focusable>
|
||
4 years ago
|
<v-expansion-panel
|
||
|
v-for="(apiTv,i) in apiTvs"
|
||
3 years ago
|
:key="i"
|
||
|
>
|
||
4 years ago
|
<v-expansion-panel-header hide-actions>
|
||
3 years ago
|
<template #default="{open}">
|
||
4 years ago
|
<div class="d-flex">
|
||
3 years ago
|
<v-icon color="">
|
||
|
{{ open ? 'mdi-menu-down' : 'mdi-menu-right' }}
|
||
|
</v-icon>
|
||
|
<v-icon small color="grey" class="ml-1 mr-2">
|
||
|
mdi-folder
|
||
|
</v-icon>
|
||
|
<span class="body-2 flex-grow-1">{{ $store.getters['apiClient/GtrCurrentApiFilePaths'][i].fileName }}</span>
|
||
|
|
||
|
<x-icon
|
||
|
color="white grey"
|
||
|
class="float-right mr-3"
|
||
|
small
|
||
|
@click="showCtxMenu[i]=true,x = $event.clientX,y = $event.clientY;"
|
||
|
@click.stop=""
|
||
|
>
|
||
4 years ago
|
mdi-dots-horizontal
|
||
|
</x-icon>
|
||
|
|
||
3 years ago
|
<recursive-menu
|
||
|
v-model="showCtxMenu[i]"
|
||
|
:position-x="x"
|
||
|
:position-y="y"
|
||
|
:items="{
|
||
|
'Add Folder':'add-folder',
|
||
|
'Reveal in Folder':'reveal-in-folder',
|
||
|
'Delete Collection':'delete-collection',
|
||
|
'Refresh Collection' : 'refresh-collection'
|
||
|
}"
|
||
|
@click="ctxMenuClickHandler($event,i)"
|
||
|
/>
|
||
4 years ago
|
</div>
|
||
|
</template>
|
||
|
</v-expansion-panel-header>
|
||
|
<v-expansion-panel-content class="expansion-wrap-0">
|
||
|
<vue-tree-list
|
||
|
v-if="apiTvs[i]"
|
||
3 years ago
|
style="cursor: pointer"
|
||
4 years ago
|
class="body-2 sql-query-treeview px-1 pt-2 api-treeview"
|
||
3 years ago
|
:model="apiTv"
|
||
|
default-tree-node-name="new node"
|
||
|
default-leaf-node-name="new leaf"
|
||
|
:default-expanded="false"
|
||
4 years ago
|
@click="tvNodeOnClick"
|
||
|
@change-name="tvNodeRename"
|
||
|
@delete-node="tvNodeDelete"
|
||
|
@add-node="onAddNode"
|
||
3 years ago
|
>
|
||
|
<span slot="leafNodeIcon" />
|
||
|
<v-icon slot="treeNodeIcon" small color="grey" class="mr-1">
|
||
|
mdi-folder-star
|
||
|
</v-icon>
|
||
|
|
||
|
<v-icon slot="addTreeNode" small>
|
||
|
mdi-folder-plus
|
||
|
</v-icon>
|
||
|
<v-icon slot="addLeafNode" small>
|
||
|
mdi-file-plus
|
||
|
</v-icon>
|
||
|
<v-icon slot="editNode" small class="mt-n1">
|
||
|
mdi-file-edit
|
||
|
</v-icon>
|
||
|
<v-icon slot="delNode" small>
|
||
|
mdi-delete
|
||
|
</v-icon>
|
||
|
<template #label="{item:api}">
|
||
4 years ago
|
<div v-if="api.isLeaf" class="d-flex" style="width: 100%">
|
||
|
<!-- <v-icon class="mx-0"-->
|
||
|
<!-- :class="`${apiMeta[api.type].color}--text`"-->
|
||
|
<!-- small>-->
|
||
|
<!-- mdi-bookmark-outline-->
|
||
|
<!-- </v-icon>-->
|
||
|
<b style="display: inline-block;min-width: 45px;" :class="`${apiMeta[api.type].color}--text`">
|
||
3 years ago
|
{{ api.type === 'DELETE' ? 'DEL' : api.type }} </b>
|
||
4 years ago
|
|
||
3 years ago
|
<span
|
||
|
class="grey--text d-block"
|
||
|
style="text-overflow: ellipsis;
|
||
4 years ago
|
overflow: hidden;
|
||
3 years ago
|
white-space: nowrap;"
|
||
|
>{{ api.name }}</span>
|
||
4 years ago
|
</div>
|
||
3 years ago
|
<div
|
||
|
v-else
|
||
|
style="width: 100%;text-overflow: ellipsis;
|
||
4 years ago
|
overflow: hidden;
|
||
3 years ago
|
white-space: nowrap;"
|
||
|
>
|
||
|
{{ api.name }}
|
||
4 years ago
|
</div>
|
||
|
</template>
|
||
|
</vue-tree-list>
|
||
|
</v-expansion-panel-content>
|
||
|
</v-expansion-panel>
|
||
|
</v-expansion-panels>
|
||
|
</v-tab-item>
|
||
|
</v-tabs>
|
||
|
</pane>
|
||
|
<pane min-size="10" size="75" style="overflow: auto">
|
||
3 years ago
|
<v-toolbar
|
||
|
class=" toolbar-border-bottom elevation-0 d-flex req-inputs"
|
||
|
height="55"
|
||
|
style="position: relative;z-index:2;width: 100%"
|
||
|
>
|
||
4 years ago
|
<v-select
|
||
|
v-model="api.type"
|
||
3 years ago
|
:items="Object.keys(apiMeta)"
|
||
4 years ago
|
dense
|
||
|
solo
|
||
|
hide-details
|
||
|
outlined
|
||
|
class="body-2"
|
||
|
style="max-width:130px;border-bottom-right-radius: 0;border-top-right-radius: 0;border-right: 1px solid grey"
|
||
3 years ago
|
/>
|
||
4 years ago
|
|
||
|
<xAutoComplete
|
||
3 years ago
|
v-model="api.url"
|
||
4 years ago
|
outlined
|
||
|
class="flex-grow-1"
|
||
|
:env="selectedEnv"
|
||
|
placeholder="Enter HTTP URL"
|
||
|
solo
|
||
|
dense
|
||
|
hide-details
|
||
|
autofocus
|
||
|
styles="border-bottom-left-radius: 0;border-top-left-radius:0 "
|
||
3 years ago
|
/>
|
||
|
|
||
|
<x-btn btn.class="primary" dense tooltip="Send Request" @click.prevent="apiSend()">
|
||
|
<v-icon v-if="isPerfFilled" small class="ml-n3">
|
||
|
mdi-truck-fast
|
||
|
</v-icon>
|
||
|
<v-icon v-else small class="ml-n3">
|
||
|
mdi-send
|
||
|
</v-icon>
|
||
4 years ago
|
SEND
|
||
|
</x-btn>
|
||
3 years ago
|
<x-btn
|
||
|
btn.class="outlined"
|
||
|
dense
|
||
|
icon="save"
|
||
|
tooltip="Save API"
|
||
|
@click.prevent="bookmarkApi()"
|
||
|
/>
|
||
|
<x-btn
|
||
|
v-if="$store.getters['project/GtrProjectJson']"
|
||
|
icon="mdi-eye-outline"
|
||
|
tooltip="Environments"
|
||
|
@click="environmentDialog = true"
|
||
|
/>
|
||
4 years ago
|
</v-toolbar>
|
||
|
|
||
|
<splitpanes horizontal style="height:calc(100% - 64px)" class="xc-theme">
|
||
|
<pane min-size="25" size="50" style="overflow: auto;" class="pa-1">
|
||
|
<v-tabs
|
||
|
class="req-tabs"
|
||
|
height="24"
|
||
|
>
|
||
3 years ago
|
<v-tab class="caption">
|
||
|
Params <b v-if="paramsCount" class="green--text">({{ paramsCount }})</b>
|
||
|
</v-tab>
|
||
|
<v-tab class="caption">
|
||
|
Headers <b v-if="headersCount" class="green--text">({{ headersCount }})</b>
|
||
|
</v-tab>
|
||
|
<v-tab class="caption">
|
||
|
Body
|
||
4 years ago
|
</v-tab>
|
||
3 years ago
|
<v-tab class="caption">
|
||
|
Auth
|
||
|
</v-tab>
|
||
|
<v-tab class="caption">
|
||
|
Perf Test
|
||
4 years ago
|
</v-tab>
|
||
|
<div class="flex-grow-1 d-flex text-right pr-4 justify-end ">
|
||
|
<div class="flex-shrink-1 ">
|
||
|
<v-select
|
||
|
v-model="selectedEnv"
|
||
|
height="19"
|
||
|
class="caption envs"
|
||
|
dense
|
||
|
:items="environmentList"
|
||
|
placeholder="Environment"
|
||
|
single-line
|
||
|
>
|
||
3 years ago
|
<template #selection="{item}">
|
||
4 years ago
|
<span
|
||
3 years ago
|
style="text-transform: uppercase"
|
||
|
>{{ item }}</span> <span class="grey--text">(env)</span>
|
||
4 years ago
|
</template>
|
||
|
</v-select>
|
||
|
</div>
|
||
|
</div>
|
||
|
<!-- <div class="flex-grow-1 text-right pr-4 caption" v-if="api.response">-->
|
||
|
<!-- <!– <x-icon iconClass="mr-4" v-if="$store.getters['project/GtrProjectJson']" @click="environmentDialog = true" tooltip="Environments">–>-->
|
||
|
<!-- <!– mdi-eye-outline–>-->
|
||
|
<!-- <!– </x-icon>–>-->
|
||
|
<!-- </div>-->
|
||
|
<v-tab-item>
|
||
3 years ago
|
<params
|
||
|
v-model="api.params"
|
||
|
:env.sync="selectedEnv"
|
||
|
/>
|
||
4 years ago
|
</v-tab-item>
|
||
|
<v-tab-item>
|
||
3 years ago
|
<headers
|
||
|
v-model="api.headers"
|
||
|
:env.sync="selectedEnv"
|
||
|
/>
|
||
4 years ago
|
</v-tab-item>
|
||
|
<v-tab-item>
|
||
|
<monaco-json-editor
|
||
3 years ago
|
v-model="api.body"
|
||
4 years ago
|
style="height: 250px"
|
||
|
class="editor card"
|
||
|
theme="vs-dark"
|
||
3 years ago
|
lang="json"
|
||
4 years ago
|
:options="{validate:true,documentFormattingEdits:true,foldingRanges:true}"
|
||
3 years ago
|
/>
|
||
4 years ago
|
</v-tab-item>
|
||
|
<v-tab-item>
|
||
|
<!-- <monaco-editor-->
|
||
|
<!-- :code.sync="api.auth"-->
|
||
|
<!-- cssStyle="height:250px"></monaco-editor>-->
|
||
|
</v-tab-item>
|
||
|
|
||
|
<v-tab-item>
|
||
3 years ago
|
<perf-test v-model="api.perf" />
|
||
4 years ago
|
</v-tab-item>
|
||
|
</v-tabs>
|
||
|
</pane>
|
||
|
<pane min-size="25" size="50" style="overflow: auto" class="pa-1">
|
||
|
<!-- <h3 class="mb-2 grey--text lighten-1">-->
|
||
|
<!-- Response Body :-->
|
||
|
<!-- <div v-if="api.response">-->
|
||
|
<!-- <span v-if="api.response.status === 200" class="green--text">{{api.response.status}}</span>-->
|
||
|
<!-- <span v-if="api.response.status !== 200" class="red--text">{{api.response.status}}</span>-->
|
||
|
<!-- </div>-->
|
||
|
<!-- </h3>-->
|
||
|
|
||
|
<v-tabs
|
||
|
v-if="api.response"
|
||
|
height="24"
|
||
|
>
|
||
3 years ago
|
<v-tab class="caption">
|
||
|
Body
|
||
|
</v-tab>
|
||
|
<v-tab class="caption">
|
||
|
Headers<span v-if="api.response.headers" class="green--text">( {{ Object.keys(api.response.headers).length }} )</span>
|
||
4 years ago
|
</v-tab>
|
||
3 years ago
|
<div v-if="api.response" class="flex-grow-1 text-right pr-4 caption">
|
||
|
<template v-if="api.response.status">
|
||
|
<span class="grey--text">Status:</span><span
|
||
|
:class="{
|
||
|
'green--text' : api.response.status === 200 ,
|
||
|
'red--text' : api.response.status !== 200
|
||
|
}"
|
||
|
><b>{{ api.response.status }}</b></span>
|
||
|
</template>
|
||
4 years ago
|
|
||
|
|
||
3 years ago
|
<template v-if="api.timeTaken">
|
||
|
<span class="grey--text">Time:</span><span class="green--text"><b>{{ api.timeTaken }}ms</b></span>
|
||
4 years ago
|
</template>
|
||
|
</div>
|
||
|
<v-tab-item>
|
||
3 years ago
|
<code
|
||
|
v-if="api.response"
|
||
|
class="black pa-1 grey--text "
|
||
|
style="overflow-x: auto;min-height:50px;overflow-y:auto;min-width: 100%"
|
||
|
>{{ api.response.data }}</code>
|
||
4 years ago
|
|
||
|
<!-- <pre v-if="api.response" class="black pa-1" style="overflow-x: auto;min-height:50px;overflow-y:auto">{{api.response.data}}</pre>-->
|
||
|
</v-tab-item>
|
||
|
<v-tab-item>
|
||
3 years ago
|
<code
|
||
|
v-if="api.response"
|
||
|
class="black pa-1 grey--text "
|
||
|
style="overflow-x: auto;min-height:50px;overflow-y:auto;min-width: 100%"
|
||
|
>{{ api.response.headers }}</code>
|
||
4 years ago
|
</v-tab-item>
|
||
|
</v-tabs>
|
||
|
</pane>
|
||
|
</splitpanes>
|
||
|
</pane>
|
||
|
</splitpanes>
|
||
3 years ago
|
<environment v-if="$store.getters['project/GtrProjectJson']" v-model="environmentDialog" env="_noco" />
|
||
4 years ago
|
</v-container>
|
||
|
</template>
|
||
|
<script>
|
||
3 years ago
|
/* eslint-disable */
|
||
|
import { mapGetters, mapActions } from 'vuex'
|
||
|
|
||
|
import Vue from 'vue'
|
||
|
|
||
|
import { VueTreeList, Tree, TreeNode } from 'vue-tree-list'
|
||
|
import { Splitpanes, Pane } from 'splitpanes'
|
||
3 years ago
|
import params from '../apiClient/Params'
|
||
|
import headers from '../apiClient/Headers'
|
||
3 years ago
|
|
||
|
import { MonacoJsonEditor } from '../monaco/index'
|
||
|
|
||
3 years ago
|
import environment from '../Environment'
|
||
|
import PerfTest from '../apiClient/PerfTest'
|
||
3 years ago
|
|
||
|
// const {app, dialog, path, fs, shell, FileCollection} = require("electron").remote.require(
|
||
|
// "./libs"
|
||
|
// );
|
||
|
|
||
|
export default {
|
||
|
components: {
|
||
|
PerfTest,
|
||
|
MonacoJsonEditor,
|
||
|
VueTreeList,
|
||
|
Splitpanes,
|
||
|
Pane,
|
||
|
params,
|
||
|
headers,
|
||
|
environment
|
||
|
},
|
||
|
data () {
|
||
|
return {
|
||
|
environmentDialog: false,
|
||
|
showCtxMenu: {},
|
||
|
apiTvs: [],
|
||
|
apiFilePaths: [],
|
||
|
apiFileCollections: [],
|
||
|
curApiCollectionPanel: null,
|
||
|
|
||
|
x: 0,
|
||
|
y: 0,
|
||
|
|
||
|
apiMeta: {
|
||
|
GET: {
|
||
|
color: 'success'
|
||
4 years ago
|
},
|
||
3 years ago
|
POST: {
|
||
|
color: 'warning'
|
||
|
},
|
||
|
DELETE: {
|
||
|
color: 'error'
|
||
|
},
|
||
|
PUT: {
|
||
|
color: 'info'
|
||
|
},
|
||
|
HEAD: {
|
||
|
color: 'info'
|
||
4 years ago
|
},
|
||
3 years ago
|
PATCH: {
|
||
|
color: 'info'
|
||
|
}
|
||
|
},
|
||
4 years ago
|
|
||
3 years ago
|
// current api
|
||
|
api: {
|
||
|
type: 'GET',
|
||
|
url: '',
|
||
|
body: '',
|
||
|
params: [],
|
||
|
auth: '',
|
||
|
headers: [],
|
||
|
response: {},
|
||
|
perf: {}
|
||
4 years ago
|
}
|
||
3 years ago
|
|
||
|
}
|
||
|
},
|
||
|
computed: {
|
||
|
isPerfFilled () {
|
||
|
return this.api.perf && Object.values(this.api.perf).some(v => v)
|
||
4 years ago
|
},
|
||
3 years ago
|
...mapGetters({
|
||
|
sqlMgr: 'sqlMgr/sqlMgr',
|
||
|
currentProjectFolder: 'project/currentProjectFolder',
|
||
|
projectApisFolder: 'project/projectApisFolder'
|
||
|
}),
|
||
|
paramsCount () {
|
||
|
return this.api.params && this.api.params.filter(p => p.name && p.enabled).length
|
||
|
},
|
||
|
headersCount () {
|
||
|
return this.api.headers && this.api.headers.filter(h => h.name && h.enabled).length
|
||
|
},
|
||
|
environmentList () {
|
||
|
return Object.keys(this.$store.getters['project/GtrApiEnvironment'])
|
||
|
},
|
||
|
selectedEnv: {
|
||
|
get () {
|
||
|
return this.$store.state.apiClient.activeEnvironment[this.$route.params.project] || this.environmentList[0]
|
||
4 years ago
|
},
|
||
3 years ago
|
set (env) {
|
||
|
this.$store.commit('apiClient/MutActiveEnvironment', { env, projectId: this.$route.params.project })
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
watch: {},
|
||
|
async created () {
|
||
|
console.log('ApisList', this.$store.state.apiClient.list)
|
||
|
|
||
|
this.$store.dispatch('apiClient/loadApiCollectionForProject', {
|
||
|
projectId: this.$route.params.project,
|
||
|
projectName: this.$store.getters['project/GtrProjectName']
|
||
|
})
|
||
|
|
||
|
try {
|
||
|
/* load all files that are were previously opened */
|
||
|
if (!this.$store.getters['apiClient/GtrCurrentApiFilePaths'].length) {
|
||
|
const defaultPath = path.join(this.currentProjectFolder, 'server', 'tool', this.projectApisFolder, 'apis.xc.json')
|
||
|
this.$store.commit('apiClient/MutApiFilePathsAdd', {
|
||
|
path: defaultPath,
|
||
|
fileName: path.basename(defaultPath)
|
||
|
})
|
||
|
}
|
||
4 years ago
|
|
||
3 years ago
|
for (let i = 0; i < this.$store.getters['apiClient/GtrCurrentApiFilePaths'].length; ++i) {
|
||
|
await this.loadFileCollection(this.$store.getters['apiClient/GtrCurrentApiFilePaths'][i])
|
||
4 years ago
|
}
|
||
3 years ago
|
} catch (e) {
|
||
|
console.log('Failed to load previously opened query collections', e)
|
||
|
}
|
||
|
|
||
|
if (this.nodes.url) {
|
||
|
Vue.set(this.api, 'type', 'GET')
|
||
|
this.api.url = this.nodes.url
|
||
|
}
|
||
|
console.log(this.nodes)
|
||
|
},
|
||
|
mounted () {
|
||
|
},
|
||
|
beforeDestroy () {
|
||
|
},
|
||
|
methods: {
|
||
|
async handleKeyDown ({ metaKey, key, altKey, shiftKey, ctrlKey }) {
|
||
|
console.log(metaKey, key, altKey, shiftKey, ctrlKey)
|
||
|
// cmd + s -> save
|
||
|
// cmd + l -> reload
|
||
|
// cmd + n -> new
|
||
|
// cmd + d -> delete
|
||
|
// cmd + enter -> send api
|
||
|
|
||
|
switch ([metaKey, key].join('_')) {
|
||
|
case 'true_s' :
|
||
|
await this.bookmarkApi()
|
||
|
break
|
||
|
case 'true_e' :
|
||
|
this.environmentDialog = true
|
||
|
break
|
||
4 years ago
|
// case 'true_n' :
|
||
|
// this.addColumn();
|
||
|
// break;
|
||
3 years ago
|
case 'true_d' :
|
||
|
await this.deleteProcedure('showDialog')
|
||
|
break
|
||
|
case 'true_Enter' :
|
||
|
await this.apiSend()
|
||
|
break
|
||
|
}
|
||
|
},
|
||
4 years ago
|
|
||
3 years ago
|
async openCollectionFolder (pathString) {
|
||
|
shell.showItemInFolder(pathString)
|
||
|
},
|
||
|
async openNewCollection () {
|
||
|
try {
|
||
|
const toLocalPath = path.join(this.currentProjectFolder, 'server', 'tool', this.projectApisFolder)
|
||
4 years ago
|
|
||
3 years ago
|
const userChosenPath = dialog.showSaveDialog({
|
||
|
defaultPath: toLocalPath,
|
||
|
filters: [{ name: 'JSON', extensions: ['json'] }]
|
||
|
})
|
||
4 years ago
|
|
||
3 years ago
|
if (userChosenPath) {
|
||
|
console.log(userChosenPath)
|
||
|
fs.writeFileSync(userChosenPath, '[]', 'utf-8')
|
||
|
const pathObj = {
|
||
|
path: userChosenPath,
|
||
|
fileName: path.basename(userChosenPath)
|
||
|
}
|
||
|
this.$store.commit('apiClient/MutApiFilePathsAdd', pathObj)
|
||
|
await this.loadFileCollection(pathObj)
|
||
4 years ago
|
}
|
||
3 years ago
|
this.$toast.success('New API collection loaded successfully').goAway(5000)
|
||
|
} catch (e) {
|
||
|
console.log(e)
|
||
|
throw e
|
||
|
}
|
||
|
},
|
||
|
async ctxMenuClickHandler (actionEvent, index) {
|
||
|
console.log(actionEvent, index)
|
||
|
switch (actionEvent.value) {
|
||
|
case 'add-folder':
|
||
|
this.tvNodeFolderAdd(index)
|
||
|
break
|
||
|
case 'reveal-in-folder':
|
||
|
await this.openCollectionFolder(this.$store.getters['apiClient/GtrCurrentApiFilePaths'][index].path)
|
||
|
break
|
||
|
case 'delete-collection':
|
||
|
this.$store.commit('apiClient/MutApiFilePathsRemove', index)
|
||
|
this.apiFileCollections.splice(index, 1)
|
||
|
this.apiTvs.splice(index, 1)
|
||
|
break
|
||
|
case 'refresh-collection':
|
||
|
await this.refreshFileCollection(index)
|
||
|
break
|
||
|
default:
|
||
|
break
|
||
|
}
|
||
|
// this.deleteQueryByPath(this.apiTvs, this.menuItem.path);
|
||
|
},
|
||
|
openUrl (url) {
|
||
|
shell.openExternal(url)
|
||
|
},
|
||
4 years ago
|
|
||
3 years ago
|
apiClickedOnList (api) {
|
||
|
this.api = {
|
||
|
...api,
|
||
|
params: api.params && api.params.map(param => ({ ...param })),
|
||
|
headers: api.headers && api.headers.map(header => ({ ...header }))
|
||
|
}
|
||
|
},
|
||
4 years ago
|
|
||
3 years ago
|
apiDeleteFromList (index) {
|
||
|
this.$store.commit('apiClient/MutListRemove', index)
|
||
|
},
|
||
4 years ago
|
|
||
3 years ago
|
async apiSend () {
|
||
|
console.log('apiSend')
|
||
4 years ago
|
|
||
3 years ago
|
if (!this.api.url.trim()) {
|
||
|
this.$toast.info('Please enter http url').goAway(3000)
|
||
|
return
|
||
|
}
|
||
|
|
||
|
const envs = this.$store.getters['project/GtrApiEnvironment'][this.selectedEnv]
|
||
4 years ago
|
|
||
3 years ago
|
const apiDecoded = JSON.parse(
|
||
|
JSON.stringify(this.api).replace(/{{\s*(\w+)\s*}}/g, (m, m1) => {
|
||
|
if (m1 in envs) {
|
||
|
return envs[m1]
|
||
4 years ago
|
} else {
|
||
3 years ago
|
this.$toast.info('Environment variable is not found : ' + m1).goAway(3000)
|
||
|
return m
|
||
4 years ago
|
}
|
||
3 years ago
|
})
|
||
|
)
|
||
|
|
||
|
const result = await this.$store.dispatch('apiClient/send', { api: this.api, apiDecoded })
|
||
|
this.api.response = result
|
||
|
if (result) {
|
||
|
if (result.status === 200) {
|
||
|
// this.$toast.success('API invoked successfully',{duration:1000});
|
||
4 years ago
|
} else {
|
||
3 years ago
|
this.$toast.error(`Error:${result.status}`, { duration: 1000 })
|
||
4 years ago
|
}
|
||
3 years ago
|
} else {
|
||
|
this.$toast.error('Some internal error occurred', { duration: 1000 })
|
||
|
}
|
||
|
},
|
||
4 years ago
|
|
||
3 years ago
|
async fileCollectionReload () {
|
||
|
const data = new Tree(await this.apiFileCollection.read())
|
||
|
console.log(data)
|
||
4 years ago
|
|
||
3 years ago
|
this.apiTv = data
|
||
|
// this.$set(this, 'apiCollections', data);
|
||
|
},
|
||
4 years ago
|
|
||
3 years ago
|
async tvNodeDelete (node) {
|
||
|
console.log(node, this.curApiCollectionPanel)
|
||
|
node.remove()
|
||
|
await this.savefileCollections(this.curApiCollectionPanel)
|
||
|
},
|
||
4 years ago
|
|
||
3 years ago
|
async tvNodeRename (params) {
|
||
|
console.log(params)
|
||
|
await this.savefileCollections(this.curApiCollectionPanel)
|
||
|
},
|
||
4 years ago
|
|
||
3 years ago
|
async onAddNode (params) {
|
||
|
console.log(params)
|
||
|
await this.savefileCollections(this.curApiCollectionPanel)
|
||
|
},
|
||
4 years ago
|
|
||
3 years ago
|
async tvNodeOnClick ({ parent, children, ...params }) {
|
||
|
console.log(params)
|
||
|
this.apiClickedOnList(params)
|
||
|
// if (params.query) ;
|
||
|
// this.selectQuery(params)
|
||
|
},
|
||
4 years ago
|
|
||
3 years ago
|
async savefileCollections (index = 0) {
|
||
|
await this.apiFileCollections[index].write({ data: this.tvToObject(index) })
|
||
|
// this.apiTvs = await this.fileCollections.read();
|
||
|
// this.$set(this.apiTvs, index, this.apiTvs);
|
||
|
},
|
||
4 years ago
|
|
||
3 years ago
|
tvToObject (index) {
|
||
|
const vm = this
|
||
4 years ago
|
|
||
3 years ago
|
function _dfs (oldNode) {
|
||
|
const newNode = {}
|
||
4 years ago
|
|
||
3 years ago
|
for (const k in oldNode) {
|
||
|
if (k !== 'children' && k !== 'parent') {
|
||
|
newNode[k] = oldNode[k]
|
||
4 years ago
|
}
|
||
|
}
|
||
|
|
||
3 years ago
|
if (oldNode.children && oldNode.children.length > 0) {
|
||
|
newNode.children = []
|
||
|
for (let i = 0, len = oldNode.children.length; i < len; i++) {
|
||
|
newNode.children.push(_dfs(oldNode.children[i]))
|
||
4 years ago
|
}
|
||
|
}
|
||
3 years ago
|
return newNode
|
||
|
}
|
||
4 years ago
|
|
||
3 years ago
|
return _dfs(vm.apiTvs[index]).children
|
||
|
},
|
||
4 years ago
|
|
||
3 years ago
|
async tvNodeFolderAdd (index) {
|
||
|
const node = new TreeNode({ name: 'New Folder', isLeaf: false, children: [] })
|
||
|
if (!this.apiTvs[index].children) { this.apiTvs[index].children = [] }
|
||
|
this.apiTvs[index].addChildren(node)
|
||
4 years ago
|
|
||
3 years ago
|
await this.saveFileCollection(index)
|
||
|
},
|
||
4 years ago
|
|
||
3 years ago
|
openApiFileCollection () {
|
||
|
const vm = this
|
||
|
// console.log(obj, key);
|
||
|
const file = dialog.showOpenDialog({
|
||
|
properties: ['openFile']
|
||
|
})
|
||
4 years ago
|
|
||
3 years ago
|
if (file && file[0]) {
|
||
|
const fileName = path.basename(file[0])
|
||
|
const pathObj = {
|
||
|
path: file[0] + '',
|
||
|
fileName
|
||
4 years ago
|
}
|
||
|
|
||
3 years ago
|
if (this.$store.getters['apiClient/GtrCurrentApiFilePaths'].every(({ path: p }) => p !== pathObj.path)) {
|
||
|
this.$store.commit('apiClient/MutApiFilePathsAdd', pathObj)
|
||
|
this.loadFileCollection(pathObj)
|
||
|
} else {
|
||
|
this.$toast.info('File already exist in collection').goAway(4000)
|
||
4 years ago
|
}
|
||
3 years ago
|
}
|
||
4 years ago
|
},
|
||
|
|
||
3 years ago
|
async saveFileCollection (index = 0) {
|
||
|
await this.apiFileCollections[index].write({ data: this.tvToObject(index) })
|
||
4 years ago
|
},
|
||
|
|
||
3 years ago
|
async loadFileCollection (path, index = 0) {
|
||
4 years ago
|
try {
|
||
3 years ago
|
const fileCollection = new FileCollection(path)
|
||
|
await fileCollection.init()
|
||
4 years ago
|
|
||
3 years ago
|
this.apiFileCollections.push(fileCollection)
|
||
4 years ago
|
|
||
3 years ago
|
const data = new Tree(await fileCollection.read())
|
||
|
this.apiTvs.push(data)
|
||
4 years ago
|
} catch (e) {
|
||
3 years ago
|
console.log('Error in loadFileCollection:', e)
|
||
|
throw e
|
||
4 years ago
|
}
|
||
3 years ago
|
},
|
||
|
async refreshFileCollection (index = 0) {
|
||
|
try {
|
||
|
const path = this.$store.getters['apiClient/GtrCurrentApiFilePaths'][index]
|
||
|
const fileCollection = new FileCollection(path)
|
||
|
await fileCollection.init()
|
||
|
this.apiFileCollections[index] = fileCollection
|
||
|
const data = new Tree(await fileCollection.read())
|
||
|
this.$set(this.apiTvs, index, data)
|
||
|
} catch (e) {
|
||
|
console.log('Error in loadFileCollection:', e)
|
||
|
throw e
|
||
|
}
|
||
|
},
|
||
4 years ago
|
|
||
3 years ago
|
async bookmarkApi () {
|
||
|
const q = this.api
|
||
|
const node = new TreeNode({
|
||
|
id: Date.now(),
|
||
|
label: 'Latest Api',
|
||
|
name: 'Last Saved Api',
|
||
|
pid: 0,
|
||
|
isLeaf: true,
|
||
|
...q
|
||
|
})
|
||
4 years ago
|
|
||
3 years ago
|
let expandedPanelIndex = this.curApiCollectionPanel
|
||
|
if (typeof expandedPanelIndex !== 'number' || expandedPanelIndex === -1) {
|
||
|
expandedPanelIndex = this.$store.getters['apiClient/GtrCurrentApiFilePaths'].findIndex(
|
||
|
file => file.path === path.join(this.currentProjectFolder, 'server', 'tool', this.projectApisFolder, 'apis.xc.json')
|
||
|
)
|
||
4 years ago
|
}
|
||
3 years ago
|
|
||
|
if (!this.apiTvs[expandedPanelIndex].children) { this.apiTvs[expandedPanelIndex].children = [] }
|
||
|
this.apiTvs[expandedPanelIndex].addChildren(node)
|
||
|
await this.savefileCollections(expandedPanelIndex)
|
||
|
}
|
||
|
|
||
|
},
|
||
|
|
||
|
beforeCreated () {
|
||
|
},
|
||
|
destroy () {
|
||
|
},
|
||
|
directives: {},
|
||
|
validate ({ params }) {
|
||
|
return true
|
||
|
},
|
||
|
head () {
|
||
|
return {}
|
||
|
},
|
||
|
props: ['nodes']
|
||
|
}
|
||
4 years ago
|
</script>
|
||
|
|
||
|
<style scoped>
|
||
|
|
||
|
.apis-list {
|
||
|
height: calc(100%);
|
||
|
overflow-y: auto;
|
||
|
}
|
||
|
|
||
|
.apis-request {
|
||
|
overflow-y: auto;
|
||
|
}
|
||
|
|
||
|
/deep/ > .req-inputs .v-toolbar__content {
|
||
|
width: 100%;
|
||
|
display: flex;
|
||
|
padding: 2px;
|
||
|
}
|
||
|
|
||
|
/deep/ .req-tabs > .v-tabs-items {
|
||
|
border-top: 1px solid #7F828B33;
|
||
|
}
|
||
|
|
||
|
.envs /deep/ .v-select__selections {
|
||
|
color: var(--v-accent-base)
|
||
|
}
|
||
|
|
||
|
/*.envs /deep/ .v-select__selections input { display: none}*/
|
||
|
|
||
|
</style>
|
||
|
|
||
|
<!--
|
||
|
/**
|
||
|
* @copyright Copyright (c) 2021, Xgene Cloud Ltd
|
||
|
*
|
||
|
* @author Naveen MR <oof1lab@gmail.com>
|
||
|
* @author Pranav C Balan <pranavxc@gmail.com>
|
||
|
*
|
||
|
* @license GNU AGPL version 3 or any later version
|
||
|
*
|
||
|
* This program is free software: you can redistribute it and/or modify
|
||
|
* it under the terms of the GNU Affero General Public License as
|
||
|
* published by the Free Software Foundation, either version 3 of the
|
||
|
* License, or (at your option) any later version.
|
||
|
*
|
||
|
* This program is distributed in the hope that it will be useful,
|
||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||
|
* GNU Affero General Public License for more details.
|
||
|
*
|
||
|
* You should have received a copy of the GNU Affero General Public License
|
||
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||
|
*
|
||
|
*/
|
||
|
-->
|