feat(gui-v2): render webhook form input

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
-              <a-select-option v-for="(notification, i) in notificationList" :key="i" :value="notification.type">{{
+              v-model:value="formState.notification.type"
-                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>