add form submission hooks

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Added
 
 - slug for fields to be able to set value by url parameter
+- form submission hokks
 
 ### Changed
 

components/form/admin/hooks.tab.tsx

@@ -0,0 +1,101 @@
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons/lib'
+import { Button, Card, Checkbox, Form, Input, Popconfirm, Popover, Select, Space, Tabs, Tag } from 'antd'
+import { FormInstance } from 'antd/lib/form'
+import { TabPaneProps } from 'antd/lib/tabs'
+import { FieldData } from 'rc-field-form/lib/interface'
+import React, { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { AdminFormFieldFragment } from '../../../graphql/fragment/admin.form.fragment'
+import { FieldCard } from './field.card'
+import { adminTypes } from './types'
+
+interface Props extends TabPaneProps {
+}
+
+export const HooksTab: React.FC<Props> = (props) => {
+  const { t } = useTranslation()
+
+  return (
+    <Tabs.TabPane {...props}>
+      <Form.List name={['form', 'hooks']}>
+        {(hooks, { add, remove, move }) => {
+          return (
+            <div>
+              <Form.Item wrapperCol={{ span: 24 }}>
+                <Space
+                  style={{
+                    width: '100%',
+                    justifyContent: 'flex-end',
+                  }}
+                >
+                  <Button
+                    type="dashed"
+                    onClick={() => {
+                      const defaults = {
+                        id: `NEW-${Date.now()}`,
+                        enabled: false,
+                        url: ''
+                      }
+
+                      add(defaults)
+                    }}
+                  >
+                    <PlusOutlined /> {t('form:hooks.add')}
+                  </Button>
+                </Space>
+              </Form.Item>
+              {hooks.map((hook, index) => (
+                <div key={hook.key}>
+                  <Form.Item wrapperCol={{ span: 24 }}>
+                    <Card
+                      title={
+                        <Form.Item
+                          name={[hook.name, 'enabled']}
+                          valuePropName={'checked'}
+                          noStyle
+                        >
+                          <Checkbox /> {t('form:hooks.enabled')}
+                        </Form.Item>
+                      }
+                      type={'inner'}
+                      extra={
+                        <div>
+                          <Popconfirm
+                            placement={'left'}
+                            title={t('form:hooks.confirmDelete')}
+                            okText={t('form:hooks.deleteNow')}
+                            okButtonProps={{ danger: true }}
+                            onConfirm={() => {
+                              remove(index)
+                            }}
+                          >
+                            <Button danger>
+                              <DeleteOutlined />
+                            </Button>
+                          </Popconfirm>
+                        </div>
+                      }
+                      actions={[<DeleteOutlined key={'delete'} onClick={() => remove(index)} />]}
+                    >
+                      <Form.Item
+                        label={t('form:hooks.url')}
+                        name={[hook.name, 'url']}
+                        rules={[
+                          { required: true, message: t('validation:urlRequired') },
+                          { type: 'url', message: t('validation:invalidUrl')},
+                        ]}
+                        labelCol={{ span: 6 }}
+                      >
+                        <Input  />
+                      </Form.Item>
+                    </Card>
+                  </Form.Item>
+                </div>
+              ))}
+            </div>
+          )
+        }}
+      </Form.List>
+    </Tabs.TabPane>
+  )
+}

graphql/fragment/admin.form.fragment.ts

@@ -52,6 +52,13 @@ export interface AdminFormFieldFragment {
   }
 }
 
+export interface AdminFormHookFragment {
+  id: string
+  enabled: boolean
+  url?: string
+  format?: string
+}
+
 export interface AdminFormFragment {
   id?: string
   title: string
@@ -61,6 +68,7 @@ export interface AdminFormFragment {
   showFooter: boolean
   isLive: boolean
   fields: AdminFormFieldFragment[]
+  hooks: AdminFormHookFragment[]
   selfNotifications: {
     enabled: boolean
     subject?: string
@@ -103,6 +111,13 @@ export const ADMIN_FORM_FRAGMENT = gql`
     language
     showFooter
     isLive
+    
+    hooks {
+      id
+      enabled
+      format
+      url
+    }
 
     fields {
       id

locales/en/form.json

@@ -42,6 +42,13 @@
   },
   "endPageTab": "End Page",
   "fieldsTab": "Form Fields",
+  "hooksTab": "WebHooks",
+  "hooks": {
+    "add": "Add",
+    "enabled": "Enabled",
+    "confirmDelete": "",
+    "deleteNow": ""
+  },
   "loading": "Loading Form",
   "mange": "Edit Form \"{{title}}\"",
   "new": "New Form",

locales/en/validation.json

@@ -13,5 +13,6 @@
   "templateRequired": "Please provide a template",
   "titleRequired": "Please provide a title",
   "usernameRequired": "Please provide a Username",
-  "valueRequired": "Please provide a Value"
+  "valueRequired": "Please provide a Value",
+  "urlRequired": "Please provide a Url"
 }

pages/admin/forms/[id]/index.tsx

@@ -30,6 +30,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { HooksTab } from '../../../../components/form/admin/hooks.tab'
 
 const Index: NextPage = () => {
   const { t } = useTranslation()
@@ -188,6 +189,7 @@ const Index: NextPage = () => {
           />
           <StartPageTab key={'start_page'} tab={t('form:startPageTab')} />
           <EndPageTab key={'end_page'} tab={t('form:endPageTab')} />
+          <HooksTab key={'hooks'} tab={t('form:hooksTab')} />
         </Tabs>
       </Form>
     </Structure>

schema.graphql

@@ -49,11 +49,12 @@ type Device {
 }
 
 type Form {
-  admin: User!
+  admin: User
   created: DateTime!
   design: Design!
   endPage: Page!
   fields: [FormField!]!
+  hooks: [FormHook!]!
   id: ID!
   isLive: Boolean!
   language: String!
@@ -72,6 +73,7 @@ type FormField {
   options: [FormFieldOption!]!
   rating: FormFieldRating
   required: Boolean!
+  slug: String
   title: String!
   type: String!
   value: String!
@@ -88,6 +90,13 @@ type FormFieldRating {
   steps: Int
 }
 
+type FormHook {
+  enabled: Boolean!
+  format: String
+  id: ID!
+  url: String
+}
+
 type FormStatistic {
   total: Int!
 }
@@ -202,7 +211,7 @@ type Setting {
   isFalse: Boolean!
   isTrue: Boolean!
   key: ID!
-  value: String!
+  value: String
 }
 
 type Submission {
@@ -299,6 +308,7 @@ input FormFieldInput {
   options: [FormFieldOptionInput!]
   rating: FormFieldRatingInput
   required: Boolean!
+  slug: String
   title: String!
   type: String!
   value: String!
@@ -315,10 +325,18 @@ input FormFieldRatingInput {
   steps: Int
 }
 
+input FormHookInput {
+  enabled: Boolean!
+  format: String
+  id: ID!
+  url: String
+}
+
 input FormUpdateInput {
   design: DesignInput
   endPage: PageInput
   fields: [FormFieldInput!]
+  hooks: [FormHookInput!]
   id: ID!
   isLive: Boolean
   language: String