@nocobase/client-v2 2.1.0-beta.21 → 2.1.0-beta.23

package/src/flow/actions/customVariable.tsx

@@ -0,0 +1,399 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import {
+  ActionScene,
+  defineAction,
+  isRunJSValue,
+  normalizeRunJSValue,
+  runjsWithSafeGlobals,
+  tExpr,
+  type RunJSValue,
+  useFlowContext,
+} from '@nocobase/flow-engine';
+import React from 'react';
+import { Table, Button, Dropdown, Modal, Form, Input, Space, Tag } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
+import { uid } from '@formily/shared';
+import { RunJSValueEditor } from '../components/RunJSValueEditor';
+
+export const customVariable = defineAction({
+  name: 'customVariable',
+  title: tExpr('Custom variable'),
+  scene: [ActionScene.DYNAMIC_EVENT_FLOW],
+  sort: 100,
+  uiSchema: {
+    variables: {
+      type: 'array',
+      'x-component': VariableEditor,
+      'x-component-props': {},
+    },
+  },
+  async handler(ctx, params) {
+    const { variables = [] } = params;
+
+    variables.forEach((variable) => {
+      if (variable.type === 'runjs') {
+        const getFunction = async () => {
+          const { code, version } = normalizeRunJSValue(variable.runjs);
+          return runjsWithSafeGlobals(ctx, code, { version });
+        };
+        const metaFunction = () => ({
+          title: variable.title,
+          type: 'any',
+        });
+
+        metaFunction.title = variable.title;
+
+        ctx.model.context.defineProperty(variable.key, {
+          get: getFunction,
+          cache: false,
+          meta: metaFunction,
+        });
+        return;
+      }
+
+      const getFunction = () => {
+        const modelInstance = ctx.model.flowEngine.getModel(variable.formUid);
+        return modelInstance?.form?.getFieldsValue(true);
+      };
+      const metaFunction = () => {
+        const modelInstance = ctx.model.flowEngine.getModel(variable.formUid);
+        const gridModel = modelInstance?.subModels?.grid;
+        const properties = {};
+
+        if (!gridModel) {
+          console.warn(`Not found form or form has no grid: ${variable.formUid}`);
+          return;
+        }
+
+        gridModel.mapSubModels('items', (item) => {
+          properties[item.props.name] = { title: item.props.label, type: 'string' };
+        });
+
+        return {
+          title: variable.title,
+          type: 'object',
+          properties,
+        };
+      };
+
+      // 解决一开始不显示 title 的问题
+      metaFunction.title = variable.title;
+
+      ctx.model.context.defineProperty(variable.key, {
+        get: getFunction,
+        cache: false,
+        meta: metaFunction,
+      });
+    });
+  },
+});
+
+type FlowVariableType = 'formValue' | 'runjs';
+
+interface FormValueVariable {
+  key: string;
+  title: string;
+  type: 'formValue';
+  formUid: string;
+}
+
+interface RunJSVariable {
+  key: string;
+  title: string;
+  type: 'runjs';
+  runjs: RunJSValue;
+}
+
+type FlowVariable = FormValueVariable | RunJSVariable;
+
+interface VariableEditorProps {
+  value?: FlowVariable[];
+  onChange?: (value: FlowVariable[]) => void;
+  disabled?: boolean;
+}
+
+interface VariableFormValues {
+  key: string;
+  title: string;
+  formUid: string;
+  runjs: RunJSValue;
+}
+
+const VARIABLE_TYPE_LABELS: Record<FlowVariableType, string> = {
+  formValue: tExpr('Form variable'),
+  runjs: tExpr('JS variable'),
+};
+
+const generateVariableKey = () => `var_${uid().slice(0, 4)}`;
+const createDefaultRunJSValue = (): RunJSValue => ({ code: '', version: 'v2' });
+
+function VariableEditor(props: VariableEditorProps) {
+  const { value = [], onChange, disabled } = props;
+  const ctx = useFlowContext();
+  const t = React.useMemo(() => ctx.model.translate.bind(ctx.model), [ctx.model]);
+  const [form] = Form.useForm<VariableFormValues>();
+  const [modalVisible, setModalVisible] = React.useState(false);
+  const [editingIndex, setEditingIndex] = React.useState<number | null>(null);
+  const [currentType, setCurrentType] = React.useState<FlowVariableType>('formValue');
+
+  const resetForm = React.useCallback(() => {
+    form.resetFields();
+    form.setFieldsValue({ key: generateVariableKey(), title: '', formUid: '', runjs: createDefaultRunJSValue() });
+  }, [form]);
+
+  const openModal = React.useCallback(
+    (type: FlowVariableType, index: number | null) => {
+      setCurrentType(type);
+      setEditingIndex(index);
+
+      if (index === null) {
+        resetForm();
+      } else {
+        const target = value[index];
+        if (!target) {
+          return;
+        }
+        form.setFieldsValue({
+          key: target.key,
+          title: target.title,
+          formUid: target.type === 'formValue' ? target.formUid : '',
+          runjs: target.type === 'runjs' ? normalizeRunJSValue(target.runjs) : createDefaultRunJSValue(),
+        });
+      }
+
+      setModalVisible(true);
+    },
+    [form, resetForm, value],
+  );
+
+  const closeModal = React.useCallback(() => {
+    setModalVisible(false);
+    setEditingIndex(null);
+    resetForm();
+  }, [resetForm]);
+
+  const handleSubmit = React.useCallback(async () => {
+    const formValues = await form.validateFields();
+    const nextVariable: FlowVariable =
+      currentType === 'runjs'
+        ? {
+            key: formValues.key,
+            title: formValues.title,
+            type: 'runjs',
+            runjs: normalizeRunJSValue(formValues.runjs),
+          }
+        : {
+            key: formValues.key,
+            title: formValues.title,
+            type: 'formValue',
+            formUid: formValues.formUid,
+          };
+
+    const nextVariables = [...value];
+
+    if (editingIndex === null) {
+      nextVariables.push(nextVariable);
+    } else {
+      nextVariables.splice(editingIndex, 1, nextVariable);
+    }
+
+    onChange?.(nextVariables);
+    closeModal();
+  }, [closeModal, currentType, editingIndex, form, onChange, value]);
+
+  const handleDelete = React.useCallback(
+    (index: number) => {
+      Modal.confirm({
+        title: t('Delete variable'),
+        content: t('Are you sure you want to delete this variable?'),
+        okText: t('Confirm'),
+        cancelText: t('Cancel'),
+        onOk: () => {
+          const nextVariables = value.filter((_, idx) => idx !== index);
+          onChange?.(nextVariables);
+        },
+      });
+    },
+    [onChange, t, value],
+  );
+
+  const handleAdd = React.useCallback(
+    (type: FlowVariableType) => {
+      if (disabled) {
+        return;
+      }
+      openModal(type, null);
+    },
+    [disabled, openModal],
+  );
+
+  const handleEdit = React.useCallback(
+    (index: number) => {
+      if (disabled) {
+        return;
+      }
+      const target = value[index];
+      if (!target) {
+        return;
+      }
+      openModal(target.type, index);
+    },
+    [disabled, openModal, value],
+  );
+
+  const columns = React.useMemo<ColumnsType<FlowVariable>>(
+    () => [
+      {
+        title: t('Title'),
+        dataIndex: 'title',
+        key: 'title',
+        ellipsis: true,
+        render: (text: string) => <span style={{ whiteSpace: 'nowrap' }}>{text}</span>,
+      },
+      {
+        title: t('Identifier'),
+        dataIndex: 'key',
+        key: 'key',
+        ellipsis: true,
+        render: (text: string) => <span style={{ whiteSpace: 'nowrap' }}>{text}</span>,
+      },
+      {
+        title: t('Type'),
+        dataIndex: 'type',
+        key: 'type',
+        ellipsis: true,
+        render: (type: FlowVariableType) => (
+          <Tag style={{ whiteSpace: 'nowrap' }}>{t(VARIABLE_TYPE_LABELS[type] || type)}</Tag>
+        ),
+      },
+      {
+        title: t('Actions'),
+        key: 'actions',
+        render: (_: unknown, __: FlowVariable, index: number) => (
+          <Space size={12} style={{ whiteSpace: 'nowrap' }}>
+            <Button
+              type="link"
+              size="small"
+              icon={<EditOutlined />}
+              onClick={() => handleEdit(index)}
+              disabled={disabled}
+              title={t('Edit')}
+            />
+            <Button
+              type="link"
+              size="small"
+              icon={<DeleteOutlined />}
+              danger
+              onClick={() => handleDelete(index)}
+              disabled={disabled}
+              title={t('Delete')}
+            />
+          </Space>
+        ),
+      },
+    ],
+    [disabled, handleDelete, handleEdit, t],
+  );
+
+  const menu = React.useMemo(
+    () => ({
+      items: [
+        {
+          key: 'formValue',
+          label: t(VARIABLE_TYPE_LABELS.formValue),
+        },
+        {
+          key: 'runjs',
+          label: t(VARIABLE_TYPE_LABELS.runjs),
+        },
+      ],
+      onClick: ({ key }: { key: string }) => handleAdd(key as FlowVariableType),
+    }),
+    [handleAdd, t],
+  );
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <Table
+        rowKey="key"
+        columns={columns}
+        dataSource={value}
+        pagination={false}
+        locale={{ emptyText: t('No data') }}
+        size="small"
+        scroll={{ x: 'max-content' }}
+        bordered
+      />
+      <Dropdown menu={menu} trigger={['hover']} disabled={disabled}>
+        <Button type="dashed" block icon={<PlusOutlined />} disabled={disabled}>
+          {t('Add variable')}
+        </Button>
+      </Dropdown>
+
+      <Modal
+        open={modalVisible}
+        title={editingIndex === null ? t('Add variable') : t('Edit variable')}
+        onCancel={closeModal}
+        onOk={handleSubmit}
+        okText={t('Confirm')}
+        cancelText={t('Cancel')}
+        destroyOnClose
+        maskClosable={false}
+        okButtonProps={{ disabled }}
+        cancelButtonProps={{ disabled }}
+      >
+        <Form<VariableFormValues> form={form} layout="vertical" disabled={disabled}>
+          <Form.Item
+            label={t('Variable title')}
+            name="title"
+            rules={[{ required: true, message: t('Please enter variable title') }]}
+          >
+            <Input placeholder={t('Please enter variable title')} />
+          </Form.Item>
+          <Form.Item
+            label={t('Variable identifier')}
+            name="key"
+            rules={[{ required: true, message: t('Please enter variable identifier') }]}
+          >
+            <Input placeholder={t('Please enter variable identifier')} />
+          </Form.Item>
+          {currentType === 'formValue' ? (
+            <Form.Item
+              label={t('Form UID')}
+              name="formUid"
+              rules={[{ required: true, message: t('Please enter form uid') }]}
+            >
+              <Input placeholder={t('Please enter form uid')} />
+            </Form.Item>
+          ) : null}
+          {currentType === 'runjs' ? (
+            <Form.Item
+              label={t('JavaScript')}
+              name="runjs"
+              rules={[
+                {
+                  validator: async (_, value) => {
+                    if (!isRunJSValue(value) || !normalizeRunJSValue(value).code.trim()) {
+                      throw new Error(t('Please enter JavaScript code'));
+                    }
+                  },
+                },
+              ]}
+            >
+              <RunJSValueEditor t={t} scene="eventFlow" height="240px" containerStyle={{ width: '100%' }} />
+            </Form.Item>
+          ) : null}
+        </Form>
+      </Modal>
+    </div>
+  );
+}

package/src/flow/actions/dataLoadingMode.tsx

@@ -0,0 +1,61 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { defineAction, MultiRecordResource, tExpr } from '@nocobase/flow-engine';
+import { CollectionBlockModel } from '../models/base/CollectionBlockModel';
+
+export const dataLoadingMode = defineAction({
+  name: 'dataLoadingMode',
+  title: tExpr('Data loading mode'),
+  uiMode: {
+    type: 'select',
+    key: 'mode',
+    props: {
+      options: [
+        { value: 'auto', label: tExpr('Load all data when filter is empty') },
+        { value: 'manual', label: tExpr('Do not load data when filter is empty') },
+      ],
+    },
+  },
+  defaultParams: {
+    mode: 'auto',
+  },
+  hideInSettings: (ctx) => {
+    // 仅列表（MultiRecordResource）允许配置
+    const blockModel = ctx.blockModel as CollectionBlockModel;
+    const resource = blockModel?.resource;
+    if (!resource) {
+      return true;
+    }
+    return !(resource instanceof MultiRecordResource);
+  },
+  handler(ctx, params) {
+    const blockModel = ctx.blockModel as CollectionBlockModel;
+    if (!blockModel) {
+      return;
+    }
+    const resource = blockModel.resource;
+    if (!(resource instanceof MultiRecordResource)) {
+      return;
+    }
+
+    // 如果切换到 manual 模式且当前没有活跃的筛选条件，清空数据
+    if (params.mode === 'manual' && !blockModel.hasActiveFilters()) {
+      resource.setData([]);
+      resource.setMeta({ count: 0, hasNext: false });
+      if (typeof resource.setPage === 'function') {
+        resource.setPage(1);
+      }
+      resource.loading = false;
+    } else if (params.mode === 'auto') {
+      // 切换到 auto 模式时立即刷新数据
+      resource.refresh();
+    }
+  },
+});

package/src/flow/actions/dataScope.tsx

@@ -0,0 +1,61 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { defineAction, MultiRecordResource, pruneFilter, tExpr, useFlowSettingsContext } from '@nocobase/flow-engine';
+import { isEmptyFilter, transformFilter } from '@nocobase/utils/client';
+import _ from 'lodash';
+import React from 'react';
+import { FilterGroup, VariableFilterItem } from '../components/filter';
+import { FieldModel } from '../models/base/FieldModel';
+
+export const dataScope = defineAction({
+  name: 'dataScope',
+  title: tExpr('Data scope'),
+  uiMode: {
+    type: 'dialog',
+    props: {
+      width: 800,
+    },
+  },
+  uiSchema: {
+    filter: {
+      type: 'object',
+      'x-decorator': 'FormItem',
+      'x-component': function Component(props) {
+        const flowContext = useFlowSettingsContext<FieldModel>();
+        return (
+          <FilterGroup
+            value={props.value}
+            FilterItem={(p) => <VariableFilterItem {...p} model={flowContext.model} rightAsVariable />}
+          />
+        );
+      },
+    },
+  },
+  defaultParams(ctx) {
+    return {
+      filter: { logic: '$and', items: [] },
+    };
+  },
+  async handler(ctx, params) {
+    // @ts-ignore
+    const resource = ctx.model?.resource as MultiRecordResource;
+    if (!resource) {
+      return;
+    }
+
+    const filter = pruneFilter(transformFilter(params.filter));
+
+    if (isEmptyFilter(filter)) {
+      resource.removeFilterGroup(ctx.model.uid);
+    } else {
+      resource.addFilterGroup(ctx.model.uid, filter);
+    }
+  },
+});

package/src/flow/actions/dateTimeFormat.tsx

@@ -0,0 +1,188 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { css } from '@emotion/css';
+import { defineAction, tExpr } from '@nocobase/flow-engine';
+import { getPickerFormat } from '@nocobase/utils/client';
+import { DateFormatCom, ExpiresRadio } from '../components';
+
+export const dateTimeFormat = defineAction({
+  title: tExpr('Date display format'),
+  name: 'dateDisplayFormat',
+  uiSchema: (ctx) => {
+    const { collectionField } = ctx.model.context as any;
+    const type = collectionField.type;
+    const timeFormatField = {
+      type: 'string',
+      title: '{{t("Time format")}}',
+      'x-component': ExpiresRadio,
+      'x-decorator': 'FormItem',
+      'x-component-props': {
+        className: css`
+          .ant-radio-wrapper {
+            display: flex;
+            margin: 5px 0px;
+          }
+        `,
+        defaultValue: 'h:mm a',
+        formats: ['hh:mm:ss a', 'HH:mm:ss'],
+        timeFormat: true,
+      },
+      enum: [
+        { label: DateFormatCom({ format: 'hh:mm:ss a' }), value: 'hh:mm:ss a' },
+        { label: DateFormatCom({ format: 'HH:mm:ss' }), value: 'HH:mm:ss' },
+        { label: tExpr('Custom'), value: 'custom' },
+      ],
+      'x-reactions': [
+        (field) => {
+          if (type !== 'time') {
+            const { showTime, picker } = field.form.values || {};
+            field.hidden = !showTime || picker !== 'date';
+          }
+        },
+      ],
+    };
+
+    if (type === 'time') {
+      return {
+        timeFormat: timeFormatField,
+      };
+    }
+    return {
+      picker: {
+        type: 'string',
+        title: '{{t("Picker")}}',
+        'x-decorator': 'FormItem',
+        'x-component': 'Radio.Group',
+        description: '{{ t("Switching the picker, the value and default value will be cleared") }}',
+        enum: [
+          {
+            label: '{{t("Date")}}',
+            value: 'date',
+          },
+
+          {
+            label: '{{t("Month")}}',
+            value: 'month',
+          },
+          {
+            label: '{{t("Quarter")}}',
+            value: 'quarter',
+          },
+          {
+            label: '{{t("Year")}}',
+            value: 'year',
+          },
+        ],
+      },
+      dateFormat: {
+        type: 'string',
+        title: '{{t("Date format")}}',
+        'x-component': ExpiresRadio,
+        'x-decorator': 'FormItem',
+        'x-decorator-props': {},
+        'x-component-props': {
+          className: css`
+            .ant-radio-wrapper {
+              display: flex;
+              margin: 5px 0px;
+            }
+          `,
+          defaultValue: 'dddd',
+          formats: ['MMMM Do YYYY', 'YYYY-MM-DD', 'MM/DD/YY', 'YYYY/MM/DD', 'DD/MM/YYYY'],
+        },
+        enum: [
+          {
+            label: DateFormatCom({ format: 'MMMM Do YYYY' }),
+            value: 'MMMM Do YYYY',
+          },
+          {
+            label: DateFormatCom({ format: 'YYYY-MM-DD' }),
+            value: 'YYYY-MM-DD',
+          },
+          {
+            label: DateFormatCom({ format: 'MM/DD/YY' }),
+            value: 'MM/DD/YY',
+          },
+          {
+            label: DateFormatCom({ format: 'YYYY/MM/DD' }),
+            value: 'YYYY/MM/DD',
+          },
+          {
+            label: DateFormatCom({ format: 'DD/MM/YYYY' }),
+            value: 'DD/MM/YYYY',
+          },
+          {
+            label: tExpr('Custom'),
+            value: 'custom',
+          },
+        ],
+        'x-reactions': [
+          (field) => {
+            const { picker } = field.form.values;
+            field.value = getPickerFormat(picker);
+            field.setComponentProps({ picker });
+          },
+        ],
+      },
+      showTime: {
+        type: 'boolean',
+        'x-decorator': 'FormItem',
+        'x-component': 'Checkbox',
+        'x-content': '{{t("Show time")}}',
+        'x-reactions': [
+          {
+            dependencies: ['picker'],
+            fulfill: {
+              state: {
+                hidden: `{{ $form.values.picker !== 'date'  }}`,
+              },
+            },
+          },
+          (field) => {
+            const { collectionField } = ctx.model.context as any;
+            const { picker } = field.form.values || {};
+            field.hidden = collectionField.type === 'dateOnly' || picker !== 'date';
+            if (picker !== 'date') {
+              field.value = false;
+            }
+          },
+        ],
+      },
+      timeFormat: timeFormatField,
+    };
+  },
+  defaultParams: (ctx: any) => {
+    const { showTime, dateFormat, timeFormat, picker }: any = {
+      ...ctx.model.context.collectionField.getComponentProps(),
+      ...ctx.model.props,
+    };
+    return {
+      picker: picker || 'date',
+      dateFormat: dateFormat || 'YYYY-MM-DD',
+      timeFormat: timeFormat || 'HH:mm:ss',
+      showTime,
+    };
+  },
+  handler(ctx: any, params) {
+    const { collectionField } = ctx.model.context as any;
+    const type = collectionField.type;
+    if (type === 'time') {
+      ctx.model.setProps({
+        ...params,
+        format: params?.timeFormat,
+      });
+    } else {
+      ctx.model.setProps({
+        ...params,
+        format: params?.showTime ? `${params.dateFormat} ${params.timeFormat}` : params.dateFormat,
+      });
+    }
+  },
+});