@nocobase/plugin-workflow 0.10.0-alpha.5 → 0.11.0-alpha.1

package/src/client/triggers/index.tsx

@@ -0,0 +1,307 @@
+import { InfoOutlined } from '@ant-design/icons';
+import { createForm } from '@formily/core';
+import { ISchema, useForm } from '@formily/react';
+import {
+  ActionContextProvider,
+  css,
+  cx,
+  SchemaComponent,
+  SchemaInitializerItemOptions,
+  useActionContext,
+  useAPIClient,
+  useCompile,
+  useResourceActionContext,
+} from '@nocobase/client';
+import { Registry } from '@nocobase/utils/client';
+import { Alert, Button, Input, message, Tag } from 'antd';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useFlowContext } from '../FlowContext';
+import { lang, NAMESPACE } from '../locale';
+import { nodeCardClass, nodeJobButtonClass, nodeMetaClass, nodeTitleClass } from '../style';
+import { VariableOptions } from '../variable';
+import collection from './collection';
+import schedule from './schedule/';
+
+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;
+  useVariables?(config: any, options?): VariableOptions;
+  fieldset: { [key: string]: ISchema };
+  view?: ISchema;
+  scope?: { [key: string]: any };
+  components?: { [key: string]: any };
+  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: nodeJobButtonClass,
+          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);
+  let typeTitle = '';
+  useEffect(() => {
+    if (workflow) {
+      setEditingTitle(workflow.title ?? typeTitle);
+    }
+  }, [workflow]);
+
+  const form = useMemo(
+    () =>
+      createForm({
+        initialValues: workflow?.config,
+        values: workflow?.config,
+        disabled: workflow?.executed,
+      }),
+    [workflow],
+  );
+
+  if (!workflow || !workflow.type) {
+    return null;
+  }
+  const { title, type, executed } = workflow;
+  const trigger = triggers.get(type);
+  const { fieldset, scope, components } = trigger;
+  typeTitle = trigger.title;
+  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 />
+      <ActionContextProvider value={{ visible: editingConfig, setVisible: setEditingConfig }}>
+        <SchemaComponent
+          schema={{
+            name: `workflow-trigger-${workflow.id}`,
+            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': 'FormV2',
+                'x-decorator-props': {
+                  form,
+                },
+                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}
+        />
+      </ActionContextProvider>
+    </div>
+  );
+};
+
+export function useTrigger() {
+  const { workflow } = useFlowContext();
+  return triggers.get(workflow.type);
+}

package/src/client/triggers/schedule/DateFieldsSelect.tsx

@@ -0,0 +1,28 @@
+import { observer, useForm } from '@formily/react';
+import { useCollectionManager, useCompile } from '@nocobase/client';
+import { Select } from 'antd';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const DateFieldsSelect: React.FC<any> = observer(
+  (props) => {
+    const { t } = useTranslation();
+    const compile = useCompile();
+    const { getCollectionFields } = useCollectionManager();
+    const { values } = useForm();
+    const fields = getCollectionFields(values?.collection);
+
+    return (
+      <Select popupMatchSelectWidth={false} placeholder={t('Select field')} {...props}>
+        {fields
+          .filter((field) => !field.hidden && (field.uiSchema ? field.type === 'date' : false))
+          .map((field) => (
+            <Select.Option key={field.name} value={field.name}>
+              {compile(field.uiSchema?.title)}
+            </Select.Option>
+          ))}
+      </Select>
+    );
+  },
+  { displayName: 'DateFieldsSelect' },
+);

package/src/client/triggers/schedule/EndsByField.tsx

@@ -0,0 +1,40 @@
+import { css } from '@nocobase/client';
+import { dayjs } from '@nocobase/utils/client';
+import { DatePicker, Select } from 'antd';
+import React from 'react';
+import { useWorkflowTranslation } from '../../locale';
+import { OnField } from './OnField';
+
+export function EndsByField({ value, onChange }) {
+  const { t } = useWorkflowTranslation();
+  const type = value != null ? (typeof value === 'object' && !(value instanceof Date) ? 'field' : 'date') : null;
+  return (
+    <fieldset
+      className={css`
+        display: flex;
+        gap: 0.5em;
+      `}
+    >
+      <Select
+        value={type}
+        onChange={(t) => {
+          onChange(t ? (t === 'field' ? {} : new Date()) : null);
+        }}
+      >
+        <Select.Option value={null}>{t('No end')}</Select.Option>
+        <Select.Option value={'field'}>{t('By field')}</Select.Option>
+        <Select.Option value={'date'}>{t('By custom date')}</Select.Option>
+      </Select>
+      {type === 'field' ? <OnField value={value} onChange={onChange} /> : null}
+      {type === 'date' ? (
+        <DatePicker
+          showTime
+          value={dayjs(value)}
+          onChange={(v) => {
+            onChange(v ? v.toDate() : null);
+          }}
+        />
+      ) : null}
+    </fieldset>
+  );
+}

package/src/client/triggers/schedule/OnField.tsx

@@ -0,0 +1,50 @@
+import { css } from '@nocobase/client';
+import { InputNumber, Select } from 'antd';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useWorkflowTranslation } from '../../locale';
+import { DateFieldsSelect } from './DateFieldsSelect';
+
+export function OnField({ value, onChange }) {
+  const { t } = useTranslation();
+  const { t: localT } = useWorkflowTranslation();
+  const [dir, setDir] = useState(value.offset ? value.offset / Math.abs(value.offset) : 0);
+
+  return (
+    <fieldset
+      className={css`
+        display: flex;
+        gap: 0.5em;
+      `}
+    >
+      <DateFieldsSelect value={value.field} onChange={(field) => onChange({ ...value, field })} />
+      {value.field ? (
+        <Select
+          value={dir}
+          onChange={(v) => {
+            setDir(v);
+            onChange({ ...value, offset: Math.abs(value.offset) * v });
+          }}
+        >
+          <Select.Option value={0}>{localT('Exactly at')}</Select.Option>
+          <Select.Option value={-1}>{t('Before')}</Select.Option>
+          <Select.Option value={1}>{t('After')}</Select.Option>
+        </Select>
+      ) : null}
+      {dir ? (
+        <>
+          <InputNumber
+            value={Math.abs(value.offset)}
+            onChange={(v) => onChange({ ...value, offset: (v ?? 0) * dir })}
+          />
+          <Select value={value.unit || 86400000} onChange={(unit) => onChange({ ...value, unit })}>
+            <Select.Option value={86400000}>{localT('Days')}</Select.Option>
+            <Select.Option value={3600000}>{localT('Hours')}</Select.Option>
+            <Select.Option value={60000}>{localT('Minutes')}</Select.Option>
+            <Select.Option value={1000}>{localT('Seconds')}</Select.Option>
+          </Select>
+        </>
+      ) : null}
+    </fieldset>
+  );
+}

package/src/client/triggers/schedule/RepeatField.tsx

@@ -0,0 +1,116 @@
+import { css } from '@nocobase/client';
+import { InputNumber, Select } from 'antd';
+import React from 'react';
+import { Cron } from 'react-js-cron';
+import { useWorkflowTranslation } from '../../locale';
+import CronZhCN from './locale/Cron.zh-CN';
+
+const languages = {
+  'zh-CN': CronZhCN,
+};
+
+const RepeatOptions = [
+  { value: 'none', text: 'No repeat' },
+  { value: 60_000, text: 'By minute', unitText: 'Minutes' },
+  { value: 3600_000, text: 'By hour', unitText: 'Hours' },
+  { value: 86400_000, text: 'By day', unitText: 'Days' },
+  { value: 604800_000, text: 'By week', unitText: 'Weeks' },
+  // { value: 18144_000_000, text: 'By 30 days' },
+  { value: 'cron', text: 'Advanced' },
+];
+
+function getNumberOption(v) {
+  const opts = RepeatOptions.filter((option) => typeof option.value === 'number').reverse() as any[];
+  return opts.find((item) => !(v % item.value));
+}
+
+function getRepeatTypeValue(v) {
+  switch (typeof v) {
+    case 'number':
+      const option = getNumberOption(v);
+      return option ? option.value : 'none';
+    case 'string':
+      return 'cron';
+    default:
+      break;
+  }
+  return 'none';
+}
+
+function CommonRepeatField({ value, onChange }) {
+  const { t } = useWorkflowTranslation();
+  const option = getNumberOption(value);
+
+  return (
+    <InputNumber
+      value={value / option.value}
+      onChange={(v) => onChange(v * option.value)}
+      min={1}
+      addonBefore={t('Every')}
+      addonAfter={t(option.unitText)}
+    />
+  );
+}
+
+export function RepeatField({ value = null, onChange }) {
+  const { t } = useWorkflowTranslation();
+  const typeValue = getRepeatTypeValue(value);
+  function onTypeChange(v) {
+    if (v === 'none') {
+      onChange(null);
+      return;
+    }
+    if (v === 'cron') {
+      onChange('0 * * * * *');
+      return;
+    }
+    onChange(v);
+  }
+
+  const locale = languages[localStorage.getItem('NOCOBASE_LOCALE') || 'en-US'];
+
+  return (
+    <fieldset
+      className={css`
+        display: flex;
+        flex-direction: ${typeValue === 'cron' ? 'column' : 'row'};
+        align-items: flex-start;
+        gap: 0.5em;
+
+        .react-js-cron {
+          padding: 0.5em 0.5em 0 0.5em;
+          border: 1px dashed #ccc;
+
+          .react-js-cron-field {
+            margin-bottom: 0.5em;
+
+            > span {
+              margin: 0 0.5em 0 0;
+            }
+
+            > .react-js-cron-select {
+              margin: 0 0.5em 0 0;
+            }
+          }
+        }
+      `}
+    >
+      <Select value={typeValue} onChange={onTypeChange}>
+        {RepeatOptions.map((item) => (
+          <Select.Option key={item.value} value={item.value}>
+            {t(item.text)}
+          </Select.Option>
+        ))}
+      </Select>
+      {typeof typeValue === 'number' ? <CommonRepeatField value={value} onChange={onChange} /> : null}
+      {typeValue === 'cron' ? (
+        <Cron
+          value={value.trim().split(/\s+/).slice(1).join(' ')}
+          setValue={(v) => onChange(`0 ${v}`)}
+          clearButton={false}
+          locale={locale}
+        />
+      ) : null}
+    </fieldset>
+  );
+}