Browse Source

feat(gui-v2): render webhook form input

pull/2838/head
Wing-Kam Wong 2 years ago
parent
commit
8f5f71cbbb
  1. 143
      packages/nc-gui-v2/components/webhook/Editor.vue

143
packages/nc-gui-v2/components/webhook/Editor.vue

@ -18,6 +18,104 @@ const formState = reactive({
method: 'GET',
})
const formInput = ref({
'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,
},
],
})
const notification = ref({
method: 'POST',
body: '{{ json data }}',
})
const eventList = ref([
{
title: 'After Insert',
@ -63,6 +161,10 @@ const validators = computed(() => {
})
const { resetFields, validate, validateInfos } = useForm(formState, validators)
function onNotTypeChange() {
// TODO
}
onMounted(() => {
loadViews()
})
@ -94,7 +196,7 @@ onMounted(() => {
<a-row class="mb-5" type="flex">
<a-input v-model:value="formState.title" size="large" :placeholder="$t('general.title')" />
</a-row>
<a-row class="mb-5" type="flex" :gutter="[16, 16]">
<a-row type="flex" :gutter="[16, 16]">
<a-col :span="12">
<a-form-item v-bind="validateInfos.event">
<a-select v-model:value="formState.event" size="large" :placeholder="$t('general.event')">
@ -104,9 +206,14 @@ onMounted(() => {
</a-col>
<a-col :span="12">
<a-form-item v-bind="validateInfos['notification.type']">
<a-select v-model:value="formState.notification.type" size="large" :placeholder="$t('general.notification')">
<a-select-option v-for="(notification, i) in notificationList" :key="i" :value="notification.type">{{
notification.type
<a-select
v-model:value="formState.notification.type"
size="large"
:placeholder="$t('general.notification')"
@change="onNotTypeChange"
>
<a-select-option v-for="(notificationOption, i) in notificationList" :key="i" :value="notificationOption.type">{{
notificationOption.type
}}</a-select-option>
</a-select>
</a-form-item>
@ -119,15 +226,37 @@ onMounted(() => {
</a-select>
</a-col>
<a-col :span="18">
<a-input></a-input>
<a-form-item v-bind="validateInfos['notification.url']">
<a-input v-model:value="formState.url" size="large" placeholder="http://example.com" />
</a-form-item>
</a-col>
</a-row>
<a-row v-if="formState.notification.type === 'Slack'" class="mb-5" type="flex"> TODO: Slack </a-row>
<a-row v-if="formState.notification.type === 'Microsoft Teams'" class="mb-5" type="flex"> TODO: Microsoft Teams </a-row>
<a-row v-if="formState.notification.type === 'Discord'" class="mb-5" type="flex"> TODO: Discord </a-row>
<a-row v-if="formState.notification.type === 'Mattermost'" class="mb-5" type="flex"> TODO: Mattermost </a-row>
<!-- TODO: handle inputs[hook.notification.type] -->
<a-row v-if="formInput[formState.notification.type] && notification" class="mb-5" type="flex">
<a-col v-for="(input, i) in formInput[formState.notification.type]" :key="i" :span="24">
<a-form-item v-if="input.type === 'LongText'">
<a-textarea
:key="input.key"
v-model:value="notification[input.key]"
outlined
:placeholder="input.label"
:rules="[(v) => !input.required || !!v || `${$t('general.required')}`]"
/>
</a-form-item>
<a-form-item v-else>
<a-input
:key="input.key"
v-model:value="notification[input.key]"
class="caption"
:placeholder="input.label"
:rules="[(v) => !input.required || !!v || `${$t('general.required')}`]"
/>
</a-form-item>
</a-col>
</a-row>
<!-- TODO: handle column filter -->
<!-- TODO: sample payload -->
</a-form-item>

Loading…
Cancel
Save