tachybase_todo/packages/plugins/workflow/src/client/AddButton.tsx
Junyi a17c1ad4e4
feat(plugin-workflow): allow manual form button to be configured with preset values (#2225)
* refactor(client): split to small components

* fix(client): fix component warning

* feat(plugin-workflow): allow form button to be configured more than one for each type

* test(plugin-workflow): add test cases

* chore(plugin-workflow): add modal tips

* fix(plugin-workflow): fix test bugs

* fix(plugin-workflow): fix manual button configuration and params

* test(plugin-workflow): fix test cases

* fix(plugin-workflow): fix manual form values

* refactor(plugin-workflow): adjust component

* fix(plugin-workflow): fix typo

* refactor(plugin-workflow): avoid one more load when manual node resume

* fix(plugin-workflow): fix currentUser to be plain object

* chore(plugin-workflow): clean code

* fix(plugin-workflow): fix typo
2023-07-17 21:50:24 -07:00

112 lines
3.3 KiB
TypeScript

import { PlusOutlined } from '@ant-design/icons';
import { cx, css, useAPIClient, useCompile } from '@nocobase/client';
import { Button, Dropdown, MenuProps } from 'antd';
import React, { useCallback, useMemo } from 'react';
import { useFlowContext } from './FlowContext';
import { NAMESPACE } from './locale';
import { Instruction, instructions } from './nodes';
import useStyles from './style';
interface AddButtonProps {
upstream;
branchIndex?: number | null;
}
export function AddButton({ upstream, branchIndex = null }: AddButtonProps) {
const compile = useCompile();
const api = useAPIClient();
const { workflow, refresh } = useFlowContext() ?? {};
const instructionList = Array.from(instructions.getValues()) as Instruction[];
const { styles } = useStyles();
const groups = useMemo(() => {
return [
{ key: 'control', label: `{{t("Control", { ns: "${NAMESPACE}" })}}` },
{ key: 'collection', label: `{{t("Collection operations", { ns: "${NAMESPACE}" })}}` },
{ key: 'manual', label: `{{t("Manual", { ns: "${NAMESPACE}" })}}` },
{ key: 'extended', label: `{{t("Extended types", { ns: "${NAMESPACE}" })}}` },
]
.filter((group) => instructionList.filter((item) => item.group === group.key).length)
.map((group) => {
const groupInstructions = instructionList.filter((item) => item.group === group.key);
return {
...group,
type: 'group',
children: groupInstructions.map((item) => ({
key: item.type,
label: item.title,
type: item.options ? 'subMenu' : null,
children: item.options
? item.options.map((option) => ({
key: option.key,
label: option.label,
}))
: null,
})),
};
});
}, [instructionList]);
const resource = useMemo(() => {
if (!workflow) {
return null;
}
return api.resource('workflows.nodes', workflow.id);
}, [workflow?.id]);
const onCreate = useCallback(
async ({ keyPath }) => {
const type = keyPath.pop();
const config = {};
const [optionKey] = keyPath;
const instruction = instructions.get(type);
if (optionKey) {
const { value } = instruction.options?.find((item) => item.key === optionKey) ?? {};
Object.assign(config, value);
}
if (resource) {
await resource.create({
values: {
type,
upstreamId: upstream?.id ?? null,
branchIndex,
title: compile(instruction.title),
config,
},
});
refresh();
}
},
[branchIndex, resource?.create, upstream?.id],
);
const menu = useMemo<MenuProps>(() => {
return {
onClick: onCreate,
items: compile(groups),
};
}, [groups, onCreate]);
if (!workflow) {
return null;
}
return (
<div className={styles.addButtonClass}>
<Dropdown
trigger={['click']}
menu={menu}
disabled={workflow.executed}
overlayClassName={css`
.ant-dropdown-menu-root{
max-height: 30em;
overflow-y: auto;
}
`}
>
<Button shape="circle" icon={<PlusOutlined />} />
</Dropdown>
</div>
);
}