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.
812 lines
28 KiB
812 lines
28 KiB
3 years ago
|
<!-- eslint-disable -->
|
||
|
<template>
|
||
|
<v-container fluid class="api-client grid-list-xs pa-0" style="height: 100%">
|
||
|
<splitpanes style="height: 100%" class="xc-theme">
|
||
4 years ago
|
<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">
|
||
3 years ago
|
<div v-for="(api, i) in $store.state.apiClient.list" :key="i" class="pa-0 ma-0">
|
||
4 years ago
|
<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"
|
||
3 years ago
|
:class="{
|
||
|
'white--text': !api.response || !api.response.status,
|
||
|
'red--text': api.response && api.response.status >= 400,
|
||
|
'green--text': api.response && api.response.status < 400,
|
||
|
}"
|
||
3 years ago
|
>
|
||
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)">
|
||
3 years ago
|
<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>
|
||
3 years ago
|
<v-expansion-panel v-for="(apiTv, i) in apiTvs" :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>
|
||
3 years ago
|
<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>
|
||
3 years ago
|
|
||
|
<x-icon
|
||
|
color="white grey"
|
||
|
class="float-right mr-3"
|
||
|
small
|
||
3 years ago
|
@click="(showCtxMenu[i] = true), (x = $event.clientX), (y = $event.clientY)"
|
||
3 years ago
|
@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="{
|
||
3 years ago
|
'Add Folder': 'add-folder',
|
||
|
'Reveal in Folder': 'reveal-in-folder',
|
||
|
'Delete Collection': 'delete-collection',
|
||
|
'Refresh Collection': 'refresh-collection',
|
||
3 years ago
|
}"
|
||
3 years ago
|
@click="ctxMenuClickHandler($event, i)"
|
||
3 years ago
|
/>
|
||
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" />
|
||
3 years ago
|
<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>-->
|
||
3 years ago
|
<b style="display: inline-block; min-width: 45px" :class="`${apiMeta[api.type].color}--text`">
|
||
|
{{ api.type === 'DELETE' ? 'DEL' : api.type }}
|
||
|
</b>
|
||
4 years ago
|
|
||
3 years ago
|
<span
|
||
|
class="grey--text d-block"
|
||
3 years ago
|
style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap"
|
||
|
>{{ api.name }}</span
|
||
|
>
|
||
4 years ago
|
</div>
|
||
3 years ago
|
<div v-else style="width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap">
|
||
3 years ago
|
{{ 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
|
||
3 years ago
|
class="toolbar-border-bottom elevation-0 d-flex req-inputs"
|
||
3 years ago
|
height="55"
|
||
3 years ago
|
style="position: relative; z-index: 2; width: 100%"
|
||
3 years ago
|
>
|
||
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"
|
||
3 years ago
|
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()">
|
||
3 years ago
|
<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()" />
|
||
3 years ago
|
<x-btn
|
||
|
v-if="$store.getters['project/GtrProjectJson']"
|
||
|
icon="mdi-eye-outline"
|
||
|
tooltip="Environments"
|
||
|
@click="environmentDialog = true"
|
||
|
/>
|
||
4 years ago
|
</v-toolbar>
|
||
|
|
||
3 years ago
|
<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>
|
||
3 years ago
|
<v-tab class="caption"> Body </v-tab>
|
||
|
<v-tab class="caption"> Auth </v-tab>
|
||
|
<v-tab class="caption"> Perf Test </v-tab>
|
||
|
<div class="flex-grow-1 d-flex text-right pr-4 justify-end">
|
||
|
<div class="flex-shrink-1">
|
||
4 years ago
|
<v-select
|
||
|
v-model="selectedEnv"
|
||
|
height="19"
|
||
|
class="caption envs"
|
||
|
dense
|
||
|
:items="environmentList"
|
||
|
placeholder="Environment"
|
||
|
single-line
|
||
|
>
|
||
3 years ago
|
<template #selection="{ item }">
|
||
|
<span 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"
|
||
3 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>-->
|
||
|
|
||
3 years ago
|
<v-tabs v-if="api.response" height="24">
|
||
|
<v-tab class="caption"> Body </v-tab>
|
||
3 years ago
|
<v-tab class="caption">
|
||
3 years ago
|
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">
|
||
3 years ago
|
<span class="grey--text">Status:</span
|
||
|
><span
|
||
3 years ago
|
:class="{
|
||
3 years ago
|
'green--text': api.response.status === 200,
|
||
|
'red--text': api.response.status !== 200,
|
||
3 years ago
|
}"
|
||
3 years ago
|
><b>{{ api.response.status }}</b></span
|
||
|
>
|
||
3 years ago
|
</template>
|
||
3 years ago
|
|
||
3 years ago
|
<template v-if="api.timeTaken">
|
||
3 years ago
|
<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"
|
||
3 years ago
|
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"
|
||
3 years ago
|
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 */
|
||
3 years ago
|
import { mapGetters, mapActions } from 'vuex';
|
||
3 years ago
|
|
||
3 years ago
|
import Vue from 'vue';
|
||
3 years ago
|
|
||
3 years ago
|
import { VueTreeList, Tree, TreeNode } from 'vue-tree-list';
|
||
|
import { Splitpanes, Pane } from 'splitpanes';
|
||
|
import params from '../apiClient/Params';
|
||
|
import headers from '../apiClient/Headers';
|
||
3 years ago
|
|
||
3 years ago
|
import { MonacoJsonEditor } from '../monaco/index';
|
||
3 years ago
|
|
||
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,
|
||
3 years ago
|
environment,
|
||
3 years ago
|
},
|
||
3 years ago
|
data() {
|
||
3 years ago
|
return {
|
||
|
environmentDialog: false,
|
||
|
showCtxMenu: {},
|
||
|
apiTvs: [],
|
||
|
apiFilePaths: [],
|
||
|
apiFileCollections: [],
|
||
|
curApiCollectionPanel: null,
|
||
|
|
||
|
x: 0,
|
||
|
y: 0,
|
||
|
|
||
|
apiMeta: {
|
||
|
GET: {
|
||
3 years ago
|
color: 'success',
|
||
4 years ago
|
},
|
||
3 years ago
|
POST: {
|
||
3 years ago
|
color: 'warning',
|
||
3 years ago
|
},
|
||
|
DELETE: {
|
||
3 years ago
|
color: 'error',
|
||
3 years ago
|
},
|
||
|
PUT: {
|
||
3 years ago
|
color: 'info',
|
||
3 years ago
|
},
|
||
|
HEAD: {
|
||
3 years ago
|
color: 'info',
|
||
4 years ago
|
},
|
||
3 years ago
|
PATCH: {
|
||
3 years ago
|
color: 'info',
|
||
|
},
|
||
3 years ago
|
},
|
||
4 years ago
|
|
||
3 years ago
|
// current api
|
||
|
api: {
|
||
|
type: 'GET',
|
||
|
url: '',
|
||
|
body: '',
|
||
|
params: [],
|
||
|
auth: '',
|
||
|
headers: [],
|
||
|
response: {},
|
||
3 years ago
|
perf: {},
|
||
|
},
|
||
|
};
|
||
3 years ago
|
},
|
||
|
computed: {
|
||
3 years ago
|
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',
|
||
3 years ago
|
projectApisFolder: 'project/projectApisFolder',
|
||
3 years ago
|
}),
|
||
3 years ago
|
paramsCount() {
|
||
|
return this.api.params && this.api.params.filter(p => p.name && p.enabled).length;
|
||
3 years ago
|
},
|
||
3 years ago
|
headersCount() {
|
||
|
return this.api.headers && this.api.headers.filter(h => h.name && h.enabled).length;
|
||
3 years ago
|
},
|
||
3 years ago
|
environmentList() {
|
||
|
return Object.keys(this.$store.getters['project/GtrApiEnvironment']);
|
||
3 years ago
|
},
|
||
|
selectedEnv: {
|
||
3 years ago
|
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 });
|
||
|
},
|
||
|
},
|
||
3 years ago
|
},
|
||
|
watch: {},
|
||
3 years ago
|
async created() {
|
||
|
console.log('ApisList', this.$store.state.apiClient.list);
|
||
3 years ago
|
|
||
|
this.$store.dispatch('apiClient/loadApiCollectionForProject', {
|
||
|
projectId: this.$route.params.project,
|
||
3 years ago
|
projectName: this.$store.getters['project/GtrProjectName'],
|
||
|
});
|
||
3 years ago
|
|
||
|
try {
|
||
|
/* load all files that are were previously opened */
|
||
|
if (!this.$store.getters['apiClient/GtrCurrentApiFilePaths'].length) {
|
||
3 years ago
|
const defaultPath = path.join(
|
||
|
this.currentProjectFolder,
|
||
|
'server',
|
||
|
'tool',
|
||
|
this.projectApisFolder,
|
||
|
'apis.xc.json'
|
||
|
);
|
||
3 years ago
|
this.$store.commit('apiClient/MutApiFilePathsAdd', {
|
||
|
path: defaultPath,
|
||
3 years ago
|
fileName: path.basename(defaultPath),
|
||
|
});
|
||
3 years ago
|
}
|
||
4 years ago
|
|
||
3 years ago
|
for (let i = 0; i < this.$store.getters['apiClient/GtrCurrentApiFilePaths'].length; ++i) {
|
||
3 years ago
|
await this.loadFileCollection(this.$store.getters['apiClient/GtrCurrentApiFilePaths'][i]);
|
||
4 years ago
|
}
|
||
3 years ago
|
} catch (e) {
|
||
3 years ago
|
console.log('Failed to load previously opened query collections', e);
|
||
3 years ago
|
}
|
||
|
|
||
|
if (this.nodes.url) {
|
||
3 years ago
|
Vue.set(this.api, 'type', 'GET');
|
||
|
this.api.url = this.nodes.url;
|
||
3 years ago
|
}
|
||
3 years ago
|
console.log(this.nodes);
|
||
3 years ago
|
},
|
||
3 years ago
|
mounted() {},
|
||
|
beforeDestroy() {},
|
||
3 years ago
|
methods: {
|
||
3 years ago
|
async handleKeyDown({ metaKey, key, altKey, shiftKey, ctrlKey }) {
|
||
|
console.log(metaKey, key, altKey, shiftKey, ctrlKey);
|
||
3 years ago
|
// cmd + s -> save
|
||
|
// cmd + l -> reload
|
||
|
// cmd + n -> new
|
||
|
// cmd + d -> delete
|
||
|
// cmd + enter -> send api
|
||
|
|
||
|
switch ([metaKey, key].join('_')) {
|
||
3 years ago
|
case 'true_s':
|
||
|
await this.bookmarkApi();
|
||
|
break;
|
||
|
case 'true_e':
|
||
|
this.environmentDialog = true;
|
||
|
break;
|
||
|
// case 'true_n' :
|
||
|
// this.addColumn();
|
||
|
// break;
|
||
|
case 'true_d':
|
||
|
await this.deleteProcedure('showDialog');
|
||
|
break;
|
||
|
case 'true_Enter':
|
||
|
await this.apiSend();
|
||
|
break;
|
||
3 years ago
|
}
|
||
|
},
|
||
4 years ago
|
|
||
3 years ago
|
async openCollectionFolder(pathString) {
|
||
|
shell.showItemInFolder(pathString);
|
||
3 years ago
|
},
|
||
3 years ago
|
async openNewCollection() {
|
||
3 years ago
|
try {
|
||
3 years ago
|
const toLocalPath = path.join(this.currentProjectFolder, 'server', 'tool', this.projectApisFolder);
|
||
4 years ago
|
|
||
3 years ago
|
const userChosenPath = dialog.showSaveDialog({
|
||
|
defaultPath: toLocalPath,
|
||
3 years ago
|
filters: [{ name: 'JSON', extensions: ['json'] }],
|
||
|
});
|
||
4 years ago
|
|
||
3 years ago
|
if (userChosenPath) {
|
||
3 years ago
|
console.log(userChosenPath);
|
||
|
fs.writeFileSync(userChosenPath, '[]', 'utf-8');
|
||
3 years ago
|
const pathObj = {
|
||
|
path: userChosenPath,
|
||
3 years ago
|
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);
|
||
3 years ago
|
} catch (e) {
|
||
3 years ago
|
console.log(e);
|
||
|
throw e;
|
||
3 years ago
|
}
|
||
|
},
|
||
3 years ago
|
async ctxMenuClickHandler(actionEvent, index) {
|
||
|
console.log(actionEvent, index);
|
||
3 years ago
|
switch (actionEvent.value) {
|
||
|
case 'add-folder':
|
||
3 years ago
|
this.tvNodeFolderAdd(index);
|
||
|
break;
|
||
3 years ago
|
case 'reveal-in-folder':
|
||
3 years ago
|
await this.openCollectionFolder(this.$store.getters['apiClient/GtrCurrentApiFilePaths'][index].path);
|
||
|
break;
|
||
3 years ago
|
case 'delete-collection':
|
||
3 years ago
|
this.$store.commit('apiClient/MutApiFilePathsRemove', index);
|
||
|
this.apiFileCollections.splice(index, 1);
|
||
|
this.apiTvs.splice(index, 1);
|
||
|
break;
|
||
3 years ago
|
case 'refresh-collection':
|
||
3 years ago
|
await this.refreshFileCollection(index);
|
||
|
break;
|
||
3 years ago
|
default:
|
||
3 years ago
|
break;
|
||
3 years ago
|
}
|
||
|
// this.deleteQueryByPath(this.apiTvs, this.menuItem.path);
|
||
|
},
|
||
3 years ago
|
openUrl(url) {
|
||
|
shell.openExternal(url);
|
||
3 years ago
|
},
|
||
4 years ago
|
|
||
3 years ago
|
apiClickedOnList(api) {
|
||
3 years ago
|
this.api = {
|
||
|
...api,
|
||
|
params: api.params && api.params.map(param => ({ ...param })),
|
||
3 years ago
|
headers: api.headers && api.headers.map(header => ({ ...header })),
|
||
|
};
|
||
3 years ago
|
},
|
||
4 years ago
|
|
||
3 years ago
|
apiDeleteFromList(index) {
|
||
|
this.$store.commit('apiClient/MutListRemove', index);
|
||
3 years ago
|
},
|
||
4 years ago
|
|
||
3 years ago
|
async apiSend() {
|
||
|
console.log('apiSend');
|
||
4 years ago
|
|
||
3 years ago
|
if (!this.api.url.trim()) {
|
||
3 years ago
|
this.$toast.info('Please enter http url').goAway(3000);
|
||
|
return;
|
||
3 years ago
|
}
|
||
|
|
||
3 years ago
|
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) {
|
||
3 years ago
|
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
|
})
|
||
3 years ago
|
);
|
||
3 years ago
|
|
||
3 years ago
|
const result = await this.$store.dispatch('apiClient/send', { api: this.api, apiDecoded });
|
||
|
this.api.response = result;
|
||
3 years ago
|
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 {
|
||
3 years ago
|
this.$toast.error('Some internal error occurred', { duration: 1000 });
|
||
3 years ago
|
}
|
||
|
},
|
||
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;
|
||
3 years ago
|
// 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);
|
||
3 years ago
|
},
|
||
4 years ago
|
|
||
3 years ago
|
async tvNodeRename(params) {
|
||
|
console.log(params);
|
||
|
await this.savefileCollections(this.curApiCollectionPanel);
|
||
3 years ago
|
},
|
||
4 years ago
|
|
||
3 years ago
|
async onAddNode(params) {
|
||
|
console.log(params);
|
||
|
await this.savefileCollections(this.curApiCollectionPanel);
|
||
3 years ago
|
},
|
||
4 years ago
|
|
||
3 years ago
|
async tvNodeOnClick({ parent, children, ...params }) {
|
||
|
console.log(params);
|
||
|
this.apiClickedOnList(params);
|
||
3 years ago
|
// 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) });
|
||
3 years ago
|
// 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') {
|
||
3 years ago
|
newNode[k] = oldNode[k];
|
||
4 years ago
|
}
|
||
|
}
|
||
|
|
||
3 years ago
|
if (oldNode.children && oldNode.children.length > 0) {
|
||
3 years ago
|
newNode.children = [];
|
||
3 years ago
|
for (let i = 0, len = oldNode.children.length; i < len; i++) {
|
||
3 years ago
|
newNode.children.push(_dfs(oldNode.children[i]));
|
||
4 years ago
|
}
|
||
|
}
|
||
3 years ago
|
return newNode;
|
||
3 years ago
|
}
|
||
4 years ago
|
|
||
3 years ago
|
return _dfs(vm.apiTvs[index]).children;
|
||
3 years ago
|
},
|
||
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);
|
||
3 years ago
|
},
|
||
4 years ago
|
|
||
3 years ago
|
openApiFileCollection() {
|
||
|
const vm = this;
|
||
3 years ago
|
// console.log(obj, key);
|
||
|
const file = dialog.showOpenDialog({
|
||
3 years ago
|
properties: ['openFile'],
|
||
|
});
|
||
4 years ago
|
|
||
3 years ago
|
if (file && file[0]) {
|
||
3 years ago
|
const fileName = path.basename(file[0]);
|
||
3 years ago
|
const pathObj = {
|
||
|
path: file[0] + '',
|
||
3 years ago
|
fileName,
|
||
|
};
|
||
4 years ago
|
|
||
3 years ago
|
if (this.$store.getters['apiClient/GtrCurrentApiFilePaths'].every(({ path: p }) => p !== pathObj.path)) {
|
||
3 years ago
|
this.$store.commit('apiClient/MutApiFilePathsAdd', pathObj);
|
||
|
this.loadFileCollection(pathObj);
|
||
3 years ago
|
} else {
|
||
3 years ago
|
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
|
},
|
||
3 years ago
|
async refreshFileCollection(index = 0) {
|
||
3 years ago
|
try {
|
||
3 years ago
|
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);
|
||
3 years ago
|
} catch (e) {
|
||
3 years ago
|
console.log('Error in loadFileCollection:', e);
|
||
|
throw e;
|
||
3 years ago
|
}
|
||
|
},
|
||
4 years ago
|
|
||
3 years ago
|
async bookmarkApi() {
|
||
|
const q = this.api;
|
||
3 years ago
|
const node = new TreeNode({
|
||
|
id: Date.now(),
|
||
|
label: 'Latest Api',
|
||
|
name: 'Last Saved Api',
|
||
|
pid: 0,
|
||
|
isLeaf: true,
|
||
3 years ago
|
...q,
|
||
|
});
|
||
4 years ago
|
|
||
3 years ago
|
let expandedPanelIndex = this.curApiCollectionPanel;
|
||
3 years ago
|
if (typeof expandedPanelIndex !== 'number' || expandedPanelIndex === -1) {
|
||
|
expandedPanelIndex = this.$store.getters['apiClient/GtrCurrentApiFilePaths'].findIndex(
|
||
3 years ago
|
file =>
|
||
|
file.path === path.join(this.currentProjectFolder, 'server', 'tool', this.projectApisFolder, 'apis.xc.json')
|
||
|
);
|
||
4 years ago
|
}
|
||
3 years ago
|
|
||
3 years ago
|
if (!this.apiTvs[expandedPanelIndex].children) {
|
||
|
this.apiTvs[expandedPanelIndex].children = [];
|
||
|
}
|
||
|
this.apiTvs[expandedPanelIndex].addChildren(node);
|
||
|
await this.savefileCollections(expandedPanelIndex);
|
||
|
},
|
||
3 years ago
|
},
|
||
|
|
||
3 years ago
|
beforeCreated() {},
|
||
|
destroy() {},
|
||
3 years ago
|
directives: {},
|
||
3 years ago
|
validate({ params }) {
|
||
|
return true;
|
||
3 years ago
|
},
|
||
3 years ago
|
head() {
|
||
|
return {};
|
||
3 years ago
|
},
|
||
3 years ago
|
props: ['nodes'],
|
||
|
};
|
||
4 years ago
|
</script>
|
||
|
|
||
|
<style scoped>
|
||
3 years ago
|
.apis-list {
|
||
|
height: calc(100%);
|
||
|
overflow-y: auto;
|
||
|
}
|
||
4 years ago
|
|
||
3 years ago
|
.apis-request {
|
||
|
overflow-y: auto;
|
||
|
}
|
||
4 years ago
|
|
||
3 years ago
|
/deep/ > .req-inputs .v-toolbar__content {
|
||
|
width: 100%;
|
||
|
display: flex;
|
||
|
padding: 2px;
|
||
|
}
|
||
4 years ago
|
|
||
3 years ago
|
/deep/ .req-tabs > .v-tabs-items {
|
||
|
border-top: 1px solid #7f828b33;
|
||
|
}
|
||
4 years ago
|
|
||
3 years ago
|
.envs /deep/ .v-select__selections {
|
||
|
color: var(--v-accent-base);
|
||
|
}
|
||
4 years ago
|
|
||
3 years ago
|
/*.envs /deep/ .v-select__selections input { display: none}*/
|
||
4 years ago
|
</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/>.
|
||
|
*
|
||
|
*/
|
||
|
-->
|