tachybase_todo/packages/plugins/sequence-field/src/client/sequence.tsx
Junyi e3e352ffeb
refactor(sequence-field): move to plugin and use table to record (#1209)
* refactor(sequence-field): move to plugin and use table to record

* fix(database): skip test case which not in core

* fix(plugin-sequence): add migration

* fix(plugin-sequence): fix types

* test(plugin-sequence): fix test cases

* fix(plugin-sequence): fix configuration ui

* fix(plugin-sequence): fix merge

* fix(plugin-sequence): fix schema and error message
2022-12-16 01:04:22 -08:00

411 lines
12 KiB
TypeScript

import { css } from '@emotion/css';
import { ArrayTable, FormButtonGroup, FormDrawer, FormLayout, Submit } from '@formily/antd';
import { onFieldValueChange } from '@formily/core';
import { SchemaOptionsContext, useForm, useFormEffects, ISchema } from '@formily/react';
import { Button, Select } from 'antd';
import React, { useContext } from 'react';
import { useTranslation } from 'react-i18next';
import { Cron, SchemaComponent, SchemaComponentOptions, useCompile, interfacesProperties, IField, useCollectionField } from '@nocobase/client';
import { lang, NAMESPACE } from './locale';
function RuleTypeSelect(props) {
const compile = useCompile();
const { setValuesIn } = useForm();
const index = ArrayTable.useIndex();
useFormEffects(() => {
onFieldValueChange(`patterns.${index}.type`, (field) => {
setValuesIn(`patterns.${index}.options`, {});
});
});
return (
<Select {...props}>
{Object.keys(RuleTypes).map(key => (
<Select.Option key={key} value={key}>{compile(RuleTypes[key].title)}</Select.Option>
))}
</Select>
);
}
function RuleOptions() {
const { type, options } = ArrayTable.useRecord();
const ruleType = RuleTypes[type];
const compile = useCompile();
return (
<div className={css`
display: flex;
gap: 1em;
flex-wrap: wrap;
`}>
{Object.keys(options)
.filter(key => typeof options[key] !== 'undefined' && ruleType.optionRenders[key])
.map(key => {
const Component = ruleType.optionRenders[key];
const { title } = ruleType.fieldset[key];
return Component
? (
<dl key={key} className={css`
margin: 0;
padding: 0;
`}>
<dt>
{compile(title)}
</dt>
<dd className={css`
margin-bottom: 0;
`}>
<Component key={key} value={options[key]} />
</dd>
</dl>
)
: null;
})}
</div>
);
};
const RuleTypes = {
string: {
title: `{{t("Fixed text", { ns: "${NAMESPACE}" })}}`,
optionRenders: {
value(options = { value: '' }) {
return <code>{options.value}</code>;
}
},
fieldset: {
value: {
type: 'string',
title: `{{t("Text content", { ns: "${NAMESPACE}" })}}`,
'x-decorator': 'FormItem',
'x-component': 'Input'
}
}
},
integer: {
title: `{{t("Autoincrement", { ns: "${NAMESPACE}" })}}`,
optionRenders: {
digits({ value }) {
const { t } = useTranslation();
return (
<span>
{t('{{value}} Digits', { ns: NAMESPACE, value })}
</span>
);
},
start({ value }) {
const { t } = useTranslation();
return (
<span>
{t('Starts from {{value}}', { ns: NAMESPACE, value })}
</span>
);
},
cycle({ value }) {
return (
<SchemaComponent
schema={{
type: 'string',
name: 'cycle',
'x-component': 'Cron',
'x-read-pretty': true,
}}
/>
);
}
},
fieldset: {
digits: {
type: 'number',
title: `{{t("Digits", { ns: "${NAMESPACE}" })}}`,
'x-decorator': 'FormItem',
'x-component': 'InputNumber',
'x-component-props': {
min: 1,
max: 10
},
required: true,
default: 1,
'x-reactions': {
target: 'start',
fulfill: {
schema: {
'x-component-props.max': '{{ 10 ** $self.value - 1 }}'
}
}
}
},
start: {
type: 'number',
title: `{{t("Start from", { ns: "${NAMESPACE}" })}}`,
'x-decorator': 'FormItem',
'x-component': 'InputNumber',
'x-component-props': {
min: 0
},
required: true,
default: 0,
// 'x-reactions': {
// dependencies: ['.start', '.base'],
// fulfill: {
// schema: {
// 'x-component-props.max': '{{ ($deps[1] ?? 10) ** ($deps[0] ?? 1) - 1 }}'
// }
// }
// }
},
cycle: {
type: 'string',
title: `{{t("Reset cycle", { ns: "${NAMESPACE}" })}}`,
'x-decorator': 'FormItem',
['x-component']({ value, onChange }) {
const shortValues = [
{ label: 'No reset', value: 0 },
{ label: 'Daily', value: 1, cron: '0 0 * * *' },
{ label: 'Every Monday', value: 2, cron: '0 0 * * 1' },
{ label: 'Monthly', value: 3, cron: '0 0 1 * *' },
{ label: 'Yearly', value: 4, cron: '0 0 1 1 *' },
{ label: 'Customize', value: 5, cron: '* * * * *' }
];
const option = typeof value === 'undefined'
? shortValues[0]
: shortValues.find(item => {
return item.cron == value
}) || shortValues[5]
return (
<fieldset>
<Select value={option.value} onChange={(v) => onChange(shortValues[v].cron)}>
{shortValues.map(item => (
<Select.Option key={item.value} value={item.value}>{lang(item.label)}</Select.Option>
))}
</Select>
{option.value === 5
? (
<Cron
value={value}
setValue={onChange}
clearButton={false}
/>
)
: null}
</fieldset>
);
},
default: null
}
}
},
date: {
title: `{{t("Date", { ns: "${NAMESPACE}" })}}`,
optionRenders: {
format(options = { value: 'YYYYMMDD' }) {
return <code>{options.value}</code>;
}
}
}
};
export function RuleConfigForm() {
const { t } = useTranslation();
const compile = useCompile();
const schemaOptions = useContext(SchemaOptionsContext);
const form = useForm();
const { type, options } = ArrayTable.useRecord();
const index = ArrayTable.useIndex();
const ruleType = RuleTypes[type];
return ruleType?.fieldset
? (
<Button
type="link"
onClick={() => {
FormDrawer(compile(ruleType.title), () => {
return (
<FormLayout layout="vertical">
<SchemaComponentOptions scope={schemaOptions.scope} components={schemaOptions.components}>
<SchemaComponent
schema={{
type: 'object',
'x-component': 'fieldset',
properties: ruleType.fieldset
}}
/>
</SchemaComponentOptions>
<FormDrawer.Footer>
<FormButtonGroup className={css`
justify-content: flex-end;
`}>
<Submit
onSubmit={(values) => {
return values;
}}
>
{t('Submit')}
</Submit>
</FormButtonGroup>
</FormDrawer.Footer>
</FormLayout>
)
})
.open({
initialValues: options,
})
.then((values) => {
form.setValuesIn(`patterns.${index}`, { type, options: { ...values } });
})
}}
>
{t('Configure')}
</Button>
)
: null;
}
export const sequence: IField = {
name: 'sequence',
type: 'object',
group: 'advanced',
order: 3,
title: `{{t("Sequence", { ns: "${NAMESPACE}" })}}`,
sortable: true,
default: {
type: 'sequence',
uiSchema: {
type: 'string',
'x-component': 'Input',
'x-component-props': {
},
},
},
hasDefaultValue: false,
schemaInitialize(schema: ISchema, { block, field }) {
if (block === 'Form') {
Object.assign(schema['x-component-props'], {
disabled: !field.inputable,
});
}
return schema;
},
properties: {
...interfacesProperties.defaultProps,
unique: interfacesProperties.unique,
patterns: {
type: 'array',
title: `{{t("Sequence rules", { ns: "${NAMESPACE}" })}}`,
required: true,
'x-decorator': 'FormItem',
'x-component': 'ArrayTable',
items: {
type: 'object',
properties: {
sort: {
type: 'void',
'x-component': 'ArrayTable.Column',
'x-component-props': { width: 50, title: '', align: 'center' },
properties: {
sort: {
type: 'void',
'x-component': 'ArrayTable.SortHandle',
},
},
},
type: {
type: 'void',
'x-component': 'ArrayTable.Column',
'x-component-props': { title: `{{t("Type", { ns: "${NAMESPACE}" })}}` },
// 'x-hidden': true,
properties: {
type: {
type: 'string',
name: 'type',
required: true,
'x-decorator': 'FormItem',
'x-component': RuleTypeSelect
},
},
},
options: {
type: 'void',
'x-component': 'ArrayTable.Column',
'x-component-props': { title: `{{t("Rule content", { ns: "${NAMESPACE}" })}}` },
properties: {
options: {
type: 'object',
name: 'options',
'x-component': RuleOptions
}
}
},
operations: {
type: 'void',
'x-component': 'ArrayTable.Column',
'x-component-props': {
title: `{{t("Operations", { ns: "${NAMESPACE}" })}}`,
dataIndex: 'operations',
fixed: 'right',
className: css`
> *:not(:last-child){
margin-right: .5em;
}
button{
padding: 0;
}
`
},
properties: {
config: {
type: 'void',
properties: {
options: {
type: 'object',
'x-component': RuleConfigForm
}
}
},
remove: {
type: 'void',
'x-component': 'ArrayTable.Remove',
}
}
}
}
},
properties: {
add: {
type: 'void',
'x-component': 'ArrayTable.Addition',
'x-component-props': {
defaultValue: { type: 'integer', options: { digits: 1, start: 0 } }
},
title: `{{t("Add rule", { ns: "${NAMESPACE}" })}}`,
}
}
},
inputable: {
type: 'boolean',
title: `{{t("Inputable", { ns: "${NAMESPACE}" })}}`,
'x-decorator': 'FormItem',
'x-component': 'Checkbox',
},
match: {
type: 'boolean',
title: `{{t("Match rules", { ns: "${NAMESPACE}" })}}`,
'x-decorator': 'FormItem',
'x-component': 'Checkbox',
'x-reactions': {
dependencies: ['inputable'],
fulfill: {
state: {
value: '{{$deps[0] && $self.value}}',
visible: '{{$deps[0] === true}}',
},
},
},
}
},
filterable: {
operators: interfacesProperties.operators.string,
}
};