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.
246 lines
7.0 KiB
246 lines
7.0 KiB
4 years ago
|
<template>
|
||
|
<div>
|
||
|
|
||
|
<v-toolbar flat height="42" class="toolbar-border-bottom">
|
||
|
<v-toolbar-title>
|
||
|
<v-breadcrumbs :items="[{
|
||
|
text: nodes.env,
|
||
|
disabled: true,
|
||
|
href: '#'
|
||
|
},{
|
||
|
text: nodes.dbAlias,
|
||
|
disabled: true,
|
||
|
href: '#'
|
||
|
},
|
||
|
{
|
||
|
text: nodes.tn + ' (Webhooks)',
|
||
|
disabled: true,
|
||
|
href: '#'
|
||
|
}]" divider=">" small>
|
||
|
<template v-slot:divider>
|
||
|
<v-icon small color="grey lighten-2">forward</v-icon>
|
||
|
</template>
|
||
|
</v-breadcrumbs>
|
||
|
|
||
|
</v-toolbar-title>
|
||
|
<v-spacer></v-spacer>
|
||
|
|
||
|
<x-btn outlined tooltip="Save Changes"
|
||
|
color="primary"
|
||
|
small
|
||
|
:disabled="loading || !valid || !hook.event"
|
||
|
|
||
|
v-ge="['rows','save']"
|
||
|
@click.prevent="saveHooks">
|
||
|
<v-icon small left>save</v-icon>
|
||
|
Save
|
||
|
</x-btn>
|
||
|
|
||
|
|
||
|
</v-toolbar>
|
||
|
|
||
|
<v-form
|
||
|
v-model="valid"
|
||
|
class="mx-auto"
|
||
|
ref="form"
|
||
|
lazy-validation
|
||
|
>
|
||
|
<v-card>
|
||
|
<v-container fluid>
|
||
|
<v-row>
|
||
|
<v-col cols="6">
|
||
|
<v-radio-group v-model="hook.event" @change="onEventChange">
|
||
|
|
||
|
<template v-slot:default>
|
||
|
<v-simple-table dense>
|
||
|
<template v-slot:default>
|
||
|
<thead>
|
||
|
<tr>
|
||
|
<th></th>
|
||
|
<th>Operation</th>
|
||
|
<th>Event</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
|
||
|
<tbody>
|
||
|
<tr v-for="(e,i) in eventList" :key="i"
|
||
|
:class="{'primary lighten-4 black--text': e.value === hook.event}">
|
||
|
<td>
|
||
|
<v-radio :value="e.value"></v-radio>
|
||
|
</td>
|
||
|
<td> {{ e.text[1] }}
|
||
|
</td>
|
||
|
<td> {{ e.text[0] }}
|
||
|
</td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</template>
|
||
|
</v-simple-table>
|
||
|
</template>
|
||
|
</v-radio-group>
|
||
|
|
||
|
<!-- <v-radio-group v-model="hook.event" @change="onEventChage">-->
|
||
|
<!-- <v-radio v-for="(e,i) in eventList" :key="i" :label="e.text" :value="e.v"></v-radio>-->
|
||
|
<!-- </v-radio-group>-->
|
||
|
|
||
|
|
||
|
<!-- <v-select-->
|
||
|
<!-- v-model="hook.event"-->
|
||
|
<!-- :items="['Before','After']"-->
|
||
|
<!-- label="Event"-->
|
||
|
<!-- required-->
|
||
|
<!-- ></v-select>-->
|
||
|
|
||
|
<!-- <v-select-->
|
||
|
<!-- v-model="hook.operation"-->
|
||
|
<!-- :items="['Insert','Update','Delete']"-->
|
||
|
<!-- label="Operation"-->
|
||
|
<!-- required-->
|
||
|
<!-- ></v-select>-->
|
||
|
</v-col>
|
||
|
<v-col cols="6">
|
||
|
<v-card class="">
|
||
|
<v-card-title>Webhook</v-card-title>
|
||
|
<v-card-text>
|
||
|
<v-text-field
|
||
|
:disabled="!hook.event"
|
||
|
v-model="hook.title"
|
||
|
label="Title"
|
||
|
required
|
||
|
:rules="[v => !!v || 'Title Required']"
|
||
|
></v-text-field>
|
||
|
<v-text-field
|
||
|
:disabled="!hook.event"
|
||
|
v-model="hook.url"
|
||
|
label="URL"
|
||
|
required
|
||
|
type="url"
|
||
|
:rules="urlRules"
|
||
|
></v-text-field>
|
||
|
|
||
|
|
||
|
<!-- <v-textarea-->
|
||
|
<!-- v-model="hook.header"-->
|
||
|
<!-- label="Headers"-->
|
||
|
<!-- required-->
|
||
|
<!-- ></v-textarea>-->
|
||
|
</v-card-text>
|
||
|
</v-card>
|
||
|
</v-col>
|
||
|
</v-row>
|
||
|
</v-container>
|
||
|
</v-card>
|
||
|
</v-form>
|
||
|
|
||
|
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
export default {
|
||
|
name: "webhooks",
|
||
|
props: ['nodes'],
|
||
|
data: () => ({
|
||
|
valid: false,
|
||
|
loading: false,
|
||
|
eventList: [
|
||
|
{text: ["Before", "Insert"], value: ['before', 'insert']},
|
||
|
{text: ["After", "Insert"], value: ['after', 'insert']},
|
||
|
{text: ["Before", "Update"], value: ['before', 'update']},
|
||
|
{text: ["After", "Update"], value: ['after', 'update']},
|
||
|
{text: ["Before", "Delete"], value: ['before', 'delete']},
|
||
|
{text: ["After", "Delete"], value: ['after', 'delete']},
|
||
|
],
|
||
|
hook: {},
|
||
|
urlRules: [
|
||
|
v => !v || !v.trim() || /^https?:\/\/.{1,}/.test(v) || 'Not a valid URL',
|
||
|
]
|
||
|
|
||
|
}),
|
||
|
methods: {
|
||
|
async onEventChange() {
|
||
|
this.loading = true;
|
||
|
this.hook = {
|
||
|
...this.hook,
|
||
|
url: '',
|
||
|
title: this.hook.event.join('.')
|
||
|
}
|
||
|
|
||
|
const result = (await this.$store.dispatch('sqlMgr/ActSqlOp', [
|
||
|
{
|
||
|
env: this.nodes.env,
|
||
|
dbAlias: this.nodes.dbAlias,
|
||
|
}, 'tableXcHooksGet', {
|
||
|
tn: this.nodes.tn,
|
||
|
data: {
|
||
|
event: this.hook.event[0],
|
||
|
operation: this.hook.event[1],
|
||
|
}
|
||
|
}
|
||
|
]));
|
||
|
const hooksDetails = result && result.data.list && result.data.list[0];
|
||
|
|
||
|
if (hooksDetails) {
|
||
|
this.hook = {
|
||
|
...this.hook,
|
||
|
url: hooksDetails.url,
|
||
|
title: hooksDetails.title
|
||
|
}
|
||
|
}
|
||
|
this.loading = false;
|
||
|
},
|
||
|
async saveHooks() {
|
||
|
if (!this.valid || !this.hook.event) {
|
||
|
return;
|
||
|
}
|
||
|
this.loading = true;
|
||
|
let hooksDetails = (await this.$store.dispatch('sqlMgr/ActSqlOp', [
|
||
|
{
|
||
|
env: this.nodes.env,
|
||
|
dbAlias: this.nodes.dbAlias,
|
||
|
}, 'tableXcHooksSet', {
|
||
|
tn: this.nodes.tn,
|
||
|
data: {
|
||
|
...this.hook,
|
||
|
event: this.hook.event[0],
|
||
|
operation: this.hook.event[1],
|
||
|
}
|
||
|
}
|
||
|
])).data;
|
||
|
this.$toast.success('Webhook details updated successfully').goAway(3000);
|
||
|
this.loading = false;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style scoped>
|
||
|
/*tr.selected{*/
|
||
|
/* background: #8ceaf6;*/
|
||
|
/*}*/
|
||
|
</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/>.
|
||
|
*
|
||
|
*/
|
||
|
-->
|