tachybase_todo/packages/plugins/workflow/src/client/triggers/index.tsx
Junyi 822099271a
fix(plugin-workflow): fix minors ui issues ()
* fix(plugin-workflow): fix minors ui issues

* fix(plugin-workflow): add refresh after title changed back

* fix(plugin-workflow): fix collection fields variable
2023-04-02 13:24:25 +08:00

289 lines
9.0 KiB
TypeScript

import React, { useState, useEffect } from "react";
import { css, cx } from "@emotion/css";
import { ISchema, useForm } from "@formily/react";
import { Registry } from "@nocobase/utils/client";
import { message, Tag, Alert, Button, Input } from "antd";
import { useTranslation } from "react-i18next";
import { InfoOutlined } from '@ant-design/icons';
import { ActionContext, SchemaComponent, SchemaInitializerItemOptions, useActionContext, useAPIClient, useCompile, useRequest, useResourceActionContext } from '@nocobase/client';
import { nodeCardClass, nodeMetaClass, nodeTitleClass } from "../style";
import { useFlowContext } from "../FlowContext";
import collection from './collection';
import schedule from "./schedule/";
import { lang, NAMESPACE } from "../locale";
function useUpdateConfigAction() {
const form = useForm();
const api = useAPIClient();
const { workflow } = useFlowContext() ?? {};
const ctx = useActionContext();
const { refresh } = useResourceActionContext();
return {
async run() {
if (workflow.executed) {
message.error(lang('Trigger in executed workflow cannot be modified'));
return;
}
await form.submit();
await api.resource('workflows').update?.({
filterByTk: workflow.id,
values: {
config: form.values
}
});
ctx.setVisible(false);
refresh();
},
};
};
export interface Trigger {
title: string;
type: string;
// group: string;
getOptions?(config: any, types: any[]): { label: string; value: any; key: string }[];
fieldset: { [key: string]: ISchema };
view?: ISchema;
scope?: { [key: string]: any };
components?: { [key: string]: any };
render?(props): React.ReactNode;
useInitializers?(config): SchemaInitializerItemOptions | null;
initializers?: any;
};
export const triggers = new Registry<Trigger>();
triggers.register(collection.type, collection);
triggers.register(schedule.type, schedule);
function TriggerExecution() {
const compile = useCompile();
const { workflow, execution } = useFlowContext();
if (!execution) {
return null;
}
const trigger = triggers.get(workflow.type);
return (
<SchemaComponent
schema={{
type: 'void',
name: 'execution',
'x-component': 'Action',
'x-component-props': {
title: <InfoOutlined />,
shape: 'circle',
className: 'workflow-node-job-button',
type: 'primary'
},
properties: {
[execution.id]: {
type: 'void',
'x-decorator': 'Form',
'x-decorator-props': {
initialValue: execution
},
'x-component': 'Action.Modal',
title: (
<div className={cx(nodeTitleClass)}>
<Tag>{compile(trigger.title)}</Tag>
<strong>{workflow.title}</strong>
<span className="workflow-node-id">#{execution.id}</span>
</div>
),
properties: {
createdAt: {
type: 'string',
title: `{{t("Triggered at", { ns: "${NAMESPACE}" })}}`,
'x-decorator': 'FormItem',
'x-component': 'DatePicker',
'x-component-props': {
showTime: true
},
'x-read-pretty': true,
},
context: {
type: 'object',
title: `{{t("Trigger variables", { ns: "${NAMESPACE}" })}}`,
'x-decorator': 'FormItem',
'x-component': 'Input.JSON',
'x-component-props': {
className: css`
padding: 1em;
background-color: #eee;
`
},
'x-read-pretty': true,
}
}
}
}
}}
/>
);
}
export const TriggerConfig = () => {
const api = useAPIClient();
const compile = useCompile();
const { workflow, refresh } = useFlowContext();
const [editingTitle, setEditingTitle] = useState<string>('');
const [editingConfig, setEditingConfig] = useState(false);
useEffect(() => {
setEditingTitle(workflow.title ?? typeTitle);
}, [workflow]);
if (!workflow || !workflow.type) {
return null;
}
const { title, type, config, executed } = workflow;
const { title: typeTitle, fieldset, scope, components } = triggers.get(type);
const detailText = executed ? '{{t("View")}}' : '{{t("Configure")}}';
const titleText = `${lang('Trigger')}: ${compile(typeTitle)}`;
async function onChangeTitle(next) {
const t = next || typeTitle;
setEditingTitle(t);
if (t === title) {
return;
}
await api.resource('workflows').update?.({
filterByTk: workflow.id,
values: {
title: t
}
});
refresh();
}
function onOpenDrawer(ev) {
if (ev.target === ev.currentTarget) {
setEditingConfig(true);
return;
}
const whiteSet = new Set(['workflow-node-meta', 'workflow-node-config-button', 'ant-input-disabled']);
for (let el = ev.target; el && el !== ev.currentTarget; el = el.parentNode) {
if ((Array.from(el.classList) as string[]).some((name: string) => whiteSet.has(name))) {
setEditingConfig(true);
ev.stopPropagation();
return;
}
}
}
return (
<div className={cx(nodeCardClass)} onClick={onOpenDrawer}>
<div className={cx(nodeMetaClass, 'workflow-node-meta')}>
<Tag color="gold">{titleText}</Tag>
</div>
<div>
<Input.TextArea
value={editingTitle}
onChange={(ev) => setEditingTitle(ev.target.value)}
onBlur={(ev) => onChangeTitle(ev.target.value)}
autoSize
/>
</div>
<TriggerExecution />
<ActionContext.Provider value={{ visible: editingConfig, setVisible: setEditingConfig }}>
<SchemaComponent
schema={{
type: 'void',
properties: {
config: {
type: 'void',
'x-content': detailText,
'x-component': Button,
'x-component-props': {
type: 'link',
className: 'workflow-node-config-button'
},
},
drawer: {
type: 'void',
title: titleText,
'x-component': 'Action.Drawer',
'x-decorator': 'Form',
'x-decorator-props': {
disabled: workflow.executed,
useValues(options) {
return useRequest(() => Promise.resolve({
data: config,
}), options);
},
},
properties: {
...(executed ? {
alert: {
'x-component': Alert,
'x-component-props': {
type: 'warning',
showIcon: true,
message: `{{t("Trigger in executed workflow cannot be modified", { ns: "${NAMESPACE}" })}}`,
className: css`
width: 100%;
font-size: 85%;
margin-bottom: 2em;
`
},
}
} : {}),
fieldset: {
type: 'void',
'x-component': 'fieldset',
'x-component-props': {
className: css`
.ant-select:not(.full-width){
width: auto;
min-width: 6em;
}
`
},
properties: fieldset
},
actions: {
...(executed
? {}
: {
type: 'void',
'x-component': 'Action.Drawer.Footer',
properties: {
cancel: {
title: '{{t("Cancel")}}',
'x-component': 'Action',
'x-component-props': {
useAction: '{{ cm.useCancelAction }}',
},
},
submit: {
title: '{{t("Submit")}}',
'x-component': 'Action',
'x-component-props': {
type: 'primary',
useAction: useUpdateConfigAction
}
}
}
})
}
}
}
}
}}
scope={scope}
components={components}
/>
</ActionContext.Provider>
</div>
);
}
export function useTrigger() {
const { workflow } = useFlowContext();
return triggers.get(workflow.type);
}