@nocobase/client-v2 2.1.0-alpha.3 → 2.1.0-alpha.30

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,
+      });
+    }
+  },
+});

package/src/flow/actions/displayFieldComponent.tsx

@@ -0,0 +1,103 @@
+/**
+ * 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, tExpr } from '@nocobase/flow-engine';
+import type { FieldModel } from '../models/base/FieldModel';
+import { getFieldBindingUse, rebuildFieldSubModel } from '../internal/utils/rebuildFieldSubModel';
+
+export function buildAssociationOptions(ctx: any, itemModel, titleField?: string) {
+  const { collectionField } = ctx;
+  const classes = itemModel.getBindingsByField(ctx, collectionField);
+
+  const makeOptions = (list: any[]) =>
+    list.map((model) => {
+      const m = ctx.engine.getModelClass(model.modelName);
+      return { label: ctx.t(m.meta?.label || model.modelName), value: model.modelName };
+    });
+
+  if (titleField) {
+    const titleFieldClasses = itemModel.getBindingsByField(ctx, collectionField.targetCollection.getField(titleField));
+
+    return [
+      classes.length && { label: ctx.t('AssociationField component'), options: makeOptions(classes) },
+      { label: ctx.t('Title field component'), options: makeOptions(titleFieldClasses) },
+    ].filter(Boolean);
+  }
+
+  return makeOptions(classes);
+}
+
+export const displayFieldComponent = defineAction({
+  name: 'displayFieldComponent',
+  title: tExpr('Field component'),
+  uiMode: (ctx) => {
+    const { titleField } = ctx.model.props;
+    const options = buildAssociationOptions(ctx, ctx.model.constructor, titleField);
+    return {
+      type: 'select',
+      key: 'use',
+      props: {
+        options,
+      },
+    };
+  },
+  hideInSettings: async (ctx: any) => {
+    const { titleField } = ctx.model.props;
+    if (!ctx.collectionField) {
+      return true;
+    }
+    const classes = ctx.model.constructor.getBindingsByField(ctx, ctx.collectionField);
+    if (classes.length === 1 && !titleField) return true;
+  },
+  beforeParamsSave: async (ctx: any, params, previousParams) => {
+    if (!ctx.collectionField) {
+      return;
+    }
+    const classes = ctx.model.constructor.getBindingsByField(ctx, ctx.collectionField);
+    const { titleField } = ctx.model.props;
+    let titleFieldClasses = [];
+    if (titleField) {
+      titleFieldClasses = ctx.model.constructor.getBindingsByField(
+        ctx,
+        ctx.collectionField.targetCollection.getField(titleField),
+      );
+    }
+
+    // 找到选中的那条
+    const selected = classes.concat(titleFieldClasses).find((model) => model.modelName === params.use);
+    if (params.use !== previousParams.use) {
+      await rebuildFieldSubModel({
+        parentModel: ctx.model,
+        targetUse: params.use,
+        defaultProps:
+          typeof selected?.defaultProps === 'function'
+            ? selected.defaultProps(ctx, ctx.collectionField)
+            : selected?.defaultProps,
+        pattern: ctx.model.getProps().pattern,
+      });
+    }
+  },
+  defaultParams: (ctx: any) => {
+    const defaultModel = ctx.model.constructor.getDefaultBindingByField(ctx, ctx.collectionField);
+    const fieldModel = ctx.model.subModels.field as FieldModel | undefined;
+    const bindingUse = getFieldBindingUse(fieldModel);
+    return {
+      use: bindingUse ?? fieldModel?.use ?? defaultModel.modelName,
+    };
+  },
+  async handler(ctx, params) {
+    const bindingUse = getFieldBindingUse(ctx.model.subModels.field as FieldModel | undefined);
+    if (params.use !== bindingUse) {
+      ctx.model.setStepParams(ctx.flowKey, 'model', { use: params.use });
+    }
+    // if (!params.use) {
+    //   throw new Error('model use is a required parameter');
+    // }
+  },
+});

package/src/flow/actions/fieldComponent.tsx

@@ -0,0 +1,114 @@
+/**
+ * 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 { CollectionFieldModel, defineAction, FlowEngineContext, tExpr } from '@nocobase/flow-engine';
+import { DetailsItemModel } from '../models/blocks/details/DetailsItemModel';
+import { buildAssociationOptions } from './displayFieldComponent';
+import type { FieldModel } from '../models/base/FieldModel';
+import { getFieldBindingUse, rebuildFieldSubModel } from '../internal/utils/rebuildFieldSubModel';
+
+export const fieldComponent = defineAction({
+  title: tExpr('Field component'),
+  name: 'fieldComponent',
+  uiMode: (ctx: any) => {
+    if (ctx.model.getProps().pattern === 'readPretty') {
+      const { titleField } = ctx.model.props;
+      const classes = ctx.model.constructor.getBindingsByField(ctx, ctx.collectionField);
+      if (!classes || (classes.length === 1 && !titleField)) return null;
+
+      const options = buildAssociationOptions(
+        ctx,
+        DetailsItemModel,
+        titleField || ctx.model.subModels.field.props?.fieldNames?.label,
+      );
+      return {
+        type: 'select',
+        key: 'use',
+        props: {
+          options,
+        },
+      };
+    } else {
+      const classes = ctx.model.constructor.getBindingsByField(ctx, ctx.collectionField);
+      if (!classes || classes.length === 1) {
+        return null;
+      }
+      return {
+        type: 'select',
+        key: 'use',
+        props: {
+          options: classes.map((model) => {
+            const m = ctx.engine.getModelClass(model.modelName);
+            return {
+              label: ctx.t(m.meta?.label || model.modelName),
+              value: model.modelName,
+            };
+          }),
+        },
+      };
+    }
+  },
+  hideInSettings(ctx) {
+    const { titleField } = ctx.model.props;
+    const classes = ctx.model.constructor.getBindingsByField(ctx, ctx.collectionField);
+    if (ctx.model.getProps().pattern === 'readPretty') {
+      if (!classes || (classes.length === 1 && !titleField)) return true;
+    } else {
+      if (!classes || classes.length === 1) {
+        return true;
+      }
+    }
+  },
+  beforeParamsSave: async (ctx: any, params, previousParams) => {
+    let classes = ctx.model.constructor.getBindingsByField(ctx, ctx.collectionField);
+    let titleFieldClasses = [];
+
+    if (ctx.model.getProps().pattern === 'readPretty') {
+      const { titleField } = ctx.model.props;
+      classes = DetailsItemModel.getBindingsByField(ctx, ctx.collectionField);
+      if (titleField) {
+        titleFieldClasses = DetailsItemModel.getBindingsByField(
+          ctx,
+          ctx.collectionField.targetCollection.getField(titleField),
+        );
+      }
+    }
+
+    // 找到选中的那条
+    const selected = classes.concat(titleFieldClasses).find((model) => model.modelName === params.use);
+    if (params.use !== previousParams.use) {
+      const defaultProps =
+        typeof selected?.defaultProps === 'function'
+          ? selected.defaultProps(ctx, ctx.collectionField)
+          : selected?.defaultProps;
+      await rebuildFieldSubModel({
+        parentModel: ctx.model,
+        targetUse: params.use,
+        defaultProps,
+        pattern: ctx.model.getProps().pattern,
+      });
+    }
+  },
+  defaultParams: (ctx: any) => {
+    const defaultModel =
+      ctx.model.getProps().pattern === 'readPretty'
+        ? DetailsItemModel.getDefaultBindingByField(ctx, ctx.collectionField)
+        : ctx.model.constructor.getDefaultBindingByField(ctx, ctx.collectionField);
+    const fieldModel = ctx.model.subModels.field as FieldModel | undefined;
+    const bindingUse = getFieldBindingUse(fieldModel);
+    return {
+      use: bindingUse ?? fieldModel?.use ?? defaultModel.modelName,
+    };
+  },
+  async handler(ctx, params) {
+    // if (!params?.use) {
+    //   throw new Error('model use is a required parameter');
+    // }
+  },
+});

package/src/flow/actions/filterFormDefaultValues.tsx

@@ -0,0 +1,134 @@
+/**
+ * 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, observer, tExpr, useFlowContext } from '@nocobase/flow-engine';
+import { isEqual } from 'lodash';
+import React from 'react';
+import { FieldAssignRulesEditor, type FieldAssignRuleItem } from '../components/FieldAssignRulesEditor';
+import { collectFieldAssignCascaderOptions } from '../components/fieldAssignOptions';
+import { useAssociationTitleFieldSync } from '../components/useAssociationTitleFieldSync';
+import { findFormItemModelByFieldPath, getCollectionFromModel } from '../internal/utils/modelUtils';
+import {
+  collectLegacyDefaultValueRulesFromFilterFormModel,
+  mergeAssignRulesWithLegacyDefaults,
+} from '../models/blocks/filter-form/legacyDefaultValueMigration';
+import { getDefaultOperator } from '../models/blocks/filter-manager/utils';
+import { operators } from '../../flow-compat';
+
+const FilterFormDefaultValuesUI = observer(
+  (props: { value?: FieldAssignRuleItem[]; onChange?: (value: FieldAssignRuleItem[]) => void }) => {
+    const ctx = useFlowContext();
+    const t = ctx.model.translate.bind(ctx.model);
+    const { isTitleFieldCandidate, onSyncAssociationTitleField } = useAssociationTitleFieldSync(t);
+    const canEdit = typeof props.onChange === 'function';
+
+    const fieldOptions = React.useMemo(() => {
+      return collectFieldAssignCascaderOptions({ formBlockModel: ctx.model, t });
+    }, [ctx.model]);
+
+    const legacyDefaults = React.useMemo(() => {
+      return collectLegacyDefaultValueRulesFromFilterFormModel(ctx.model);
+    }, [ctx.model]);
+
+    const getValueInputProps = React.useCallback(
+      (item: FieldAssignRuleItem) => {
+        const targetPath = item?.targetPath ? String(item.targetPath) : '';
+        if (!targetPath) return {};
+        const fieldModel: any = findFormItemModelByFieldPath(ctx.model, targetPath);
+        if (!fieldModel) return {};
+        const operator = getDefaultOperator(fieldModel);
+        const opList =
+          fieldModel?.collectionField?.filterable?.operators ||
+          (fieldModel?.context?.filterField?.type ? (operators as any)?.[fieldModel.context.filterField.type] : []) ||
+          [];
+        return {
+          operator,
+          operatorMetaList: opList,
+          preferFormItemFieldModel: true,
+        };
+      },
+      [ctx.model],
+    );
+
+    // 兼容：将字段级默认值（filterFormItemSettings.initialValue）合并到表单级 defaultValues 里展示。
+    // 仅在首次打开时合并，后续以当前 step 表单值为准（便于用户在此处编辑/删除后统一保存）。
+    const hasInitializedMergeRef = React.useRef(false);
+    const [hasInitializedMerge, setHasInitializedMerge] = React.useState(false);
+    const markInitialized = React.useCallback(() => {
+      if (hasInitializedMergeRef.current) return;
+      hasInitializedMergeRef.current = true;
+      setHasInitializedMerge(true);
+    }, []);
+
+    const value = React.useMemo(() => {
+      if (!canEdit || !hasInitializedMerge) {
+        return mergeAssignRulesWithLegacyDefaults(props.value, legacyDefaults);
+      }
+      return Array.isArray(props.value) ? props.value : [];
+    }, [canEdit, hasInitializedMerge, legacyDefaults, props.value]);
+
+    const handleChange = React.useCallback(
+      (next: FieldAssignRuleItem[]) => {
+        if (!canEdit) return;
+        markInitialized();
+        props.onChange?.(next);
+      },
+      [canEdit, markInitialized, props.onChange],
+    );
+
+    // 仅在首次打开时，把合并结果写回到当前 step 表单状态，后续不再自动合并。
+    React.useEffect(() => {
+      if (hasInitializedMergeRef.current) return;
+      if (!canEdit) return;
+
+      const nextValue = mergeAssignRulesWithLegacyDefaults(props.value, legacyDefaults);
+      if (!isEqual(props.value || [], nextValue || [])) {
+        props.onChange?.(nextValue);
+      }
+      markInitialized();
+    }, [canEdit, legacyDefaults, markInitialized, props.onChange, props.value]);
+
+    return (
+      <FieldAssignRulesEditor
+        t={t}
+        fieldOptions={fieldOptions}
+        rootCollection={getCollectionFromModel(ctx.model)}
+        value={value}
+        onChange={handleChange}
+        fixedMode="default"
+        showCondition={false}
+        showValueEditorWhenNoField
+        getValueInputProps={getValueInputProps}
+        isTitleFieldCandidate={isTitleFieldCandidate}
+        onSyncAssociationTitleField={onSyncAssociationTitleField}
+      />
+    );
+  },
+);
+
+export const filterFormDefaultValues = defineAction({
+  name: 'filterFormDefaultValues',
+  title: tExpr('Field values'),
+  useRawParams: true,
+  uiMode: 'embed',
+  uiSchema() {
+    return {
+      value: {
+        type: 'array',
+        'x-component': FilterFormDefaultValuesUI,
+      },
+    };
+  },
+  defaultParams: {
+    value: [],
+  },
+  handler() {
+    // UI-only action; persistence is handled by flow settings.
+  },
+});

package/src/flow/actions/formAssignRules.tsx

@@ -0,0 +1,117 @@
+/**
+ * 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, observer, tExpr, useFlowContext } from '@nocobase/flow-engine';
+import { isEqual } from 'lodash';
+import React from 'react';
+import { FieldAssignRulesEditor, type FieldAssignRuleItem } from '../components/FieldAssignRulesEditor';
+import { collectFieldAssignCascaderOptions } from '../components/fieldAssignOptions';
+import { useAssociationTitleFieldSync } from '../components/useAssociationTitleFieldSync';
+import { getCollectionFromModel } from '../internal/utils/modelUtils';
+import {
+  collectLegacyDefaultValueRulesFromFormModel,
+  mergeAssignRulesWithLegacyDefaults,
+} from '../models/blocks/form/legacyDefaultValueMigration';
+
+const FormAssignRulesUI = observer(
+  (props: { value?: FieldAssignRuleItem[]; onChange?: (value: FieldAssignRuleItem[]) => void }) => {
+    const ctx = useFlowContext();
+    const t = ctx.model.translate.bind(ctx.model);
+    const { isTitleFieldCandidate, onSyncAssociationTitleField } = useAssociationTitleFieldSync(t);
+    const canEdit = typeof props.onChange === 'function';
+
+    const fieldOptions = React.useMemo(() => {
+      return collectFieldAssignCascaderOptions({ formBlockModel: ctx.model, t });
+    }, [ctx.model]);
+
+    const legacyDefaults = React.useMemo(() => {
+      return collectLegacyDefaultValueRulesFromFormModel(ctx.model);
+    }, [ctx.model]);
+
+    // 兼容：将字段级默认值（editItemSettings/formItemSettings.initialValue）合并到表单级 assignRules 里展示。
+    // 仅在首次打开时合并，后续以当前 step 表单值为准（便于用户在此处编辑/删除后统一保存）。
+    const hasInitializedMergeRef = React.useRef(false);
+    const [hasInitializedMerge, setHasInitializedMerge] = React.useState(false);
+    const markInitialized = React.useCallback(() => {
+      if (hasInitializedMergeRef.current) return;
+      hasInitializedMergeRef.current = true;
+      setHasInitializedMerge(true);
+    }, []);
+
+    const normalizedValue = React.useMemo(() => {
+      const base = Array.isArray(props.value) ? props.value : [];
+      return base;
+    }, [props.value]);
+
+    const value = React.useMemo(() => {
+      if (!canEdit || !hasInitializedMerge) {
+        return mergeAssignRulesWithLegacyDefaults(props.value, legacyDefaults);
+      }
+      return normalizedValue;
+    }, [canEdit, hasInitializedMerge, legacyDefaults, normalizedValue, props.value]);
+
+    const handleChange = React.useCallback(
+      (next: FieldAssignRuleItem[]) => {
+        if (!canEdit) return;
+        markInitialized();
+        props.onChange?.(next);
+      },
+      [canEdit, markInitialized, props.onChange],
+    );
+
+    // 仅在首次打开时，把合并结果写回到当前 step 表单状态，后续不再自动合并（以免重复添加）。
+    React.useEffect(() => {
+      if (hasInitializedMergeRef.current) return;
+      if (!canEdit) return;
+
+      const merged = mergeAssignRulesWithLegacyDefaults(props.value, legacyDefaults);
+      const nextValue = merged;
+
+      if (!isEqual(props.value || [], nextValue || [])) {
+        props.onChange?.(nextValue);
+      }
+      markInitialized();
+    }, [canEdit, legacyDefaults, markInitialized, props.onChange, props.value]);
+
+    return (
+      <FieldAssignRulesEditor
+        t={t}
+        fieldOptions={fieldOptions}
+        rootCollection={getCollectionFromModel(ctx.model)}
+        value={value}
+        onChange={handleChange}
+        showValueEditorWhenNoField
+        isTitleFieldCandidate={isTitleFieldCandidate}
+        onSyncAssociationTitleField={onSyncAssociationTitleField}
+        enableDateVariableAsConstant
+      />
+    );
+  },
+);
+
+export const formAssignRules = defineAction({
+  name: 'formAssignRules',
+  title: tExpr('Field values'),
+  useRawParams: true,
+  uiMode: 'embed',
+  uiSchema() {
+    return {
+      value: {
+        type: 'array',
+        'x-component': FormAssignRulesUI,
+      },
+    };
+  },
+  defaultParams: {
+    value: [],
+  },
+  handler() {
+    // UI-only action; persistence is handled by flow settings.
+  },
+});