@nocobase/client-v2 2.1.0-beta.27 → 2.1.0-beta.30

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/__tests__/SubTableField.refresh.test.tsx

@@ -0,0 +1,122 @@
+/**
+ * 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 React from 'react';
+import { EventEmitter } from 'events';
+import { describe, expect, it, vi } from 'vitest';
+import { act, render, screen } from '@nocobase/test/client';
+import { SubTableField } from '../SubTableField';
+
+vi.mock('react-i18next', async (importOriginal) => ({
+  ...(await importOriginal<any>()),
+  useTranslation: () => ({
+    t: (value: string) => value,
+  }),
+}));
+
+vi.mock('antd', async () => {
+  const actual = await vi.importActual<any>('antd');
+  return {
+    ...actual,
+    Table: ({ dataSource = [], columns = [] }: any) => (
+      <div data-testid="subtable">
+        {dataSource.map((record: any, rowIdx: number) => (
+          <div data-testid={`row-${rowIdx}`} key={record.__index__ || rowIdx}>
+            {columns.map((column: any) => (
+              <div data-testid={`cell-${rowIdx}-${String(column.dataIndex || column.key)}`} key={column.key}>
+                {column.render?.(record[column.dataIndex], record, rowIdx)}
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    ),
+  };
+});
+
+describe('SubTableField refresh', () => {
+  it('rerenders from current form value when a nested subtable path changes', () => {
+    const emitter = new EventEmitter();
+    const store = {
+      roles: [{ __is_new__: true, __index__: 'row-1', uid: 'role-uid-1', name: '' }],
+    };
+    const columns = [
+      {
+        key: 'name',
+        dataIndex: 'name',
+        render: ({ value }: any) => <span>{value || 'empty'}</span>,
+      },
+    ];
+
+    render(
+      <SubTableField
+        columns={columns}
+        pageSize={10}
+        filterTargetKey="id"
+        fieldPathArray={['roles']}
+        formValuesChangeEmitter={emitter}
+        getCurrentValue={() => store.roles}
+      />,
+    );
+
+    expect(screen.getByTestId('cell-0-name')).toHaveTextContent('empty');
+
+    act(() => {
+      store.roles = [{ ...store.roles[0], name: 'role-uid-1' }];
+      emitter.emit('formValuesChange', {
+        source: 'linkage',
+        changedPaths: [['roles', 0, 'name']],
+      });
+    });
+
+    expect(screen.getByTestId('cell-0-name')).toHaveTextContent('role-uid-1');
+  });
+
+  it('ignores unrelated form value changes', () => {
+    const emitter = new EventEmitter();
+    let renderCount = 0;
+    const store = {
+      roles: [{ __is_new__: true, __index__: 'row-1', uid: 'role-uid-1', name: '' }],
+    };
+    const columns = [
+      {
+        key: 'name',
+        dataIndex: 'name',
+        render: ({ value }: any) => {
+          renderCount += 1;
+          return <span>{value || 'empty'}</span>;
+        },
+      },
+    ];
+
+    render(
+      <SubTableField
+        columns={columns}
+        pageSize={10}
+        filterTargetKey="id"
+        fieldPathArray={['roles']}
+        formValuesChangeEmitter={emitter}
+        getCurrentValue={() => store.roles}
+      />,
+    );
+
+    expect(renderCount).toBe(1);
+
+    act(() => {
+      store.roles = [{ ...store.roles[0], name: 'role-uid-1' }];
+      emitter.emit('formValuesChange', {
+        source: 'user',
+        changedPaths: [['profile', 'name']],
+      });
+    });
+
+    expect(renderCount).toBe(1);
+    expect(screen.getByTestId('cell-0-name')).toHaveTextContent('empty');
+  });
+});

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/index.tsx

@@ -21,7 +21,7 @@ import { uid } from '@formily/shared';
 import { FormItemModel } from '../../../blocks/form';
 import { AssociationFieldModel } from '../AssociationFieldModel';
 import { buildRecordPickerPopupContextInputArgs, RecordPickerContent } from '../RecordPickerFieldModel';
-import { SubTableColumnModel } from './SubTableColumnModel';
+import { isSubTableColumnFieldComponentContext, SubTableColumnModel } from './SubTableColumnModel';
 import { SubTableField } from './SubTableField';
 import { adjustColumnOrder } from '../../../blocks/table/utils';
 
@@ -120,6 +120,8 @@ export class SubTableFieldModel extends AssociationFieldModel {
         parentFieldIndex={this.context.fieldIndex}
         parentItem={this.context.item}
         filterTargetKey={this.collection.filterTargetKey}
+        formValuesChangeEmitter={this.context.blockModel?.emitter}
+        fieldPathArray={this.parent?.context?.fieldPathArray}
         getCurrentValue={this.getCurrentValue}
       />
     );
@@ -387,6 +389,9 @@ export { SubTableColumnModel };
 FormItemModel.bindModelToInterface('SubTableFieldModel', ['m2m', 'o2m', 'mbm'], {
   order: 200,
   when: (ctx, field) => {
+    if (isSubTableColumnFieldComponentContext(ctx)) {
+      return false;
+    }
     if (field.targetCollection) {
       return field.targetCollection.template !== 'file';
     }

package/src/flow/models/fields/ClickableFieldModel.tsx

@@ -11,10 +11,9 @@ import { CollectionField, tExpr } from '@nocobase/flow-engine';
 import { Tag } from 'antd';
 import { castArray, get } from 'lodash';
 import React from 'react';
-import { EllipsisWithTooltip } from '../../components';
+import { EllipsisWithTooltip } from '../../components/EllipsisWithTooltip';
 import { openViewFlow } from '../../flows/openViewFlow';
 import { FieldModel } from '../base/FieldModel';
-import { EditFormModel } from '../blocks/form/EditFormModel';
 
 export function transformNestedData(inputData) {
   const resultArray = [];
@@ -36,6 +35,8 @@ export function transformNestedData(inputData) {
 const hasAssociationPathName = (parent: unknown): parent is { associationPathName?: string } =>
   !!parent && typeof parent === 'object' && 'associationPathName' in parent;
 
+const hasUsableSourceId = (sourceId: unknown) => sourceId !== undefined && sourceId !== null && String(sourceId) !== '';
+
 export class ClickableFieldModel extends FieldModel {
   get collectionField(): CollectionField {
     return this.context.collectionField;
@@ -62,14 +63,18 @@ export class ClickableFieldModel extends FieldModel {
       const parentObj = associationPathName
         ? get(this.context.blockModel?.form?.getFieldsValue?.(true) || this.context.record, associationPathName)
         : this.context.record;
+      const sourceId = parentObj?.[sourceKey];
+      const useAssociationResource = hasUsableSourceId(sourceId);
       this.dispatchEvent(
         'click',
         {
           event,
           filterByTk,
-          collectionName: this.collectionField.collection.name,
-          associationName: `${sourceCollection.name}.${this.collectionField.name}`, // `${sourceCollection.name}.${this.collectionField.name}`,
-          sourceId: parentObj[sourceKey],
+          collectionName: useAssociationResource
+            ? this.collectionField.collection.name
+            : targetCollection?.name || this.collectionField.target,
+          associationName: useAssociationResource ? `${sourceCollection.name}.${this.collectionField.name}` : null,
+          sourceId: useAssociationResource ? sourceId : null,
         },
         {
           debounce: true,
@@ -95,6 +100,10 @@ export class ClickableFieldModel extends FieldModel {
         const parentObj = associationPathName.includes('.')
           ? get(this.context.record, associationPathName.split('.')[0])
           : this.context.record;
+        const sourceId = hasUsableSourceId(parentObj?.[sourceKey])
+          ? parentObj?.[sourceKey]
+          : this.context.record?.[foreignKey];
+        const useAssociationResource = hasUsableSourceId(sourceId);
         let filterByTk = associationRecord?.[targetKey];
         if (associationField.interface === 'm2m') {
           // also incorrect for v1
@@ -106,10 +115,13 @@ export class ClickableFieldModel extends FieldModel {
           {
             event,
             filterByTk,
-            collectionName: this.collectionField.collection.name,
-            associationName: `${associationField.collection.name}.${this.collectionField.name}`,
-            // list api， 如果append了关系字段的某个属性，它并不会将关系字段对应的 filterByTk (sourceKey) 属性值返回， 但是会返回foriegnKey对应的值
-            sourceId: parentObj[sourceKey] || this.context.record[foreignKey],
+            collectionName: useAssociationResource
+              ? this.collectionField.collection.name
+              : targetCollection?.name || associationField.target || this.collectionField.collection.name,
+            associationName: useAssociationResource
+              ? `${associationField.collection.name}.${this.collectionField.name}`
+              : null,
+            sourceId: useAssociationResource ? sourceId : null,
           },
           {
             debounce: true,

package/src/flow/models/fields/DateTimeFieldModel/DateOnlyFieldModel.tsx

@@ -12,17 +12,26 @@ import { EditableItemModel, useFlowModelContext } from '@nocobase/flow-engine';
 import React from 'react';
 import { DateTimeFieldModel } from './DateTimeFieldModel';
 import { MobileDatePicker } from '../mobile-components/MobileDatePicker';
+import { useDateLimit } from './dateLimit';
 
 export const DateOnlyPicker = (props) => {
   const { value, format = 'YYYY-MM-DD', picker = 'date', showTime, ...rest } = props;
   const parsedValue = value && dayjs(value).isValid() ? dayjs(value) : null;
   const ctx = useFlowModelContext();
+  const { disabledDate, disabledTime, minDate, maxDate } = useDateLimit({
+    ...props,
+    currentForm: ctx.model?.context?.form,
+  });
   const componentProps = {
     ...rest,
     value: parsedValue,
     format,
     picker,
     showTime,
+    disabledDate,
+    disabledTime,
+    minDate,
+    maxDate,
     onChange: (val: any) => {
       const outputFormat = 'YYYY-MM-DD';
       if (!val) {

package/src/flow/models/fields/DateTimeFieldModel/DateTimeFieldModel.tsx

@@ -22,5 +22,9 @@ DateTimeFieldModel.registerFlow({
       use: 'dateDisplayFormat',
       title: tExpr('Date display format'),
     },
+    dateRangeLimit: {
+      use: 'dateRangeLimit',
+      title: tExpr('Date range limit'),
+    },
   },
 });

package/src/flow/models/fields/DateTimeFieldModel/DateTimeNoTzFieldModel.tsx

@@ -12,17 +12,26 @@ import React from 'react';
 import { EditableItemModel, useFlowModelContext } from '@nocobase/flow-engine';
 import { DateTimeFieldModel } from './DateTimeFieldModel';
 import { MobileDatePicker } from '../mobile-components/MobileDatePicker';
+import { useDateLimit } from './dateLimit';
 
 export const DateTimeNoTzPicker = (props) => {
   const { value, format = 'YYYY-MM-DD HH:mm:ss', showTime, picker = 'date', onChange, ...rest } = props;
   const parsedValue = value ? dayjs(value) : null;
   const ctx = useFlowModelContext();
+  const { disabledDate, disabledTime, minDate, maxDate } = useDateLimit({
+    ...props,
+    currentForm: ctx.model?.context?.form,
+  });
   const componentProps = {
     ...rest,
     value: parsedValue,
     format,
     picker,
     showTime,
+    disabledDate,
+    disabledTime,
+    minDate,
+    maxDate,
     onChange: (val: any) => {
       if (!val) {
         return onChange(val);

package/src/flow/models/fields/DateTimeFieldModel/DateTimeTzFieldModel.tsx

@@ -12,6 +12,7 @@ import React from 'react';
 import { DateTimeFieldModel } from './DateTimeFieldModel';
 import { MobileDatePicker } from '../mobile-components/MobileDatePicker';
 import { DatePicker } from 'antd';
+import { useDateLimit } from './dateLimit';
 
 function parseToDate(value: string | Date | dayjs.Dayjs | undefined, format?: string): Date | undefined {
   if (!value) return undefined;
@@ -49,12 +50,20 @@ function parseInitialValue(value: string | Date | undefined, format?: string): d
 export const DateTimeTzPicker = (props) => {
   const { value, format = 'YYYY-MM-DD HH:mm:ss', picker = 'date', showTime, ...rest } = props;
   const ctx = useFlowModelContext();
+  const { disabledDate, disabledTime, minDate, maxDate } = useDateLimit({
+    ...props,
+    currentForm: ctx.model?.context?.form,
+  });
   const componentProps = {
     ...rest,
     value: parseInitialValue(value, format),
     format,
     picker,
     showTime,
+    disabledDate,
+    disabledTime,
+    minDate,
+    maxDate,
     onChange: (val: any) => {
       let result = parseToDate(val, format);
       // Adjust to start of period for month/quarter/year pickers

package/src/flow/models/fields/DateTimeFieldModel/__tests__/DateTimeNoTzFieldModel.dateLimit.test.tsx

@@ -0,0 +1,242 @@
+/**
+ * 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 React from 'react';
+import { Form } from 'antd';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, waitFor } from '@nocobase/test/client';
+import { dayjs } from '@nocobase/utils/client';
+import { DateTimeNoTzPicker } from '../DateTimeNoTzFieldModel';
+
+let capturedDatePickerProps: any;
+let currentForm: any;
+const mockResolveJsonTemplate = vi.fn();
+
+vi.mock('@nocobase/flow-engine', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@nocobase/flow-engine')>();
+  return {
+    ...actual,
+    useFlowModelContext: () => ({
+      isMobileLayout: false,
+      model: {
+        context: {
+          form: currentForm,
+        },
+      },
+    }),
+    useFlowContext: () => ({
+      resolveJsonTemplate: mockResolveJsonTemplate,
+    }),
+  };
+});
+
+vi.mock('antd', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('antd')>();
+  return {
+    ...actual,
+    DatePicker: (props: any) => {
+      capturedDatePickerProps = props;
+      return <div data-testid="date-picker" />;
+    },
+    Form: actual.Form,
+  };
+});
+
+const TestWrapper = (props: any) => {
+  const [form] = Form.useForm();
+  currentForm = form;
+
+  return (
+    <Form form={form} initialValues={{ b: '2026-05-10 12:34:56' }}>
+      <DateTimeNoTzPicker {...props} />
+    </Form>
+  );
+};
+
+describe('DateTimeNoTzPicker date range limit', () => {
+  beforeEach(() => {
+    currentForm = undefined;
+    capturedDatePickerProps = undefined;
+    mockResolveJsonTemplate.mockReset();
+    mockResolveJsonTemplate.mockImplementation(async (params) => ({
+      ...params,
+      _maxDate: currentForm?.getFieldValue?.('b'),
+    }));
+  });
+
+  it('applies maxDate from current form field b', async () => {
+    render(<TestWrapper picker="date" showTime _maxDate={'{{ $nForm.b }}'} onChange={vi.fn()} value={null} />);
+
+    await waitFor(() => {
+      expect(mockResolveJsonTemplate).toHaveBeenCalledWith({
+        _minDate: undefined,
+        _maxDate: '{{ $nForm.b }}',
+      });
+      expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-11 00:00:00'))).toBe(true);
+    });
+
+    const timeConfig = capturedDatePickerProps?.disabledTime?.(dayjs('2026-05-10 00:00:00'));
+    expect(timeConfig?.disabledHours?.()).toContain(13);
+    expect(timeConfig?.disabledHours?.()).not.toContain(12);
+    expect(timeConfig?.disabledMinutes?.(12)).toContain(35);
+    expect(timeConfig?.disabledMinutes?.(12)).not.toContain(34);
+    expect(timeConfig?.disabledSeconds?.(12, 34)).toContain(57);
+    expect(timeConfig?.disabledSeconds?.(12, 34)).not.toContain(56);
+  });
+
+  it('updates field a maxDate immediately when field b changes', async () => {
+    render(<TestWrapper picker="date" showTime _maxDate={'{{ $nForm.b }}'} onChange={vi.fn()} value={null} />);
+
+    await waitFor(() => {
+      expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-11 00:00:00'))).toBe(true);
+    });
+
+    currentForm.setFieldValue('b', '2026-05-12 08:09:10');
+
+    await waitFor(() => {
+      expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-11 00:00:00'))).toBe(false);
+      expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-13 00:00:00'))).toBe(true);
+    });
+
+    const timeConfig = capturedDatePickerProps?.disabledTime?.(dayjs('2026-05-12 00:00:00'));
+    expect(timeConfig?.disabledHours?.()).toContain(9);
+    expect(timeConfig?.disabledHours?.()).not.toContain(8);
+    expect(timeConfig?.disabledMinutes?.(8)).toContain(10);
+    expect(timeConfig?.disabledMinutes?.(8)).not.toContain(9);
+    expect(timeConfig?.disabledSeconds?.(8, 9)).toContain(11);
+    expect(timeConfig?.disabledSeconds?.(8, 9)).not.toContain(10);
+  });
+
+  it('applies minDate from current form field b', async () => {
+    mockResolveJsonTemplate.mockImplementation(async (params) => ({
+      ...params,
+      _minDate: currentForm?.getFieldValue?.('b'),
+      _maxDate: undefined,
+    }));
+
+    render(<TestWrapper picker="date" showTime _minDate={'{{ $nForm.b }}'} onChange={vi.fn()} value={null} />);
+
+    await waitFor(() => {
+      expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-09 00:00:00'))).toBe(true);
+      expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-10 00:00:00'))).toBe(false);
+    });
+
+    const timeConfig = capturedDatePickerProps?.disabledTime?.(dayjs('2026-05-10 00:00:00'));
+    expect(timeConfig?.disabledHours?.()).toContain(11);
+    expect(timeConfig?.disabledHours?.()).not.toContain(12);
+    expect(timeConfig?.disabledMinutes?.(12)).toContain(33);
+    expect(timeConfig?.disabledMinutes?.(12)).not.toContain(34);
+    expect(timeConfig?.disabledSeconds?.(12, 34)).toContain(55);
+    expect(timeConfig?.disabledSeconds?.(12, 34)).not.toContain(56);
+  });
+
+  it('applies both minDate and maxDate together', async () => {
+    mockResolveJsonTemplate.mockImplementation(async (params) => ({
+      ...params,
+      _minDate: '2026-05-10 08:00:00',
+      _maxDate: '2026-05-12 18:30:40',
+    }));
+
+    render(
+      <TestWrapper
+        picker="date"
+        showTime
+        _minDate={'{{ $nForm.min }}'}
+        _maxDate={'{{ $nForm.max }}'}
+        onChange={vi.fn()}
+        value={null}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-09 00:00:00'))).toBe(true);
+      expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-13 00:00:00'))).toBe(true);
+    });
+
+    expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-11 00:00:00'))).toBe(false);
+
+    const minDayTimeConfig = capturedDatePickerProps?.disabledTime?.(dayjs('2026-05-10 00:00:00'));
+    expect(minDayTimeConfig?.disabledHours?.()).toContain(7);
+    expect(minDayTimeConfig?.disabledHours?.()).not.toContain(8);
+
+    const maxDayTimeConfig = capturedDatePickerProps?.disabledTime?.(dayjs('2026-05-12 00:00:00'));
+    expect(maxDayTimeConfig?.disabledHours?.()).toContain(19);
+    expect(maxDayTimeConfig?.disabledHours?.()).not.toContain(18);
+    expect(maxDayTimeConfig?.disabledMinutes?.(18)).toContain(31);
+    expect(maxDayTimeConfig?.disabledMinutes?.(18)).not.toContain(30);
+    expect(maxDayTimeConfig?.disabledSeconds?.(18, 30)).toContain(41);
+    expect(maxDayTimeConfig?.disabledSeconds?.(18, 30)).not.toContain(40);
+  });
+
+  it('uses first minDate and last maxDate when resolved values are arrays', async () => {
+    mockResolveJsonTemplate.mockImplementation(async (params) => ({
+      ...params,
+      _minDate: ['2026-05-10 08:00:00', '2026-05-11 09:00:00'],
+      _maxDate: ['2026-05-12 10:00:00', '2026-05-13 11:12:13'],
+    }));
+
+    render(
+      <TestWrapper
+        picker="date"
+        showTime
+        _minDate={'{{ $nForm.min }}'}
+        _maxDate={'{{ $nForm.max }}'}
+        onChange={vi.fn()}
+        value={null}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-09 00:00:00'))).toBe(true);
+      expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-14 00:00:00'))).toBe(true);
+    });
+
+    expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-10 00:00:00'))).toBe(false);
+    expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-13 00:00:00'))).toBe(false);
+
+    const timeConfig = capturedDatePickerProps?.disabledTime?.(dayjs('2026-05-13 00:00:00'));
+    expect(timeConfig?.disabledHours?.()).toContain(12);
+    expect(timeConfig?.disabledHours?.()).not.toContain(11);
+    expect(timeConfig?.disabledMinutes?.(11)).toContain(13);
+    expect(timeConfig?.disabledMinutes?.(11)).not.toContain(12);
+    expect(timeConfig?.disabledSeconds?.(11, 12)).toContain(14);
+    expect(timeConfig?.disabledSeconds?.(11, 12)).not.toContain(13);
+  });
+
+  it('clears date and time restrictions when resolved values are empty', async () => {
+    mockResolveJsonTemplate.mockImplementation(async (params) => ({
+      ...params,
+      _minDate: undefined,
+      _maxDate: undefined,
+    }));
+
+    render(
+      <TestWrapper
+        picker="date"
+        showTime
+        _minDate={'{{ $nForm.min }}'}
+        _maxDate={'{{ $nForm.max }}'}
+        onChange={vi.fn()}
+        value={null}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(capturedDatePickerProps).toBeTruthy();
+    });
+
+    expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-01 00:00:00'))).toBe(false);
+    expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-31 00:00:00'))).toBe(false);
+
+    const timeConfig = capturedDatePickerProps?.disabledTime?.(dayjs('2026-05-15 00:00:00'));
+    expect(timeConfig?.disabledHours?.()).toEqual([]);
+    expect(timeConfig?.disabledMinutes?.(12)).toEqual([]);
+    expect(timeConfig?.disabledSeconds?.(12, 34)).toEqual([]);
+  });
+});