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.
153 lines
3.7 KiB
153 lines
3.7 KiB
4 years ago
|
<template>
|
||
|
<div>
|
||
|
<div class="d-flex">
|
||
|
<v-select
|
||
3 years ago
|
v-model="api.method"
|
||
4 years ago
|
outlined
|
||
|
dense
|
||
3 years ago
|
class="caption nc-select-hook-url-method"
|
||
3 years ago
|
:items="Object.keys(apiMethodMeta)"
|
||
3 years ago
|
style="max-width: 100px"
|
||
3 years ago
|
/>
|
||
4 years ago
|
<v-text-field
|
||
3 years ago
|
v-model="api.path"
|
||
4 years ago
|
outlined
|
||
|
placeholder="http://example.com"
|
||
3 years ago
|
dense
|
||
3 years ago
|
class="flex-grow-1 ml-2 caption nc-text-field-hook-url-path"
|
||
3 years ago
|
/>
|
||
4 years ago
|
</div>
|
||
|
|
||
3 years ago
|
<v-tabs v-model="tab" class="req-tabs" height="24">
|
||
|
<v-tab v-ge="['api-client', 'body']" class="caption">
|
||
3 years ago
|
<span class="text-capitalize">Body</span>
|
||
|
</v-tab>
|
||
3 years ago
|
<v-tab v-ge="['api-client', 'params']" class="caption">
|
||
|
<span class="text-capitalize">
|
||
|
Params <b v-if="paramsCount" class="green--text">({{ paramsCount }})</b></span
|
||
|
>
|
||
4 years ago
|
</v-tab>
|
||
3 years ago
|
<v-tab v-ge="['api-client', 'headers']" class="caption">
|
||
|
<span class="text-capitalize nc-tab-hook-header"
|
||
|
>Headers <b v-if="headersCount" class="green--text">({{ headersCount }})</b></span
|
||
|
>
|
||
4 years ago
|
</v-tab>
|
||
3 years ago
|
<v-tab v-ge="['api-client', 'auth']" class="caption">
|
||
3 years ago
|
<span class="text-capitalize">Auth</span>
|
||
|
</v-tab>
|
||
3 years ago
|
<v-tab-item>
|
||
|
<monaco-handlebar-editor
|
||
|
v-model="api.body"
|
||
|
style="height: 250px"
|
||
|
class="editor card text-left"
|
||
|
theme="vs-dark"
|
||
|
lang="json"
|
||
3 years ago
|
:options="{ validate: true, documentFormattingEdits: true, foldingRanges: true }"
|
||
3 years ago
|
/>
|
||
|
</v-tab-item>
|
||
4 years ago
|
<v-tab-item>
|
||
3 years ago
|
<params v-model="api.parameters" :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>
|
||
3 years ago
|
|
||
4 years ago
|
<v-tab-item>
|
||
3 years ago
|
<monaco-handlebar-editor
|
||
3 years ago
|
v-model="api.auth"
|
||
4 years ago
|
style="height: 250px"
|
||
|
class="editor card text-left"
|
||
|
theme="vs-dark"
|
||
3 years ago
|
:options="{ validate: true, documentFormattingEdits: true, foldingRanges: true }"
|
||
3 years ago
|
/>
|
||
3 years ago
|
<span class="caption grey--text"
|
||
|
>For more about auth option refer
|
||
|
<a href="https://github.com/axios/axios#request-config" target="_blank">axios docs</a>.</span
|
||
|
>
|
||
4 years ago
|
</v-tab-item>
|
||
|
</v-tabs>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
3 years ago
|
import params from '../../../apiClient/Params';
|
||
|
import headers from '../../../apiClient/Headers';
|
||
4 years ago
|
|
||
3 years ago
|
import { MonacoHandlebarEditor } from '../../../monaco/index';
|
||
4 years ago
|
|
||
|
export default {
|
||
3 years ago
|
tab: 0,
|
||
|
name: 'HttpWebhook',
|
||
4 years ago
|
components: {
|
||
|
params,
|
||
|
headers,
|
||
3 years ago
|
MonacoHandlebarEditor,
|
||
4 years ago
|
},
|
||
3 years ago
|
props: {
|
||
3 years ago
|
value: Object,
|
||
3 years ago
|
},
|
||
4 years ago
|
data: () => ({
|
||
|
apiMethodMeta: {
|
||
|
GET: {
|
||
3 years ago
|
color: 'success',
|
||
4 years ago
|
},
|
||
|
POST: {
|
||
3 years ago
|
color: 'warning',
|
||
4 years ago
|
},
|
||
|
DELETE: {
|
||
3 years ago
|
color: 'error',
|
||
4 years ago
|
},
|
||
|
PUT: {
|
||
3 years ago
|
color: 'info',
|
||
4 years ago
|
},
|
||
|
HEAD: {
|
||
3 years ago
|
color: 'info',
|
||
4 years ago
|
},
|
||
|
PATCH: {
|
||
3 years ago
|
color: 'info',
|
||
|
},
|
||
4 years ago
|
},
|
||
3 years ago
|
selectedEnv: '_noco',
|
||
|
environmentList: ['_noco'],
|
||
4 years ago
|
// current api
|
||
|
api: {
|
||
|
method: 'GET',
|
||
|
path: '',
|
||
|
body: '',
|
||
|
params: [],
|
||
|
auth: '',
|
||
|
headers: [],
|
||
|
response: {},
|
||
|
perf: {},
|
||
3 years ago
|
meta: {},
|
||
3 years ago
|
},
|
||
3 years ago
|
tab: 0,
|
||
4 years ago
|
}),
|
||
3 years ago
|
computed: {
|
||
3 years ago
|
paramsCount() {
|
||
3 years ago
|
return this.api.parameters && this.api.parameters.filter(p => p.name && p.enabled).length;
|
||
3 years ago
|
},
|
||
3 years ago
|
headersCount() {
|
||
3 years ago
|
return this.api.headers && this.api.headers.filter(h => h.name && h.enabled).length;
|
||
|
},
|
||
4 years ago
|
},
|
||
|
watch: {
|
||
3 years ago
|
value() {
|
||
4 years ago
|
if (this.api !== this.value) {
|
||
3 years ago
|
this.api = this.value || this.api;
|
||
4 years ago
|
}
|
||
|
},
|
||
|
api: {
|
||
3 years ago
|
handler() {
|
||
3 years ago
|
this.$emit('input', this.api);
|
||
|
},
|
||
|
},
|
||
4 years ago
|
},
|
||
3 years ago
|
created() {
|
||
3 years ago
|
this.api = this.value || this.api;
|
||
|
},
|
||
|
};
|
||
4 years ago
|
</script>
|
||
|
|
||
3 years ago
|
<style scoped></style>
|