From 6d733f20ddad29ef2aa5c316cef8c7f0ef44dff8 Mon Sep 17 00:00:00 2001 From: wodka Date: Sun, 21 Jun 2020 00:03:56 +0200 Subject: [PATCH] add form submission hooks --- CHANGELOG.md | 1 + components/form/admin/hooks.tab.tsx | 101 ++++++++++++++++++++++++ graphql/fragment/admin.form.fragment.ts | 15 ++++ locales/en/form.json | 7 ++ locales/en/validation.json | 3 +- pages/admin/forms/[id]/index.tsx | 2 + schema.graphql | 22 +++++- 7 files changed, 148 insertions(+), 3 deletions(-) create mode 100644 components/form/admin/hooks.tab.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 9366406..48aad59 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/components/form/admin/hooks.tab.tsx b/components/form/admin/hooks.tab.tsx new file mode 100644 index 0000000..66e6194 --- /dev/null +++ b/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) => { + const { t } = useTranslation() + + return ( + + + {(hooks, { add, remove, move }) => { + return ( +
+ + + + + + {hooks.map((hook, index) => ( +
+ + + {t('form:hooks.enabled')} + + } + type={'inner'} + extra={ +
+ { + remove(index) + }} + > + + +
+ } + actions={[ remove(index)} />]} + > + + + + + +
+ ))} +
+ ) + }} + + + ) +} diff --git a/graphql/fragment/admin.form.fragment.ts b/graphql/fragment/admin.form.fragment.ts index 3f4ba95..2461fe0 100644 --- a/graphql/fragment/admin.form.fragment.ts +++ b/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 diff --git a/locales/en/form.json b/locales/en/form.json index e74cdb8..48276b6 100644 --- a/locales/en/form.json +++ b/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", diff --git a/locales/en/validation.json b/locales/en/validation.json index f297ee6..9e62bf0 100644 --- a/locales/en/validation.json +++ b/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" } diff --git a/pages/admin/forms/[id]/index.tsx b/pages/admin/forms/[id]/index.tsx index 007f193..c7b8391 100644 --- a/pages/admin/forms/[id]/index.tsx +++ b/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 = () => { /> + diff --git a/schema.graphql b/schema.graphql index 1866756..bf2c8ab 100644 --- a/schema.graphql +++ b/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