github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

refactor: move url to top in the notification list 

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/1917/head
Pranav C 2 years ago
parent
ea5a07d134
commit
00a6ac9ca6
1 changed files with 218 additions and 205 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 423
      packages/nc-gui/components/project/tableTabs/webhooks.vue

423
packages/nc-gui/components/project/tableTabs/webhooks.vue
Unescape View File

@ -24,7 +24,9 @@
small small
> >
<template #divider> <template #divider>
<v-icon small color="grey lighten-2"> forward </v-icon> <v-icon small color="grey lighten-2">
forward
</v-icon>
</template> </template>
</v-breadcrumbs> </v-breadcrumbs>
</v-toolbar-title> </v-toolbar-title>
@ -32,7 +34,9 @@
<!--tooltip="Close webhooks modal"--> <!--tooltip="Close webhooks modal"-->
<x-btn outlined small @click.prevent="$emit('close')"> <x-btn outlined small @click.prevent="$emit('close')">
<v-icon small left> mdi-close-circle-outline </v-icon> <v-icon small left>
mdi-close-circle-outline
</v-icon>
<!-- Close --> <!-- Close -->
{{ $t("general.close") }} {{ $t("general.close") }}
</x-btn> </x-btn>
@ -45,7 +49,9 @@
small small
@click.prevent="loadHooksList" @click.prevent="loadHooksList"
> >
<v-icon small left> mdi-reload </v-icon> <v-icon small left>
mdi-reload
</v-icon>
<!-- Reload --> <!-- Reload -->
{{ $t("general.reload") }} {{ $t("general.reload") }}
</x-btn> </x-btn>
@ -58,7 +64,9 @@
small small
@click.prevent="addNewHook" @click.prevent="addNewHook"
> >
<v-icon small left> mdi-plus </v-icon> <v-icon small left>
mdi-plus
</v-icon>
<!--Add New--> <!--Add New-->
{{ $t("activity.addWebhook") }} {{ $t("activity.addWebhook") }}
</x-btn> </x-btn>
@ -149,7 +157,9 @@
small small
@click.prevent="addNewHook" @click.prevent="addNewHook"
> >
<v-icon small left> mdi-plus </v-icon> <v-icon small left>
mdi-plus
</v-icon>
<!--Add New Webhook--> <!--Add New Webhook-->
{{ $t("activity.addWebhook") }} {{ $t("activity.addWebhook") }}
</x-btn> </x-btn>
@ -175,7 +185,9 @@
:disabled="loading || !valid || !hook.event" :disabled="loading || !valid || !hook.event"
@click.prevent="saveHooks" @click.prevent="saveHooks"
> >
<v-icon small left> save </v-icon> <v-icon small left>
save
</v-icon>
<!-- Save --> <!-- Save -->
{{ $t("general.save") }} {{ $t("general.save") }}
</x-btn> </x-btn>
@ -341,22 +353,23 @@
<v-card-text> <v-card-text>
<span class="caption grey--text"> <span class="caption grey--text">
<em <em>Available context variables are
>Available context variables are <strong>data and user</strong></em>
<strong>data and user</strong></em
>
<v-tooltip top> <v-tooltip top>
<template #activator="{ on }"> <template #activator="{ on }">
<v-icon small color="grey" class="ml-2" v-on="on" <v-icon
>mdi-information</v-icon small
> color="grey"
class="ml-2"
v-on="on"
>mdi-information</v-icon>
</template> </template>
<span class="caption"> <span class="caption">
<strong>data</strong> : Row data <br /> <strong>data</strong> : Row data <br>
<strong>user</strong> : User information<br /> <strong>user</strong> : User information<br>
</span> </span>
</v-tooltip> </v-tooltip>
<br /> <br>
<a <a
href="https://docs.nocodb.com/developer-resources/webhooks/" href="https://docs.nocodb.com/developer-resources/webhooks/"
> >
@ -386,22 +399,22 @@
</template> </template>
<script> <script>
import HttpWebhook from "./webhook/httpWebhook"; import HttpWebhook from './webhook/httpWebhook'
import ColumnFilter from "~/components/project/spreadsheet/components/columnFilter"; import ColumnFilter from '~/components/project/spreadsheet/components/columnFilter'
// import FormInput from '~/components/project/appStore/FormInput' // import FormInput from '~/components/project/appStore/FormInput'
import WebhookEvent from "~/components/project/tableTabs/webhookEvent"; import WebhookEvent from '~/components/project/tableTabs/webhookEvent'
import WebhooksTest from "~/components/project/tableTabs/webhooksTest"; import WebhooksTest from '~/components/project/tableTabs/webhooksTest'
export default { export default {
name: "Webhooks", name: 'Webhooks',
components: { components: {
WebhooksTest, WebhooksTest,
HttpWebhook, HttpWebhook,
WebhookEvent, WebhookEvent,
// FormInput, // FormInput,
ColumnFilter, ColumnFilter
}, },
props: ["nodes"], props: ['nodes'],
data: () => ({ data: () => ({
key: 0, key: 0,
apps: {}, apps: {},
@ -416,147 +429,147 @@ export default {
meta: null, meta: null,
loading: false, loading: false,
notificationList: [ notificationList: [
"Email", 'URL',
"Slack", 'Email',
"Microsoft Teams", 'Slack',
"Discord", 'Microsoft Teams',
"Mattermost", 'Discord',
"Twilio", 'Mattermost',
"Whatsapp Twilio", 'Twilio',
"URL", 'Whatsapp Twilio'
], ],
filters: [], filters: [],
hook: null, hook: null,
notification: {}, notification: {},
notificationIcon: { notificationIcon: {
URL: "mdi-link", URL: 'mdi-link',
Email: "mdi-email", Email: 'mdi-email',
Slack: "mdi-slack", Slack: 'mdi-slack',
"Microsoft Teams": "mdi-microsoft-teams", 'Microsoft Teams': 'mdi-microsoft-teams',
Discord: "mdi-discord", Discord: 'mdi-discord',
Mattermost: "mdi-chat", Mattermost: 'mdi-chat',
"Whatsapp Twilio": "mdi-whatsapp", 'Whatsapp Twilio': 'mdi-whatsapp',
Twilio: "mdi-cellphone-message", Twilio: 'mdi-cellphone-message'
}, },
urlRules: [ urlRules: [
(v) => v =>
!v || !v.trim() || /^https?:\/\/.{1,}/.test(v) || "Not a valid URL", !v || !v.trim() || /^https?:\/\/.{1,}/.test(v) || 'Not a valid URL'
], ],
fieldList: [], fieldList: [],
inputs: { inputs: {
Email: [ Email: [
{ {
key: "to", key: 'to',
label: "To Address", label: 'To Address',
placeholder: "To Address", placeholder: 'To Address',
type: "SingleLineText", type: 'SingleLineText',
required: true, required: true
}, },
{ {
key: "subject", key: 'subject',
label: "Subject", label: 'Subject',
placeholder: "Subject", placeholder: 'Subject',
type: "SingleLineText", type: 'SingleLineText',
required: true, required: true
}, },
{ {
key: "body", key: 'body',
label: "Body", label: 'Body',
placeholder: "Body", placeholder: 'Body',
type: "LongText", type: 'LongText',
required: true, required: true
}, }
], ],
Slack: [ Slack: [
{ {
key: "body", key: 'body',
label: "Body", label: 'Body',
placeholder: "Body", placeholder: 'Body',
type: "LongText", type: 'LongText',
required: true, required: true
}, }
], ],
"Microsoft Teams": [ 'Microsoft Teams': [
{ {
key: "body", key: 'body',
label: "Body", label: 'Body',
placeholder: "Body", placeholder: 'Body',
type: "LongText", type: 'LongText',
required: true, required: true
}, }
], ],
Discord: [ Discord: [
{ {
key: "body", key: 'body',
label: "Body", label: 'Body',
placeholder: "Body", placeholder: 'Body',
type: "LongText", type: 'LongText',
required: true, required: true
}, }
], ],
Mattermost: [ Mattermost: [
{ {
key: "body", key: 'body',
label: "Body", label: 'Body',
placeholder: "Body", placeholder: 'Body',
type: "LongText", type: 'LongText',
required: true, required: true
}, }
], ],
Twilio: [ Twilio: [
{ {
key: "body", key: 'body',
label: "Body", label: 'Body',
placeholder: "Body", placeholder: 'Body',
type: "LongText", type: 'LongText',
required: true, required: true
}, },
{ {
key: "to", key: 'to',
label: "Comma separated Mobile #", label: 'Comma separated Mobile #',
placeholder: "Comma separated Mobile #", placeholder: 'Comma separated Mobile #',
type: "LongText", type: 'LongText',
required: true, required: true
}, }
], ],
"Whatsapp Twilio": [ 'Whatsapp Twilio': [
{ {
key: "body", key: 'body',
label: "Body", label: 'Body',
placeholder: "Body", placeholder: 'Body',
type: "LongText", type: 'LongText',
required: true, required: true
}, },
{ {
key: "to", key: 'to',
label: "Comma separated Mobile #", label: 'Comma separated Mobile #',
placeholder: "Comma separated Mobile #", placeholder: 'Comma separated Mobile #',
type: "LongText", type: 'LongText',
required: true, required: true
}, }
], ]
}, }
}), }),
async created() { async created() {
await this.loadMeta(); await this.loadMeta()
await this.loadHooksList(); await this.loadHooksList()
// todo: load only necessary plugins // todo: load only necessary plugins
await this.loadPluginList(); await this.loadPluginList()
this.selectedHook = 0; this.selectedHook = 0
this.onEventChange(); this.onEventChange()
}, },
methods: { methods: {
async loadPluginList() { async loadPluginList() {
try { try {
// const plugins = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginList']) // const plugins = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginList'])
const plugins = (await this.$api.plugin.list()).list; const plugins = (await this.$api.plugin.list()).list
// plugins.push(...plugins.splice(0, 3)) // plugins.push(...plugins.splice(0, 3))
this.apps = plugins.reduce((o, p) => { this.apps = plugins.reduce((o, p) => {
p.tags = p.tags ? p.tags.split(",") : []; p.tags = p.tags ? p.tags.split(',') : []
p.parsedInput = p.input && JSON.parse(p.input); p.parsedInput = p.input && JSON.parse(p.input)
o[p.title] = p; o[p.title] = p
return o; return o
}, {}); }, {})
} catch (e) {} } catch (e) {}
}, },
checkConditionAvail() { checkConditionAvail() {
@ -567,36 +580,36 @@ export default {
// this.hook.condition = [] // this.hook.condition = []
}, },
async onNotTypeChange() { async onNotTypeChange() {
this.notification = {}; this.notification = {}
if (this.hook.notification.type === "Slack") { if (this.hook.notification.type === 'Slack') {
// const plugin = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginRead', { // const plugin = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginRead', {
// title: 'Slack' // title: 'Slack'
// }]) // }])
// this.slackChannels = JSON.parse(plugin.input) || [] // this.slackChannels = JSON.parse(plugin.input) || []
this.slackChannels = this.slackChannels =
(this.apps && this.apps.Slack && this.apps.Slack.parsedInput) || []; (this.apps && this.apps.Slack && this.apps.Slack.parsedInput) || []
} }
if (this.hook.notification.type === "Microsoft Teams") { if (this.hook.notification.type === 'Microsoft Teams') {
// const plugin = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginRead', { // const plugin = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginRead', {
// title: 'Microsoft Teams' // title: 'Microsoft Teams'
// }]) // }])
// this.teamsChannels = JSON.parse(plugin.input) || [] // this.teamsChannels = JSON.parse(plugin.input) || []
this.teamsChannels = this.teamsChannels =
(this.apps && (this.apps &&
this.apps["Microsoft Teams"] && this.apps['Microsoft Teams'] &&
this.apps["Microsoft Teams"].parsedInput) || this.apps['Microsoft Teams'].parsedInput) ||
[]; []
} }
if (this.hook.notification.type === "Discord") { if (this.hook.notification.type === 'Discord') {
// const plugin = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginRead', { // const plugin = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginRead', {
// title: 'Discord' // title: 'Discord'
// }]) // }])
this.discordChannels = this.discordChannels =
(this.apps && this.apps.Discord && this.apps.Discord.parsedInput) || (this.apps && this.apps.Discord && this.apps.Discord.parsedInput) ||
[]; []
} }
if (this.hook.notification.type === "Mattermost") { if (this.hook.notification.type === 'Mattermost') {
// const plugin = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginRead', { // const plugin = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginRead', {
// title: 'Mattermost' // title: 'Mattermost'
// }]) // }])
@ -605,64 +618,64 @@ export default {
(this.apps && (this.apps &&
this.apps.Mattermost && this.apps.Mattermost &&
this.apps.Mattermost.parsedInput) || this.apps.Mattermost.parsedInput) ||
[]; []
} }
}, },
async onEventChange() { async onEventChange() {
this.key++; this.key++
if (!this.hooks || !this.hooks.length) { if (!this.hooks || !this.hooks.length) {
return; return
} }
const { notification: { payload, type } = {}, ...hook } = const { notification: { payload, type } = {}, ...hook } =
this.hooks[this.selectedHook] || {}; this.hooks[this.selectedHook] || {}
this.hook = { this.hook = {
...hook, ...hook,
notification: { notification: {
type, type
}, }
}; }
// this.enableCondition = !!(this.hook && this.hook.condition && Object.keys(this.hook.condition).length) // this.enableCondition = !!(this.hook && this.hook.condition && Object.keys(this.hook.condition).length)
await this.onNotTypeChange(); await this.onNotTypeChange()
this.notification = payload; this.notification = payload
if (this.hook.notification.type === "Slack") { if (this.hook.notification.type === 'Slack') {
this.notification.webhook_url = this.notification.webhook_url =
this.notification.webhook_url && this.notification.webhook_url &&
this.notification.webhook_url.map((v) => this.notification.webhook_url.map(v =>
this.slackChannels.find((s) => v.webhook_url === s.webhook_url) this.slackChannels.find(s => v.webhook_url === s.webhook_url)
); )
} }
if (this.hook.notification.type === "Microsoft Teams") { if (this.hook.notification.type === 'Microsoft Teams') {
this.notification.webhook_url = this.notification.webhook_url =
this.notification.webhook_url && this.notification.webhook_url &&
this.notification.webhook_url.map((v) => this.notification.webhook_url.map(v =>
this.teamsChannels.find((s) => v.webhook_url === s.webhook_url) this.teamsChannels.find(s => v.webhook_url === s.webhook_url)
); )
} }
if (this.hook.notification.type === "Discord") { if (this.hook.notification.type === 'Discord') {
this.notification.webhook_url = this.notification.webhook_url =
this.notification.webhook_url && this.notification.webhook_url &&
this.notification.webhook_url.map((v) => this.notification.webhook_url.map(v =>
this.discordChannels.find((s) => v.webhook_url === s.webhook_url) this.discordChannels.find(s => v.webhook_url === s.webhook_url)
); )
} }
if (this.hook.notification.type === "Mattermost") { if (this.hook.notification.type === 'Mattermost') {
this.notification.webhook_url = this.notification.webhook_url =
this.notification.webhook_url && this.notification.webhook_url &&
this.notification.webhook_url.map((v) => this.notification.webhook_url.map(v =>
this.mattermostChannels.find((s) => v.webhook_url === s.webhook_url) this.mattermostChannels.find(s => v.webhook_url === s.webhook_url)
); )
} }
if (this.hook.notification.type === "URL") { if (this.hook.notification.type === 'URL') {
// eslint-disable-next-line no-self-assign // eslint-disable-next-line no-self-assign
this.notification.api = this.notification.api; this.notification.api = this.notification.api
} }
}, },
async saveHooks() { async saveHooks() {
if (!this.$refs.form.validate() || !this.valid || !this.hook.event) { if (!this.$refs.form.validate() || !this.valid || !this.hook.event) {
return; return
} }
this.loading = true; this.loading = true
try { try {
// const res = await this.$store.dispatch('sqlMgr/ActSqlOp', [ // const res = await this.$store.dispatch('sqlMgr/ActSqlOp', [
// { // {
@ -679,66 +692,66 @@ export default {
// } // }
// } // }
// ]) // ])
let res; let res
if (this.hook.id) { if (this.hook.id) {
res = await this.$api.dbTableWebhook.update(this.hook.id, { res = await this.$api.dbTableWebhook.update(this.hook.id, {
...this.hook, ...this.hook,
notification: { notification: {
...this.hook.notification, ...this.hook.notification,
payload: this.notification, payload: this.notification
}, }
}); })
} else { } else {
res = await this.$api.dbTableWebhook.create(this.meta.id, { res = await this.$api.dbTableWebhook.create(this.meta.id, {
...this.hook, ...this.hook,
notification: { notification: {
...this.hook.notification, ...this.hook.notification,
payload: this.notification, payload: this.notification
}, }
}); })
} }
if (!this.hook.id && res) { if (!this.hook.id && res) {
this.hook.id = res.id; this.hook.id = res.id
} }
if (this.$refs.filter) { if (this.$refs.filter) {
await this.$refs.filter.applyChanges(false, { await this.$refs.filter.applyChanges(false, {
hookId: this.hook.id, hookId: this.hook.id
}); })
} }
this.$toast this.$toast
.success("Webhook details updated successfully") .success('Webhook details updated successfully')
.goAway(3000); .goAway(3000)
} catch (e) { } catch (e) {
this.$toast.error(e.message).goAway(3000); this.$toast.error(e.message).goAway(3000)
} }
this.loading = false; this.loading = false
await this.loadHooksList(); await this.loadHooksList()
this.$e("a:webhook:add", { this.$e('a:webhook:add', {
operation: this.hook.operation, operation: this.hook.operation,
condition: this.hook.condition, condition: this.hook.condition,
notification: this.hook.notification.type, notification: this.hook.notification.type
}); })
}, },
async loadMeta() { async loadMeta() {
this.loadingMeta = true; this.loadingMeta = true
// const tableMeta = await this.$store.dispatch('sqlMgr/ActSqlOp', [{ // const tableMeta = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
// env: this.nodes.env, // env: this.nodes.env,
// dbAlias: this.nodes.dbAlias // dbAlias: this.nodes.dbAlias
// }, 'tableXcModelGet', { // }, 'tableXcModelGet', {
// tn: this.nodes.table_name // tn: this.nodes.table_name
// }] ) // }] )
this.meta = await this.$store.dispatch("meta/ActLoadMeta", { this.meta = await this.$store.dispatch('meta/ActLoadMeta', {
table_name: this.nodes.table_name, table_name: this.nodes.table_name
}); // JSON.parse(tableMeta.meta) }) // JSON.parse(tableMeta.meta)
this.fieldList = this.meta.columns.map((c) => c.column_name); this.fieldList = this.meta.columns.map(c => c.column_name)
this.loadingMeta = false; this.loadingMeta = false
}, },
async loadHooksList() { async loadHooksList() {
this.key++; this.key++
this.loading = true; this.loading = true
// const hooks = await this.$store.dispatch('sqlMgr/ActSqlOp', [{ // const hooks = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
// env: this.nodes.env, // env: this.nodes.env,
// dbAlias: this.nodes.dbAlias // dbAlias: this.nodes.dbAlias
@ -746,49 +759,49 @@ export default {
// tn: this.nodes.table_name // tn: this.nodes.table_name
// }]) // }])
const hooks = await this.$api.dbTableWebhook.list(this.meta.id); const hooks = await this.$api.dbTableWebhook.list(this.meta.id)
this.hooks = hooks.list.map((h) => { this.hooks = hooks.list.map((h) => {
h.notification = h.notification && JSON.parse(h.notification); h.notification = h.notification && JSON.parse(h.notification)
// h.condition = h.condition && JSON.parse(h.condition) // h.condition = h.condition && JSON.parse(h.condition)
return h; return h
}); })
this.loading = false; this.loading = false
}, },
addNewHook() { addNewHook() {
this.key++; this.key++
this.selectedHook = this.hooks.length; this.selectedHook = this.hooks.length
this.hooks.push({ this.hooks.push({
notification: { notification: {
// type:'Email' // type:'Email'
}, }
}); })
this.onEventChange(); this.onEventChange()
this.$refs.form.resetValidation(); this.$refs.form.resetValidation()
this.$e("c:webhook:add", { count: this.hooks.length }); this.$e('c:webhook:add', { count: this.hooks.length })
}, },
async deleteHook(item, i) { async deleteHook(item, i) {
try { try {
if (item.id) { if (item.id) {
await this.$api.dbTableWebhook.delete(item.id); await this.$api.dbTableWebhook.delete(item.id)
this.hooks.splice(i, 1); this.hooks.splice(i, 1)
} else { } else {
this.hooks.splice(i, 1); this.hooks.splice(i, 1)
} }
this.$toast.success("Hook deleted successfully").goAway(3000); this.$toast.success('Hook deleted successfully').goAway(3000)
if (!this.hooks.length) { if (!this.hooks.length) {
this.hook = null; this.hook = null
} }
} catch (e) { } catch (e) {
this.$toast.error(e.message).goAway(3000); this.$toast.error(e.message).goAway(3000)
} }
this.$e("a:webhook:delete"); this.$e('a:webhook:delete')
}, }
}, }
}; }
</script> </script>
<style scoped> <style scoped>

Write Preview
Loading…
Cancel
Save