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.
697 lines
22 KiB
697 lines
22 KiB
<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 #divider> |
|
<v-icon small color="grey lighten-2"> |
|
forward |
|
</v-icon> |
|
</template> |
|
</v-breadcrumbs> |
|
</v-toolbar-title> |
|
<v-spacer /> |
|
|
|
<x-btn |
|
outlined |
|
tooltip="Close webhooks modal" |
|
small |
|
@click.prevent="$emit('close')" |
|
> |
|
<v-icon small left> |
|
mdi-close-circle-outline |
|
</v-icon> |
|
Close |
|
</x-btn> |
|
<x-btn |
|
v-ge="['hooks','reload']" |
|
outlined |
|
tooltip="Reload hooks" |
|
color="primary" |
|
small |
|
@click.prevent="loadHooksList" |
|
> |
|
<v-icon small left> |
|
mdi-reload |
|
</v-icon> |
|
Reload |
|
</x-btn> |
|
|
|
<x-btn |
|
v-ge="['hooks','add new']" |
|
outlined |
|
tooltip="Save Changes" |
|
color="primary" |
|
small |
|
@click.prevent="addNewHook" |
|
> |
|
<v-icon small left> |
|
mdi-plus |
|
</v-icon> |
|
Add New |
|
</x-btn> |
|
|
|
<!-- <x-btn outlined tooltip="Save Changes" |
|
color="primary" |
|
small |
|
:disabled="loading || !valid || !hook.event" |
|
|
|
v-ge="['hooks','save']" |
|
@click.prevent="saveHooks"> |
|
<v-icon small left>save</v-icon> |
|
Save |
|
</x-btn>--> |
|
</v-toolbar> |
|
|
|
<v-form |
|
ref="form" |
|
v-model="valid" |
|
class="mx-auto" |
|
lazy-validation |
|
> |
|
<v-container fluid> |
|
<v-row> |
|
<v-col cols="7"> |
|
<v-radio-group v-model="selectedHook" @change="onEventChange"> |
|
<template #default> |
|
<v-simple-table dense> |
|
<template #default> |
|
<thead> |
|
<tr> |
|
<th /> |
|
<th>Title</th> |
|
<th>Event</th> |
|
<th>Condition</th> |
|
<th>Notify Via</th> |
|
<th>Action</th> |
|
</tr> |
|
</thead> |
|
|
|
<tbody> |
|
<template v-if="hooks && hooks.length"> |
|
<tr v-for="(item,i) in hooks" :key="i"> |
|
<td> |
|
<v-radio :value="i" /> |
|
</td> |
|
<td>{{ item.title }}</td> |
|
<td>{{ item.event }} {{ item.operation }}</td> |
|
<td> |
|
<v-icon v-if="item.condition" color="success" small> |
|
mdi-check-bold |
|
</v-icon> |
|
</td> |
|
<td>{{ item.notification && item.notification.type }}</td> |
|
<td> |
|
<x-icon small color="error" @click.stop="deleteHook(item, i)"> |
|
mdi-delete |
|
</x-icon> |
|
<!-- <x-icon small :color="loading || !valid || !hook.event ? 'grey' : 'primary'" |
|
@click.stop="(!loading && valid && hook.event) && saveHooks()">save |
|
</x-icon>--> |
|
</td> |
|
</tr> |
|
</template> |
|
<tr v-else> |
|
<td colspan="6" class="text-center py-5"> |
|
<x-btn |
|
v-ge="['hooks','add new']" |
|
outlined |
|
tooltip="Save Changes" |
|
color="primary" |
|
small |
|
@click.prevent="addNewHook" |
|
> |
|
<v-icon small left> |
|
mdi-plus |
|
</v-icon> |
|
Add New Webhook |
|
</x-btn> |
|
</td> |
|
</tr> |
|
</tbody> |
|
</template> |
|
</v-simple-table> |
|
</template> |
|
</v-radio-group> |
|
</v-col> |
|
<v-col cols="5"> |
|
<v-card v-if="hook" class=""> |
|
<v-card-title> |
|
Webhook |
|
<v-spacer /> |
|
<x-btn |
|
v-ge="['hooks','save']" |
|
outlined |
|
tooltip="Save" |
|
color="primary" |
|
small |
|
|
|
:disabled="loading || !valid || !hook.event" |
|
@click.prevent="saveHooks" |
|
> |
|
<v-icon small left> |
|
save |
|
</v-icon> |
|
Save |
|
</x-btn> |
|
</v-card-title> |
|
<v-card-text> |
|
<v-text-field |
|
v-model="hook.title" |
|
class="caption" |
|
outlined |
|
dense |
|
label="Title" |
|
required |
|
:rules="[v => !!v || 'Title Required']" |
|
/> |
|
|
|
<webhook-event |
|
:event.sync="hook.event" |
|
:operation.sync="hook.operation" |
|
/> |
|
|
|
<v-card class="mb-8"> |
|
<v-card-text> |
|
<v-checkbox |
|
v-model="enableCondition" |
|
dense |
|
hide-details |
|
class="mt-1" |
|
label="On Condition" |
|
@change="checkConditionAvail" |
|
/> |
|
|
|
<column-filter |
|
v-if="enableCondition && _isEE" |
|
v-model="hook.condition" |
|
:meta="meta" |
|
:field-list="fieldList" |
|
dense |
|
style="max-width: 100%" |
|
/> |
|
</v-card-text> |
|
</v-card> |
|
|
|
<v-select |
|
v-model="hook.notification.type" |
|
outlined |
|
dense |
|
label="Notification" |
|
required |
|
:items="notificationList" |
|
:rules="[v => !!v || 'Title Required']" |
|
class="caption" |
|
:prepend-inner-icon="notificationIcon[hook.notification.type]" |
|
@change="onNotTypeChange" |
|
> |
|
<template #item="{item}"> |
|
<v-list-item-icon> |
|
<v-icon small> |
|
{{ notificationIcon[item] }} |
|
</v-icon> |
|
</v-list-item-icon> |
|
<v-list-item-title> |
|
{{ item }} |
|
</v-list-item-title> |
|
</template> |
|
</v-select> |
|
|
|
<template v-if="hook.notification.type === 'URL'"> |
|
<http-webhook v-model="notification" /> |
|
</template> |
|
|
|
<template v-if="hook.notification.type === 'Slack'"> |
|
<v-combobox |
|
v-if="slackChannels" |
|
v-model="notification.channels" |
|
:rules="[v => !!v || 'Required']" |
|
:items="slackChannels" |
|
item-text="channel" |
|
label="Select Slack channels" |
|
multiple |
|
outlined |
|
dense |
|
class="caption" |
|
/> |
|
</template> |
|
<template v-if="hook.notification.type === 'Microsoft Teams'"> |
|
<v-combobox |
|
v-if="teamsChannels" |
|
v-model="notification.channels" |
|
:rules="[v => !!v || 'Required']" |
|
:items="teamsChannels" |
|
item-text="channel" |
|
label="Select Teams channels" |
|
multiple |
|
outlined |
|
dense |
|
class="caption" |
|
/> |
|
</template> |
|
<template v-if="hook.notification.type === 'Discord'"> |
|
<v-combobox |
|
v-if="discordChannels" |
|
v-model="notification.channels" |
|
:rules="[v => !!v || 'Required']" |
|
:items="discordChannels" |
|
item-text="channel" |
|
label="Select Discord channels" |
|
multiple |
|
outlined |
|
dense |
|
class="caption" |
|
/> |
|
</template> |
|
<template v-if="hook.notification.type === 'Mattermost'"> |
|
<v-combobox |
|
v-if="mattermostChannels" |
|
v-model="notification.channels" |
|
:rules="[v => !!v || 'Required']" |
|
:items="mattermostChannels" |
|
item-text="channel" |
|
label="Select Mattermost channels" |
|
multiple |
|
outlined |
|
dense |
|
class="caption" |
|
/> |
|
</template> |
|
|
|
<template v-if="inputs[hook.notification.type] && notification"> |
|
<template v-for="input in inputs[hook.notification.type]"> |
|
<v-textarea |
|
v-if="input.type === 'LongText'" |
|
:key="input.key" |
|
v-model="notification[input.key]" |
|
class="caption" |
|
dense |
|
outlined |
|
:label="input.label" |
|
:rules="[v => !input.required || !!v || 'Required']" |
|
/> |
|
<v-text-field |
|
v-else |
|
:key="input.key" |
|
v-model="notification[input.key]" |
|
class="caption" |
|
dense |
|
outlined |
|
:label="input.label" |
|
:rules="[v => !input.required || !!v || 'Required']" |
|
/> |
|
</template> |
|
</template> |
|
</v-card-text> |
|
|
|
<v-card-text> |
|
<span class="caption grey--text"> |
|
<em>Available context variables are <strong>data, user, payload and env</strong></em> |
|
<v-tooltip top> |
|
<template #activator="{on}"> |
|
<v-icon |
|
small |
|
color="grey" |
|
class="ml-2" |
|
v-on="on" |
|
>mdi-information</v-icon> |
|
</template> |
|
<span class="caption"> |
|
<strong>data</strong> : Row data <br> |
|
<strong>user</strong> : User information<br> |
|
<strong>payload</strong> : Plugin settings payload<br> |
|
<strong>env</strong> : Environment values (process.env) |
|
|
|
</span> |
|
</v-tooltip> |
|
</span> |
|
</v-card-text> |
|
</v-card> |
|
</v-col> |
|
</v-row> |
|
</v-container> |
|
</v-form> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import HttpWebhook from './webhook/httpWebhook' |
|
import ColumnFilter from '~/components/project/spreadsheet/components/columnFilter' |
|
// import FormInput from '~/components/project/appStore/FormInput' |
|
import WebhookEvent from '~/components/project/tableTabs/webhookEvent' |
|
|
|
export default { |
|
name: 'Webhooks', |
|
components: { |
|
HttpWebhook, |
|
WebhookEvent, |
|
// FormInput, |
|
ColumnFilter |
|
}, |
|
props: ['nodes'], |
|
data: () => ({ |
|
slackChannels: null, |
|
teamsChannels: null, |
|
discordChannels: null, |
|
mattermostChannels: null, |
|
selectedHook: null, |
|
enableCondition: false, |
|
hooks: null, |
|
valid: false, |
|
meta: null, |
|
loading: false, |
|
notificationList: [ |
|
'Email', |
|
'Slack', |
|
'Microsoft Teams', |
|
'Discord', |
|
'Mattermost', |
|
'Twilio', |
|
'Whatsapp Twilio', |
|
'URL' |
|
], |
|
filters: [], |
|
hook: null, |
|
notification: {}, |
|
notificationIcon: { |
|
URL: 'mdi-link', |
|
Email: 'mdi-email', |
|
Slack: 'mdi-slack', |
|
'Microsoft Teams': 'mdi-microsoft-teams', |
|
Discord: 'mdi-discord', |
|
Mattermost: 'mdi-chat', |
|
'Whatsapp Twilio': 'mdi-whatsapp', |
|
Twilio: 'mdi-cellphone-message' |
|
}, |
|
urlRules: [ |
|
v => !v || !v.trim() || /^https?:\/\/.{1,}/.test(v) || 'Not a valid URL' |
|
], |
|
fieldList: [], |
|
inputs: { |
|
Email: [ |
|
{ |
|
key: 'to', |
|
label: 'To Address', |
|
placeholder: 'To Address', |
|
type: 'SingleLineText', |
|
required: true |
|
}, |
|
{ |
|
key: 'subject', |
|
label: 'Subject', |
|
placeholder: 'Subject', |
|
type: 'SingleLineText', |
|
required: true |
|
}, { |
|
key: 'body', |
|
label: 'Body', |
|
placeholder: 'Body', |
|
type: 'LongText', |
|
required: true |
|
} |
|
], |
|
Slack: [{ |
|
key: 'body', |
|
label: 'Body', |
|
placeholder: 'Body', |
|
type: 'LongText', |
|
required: true |
|
} |
|
], |
|
'Microsoft Teams': [{ |
|
key: 'body', |
|
label: 'Body', |
|
placeholder: 'Body', |
|
type: 'LongText', |
|
required: true |
|
} |
|
], |
|
Discord: [{ |
|
key: 'body', |
|
label: 'Body', |
|
placeholder: 'Body', |
|
type: 'LongText', |
|
required: true |
|
} |
|
], |
|
Mattermost: [{ |
|
key: 'body', |
|
label: 'Body', |
|
placeholder: 'Body', |
|
type: 'LongText', |
|
required: true |
|
} |
|
], |
|
Twilio: [{ |
|
key: 'body', |
|
label: 'Body', |
|
placeholder: 'Body', |
|
type: 'LongText', |
|
required: true |
|
}, { |
|
key: 'to', |
|
label: 'Comma separated Mobile #', |
|
placeholder: 'Comma separated Mobile #', |
|
type: 'LongText', |
|
required: true |
|
}], |
|
'Whatsapp Twilio': [{ |
|
key: 'body', |
|
label: 'Body', |
|
placeholder: 'Body', |
|
type: 'LongText', |
|
required: true |
|
}, { |
|
key: 'to', |
|
label: 'Comma separated Mobile #', |
|
placeholder: 'Comma separated Mobile #', |
|
type: 'LongText', |
|
required: true |
|
}] |
|
} |
|
}), |
|
async created() { |
|
await this.loadMeta() |
|
await this.loadHooksList() |
|
this.selectedHook = 0 |
|
this.onEventChange() |
|
}, |
|
methods: { |
|
checkConditionAvail() { |
|
if (!process.env.EE) { |
|
this.enableCondition = false |
|
this.$toast.info('For webhook condition : Upgrade to Enterprise Edition').goAway(3000) |
|
} |
|
this.hook.condition = [] |
|
}, |
|
async onNotTypeChange() { |
|
this.notification = {} |
|
if (this.hook.notification.type === 'Slack') { |
|
const plugin = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginRead', { |
|
title: 'Slack' |
|
}]) |
|
this.slackChannels = JSON.parse(plugin.input) || [] |
|
} |
|
if (this.hook.notification.type === 'Microsoft Teams') { |
|
const plugin = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginRead', { |
|
title: 'Microsoft Teams' |
|
}]) |
|
this.teamsChannels = JSON.parse(plugin.input) || [] |
|
} |
|
if (this.hook.notification.type === 'Discord') { |
|
const plugin = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginRead', { |
|
title: 'Discord' |
|
}]) |
|
this.discordChannels = JSON.parse(plugin.input) || [] |
|
} |
|
if (this.hook.notification.type === 'Mattermost') { |
|
const plugin = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginRead', { |
|
title: 'Mattermost' |
|
}]) |
|
this.mattermostChannels = JSON.parse(plugin.input) || [] |
|
} |
|
}, |
|
async onEventChange() { |
|
if (!this.hooks || !this.hooks.length) { |
|
return |
|
} |
|
const { notification: { payload, type } = {}, ...hook } = this.hooks[this.selectedHook] || {} |
|
|
|
this.hook = { |
|
...hook, |
|
notification: { |
|
type |
|
} |
|
} |
|
this.enableCondition = !!(this.hook && this.hook.condition && Object.keys(this.hook.condition).length) |
|
await this.onNotTypeChange() |
|
this.notification = payload |
|
if (this.hook.notification.type === 'Slack') { |
|
this.notification.webhook_url = this.notification.webhook_url && |
|
this.notification.webhook_url.map(v => this.slackChannels.find(s => v.webhook_url === s.webhook_url)) |
|
} |
|
if (this.hook.notification.type === 'Microsoft Teams') { |
|
this.notification.webhook_url = this.notification.webhook_url && |
|
this.notification.webhook_url.map(v => this.teamsChannels.find(s => v.webhook_url === s.webhook_url)) |
|
} |
|
if (this.hook.notification.type === 'Discord') { |
|
this.notification.webhook_url = this.notification.webhook_url && |
|
this.notification.webhook_url.map(v => this.discordChannels.find(s => v.webhook_url === s.webhook_url)) |
|
} |
|
if (this.hook.notification.type === 'Mattermost') { |
|
this.notification.webhook_url = this.notification.webhook_url && |
|
this.notification.webhook_url.map(v => this.mattermostChannels.find(s => v.webhook_url === s.webhook_url)) |
|
} |
|
if (this.hook.notification.type === 'URL') { |
|
// eslint-disable-next-line no-self-assign |
|
this.notification.api = this.notification.api |
|
} |
|
}, |
|
async saveHooks() { |
|
if (!this.$refs.form.validate() || !this.valid || !this.hook.event) { |
|
return |
|
} |
|
this.loading = true |
|
try { |
|
const res = await this.$store.dispatch('sqlMgr/ActSqlOp', [ |
|
{ |
|
env: this.nodes.env, |
|
dbAlias: this.nodes.dbAlias |
|
}, 'tableXcHooksSet', { |
|
tn: this.nodes.tn, |
|
data: { |
|
...this.hook, |
|
notification: { |
|
...this.hook.notification, |
|
payload: this.notification |
|
} |
|
} |
|
} |
|
]) |
|
|
|
if (!this.hook.id && res) { |
|
this.hook.id = Array.isArray(res) ? res[0] : res |
|
} |
|
|
|
this.$toast.success('Webhook details updated successfully').goAway(3000) |
|
} catch (e) { |
|
this.$toast.error(e.message).goAway(3000) |
|
} |
|
this.loading = false |
|
await this.loadHooksList() |
|
}, |
|
async loadMeta() { |
|
this.loadingMeta = true |
|
const tableMeta = await this.$store.dispatch('sqlMgr/ActSqlOp', [{ |
|
env: this.nodes.env, |
|
dbAlias: this.nodes.dbAlias |
|
}, 'tableXcModelGet', { |
|
tn: this.nodes.tn |
|
}]) |
|
this.meta = JSON.parse(tableMeta.meta) |
|
this.fieldList = this.meta.columns.map(c => c.cn) |
|
this.loadingMeta = false |
|
}, |
|
async loadHooksList() { |
|
this.loading = true |
|
const hooks = await this.$store.dispatch('sqlMgr/ActSqlOp', [{ |
|
env: this.nodes.env, |
|
dbAlias: this.nodes.dbAlias |
|
}, 'tableXcHooksList', { |
|
tn: this.nodes.tn |
|
}]) |
|
this.hooks = hooks.data.list.map((h) => { |
|
h.notification = h.notification && JSON.parse(h.notification) |
|
h.condition = h.condition && JSON.parse(h.condition) |
|
|
|
return h |
|
}) |
|
this.loading = false |
|
}, |
|
addNewHook() { |
|
this.selectedHook = this.hooks.length |
|
this.hooks.push({ |
|
notification: { |
|
// type:'Email' |
|
} |
|
}) |
|
this.onEventChange() |
|
this.$refs.form.resetValidation() |
|
}, |
|
async deleteHook(item, i) { |
|
try { |
|
if (item.id) { |
|
await this.$store.dispatch('sqlMgr/ActSqlOp', [{ |
|
env: this.nodes.env, |
|
dbAlias: this.nodes.dbAlias |
|
}, 'tableXcHooksDelete', { |
|
id: item.id, |
|
title: item.title, |
|
tn: this.nodes.tn |
|
}]) |
|
this.hooks.splice(i, 1) |
|
} else { |
|
this.hooks.splice(i, 1) |
|
} |
|
this.$toast.success('Hook deleted successfully').goAway(3000) |
|
if (!this.hooks.length) { |
|
this.hook = null |
|
} |
|
} catch (e) { |
|
this.$toast.error(e.message).goAway(3000) |
|
} |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped> |
|
/*tr.selected{*/ |
|
/* background: #8ceaf6;*/ |
|
/*}*/ |
|
|
|
/deep/ label { |
|
font-size: 0.75rem !important |
|
} |
|
</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/>. |
|
* |
|
*/ |
|
-->
|
|
|