@nocobase/plugin-workflow 0.10.1-alpha.1 → 0.11.1-alpha.1

package/src/client/triggers/collection.tsx

@@ -0,0 +1,190 @@
+import { SchemaInitializerItemOptions, useCollectionDataSource, useCollectionManager, useCompile } from '@nocobase/client';
+import { CollectionBlockInitializer } from '../components/CollectionBlockInitializer';
+import { FieldsSelect } from '../components/FieldsSelect';
+import { NAMESPACE, lang } from '../locale';
+import { appends, collection, filter } from '../schemas/collection';
+import { getCollectionFieldOptions } from '../variable';
+
+const COLLECTION_TRIGGER_MODE = {
+  CREATED: 1,
+  UPDATED: 2,
+  SAVED: 3,
+  DELETED: 4,
+};
+
+const collectionModeOptions = [
+  { label: `{{t("After record added", { ns: "${NAMESPACE}" })}}`, value: COLLECTION_TRIGGER_MODE.CREATED },
+  { label: `{{t("After record updated", { ns: "${NAMESPACE}" })}}`, value: COLLECTION_TRIGGER_MODE.UPDATED },
+  { label: `{{t("After record added or updated", { ns: "${NAMESPACE}" })}}`, value: COLLECTION_TRIGGER_MODE.SAVED },
+  { label: `{{t("After record deleted", { ns: "${NAMESPACE}" })}}`, value: COLLECTION_TRIGGER_MODE.DELETED },
+];
+
+export default {
+  title: `{{t("Collection event", { ns: "${NAMESPACE}" })}}`,
+  type: 'collection',
+  fieldset: {
+    collection: {
+      ...collection,
+      ['x-reactions']: [
+        ...collection['x-reactions'],
+        {
+          target: 'changed',
+          effects: ['onFieldValueChange'],
+          fulfill: {
+            state: {
+              value: [],
+            },
+          },
+        },
+        {
+          target: 'condition',
+          effects: ['onFieldValueChange'],
+          fulfill: {
+            state: {
+              value: null,
+            },
+          },
+        },
+        {
+          target: 'appends',
+          effects: ['onFieldValueChange'],
+          fulfill: {
+            state: {
+              value: [],
+            },
+          },
+        },
+      ],
+    },
+    mode: {
+      type: 'number',
+      title: `{{t("Trigger on", { ns: "${NAMESPACE}" })}}`,
+      'x-decorator': 'FormItem',
+      'x-component': 'Select',
+      'x-component-props': {
+        popupMatchSelectWidth: false,
+        options: collectionModeOptions,
+        placeholder: `{{t("Trigger on", { ns: "${NAMESPACE}" })}}`,
+      },
+      required: true,
+      'x-reactions': [
+        {
+          dependencies: ['collection'],
+          fulfill: {
+            state: {
+              visible: '{{!!$deps[0]}}',
+            },
+          },
+        },
+      ],
+    },
+    changed: {
+      type: 'array',
+      title: `{{t("Changed fields", { ns: "${NAMESPACE}" })}}`,
+      description: `{{t("Triggered only if one of the selected fields changes. If unselected, it means that it will be triggered when any field changes. When record is added or deleted, any field is considered to have been changed.", { ns: "${NAMESPACE}" })}}`,
+      'x-decorator': 'FormItem',
+      'x-component': 'FieldsSelect',
+      'x-component-props': {
+        className: 'full-width',
+        mode: 'multiple',
+        placeholder: '{{t("Select field")}}',
+        filter(field) {
+          return (
+            !field.hidden &&
+            (field.uiSchema ? !field.uiSchema['x-read-pretty'] : true) &&
+            !['linkTo', 'hasOne', 'hasMany', 'belongsToMany'].includes(field.type)
+          );
+        },
+      },
+      'x-reactions': [
+        {
+          dependencies: ['collection', 'mode'],
+          fulfill: {
+            state: {
+              visible: `{{!!$deps[0] && ($deps[1] & ${COLLECTION_TRIGGER_MODE.UPDATED})}}`,
+            },
+          },
+        },
+      ],
+    },
+    condition: {
+      ...filter,
+      title: `{{t("Only triggers when match conditions", { ns: "${NAMESPACE}" })}}`,
+      'x-component-props': {
+        useProps: filter['x-component-props'].useProps,
+      },
+      'x-reactions': [
+        {
+          dependencies: ['collection'],
+          fulfill: {
+            state: {
+              visible: '{{!!$deps[0]}}',
+            },
+          },
+        },
+      ],
+    },
+    appends: {
+      ...appends,
+      'x-reactions': [
+        ...appends['x-reactions'],
+        {
+          dependencies: ['mode'],
+          fulfill: {
+            state: {
+              visible: `{{!($deps[0] & ${COLLECTION_TRIGGER_MODE.DELETED})}}`,
+            },
+          },
+        },
+      ],
+    },
+  },
+  scope: {
+    useCollectionDataSource,
+  },
+  components: {
+    FieldsSelect,
+  },
+  useVariables(config, options) {
+    const compile = useCompile();
+    const { getCollectionFields } = useCollectionManager();
+    const rootFields = [
+      {
+        collectionName: config.collection,
+        name: 'data',
+        type: 'hasOne',
+        target: config.collection,
+        uiSchema: {
+          title: lang('Trigger data'),
+        },
+      },
+    ];
+    // const depth = config.appends?.length
+    //   ? config.appends.reduce((max, item) => Math.max(max, item.split('.').length), 1) + 1
+    //   : 1;
+    const result = getCollectionFieldOptions({
+      // depth,
+      ...options,
+      fields: rootFields,
+      appends: ['data', ...(config.appends?.map((item) => `data.${item}`) || [])],
+      compile,
+      getCollectionFields,
+    });
+    return result;
+  },
+  useInitializers(config): SchemaInitializerItemOptions | null {
+    if (!config.collection) {
+      return null;
+    }
+
+    return {
+      type: 'item',
+      key: 'triggerData',
+      title: `{{t("Trigger data", { ns: "${NAMESPACE}" })}}`,
+      component: CollectionBlockInitializer,
+      collection: config.collection,
+      dataSource: '{{$context.data}}',
+    };
+  },
+  initializers: {},
+};

package/src/client/triggers/index.tsx

@@ -0,0 +1,311 @@
+import { InfoOutlined } from '@ant-design/icons';
+import { createForm } from '@formily/core';
+import { ISchema, useForm } from '@formily/react';
+import {
+  ActionContextProvider,
+  SchemaComponent,
+  SchemaInitializerItemOptions,
+  css,
+  cx,
+  useAPIClient,
+  useActionContext,
+  useCompile,
+  useResourceActionContext,
+} from '@nocobase/client';
+import { Registry } from '@nocobase/utils/client';
+import { Alert, Button, Input, Tag, message } from 'antd';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useFlowContext } from '../FlowContext';
+import { NAMESPACE, lang } from '../locale';
+import useStyles 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();
+  const { styles } = useStyles();
+
+  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',
+          size: 'small',
+          className: styles.nodeJobButtonClass,
+          type: 'primary',
+        },
+        properties: {
+          [execution.id]: {
+            type: 'void',
+            'x-decorator': 'Form',
+            'x-decorator-props': {
+              initialValue: execution,
+            },
+            'x-component': 'Action.Modal',
+            title: (
+              <div className={cx(styles.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);
+  const { styles } = useStyles();
+  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(styles.nodeCardClass)} onClick={onOpenDrawer}>
+      <div className={cx(styles.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/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,64 @@
+import { css } from '@nocobase/client';
+import { InputNumber, Select } from 'antd';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { FieldsSelect } from '../../components/FieldsSelect';
+import { lang } from '../../locale';
+
+function dateFieldFilter(field) {
+  return !field.hidden && (field.uiSchema ? field.type === 'date' : false);
+}
+
+export function OnField({ value, onChange }) {
+  const { t } = useTranslation();
+  const [dir, setDir] = useState(value.offset ? value.offset / Math.abs(value.offset) : 0);
+
+  return (
+    <fieldset
+      className={css`
+        display: flex;
+        gap: 0.5em;
+      `}
+    >
+      <FieldsSelect
+        value={value.field}
+        onChange={(field) => onChange({ ...value, field })}
+        filter={dateFieldFilter}
+        placeholder={t('Select field')}
+      />
+      {value.field ? (
+        <Select
+          value={dir}
+          onChange={(v) => {
+            setDir(v);
+            onChange({ ...value, offset: Math.abs(value.offset) * v });
+          }}
+          options={[
+            { value: 0, label: lang('Exactly at') },
+            { value: -1, label: t('Before') },
+            { value: 1, label: t('After') },
+          ]}
+        />
+      ) : 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 })}
+            options={[
+              { value: 86400000, label: lang('Days') },
+              { value: 3600000, label: lang('Hours') },
+              { value: 60000, label: lang('Minutes') },
+              { value: 1000, label: lang('Seconds') },
+            ]}
+          />
+        </>
+      ) : null}
+    </fieldset>
+  );
+}