feat(client): after successful submission settings for the form block
This commit is contained in:
parent
592b45f5f7
commit
40dbae8fbe
@ -1,6 +1,9 @@
|
|||||||
import { useForm } from '@formily/react';
|
import { useForm } from '@formily/react';
|
||||||
|
import { Modal } from 'antd';
|
||||||
|
import { useHistory } from 'react-router-dom';
|
||||||
import { useActionContext } from '../../schema-component';
|
import { useActionContext } from '../../schema-component';
|
||||||
import { useBlockRequestContext, useFilterByTk } from '../BlockProvider';
|
import { useBlockRequestContext, useFilterByTk } from '../BlockProvider';
|
||||||
|
import { useFormBlockContext } from '../FormBlockProvider';
|
||||||
|
|
||||||
export const usePickActionProps = () => {
|
export const usePickActionProps = () => {
|
||||||
const form = useForm();
|
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 = () => {
|
export const useCreateActionProps = () => {
|
||||||
const form = useForm();
|
const form = useForm();
|
||||||
const { resource, __parent } = useBlockRequestContext();
|
const { resource, __parent } = useBlockRequestContext();
|
||||||
const { setVisible } = useActionContext();
|
const { setVisible } = useActionContext();
|
||||||
|
const { field } = useFormBlockContext();
|
||||||
|
const history = useHistory();
|
||||||
return {
|
return {
|
||||||
async onClick() {
|
async onClick() {
|
||||||
await form.submit();
|
await form.submit();
|
||||||
@ -23,6 +40,27 @@ export const useCreateActionProps = () => {
|
|||||||
});
|
});
|
||||||
__parent?.service?.refresh?.();
|
__parent?.service?.refresh?.();
|
||||||
setVisible?.(false);
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
@ -14,8 +14,8 @@ export const useActionContext = () => {
|
|||||||
return {
|
return {
|
||||||
...ctx,
|
...ctx,
|
||||||
setVisible(visible: boolean) {
|
setVisible(visible: boolean) {
|
||||||
if (ctx.openMode !== 'page') {
|
if (ctx?.openMode !== 'page') {
|
||||||
ctx.setVisible(visible);
|
ctx?.setVisible?.(visible);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -1,15 +1,77 @@
|
|||||||
|
import { ISchema, useField, useFieldSchema } from '@formily/react';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
import { useFormBlockContext } from '../../../block-provider';
|
import { useFormBlockContext } from '../../../block-provider';
|
||||||
import { useCollection } from '../../../collection-manager';
|
import { useCollection } from '../../../collection-manager';
|
||||||
import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
|
import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
|
||||||
import { useSchemaTemplate } from '../../../schema-templates';
|
import { useSchemaTemplate } from '../../../schema-templates';
|
||||||
|
import { useDesignable } from '../../hooks';
|
||||||
|
|
||||||
export const FormDesigner = () => {
|
export const FormDesigner = () => {
|
||||||
const { name, title } = useCollection();
|
const { name, title } = useCollection();
|
||||||
const template = useSchemaTemplate();
|
const template = useSchemaTemplate();
|
||||||
const ctx = useFormBlockContext();
|
const ctx = useFormBlockContext();
|
||||||
|
const field = useField();
|
||||||
|
const fieldSchema = useFieldSchema();
|
||||||
|
const { dn } = useDesignable();
|
||||||
|
const { t } = useTranslation();
|
||||||
return (
|
return (
|
||||||
<GeneralSchemaDesigner template={template} title={title || name}>
|
<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.Template componentName={ctx?.action ? 'RecordForm' : 'CreateForm'} collectionName={name} />
|
||||||
<SchemaSettings.Divider />
|
<SchemaSettings.Divider />
|
||||||
<SchemaSettings.Remove
|
<SchemaSettings.Remove
|
||||||
|
Loading…
Reference in New Issue
Block a user