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

feat(gui-v2): add onNotTypeChange & refactor naming in webhook

pull/2838/head
Wing-Kam Wong 2 years ago
parent
794c71e641
commit
ec5893d67f
1 changed files with 43 additions and 29 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. 72
      packages/nc-gui-v2/components/webhook/Editor.vue

72
packages/nc-gui-v2/components/webhook/Editor.vue
Unescape View File

@ -30,7 +30,7 @@ const meta = inject(MetaInj)
const useForm = Form.useForm const useForm = Form.useForm
const formState = reactive({ const hook = reactive({
title: '', title: '',
notification: { notification: {
type: 'URL', type: 'URL',
@ -39,7 +39,7 @@ const formState = reactive({
method: 'GET', method: 'GET',
}) })
const apps = ref({}) const apps: Record<string, any> = ref()
const slackChannels = ref() const slackChannels = ref()
@ -145,10 +145,7 @@ const formInput = ref({
], ],
}) })
const notification = ref({ const notification = ref({})
method: 'POST',
body: '{{ json data }}',
})
const eventList = ref([ const eventList = ref([
{ {
@ -195,10 +192,27 @@ const validators = computed(() => {
'method': [fieldRequiredValidator], 'method': [fieldRequiredValidator],
} }
}) })
const { resetFields, validate, validateInfos } = useForm(formState, validators) const { resetFields, validate, validateInfos } = useForm(hook, validators)
function onNotTypeChange() { function onNotTypeChange() {
// TODO notification.value = {}
if (hook.notification.type === 'Slack') {
slackChannels.value = (apps && apps?.Slack && apps.Slack.parsedInput) || []
}
if (hook.notification.type === 'Microsoft Teams') {
teamsChannels.value = (apps && apps['Microsoft Teams'] && apps['Microsoft Teams'].parsedInput) || []
}
if (hook.notification.type === 'Discord') {
discordChannels.value = (apps && apps.Discord && apps.Discord.parsedInput) || []
}
if (hook.notification.type === 'Mattermost') {
mattermostChannels.value = (apps && apps.Mattermost && apps.Mattermost.parsedInput) || []
}
if (hook.notification.type === 'URL') {
notification.value = notification.value || {}
notification.value.body = '{{ json data }}'
}
} }
function filterOption(input: string, option: Option) { function filterOption(input: string, option: Option) {
@ -245,19 +259,19 @@ onMounted(() => {
</a-button> </a-button>
</div> </div>
<a-divider /> <a-divider />
<a-form :model="formState" name="create-or-edit-webhook"> <a-form :model="hook" name="create-or-edit-webhook">
<a-form-item> <a-form-item>
<a-row type="flex"> <a-row type="flex">
<a-col :span="24"> <a-col :span="24">
<a-form-item v-bind="validateInfos.title"> <a-form-item v-bind="validateInfos.title">
<a-input v-model:value="formState.title" size="large" :placeholder="$t('general.title')" /> <a-input v-model:value="hook.title" size="large" :placeholder="$t('general.title')" />
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row type="flex" :gutter="[16, 16]"> <a-row type="flex" :gutter="[16, 16]">
<a-col :span="12"> <a-col :span="12">
<a-form-item v-bind="validateInfos.event"> <a-form-item v-bind="validateInfos.event">
<a-select v-model:value="formState.event" size="large" :placeholder="$t('general.event')"> <a-select v-model:value="hook.event" size="large" :placeholder="$t('general.event')">
<a-select-option v-for="(event, i) in eventList" :key="i" :value="event.value"> <a-select-option v-for="(event, i) in eventList" :key="i" :value="event.value">
{{ event.title }} {{ event.title }}
</a-select-option> </a-select-option>
@ -267,7 +281,7 @@ onMounted(() => {
<a-col :span="12"> <a-col :span="12">
<a-form-item v-bind="validateInfos['notification.type']"> <a-form-item v-bind="validateInfos['notification.type']">
<a-select <a-select
v-model:value="formState.notification.type" v-model:value="hook.notification.type"
size="large" size="large"
:placeholder="$t('general.notification')" :placeholder="$t('general.notification')"
@change="onNotTypeChange" @change="onNotTypeChange"
@ -289,24 +303,24 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row v-if="formState.notification.type === 'URL'" class="mb-5" type="flex" :gutter="[16, 16]"> <a-row v-if="hook.notification.type === 'URL'" class="mb-5" type="flex" :gutter="[16, 16]">
<a-col :span="6"> <a-col :span="6">
<a-select v-model:value="formState.method" size="large"> <a-select v-model:value="hook.method" size="large">
<a-select-option v-for="(method, i) in methodList" :key="i" :value="method.title">{{ method.title }}</a-select-option> <a-select-option v-for="(method, i) in methodList" :key="i" :value="method.title">{{ method.title }}</a-select-option>
</a-select> </a-select>
</a-col> </a-col>
<a-col :span="18"> <a-col :span="18">
<a-form-item v-bind="validateInfos['notification.url']"> <a-form-item v-bind="validateInfos['notification.url']">
<a-input v-model:value="formState.notification.url" size="large" placeholder="http://example.com" /> <a-input v-model:value="hook.notification.url" size="large" placeholder="http://example.com" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<!-- TODO: add Body, Params Headers & Auth Tabs --> <!-- TODO: add Body, Params Headers & Auth Tabs -->
</a-row> </a-row>
<a-row v-if="formState.notification.type === 'Slack'" type="flex"> <a-row v-if="hook.notification.type === 'Slack'" type="flex">
<a-col :span="24"> <a-col :span="24">
<a-form-item v-bind="validateInfos['notification.channels']"> <a-form-item v-bind="validateInfos['notification.channels']">
<a-auto-complete <a-auto-complete
v-model:value="formState.notification.channels" v-model:value="hook.notification.channels"
size="large" size="large"
:options="slackChannels" :options="slackChannels"
placeholder="Select Slack channels" placeholder="Select Slack channels"
@ -315,11 +329,11 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row v-if="formState.notification.type === 'Microsoft Teams'" type="flex"> <a-row v-if="hook.notification.type === 'Microsoft Teams'" type="flex">
<a-col :span="24"> <a-col :span="24">
<a-form-item v-bind="validateInfos['notification.channels']"> <a-form-item v-bind="validateInfos['notification.channels']">
<a-auto-complete <a-auto-complete
v-model:value="formState.notification.channels" v-model:value="hook.notification.channels"
size="large" size="large"
:options="teamsChannels" :options="teamsChannels"
placeholder="Select Microsoft Teams channels" placeholder="Select Microsoft Teams channels"
@ -328,11 +342,11 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row v-if="formState.notification.type === 'Discord'" type="flex"> <a-row v-if="hook.notification.type === 'Discord'" type="flex">
<a-col :span="24"> <a-col :span="24">
<a-form-item v-bind="validateInfos['notification.channels']"> <a-form-item v-bind="validateInfos['notification.channels']">
<a-auto-complete <a-auto-complete
v-model:value="formState.notification.channels" v-model:value="hook.notification.channels"
size="large" size="large"
:options="discordChannels" :options="discordChannels"
placeholder="Select Discord channels" placeholder="Select Discord channels"
@ -341,11 +355,11 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row v-if="formState.notification.type === 'Mattermost'" type="flex"> <a-row v-if="hook.notification.type === 'Mattermost'" type="flex">
<a-col :span="24"> <a-col :span="24">
<a-form-item v-bind="validateInfos['notification.channels']"> <a-form-item v-bind="validateInfos['notification.channels']">
<a-auto-complete <a-auto-complete
v-model:value="formState.notification.channels" v-model:value="hook.notification.channels"
size="large" size="large"
:options="mattermostChannels" :options="mattermostChannels"
placeholder="Select Mattermost channels" placeholder="Select Mattermost channels"
@ -354,8 +368,8 @@ onMounted(() => {
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row v-if="formInput[formState.notification.type] && notification" type="flex"> <a-row v-if="formInput[hook.notification.type] && notification" type="flex">
<a-col v-for="(input, i) in formInput[formState.notification.type]" :key="i" :span="24"> <a-col v-for="(input, i) in formInput[hook.notification.type]" :key="i" :span="24">
<a-form-item v-if="input.type === 'LongText'"> <a-form-item v-if="input.type === 'LongText'">
<!-- TODO: add validator --> <!-- TODO: add validator -->
<a-textarea :key="input.key" v-model:value="notification[input.key]" outlined :placeholder="input.label" /> <a-textarea :key="input.key" v-model:value="notification[input.key]" outlined :placeholder="input.label" />
@ -368,8 +382,8 @@ onMounted(() => {
</a-row> </a-row>
<a-row class="mb-5" type="flex"> <a-row class="mb-5" type="flex">
<a-col :span="24"> <a-col :span="24">
<a-checkbox v-model:checked="formState.condition">On Condition</a-checkbox> <a-checkbox v-model:checked="hook.condition">On Condition</a-checkbox>
<SmartsheetToolbarColumnFilter v-if="formState.condition" /> <SmartsheetToolbarColumnFilter v-if="hook.condition" />
</a-col> </a-col>
</a-row> </a-row>
<a-row> <a-row>
@ -396,10 +410,10 @@ onMounted(() => {
</div> </div>
<WebhookTest <WebhookTest
:hook="{ :hook="{
...formState, ...hook,
filters, filters,
notification: { notification: {
...formState.notification, ...hook.notification,
payload: notification, payload: notification,
}, },
}" }"

Write Preview
Loading…
Cancel
Save