feat(client): after successful submission settings for the form block

packages/client/src/block-provider/hooks/index.ts

@@ -1,6 +1,9 @@
 import { useForm } from '@formily/react';
+import { Modal } from 'antd';
+import { useHistory } from 'react-router-dom';
 import { useActionContext } from '../../schema-component';
 import { useBlockRequestContext, useFilterByTk } from '../BlockProvider';
+import { useFormBlockContext } from '../FormBlockProvider';
 
 export const usePickActionProps = () => {
   const form = useForm();
@@ -11,10 +14,24 @@ export const usePickActionProps = () => {
   };
 };
 
+function isURL(string) {
+  let url;
+
+  try {
+    url = new URL(string);
+  } catch (e) {
+    return false;
+  }
+
+  return url.protocol === 'http:' || url.protocol === 'https:';
+}
+
 export const useCreateActionProps = () => {
   const form = useForm();
   const { resource, __parent } = useBlockRequestContext();
   const { setVisible } = useActionContext();
+  const { field } = useFormBlockContext();
+  const history = useHistory();
   return {
     async onClick() {
       await form.submit();
@@ -23,6 +40,27 @@ export const useCreateActionProps = () => {
       });
       __parent?.service?.refresh?.();
       setVisible?.(false);
+      const onSuccess = field?.decoratorProps?.onSuccess;
+      if (!onSuccess) {
+        return;
+      }
+      if (typeof onSuccess === 'function') {
+        onSuccess({ form });
+      } else if (typeof onSuccess === 'object') {
+        Modal.success({
+          title: onSuccess.successMessage,
+          onOk: async () => {
+            await form.reset();
+            if (onSuccess.redirecting && onSuccess.redirectTo) {
+              if (isURL(onSuccess.redirectTo)) {
+                window.location.href = onSuccess.redirectTo;
+              } else {
+                history.push(onSuccess.redirectTo);
+              }
+            }
+          },
+        });
+      }
     },
   };
 };

packages/client/src/schema-component/antd/action/hooks.ts

@@ -14,8 +14,8 @@ export const useActionContext = () => {
   return {
     ...ctx,
     setVisible(visible: boolean) {
-      if (ctx.openMode !== 'page') {
-        ctx.setVisible(visible);
+      if (ctx?.openMode !== 'page') {
+        ctx?.setVisible?.(visible);
       }
     },
   };

packages/client/src/schema-component/antd/form-v2/Form.Designer.tsx

@@ -1,15 +1,77 @@
+import { ISchema, useField, useFieldSchema } from '@formily/react';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { useFormBlockContext } from '../../../block-provider';
 import { useCollection } from '../../../collection-manager';
 import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
 import { useSchemaTemplate } from '../../../schema-templates';
+import { useDesignable } from '../../hooks';
 
 export const FormDesigner = () => {
   const { name, title } = useCollection();
   const template = useSchemaTemplate();
   const ctx = useFormBlockContext();
+  const field = useField();
+  const fieldSchema = useFieldSchema();
+  const { dn } = useDesignable();
+  const { t } = useTranslation();
   return (
     <GeneralSchemaDesigner template={template} title={title || name}>
+      <SchemaSettings.ModalItem
+        title={t('After successful submission')}
+        initialValues={fieldSchema['x-decorator-props']?.['onSuccess']}
+        schema={
+          {
+            type: 'object',
+            title: t('After successful submission'),
+            properties: {
+              successMessage: {
+                default: t('Submitted successfully!'),
+                title: 'Pop-up message',
+                'x-decorator': 'FormItem',
+                'x-component': 'Input.TextArea',
+                'x-component-props': {},
+              },
+              redirecting: {
+                title: t('Then'),
+                default: false,
+                enum: [
+                  { label: t('Stay on current page'), value: false },
+                  { label: t('Redirect to'), value: true },
+                ],
+                'x-decorator': 'FormItem',
+                'x-component': 'Radio.Group',
+                'x-component-props': {},
+                'x-reactions': {
+                  target: 'redirectTo',
+                  fulfill: {
+                    state: {
+                      visible: '{{!!$self.value}}',
+                    },
+                  },
+                },
+              },
+              redirectTo: {
+                title: t('Link'),
+                'x-decorator': 'FormItem',
+                'x-component': 'Input',
+                'x-component-props': {},
+              },
+            },
+          } as ISchema
+        }
+        onSubmit={(onSuccess) => {
+          field.decoratorProps.onSuccess = onSuccess;
+          fieldSchema['x-decorator-props'] = fieldSchema['x-decorator-props'] || {};
+          fieldSchema['x-decorator-props']['onSuccess'] = onSuccess;
+          dn.emit('patch', {
+            schema: {
+              ['x-uid']: fieldSchema['x-uid'],
+              'x-decorator-props': fieldSchema['x-decorator-props'],
+            },
+          });
+        }}
+      />
       <SchemaSettings.Template componentName={ctx?.action ? 'RecordForm' : 'CreateForm'} collectionName={name} />
       <SchemaSettings.Divider />
       <SchemaSettings.Remove