|
|
|
|
@ -38,6 +38,8 @@ const { appInfo } = $(useGlobal())
|
|
|
|
|
|
|
|
|
|
const meta = inject(MetaInj, ref()) |
|
|
|
|
|
|
|
|
|
const hookTabKey = ref('hook-edit') |
|
|
|
|
|
|
|
|
|
const useForm = Form.useForm |
|
|
|
|
|
|
|
|
|
const hook = reactive< |
|
|
|
|
@ -461,243 +463,263 @@ onMounted(async () => {
|
|
|
|
|
|
|
|
|
|
<a-divider /> |
|
|
|
|
|
|
|
|
|
<a-form :model="hook" name="create-or-edit-webhook"> |
|
|
|
|
<a-form-item> |
|
|
|
|
<a-row type="flex"> |
|
|
|
|
<a-col :span="24"> |
|
|
|
|
<a-card> |
|
|
|
|
<a-checkbox |
|
|
|
|
:checked="Boolean(hook.active)" |
|
|
|
|
class="nc-check-box-enable-webhook" |
|
|
|
|
@update:checked="hook.active = $event" |
|
|
|
|
> |
|
|
|
|
{{ $t('activity.enableWebhook') }} |
|
|
|
|
</a-checkbox> |
|
|
|
|
</a-card> |
|
|
|
|
</a-col> |
|
|
|
|
</a-row> |
|
|
|
|
</a-form-item> |
|
|
|
|
<a-form-item> |
|
|
|
|
<a-row type="flex"> |
|
|
|
|
<a-col :span="24"> |
|
|
|
|
<a-form-item v-bind="validateInfos.title"> |
|
|
|
|
<a-input |
|
|
|
|
v-model:value="hook.title" |
|
|
|
|
size="large" |
|
|
|
|
:placeholder="$t('general.title')" |
|
|
|
|
class="nc-text-field-hook-title" |
|
|
|
|
/> |
|
|
|
|
</a-form-item> |
|
|
|
|
</a-col> |
|
|
|
|
</a-row> |
|
|
|
|
|
|
|
|
|
<a-row type="flex" :gutter="[16, 16]"> |
|
|
|
|
<a-col :span="12"> |
|
|
|
|
<a-form-item v-bind="validateInfos.eventOperation"> |
|
|
|
|
<a-select |
|
|
|
|
v-model:value="hook.eventOperation" |
|
|
|
|
size="large" |
|
|
|
|
:placeholder="$t('general.event')" |
|
|
|
|
class="nc-text-field-hook-event" |
|
|
|
|
dropdown-class-name="nc-dropdown-webhook-event" |
|
|
|
|
> |
|
|
|
|
<a-select-option v-for="(event, i) in eventList" :key="i" :value="event.value.join(' ')"> |
|
|
|
|
{{ event.text.join(' ') }} |
|
|
|
|
</a-select-option> |
|
|
|
|
</a-select> |
|
|
|
|
</a-form-item> |
|
|
|
|
</a-col> |
|
|
|
|
|
|
|
|
|
<a-col :span="12"> |
|
|
|
|
<a-form-item v-bind="validateInfos['notification.type']"> |
|
|
|
|
<a-select |
|
|
|
|
v-model:value="hook.notification.type" |
|
|
|
|
size="large" |
|
|
|
|
class="nc-select-hook-notification-type" |
|
|
|
|
:placeholder="$t('general.notification')" |
|
|
|
|
dropdown-class-name="nc-dropdown-webhook-notification" |
|
|
|
|
@change="onNotTypeChange(true)" |
|
|
|
|
> |
|
|
|
|
<a-select-option v-for="(notificationOption, i) in notificationList" :key="i" :value="notificationOption.type"> |
|
|
|
|
<div class="flex items-center"> |
|
|
|
|
<MdiLink v-if="notificationOption.type === 'URL'" class="mr-2" /> |
|
|
|
|
|
|
|
|
|
<MdiEmail v-if="notificationOption.type === 'Email'" class="mr-2" /> |
|
|
|
|
|
|
|
|
|
<MdiSlack v-if="notificationOption.type === 'Slack'" class="mr-2" /> |
|
|
|
|
|
|
|
|
|
<MdiMicrosoftTeams v-if="notificationOption.type === 'Microsoft Teams'" class="mr-2" /> |
|
|
|
|
|
|
|
|
|
<MdiDiscord v-if="notificationOption.type === 'Discord'" class="mr-2" /> |
|
|
|
|
|
|
|
|
|
<MdiChat v-if="notificationOption.type === 'Mattermost'" class="mr-2" /> |
|
|
|
|
|
|
|
|
|
<MdiWhatsapp v-if="notificationOption.type === 'Whatsapp Twilio'" class="mr-2" /> |
|
|
|
|
|
|
|
|
|
<MdiCellphoneMessage v-if="notificationOption.type === 'Twilio'" class="mr-2" /> |
|
|
|
|
|
|
|
|
|
{{ notificationOption.type }} |
|
|
|
|
</div> |
|
|
|
|
</a-select-option> |
|
|
|
|
</a-select> |
|
|
|
|
</a-form-item> |
|
|
|
|
</a-col> |
|
|
|
|
</a-row> |
|
|
|
|
|
|
|
|
|
<a-row v-if="hook.notification.type === 'URL'" class="mb-5" type="flex" :gutter="[16, 0]"> |
|
|
|
|
<a-col :span="6"> |
|
|
|
|
<a-select |
|
|
|
|
v-model:value="hook.notification.payload.method" |
|
|
|
|
size="large" |
|
|
|
|
class="nc-select-hook-url-method" |
|
|
|
|
dropdown-class-name="nc-dropdown-hook-notification-url-method" |
|
|
|
|
> |
|
|
|
|
<a-select-option v-for="(method, i) in methodList" :key="i" :value="method.title"> |
|
|
|
|
{{ method.title }} |
|
|
|
|
</a-select-option> |
|
|
|
|
</a-select> |
|
|
|
|
</a-col> |
|
|
|
|
|
|
|
|
|
<a-col :span="18"> |
|
|
|
|
<a-form-item v-bind="validateInfos['notification.payload.path']"> |
|
|
|
|
<a-input |
|
|
|
|
v-model:value="hook.notification.payload.path" |
|
|
|
|
size="large" |
|
|
|
|
placeholder="http://example.com" |
|
|
|
|
class="nc-text-field-hook-url-path" |
|
|
|
|
/> |
|
|
|
|
</a-form-item> |
|
|
|
|
</a-col> |
|
|
|
|
|
|
|
|
|
<a-col :span="24"> |
|
|
|
|
<a-tabs v-model:activeKey="urlTabKey" type="card" closeable="false" class="shadow-sm"> |
|
|
|
|
<a-tab-pane key="params" tab="Params" force-render> |
|
|
|
|
<LazyApiClientParams v-model="hook.notification.payload.parameters" /> |
|
|
|
|
</a-tab-pane> |
|
|
|
|
|
|
|
|
|
<a-tab-pane key="headers" tab="Headers" class="nc-tab-headers"> |
|
|
|
|
<LazyApiClientHeaders v-model="hook.notification.payload.headers" /> |
|
|
|
|
</a-tab-pane> |
|
|
|
|
|
|
|
|
|
<!-- No in use at this moment --> |
|
|
|
|
<!-- <a-tab-pane key="auth" tab="Auth"> --> |
|
|
|
|
<!-- <LazyMonacoEditor v-model="hook.notification.payload.auth" class="min-h-60 max-h-80" /> --> |
|
|
|
|
|
|
|
|
|
<!-- <span class="text-gray-500 prose-sm p-2"> --> |
|
|
|
|
<!-- For more about auth option refer --> |
|
|
|
|
<!-- <a class="prose-sm" href ="https://github.com/axios/axios#request-config" target="_blank">axios docs</a>. --> |
|
|
|
|
<!-- </span> --> |
|
|
|
|
<!-- </a-tab-pane> --> |
|
|
|
|
</a-tabs> |
|
|
|
|
</a-col> |
|
|
|
|
</a-row> |
|
|
|
|
|
|
|
|
|
<a-row v-if="hook.notification.type === 'Slack'" type="flex"> |
|
|
|
|
<a-col :span="24"> |
|
|
|
|
<a-form-item v-bind="validateInfos['notification.channels']"> |
|
|
|
|
<LazyWebhookChannelMultiSelect |
|
|
|
|
v-if="slackChannels.length > 0" |
|
|
|
|
v-model="hook.notification.payload.channels" |
|
|
|
|
:selected-channel-list="hook.notification.payload.channels" |
|
|
|
|
:available-channel-list="slackChannels" |
|
|
|
|
placeholder="Select Slack channels" |
|
|
|
|
/> |
|
|
|
|
</a-form-item> |
|
|
|
|
</a-col> |
|
|
|
|
</a-row> |
|
|
|
|
|
|
|
|
|
<a-row v-if="hook.notification.type === 'Microsoft Teams'" type="flex"> |
|
|
|
|
<a-col :span="24"> |
|
|
|
|
<a-form-item v-bind="validateInfos['notification.channels']"> |
|
|
|
|
<LazyWebhookChannelMultiSelect |
|
|
|
|
v-if="teamsChannels.length > 0" |
|
|
|
|
v-model="hook.notification.payload.channels" |
|
|
|
|
:selected-channel-list="hook.notification.payload.channels" |
|
|
|
|
:available-channel-list="teamsChannels" |
|
|
|
|
placeholder="Select Microsoft Teams channels" |
|
|
|
|
/> |
|
|
|
|
</a-form-item> |
|
|
|
|
</a-col> |
|
|
|
|
</a-row> |
|
|
|
|
|
|
|
|
|
<a-row v-if="hook.notification.type === 'Discord'" type="flex"> |
|
|
|
|
<a-col :span="24"> |
|
|
|
|
<a-form-item v-bind="validateInfos['notification.channels']"> |
|
|
|
|
<LazyWebhookChannelMultiSelect |
|
|
|
|
v-if="discordChannels.length > 0" |
|
|
|
|
v-model="hook.notification.payload.channels" |
|
|
|
|
:selected-channel-list="hook.notification.payload.channels" |
|
|
|
|
:available-channel-list="discordChannels" |
|
|
|
|
placeholder="Select Discord channels" |
|
|
|
|
/> |
|
|
|
|
</a-form-item> |
|
|
|
|
</a-col> |
|
|
|
|
</a-row> |
|
|
|
|
|
|
|
|
|
<a-row v-if="hook.notification.type === 'Mattermost'" type="flex"> |
|
|
|
|
<a-col :span="24"> |
|
|
|
|
<a-form-item v-bind="validateInfos['notification.channels']"> |
|
|
|
|
<LazyWebhookChannelMultiSelect |
|
|
|
|
v-if="mattermostChannels.length > 0" |
|
|
|
|
v-model="hook.notification.payload.channels" |
|
|
|
|
:selected-channel-list="hook.notification.payload.channels" |
|
|
|
|
:available-channel-list="mattermostChannels" |
|
|
|
|
placeholder="Select Mattermost channels" |
|
|
|
|
/> |
|
|
|
|
</a-form-item> |
|
|
|
|
</a-col> |
|
|
|
|
</a-row> |
|
|
|
|
|
|
|
|
|
<a-row v-if="formInput[hook.notification.type] && hook.notification.payload" type="flex"> |
|
|
|
|
<a-col v-for="(input, i) in formInput[hook.notification.type]" :key="i" :span="24"> |
|
|
|
|
<a-form-item v-if="input.type === 'LongText'" v-bind="validateInfos[`notification.payload.${input.key}`]"> |
|
|
|
|
<a-textarea v-model:value="hook.notification.payload[input.key]" :placeholder="input.label" size="large" /> |
|
|
|
|
</a-form-item> |
|
|
|
|
|
|
|
|
|
<a-form-item v-else v-bind="validateInfos[`notification.payload.${input.key}`]"> |
|
|
|
|
<a-input v-model:value="hook.notification.payload[input.key]" :placeholder="input.label" size="large" /> |
|
|
|
|
</a-form-item> |
|
|
|
|
</a-col> |
|
|
|
|
</a-row> |
|
|
|
|
|
|
|
|
|
<a-row class="mb-5" type="flex"> |
|
|
|
|
<a-col :span="24"> |
|
|
|
|
<a-card> |
|
|
|
|
<a-checkbox |
|
|
|
|
:checked="Boolean(hook.condition)" |
|
|
|
|
class="nc-check-box-hook-condition" |
|
|
|
|
@update:checked="hook.condition = $event" |
|
|
|
|
> |
|
|
|
|
On Condition |
|
|
|
|
</a-checkbox> |
|
|
|
|
|
|
|
|
|
<LazySmartsheetToolbarColumnFilter |
|
|
|
|
v-if="hook.condition" |
|
|
|
|
ref="filterRef" |
|
|
|
|
class="mt-4" |
|
|
|
|
:auto-save="false" |
|
|
|
|
:show-loading="false" |
|
|
|
|
:hook-id="hook.id" |
|
|
|
|
web-hook |
|
|
|
|
/> |
|
|
|
|
</a-card> |
|
|
|
|
</a-col> |
|
|
|
|
</a-row> |
|
|
|
|
|
|
|
|
|
<a-row> |
|
|
|
|
<a-col :span="24"> |
|
|
|
|
<LazyWebhookTest |
|
|
|
|
ref="webhookTestRef" |
|
|
|
|
:hook="{ |
|
|
|
|
...hook, |
|
|
|
|
notification: { |
|
|
|
|
...hook.notification, |
|
|
|
|
payload: hook.notification.payload, |
|
|
|
|
}, |
|
|
|
|
}" |
|
|
|
|
/> |
|
|
|
|
</a-col> |
|
|
|
|
</a-row> |
|
|
|
|
</a-form-item> |
|
|
|
|
</a-form> |
|
|
|
|
<a-tabs v-model:activeKey="hookTabKey" type="card" closeable="false" class="shadow-sm"> |
|
|
|
|
<a-tab-pane key="hook-edit" class="nc-hook-edit" force-render> |
|
|
|
|
<template #tab> |
|
|
|
|
<span> |
|
|
|
|
<MdiEditOutline /> |
|
|
|
|
Edit |
|
|
|
|
</span> |
|
|
|
|
</template> |
|
|
|
|
<a-form :model="hook" name="create-or-edit-webhook"> |
|
|
|
|
<a-form-item> |
|
|
|
|
<a-row type="flex"> |
|
|
|
|
<a-col :span="24"> |
|
|
|
|
<a-card> |
|
|
|
|
<a-checkbox |
|
|
|
|
:checked="Boolean(hook.active)" |
|
|
|
|
class="nc-check-box-enable-webhook" |
|
|
|
|
@update:checked="hook.active = $event" |
|
|
|
|
> |
|
|
|
|
{{ $t('activity.enableWebhook') }} |
|
|
|
|
</a-checkbox> |
|
|
|
|
</a-card> |
|
|
|
|
</a-col> |
|
|
|
|
</a-row> |
|
|
|
|
</a-form-item> |
|
|
|
|
<a-form-item> |
|
|
|
|
<a-row type="flex"> |
|
|
|
|
<a-col :span="24"> |
|
|
|
|
<a-form-item v-bind="validateInfos.title"> |
|
|
|
|
<a-input |
|
|
|
|
v-model:value="hook.title" |
|
|
|
|
size="large" |
|
|
|
|
:placeholder="$t('general.title')" |
|
|
|
|
class="nc-text-field-hook-title" |
|
|
|
|
/> |
|
|
|
|
</a-form-item> |
|
|
|
|
</a-col> |
|
|
|
|
</a-row> |
|
|
|
|
|
|
|
|
|
<a-row type="flex" :gutter="[16, 16]"> |
|
|
|
|
<a-col :span="12"> |
|
|
|
|
<a-form-item v-bind="validateInfos.eventOperation"> |
|
|
|
|
<a-select |
|
|
|
|
v-model:value="hook.eventOperation" |
|
|
|
|
size="large" |
|
|
|
|
:placeholder="$t('general.event')" |
|
|
|
|
class="nc-text-field-hook-event" |
|
|
|
|
dropdown-class-name="nc-dropdown-webhook-event" |
|
|
|
|
> |
|
|
|
|
<a-select-option v-for="(event, i) in eventList" :key="i" :value="event.value.join(' ')"> |
|
|
|
|
{{ event.text.join(' ') }} |
|
|
|
|
</a-select-option> |
|
|
|
|
</a-select> |
|
|
|
|
</a-form-item> |
|
|
|
|
</a-col> |
|
|
|
|
|
|
|
|
|
<a-col :span="12"> |
|
|
|
|
<a-form-item v-bind="validateInfos['notification.type']"> |
|
|
|
|
<a-select |
|
|
|
|
v-model:value="hook.notification.type" |
|
|
|
|
size="large" |
|
|
|
|
class="nc-select-hook-notification-type" |
|
|
|
|
:placeholder="$t('general.notification')" |
|
|
|
|
dropdown-class-name="nc-dropdown-webhook-notification" |
|
|
|
|
@change="onNotTypeChange(true)" |
|
|
|
|
> |
|
|
|
|
<a-select-option v-for="(notificationOption, i) in notificationList" :key="i" :value="notificationOption.type"> |
|
|
|
|
<div class="flex items-center"> |
|
|
|
|
<MdiLink v-if="notificationOption.type === 'URL'" class="mr-2" /> |
|
|
|
|
|
|
|
|
|
<MdiEmail v-if="notificationOption.type === 'Email'" class="mr-2" /> |
|
|
|
|
|
|
|
|
|
<MdiSlack v-if="notificationOption.type === 'Slack'" class="mr-2" /> |
|
|
|
|
|
|
|
|
|
<MdiMicrosoftTeams v-if="notificationOption.type === 'Microsoft Teams'" class="mr-2" /> |
|
|
|
|
|
|
|
|
|
<MdiDiscord v-if="notificationOption.type === 'Discord'" class="mr-2" /> |
|
|
|
|
|
|
|
|
|
<MdiChat v-if="notificationOption.type === 'Mattermost'" class="mr-2" /> |
|
|
|
|
|
|
|
|
|
<MdiWhatsapp v-if="notificationOption.type === 'Whatsapp Twilio'" class="mr-2" /> |
|
|
|
|
|
|
|
|
|
<MdiCellphoneMessage v-if="notificationOption.type === 'Twilio'" class="mr-2" /> |
|
|
|
|
|
|
|
|
|
{{ notificationOption.type }} |
|
|
|
|
</div> |
|
|
|
|
</a-select-option> |
|
|
|
|
</a-select> |
|
|
|
|
</a-form-item> |
|
|
|
|
</a-col> |
|
|
|
|
</a-row> |
|
|
|
|
|
|
|
|
|
<a-row v-if="hook.notification.type === 'URL'" class="mb-5" type="flex" :gutter="[16, 0]"> |
|
|
|
|
<a-col :span="6"> |
|
|
|
|
<a-select |
|
|
|
|
v-model:value="hook.notification.payload.method" |
|
|
|
|
size="large" |
|
|
|
|
class="nc-select-hook-url-method" |
|
|
|
|
dropdown-class-name="nc-dropdown-hook-notification-url-method" |
|
|
|
|
> |
|
|
|
|
<a-select-option v-for="(method, i) in methodList" :key="i" :value="method.title"> |
|
|
|
|
{{ method.title }} |
|
|
|
|
</a-select-option> |
|
|
|
|
</a-select> |
|
|
|
|
</a-col> |
|
|
|
|
|
|
|
|
|
<a-col :span="18"> |
|
|
|
|
<a-form-item v-bind="validateInfos['notification.payload.path']"> |
|
|
|
|
<a-input |
|
|
|
|
v-model:value="hook.notification.payload.path" |
|
|
|
|
size="large" |
|
|
|
|
placeholder="http://example.com" |
|
|
|
|
class="nc-text-field-hook-url-path" |
|
|
|
|
/> |
|
|
|
|
</a-form-item> |
|
|
|
|
</a-col> |
|
|
|
|
|
|
|
|
|
<a-col :span="24"> |
|
|
|
|
<a-tabs v-model:activeKey="urlTabKey" type="card" closeable="false" class="shadow-sm"> |
|
|
|
|
<a-tab-pane key="params" tab="Params" force-render> |
|
|
|
|
<LazyApiClientParams v-model="hook.notification.payload.parameters" /> |
|
|
|
|
</a-tab-pane> |
|
|
|
|
|
|
|
|
|
<a-tab-pane key="headers" tab="Headers" class="nc-tab-headers"> |
|
|
|
|
<LazyApiClientHeaders v-model="hook.notification.payload.headers" /> |
|
|
|
|
</a-tab-pane> |
|
|
|
|
|
|
|
|
|
<!-- No in use at this moment --> |
|
|
|
|
<!-- <a-tab-pane key="auth" tab="Auth"> --> |
|
|
|
|
<!-- <LazyMonacoEditor v-model="hook.notification.payload.auth" class="min-h-60 max-h-80" /> --> |
|
|
|
|
|
|
|
|
|
<!-- <span class="text-gray-500 prose-sm p-2"> --> |
|
|
|
|
<!-- For more about auth option refer --> |
|
|
|
|
<!-- <a class="prose-sm" href ="https://github.com/axios/axios#request-config" target="_blank">axios docs</a>. --> |
|
|
|
|
<!-- </span> --> |
|
|
|
|
<!-- </a-tab-pane> --> |
|
|
|
|
</a-tabs> |
|
|
|
|
</a-col> |
|
|
|
|
</a-row> |
|
|
|
|
|
|
|
|
|
<a-row v-if="hook.notification.type === 'Slack'" type="flex"> |
|
|
|
|
<a-col :span="24"> |
|
|
|
|
<a-form-item v-bind="validateInfos['notification.channels']"> |
|
|
|
|
<LazyWebhookChannelMultiSelect |
|
|
|
|
v-if="slackChannels.length > 0" |
|
|
|
|
v-model="hook.notification.payload.channels" |
|
|
|
|
:selected-channel-list="hook.notification.payload.channels" |
|
|
|
|
:available-channel-list="slackChannels" |
|
|
|
|
placeholder="Select Slack channels" |
|
|
|
|
/> |
|
|
|
|
</a-form-item> |
|
|
|
|
</a-col> |
|
|
|
|
</a-row> |
|
|
|
|
|
|
|
|
|
<a-row v-if="hook.notification.type === 'Microsoft Teams'" type="flex"> |
|
|
|
|
<a-col :span="24"> |
|
|
|
|
<a-form-item v-bind="validateInfos['notification.channels']"> |
|
|
|
|
<LazyWebhookChannelMultiSelect |
|
|
|
|
v-if="teamsChannels.length > 0" |
|
|
|
|
v-model="hook.notification.payload.channels" |
|
|
|
|
:selected-channel-list="hook.notification.payload.channels" |
|
|
|
|
:available-channel-list="teamsChannels" |
|
|
|
|
placeholder="Select Microsoft Teams channels" |
|
|
|
|
/> |
|
|
|
|
</a-form-item> |
|
|
|
|
</a-col> |
|
|
|
|
</a-row> |
|
|
|
|
|
|
|
|
|
<a-row v-if="hook.notification.type === 'Discord'" type="flex"> |
|
|
|
|
<a-col :span="24"> |
|
|
|
|
<a-form-item v-bind="validateInfos['notification.channels']"> |
|
|
|
|
<LazyWebhookChannelMultiSelect |
|
|
|
|
v-if="discordChannels.length > 0" |
|
|
|
|
v-model="hook.notification.payload.channels" |
|
|
|
|
:selected-channel-list="hook.notification.payload.channels" |
|
|
|
|
:available-channel-list="discordChannels" |
|
|
|
|
placeholder="Select Discord channels" |
|
|
|
|
/> |
|
|
|
|
</a-form-item> |
|
|
|
|
</a-col> |
|
|
|
|
</a-row> |
|
|
|
|
|
|
|
|
|
<a-row v-if="hook.notification.type === 'Mattermost'" type="flex"> |
|
|
|
|
<a-col :span="24"> |
|
|
|
|
<a-form-item v-bind="validateInfos['notification.channels']"> |
|
|
|
|
<LazyWebhookChannelMultiSelect |
|
|
|
|
v-if="mattermostChannels.length > 0" |
|
|
|
|
v-model="hook.notification.payload.channels" |
|
|
|
|
:selected-channel-list="hook.notification.payload.channels" |
|
|
|
|
:available-channel-list="mattermostChannels" |
|
|
|
|
placeholder="Select Mattermost channels" |
|
|
|
|
/> |
|
|
|
|
</a-form-item> |
|
|
|
|
</a-col> |
|
|
|
|
</a-row> |
|
|
|
|
|
|
|
|
|
<a-row v-if="formInput[hook.notification.type] && hook.notification.payload" type="flex"> |
|
|
|
|
<a-col v-for="(input, i) in formInput[hook.notification.type]" :key="i" :span="24"> |
|
|
|
|
<a-form-item v-if="input.type === 'LongText'" v-bind="validateInfos[`notification.payload.${input.key}`]"> |
|
|
|
|
<a-textarea v-model:value="hook.notification.payload[input.key]" :placeholder="input.label" size="large" /> |
|
|
|
|
</a-form-item> |
|
|
|
|
|
|
|
|
|
<a-form-item v-else v-bind="validateInfos[`notification.payload.${input.key}`]"> |
|
|
|
|
<a-input v-model:value="hook.notification.payload[input.key]" :placeholder="input.label" size="large" /> |
|
|
|
|
</a-form-item> |
|
|
|
|
</a-col> |
|
|
|
|
</a-row> |
|
|
|
|
|
|
|
|
|
<a-row class="mb-5" type="flex"> |
|
|
|
|
<a-col :span="24"> |
|
|
|
|
<a-card> |
|
|
|
|
<a-checkbox |
|
|
|
|
:checked="Boolean(hook.condition)" |
|
|
|
|
class="nc-check-box-hook-condition" |
|
|
|
|
@update:checked="hook.condition = $event" |
|
|
|
|
> |
|
|
|
|
On Condition |
|
|
|
|
</a-checkbox> |
|
|
|
|
|
|
|
|
|
<LazySmartsheetToolbarColumnFilter |
|
|
|
|
v-if="hook.condition" |
|
|
|
|
ref="filterRef" |
|
|
|
|
class="mt-4" |
|
|
|
|
:auto-save="false" |
|
|
|
|
:show-loading="false" |
|
|
|
|
:hook-id="hook.id" |
|
|
|
|
web-hook |
|
|
|
|
/> |
|
|
|
|
</a-card> |
|
|
|
|
</a-col> |
|
|
|
|
</a-row> |
|
|
|
|
|
|
|
|
|
<a-row> |
|
|
|
|
<a-col :span="24"> |
|
|
|
|
<LazyWebhookTest |
|
|
|
|
ref="webhookTestRef" |
|
|
|
|
:hook="{ |
|
|
|
|
...hook, |
|
|
|
|
notification: { |
|
|
|
|
...hook.notification, |
|
|
|
|
payload: hook.notification.payload, |
|
|
|
|
}, |
|
|
|
|
}" |
|
|
|
|
/> |
|
|
|
|
</a-col> |
|
|
|
|
</a-row> |
|
|
|
|
</a-form-item> |
|
|
|
|
</a-form> |
|
|
|
|
</a-tab-pane> |
|
|
|
|
|
|
|
|
|
<a-tab-pane key="hook-log" class="nc-hook-log"> |
|
|
|
|
<template #tab> |
|
|
|
|
<span> |
|
|
|
|
<MdiHistory /> |
|
|
|
|
Call Log |
|
|
|
|
</span> |
|
|
|
|
</template> |
|
|
|
|
<LazyWebhookCallLog /> |
|
|
|
|
</a-tab-pane> |
|
|
|
|
</a-tabs> |
|
|
|
|
</template> |
|
|
|
|
|
Wing-Kam Wong
2 years ago