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

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

@@ -177,6 +177,25 @@ const MemoFieldRenderer = React.memo(FieldModelRenderer, (prev, next) => {
   return prev.value === next.value && prev.model === next.model;
 });
 
+export function buildRowPathFromFieldIndex(fieldIndex: unknown): Array<string | number> | null {
+  if (!Array.isArray(fieldIndex) || !fieldIndex.length) return null;
+  const out: Array<string | number> = [];
+  for (const entry of fieldIndex) {
+    if (typeof entry !== 'string') continue;
+    const [fieldName, indexStr] = entry.split(':');
+    const index = Number(indexStr);
+    if (!fieldName || !Number.isFinite(index)) continue;
+    out.push(fieldName, index);
+  }
+  return out.length ? out : null;
+}
+
+export function getLatestSubTableRowRecord(form: any, fieldIndex: unknown, fallbackRecord: any): any {
+  const latestRowPath = buildRowPathFromFieldIndex(fieldIndex);
+  const latestRecord = latestRowPath ? form?.getFieldValue?.(latestRowPath) : undefined;
+  return typeof latestRecord === 'undefined' ? fallbackRecord : latestRecord;
+}
+
 function shouldCommitImmediately(value: any) {
   if (Array.isArray(value)) {
     return true;
@@ -194,7 +213,7 @@ function shouldCommitImmediately(value: any) {
 }
 
 const FieldModelRendererOptimize = React.memo((props: any) => {
-  const { model, onChange, value, ...rest } = props;
+  const { model, onChange, value, commitOnChange, ...rest } = props;
   const pendingValueRef = React.useRef<any>(props?.value);
 
   useEffect(() => {
@@ -204,11 +223,11 @@ const FieldModelRendererOptimize = React.memo((props: any) => {
   const handleChange = React.useCallback(
     (value: any) => {
       pendingValueRef.current = value;
-      if (shouldCommitImmediately(value)) {
+      if (commitOnChange || shouldCommitImmediately(value)) {
         onChange?.(value);
       }
     },
-    [onChange],
+    [commitOnChange, onChange],
   );
 
   const handleCommit = React.useCallback(() => {
@@ -241,10 +260,11 @@ interface CellProps {
   rowFork?: any;
   memoKey?: string;
   width?: number;
+  commitOnChange?: boolean;
 }
 
 const MemoCell: React.FC<CellProps> = React.memo(
-  ({ value, record, rowIdx, id, parent, parentFieldIndex, rowFork, width }) => {
+  ({ value, record, rowIdx, id, parent, parentFieldIndex, rowFork, width, commitOnChange }) => {
     const isNew = record?.__is_new__;
     return (
       <div
@@ -346,7 +366,11 @@ const MemoCell: React.FC<CellProps> = React.memo(
                   }
                 />
               ) : (
-                <FieldModelRendererOptimize model={fork} id={[(parent as any).context.fieldPath, rowIdx]} />
+                <FieldModelRendererOptimize
+                  model={fork}
+                  id={[(parent as any).context.fieldPath, rowIdx]}
+                  commitOnChange={commitOnChange}
+                />
               )}
             </FormItem>
           );
@@ -360,6 +384,7 @@ const MemoCell: React.FC<CellProps> = React.memo(
       prev.id === next.id &&
       prev.memoKey === next.memoKey &&
       prev.width === next.width &&
+      prev.commitOnChange === next.commitOnChange &&
       prev.rowIdx === next.rowIdx
     );
   },
@@ -428,6 +453,15 @@ export class SubTableColumnModel<
     return this.parent.collection;
   }
 
+  get hasFormulaColumn() {
+    return (
+      this.parent?.mapSubModels('columns', (column: SubTableColumnModel) => {
+        const field = column.collectionField;
+        return field?.interface === 'formula' || field?.type === 'formula';
+      }) || []
+    ).some(Boolean);
+  }
+
   onInit(options: any): void {
     super.onInit(options);
     this.context.defineProperty('resourceName', {
@@ -559,6 +593,9 @@ export class SubTableColumnModel<
       const rowForkKey = `row:${baseIndexKey}:${rowIdentity}:${String(rowIdx)}`;
       const rowFork: any = (() => {
         const fork = this.createFork({}, rowForkKey);
+        fork.context.defineProperty('subTableRowFork', {
+          value: true,
+        });
         const associationFieldPath =
           (this.parent as any)?.fieldPath ??
           (this.parent as any)?.context?.fieldPath ??
@@ -577,9 +614,11 @@ export class SubTableColumnModel<
         }
         fork.context.defineProperty('item', {
           get: () => {
+            const form = (fork.context as any)?.form || (this.context?.blockModel as any)?.context?.form;
+            const rowRecord = getLatestSubTableRowRecord(form, fork.context.fieldIndex, record);
             const parentItemCtx = (parentItem ?? this.context?.item) as any;
-            const isNew = record?.__is_new__;
-            const isStored = record?.__is_stored__;
+            const isNew = rowRecord?.__is_new__;
+            const isStored = rowRecord?.__is_stored__;
             const list = (this.parent as any)?.props?.value;
             const length = Array.isArray(list) ? list.length : undefined;
             return {
@@ -587,7 +626,7 @@ export class SubTableColumnModel<
               length,
               __is_new__: isNew,
               __is_stored__: isStored,
-              value: record,
+              value: rowRecord,
               parentItem: parentItemCtx,
             };
           },
@@ -607,6 +646,7 @@ export class SubTableColumnModel<
           rowFork={rowFork}
           memoKey={rowForkKey}
           width={this.props.width}
+          commitOnChange={this.hasFormulaColumn}
         />
       );
     };

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

@@ -14,8 +14,41 @@ import { useTranslation } from 'react-i18next';
 import { PlusOutlined } from '@ant-design/icons';
 import React, { useEffect, useMemo, useState } from 'react';
 import { ActionWithoutPermission } from '../../../base/ActionModel';
+import { parsePathString } from '../../../blocks/form/value-runtime/path';
 import { getSubTableRowIdentity, normalizeSubTableRows } from './rowIdentity';
 
+type NamePath = Array<string | number>;
+
+function isSamePathPrefix(prefix: NamePath, path: NamePath) {
+  if (!prefix.length || prefix.length > path.length) return false;
+  return prefix.every((seg, index) => seg === path[index]);
+}
+
+function isRelatedPath(a: NamePath, b: NamePath) {
+  return isSamePathPrefix(a, b) || isSamePathPrefix(b, a);
+}
+
+function normalizeChangedPath(path: unknown): NamePath | null {
+  const rawPath = Array.isArray(path) ? path : typeof path === 'string' ? [path] : null;
+  if (!rawPath) return null;
+  const normalized = rawPath.flatMap((seg) => {
+    if (typeof seg === 'number') return [seg];
+    if (typeof seg !== 'string') return [];
+    return parsePathString(seg).filter((parsed): parsed is string | number => typeof parsed !== 'object');
+  });
+  return normalized.length ? normalized : null;
+}
+
+function shouldRefreshForChangedPaths(fieldPath: unknown, changedPaths: unknown) {
+  const currentFieldPath = normalizeChangedPath(fieldPath);
+  if (!currentFieldPath) return false;
+  const paths = Array.isArray(changedPaths) ? changedPaths : [];
+  return paths.some((path) => {
+    const changedPath = normalizeChangedPath(path);
+    return changedPath ? isRelatedPath(currentFieldPath, changedPath) : false;
+  });
+}
+
 export function SubTableField(props) {
   const { t } = useTranslation();
   const {
@@ -35,9 +68,12 @@ export function SubTableField(props) {
     resetPage,
     filterTargetKey = 'id',
     getCurrentValue,
+    fieldPathArray,
+    formValuesChangeEmitter,
   } = props;
   const [currentPage, setCurrentPage] = useState(1);
   const [currentPageSize, setCurrentPageSize] = useState(pageSize);
+  const [, forceRefresh] = useState(0);
   const rawCurrentValue = getCurrentValue();
   const currentValue = useMemo(() => normalizeSubTableRows(rawCurrentValue), [rawCurrentValue]);
   const getRecordIdentity = React.useCallback(
@@ -50,6 +86,17 @@ export function SubTableField(props) {
   useEffect(() => {
     resetPage && setCurrentPage(1);
   }, [resetPage]);
+  useEffect(() => {
+    if (!formValuesChangeEmitter?.on || !formValuesChangeEmitter?.off) return;
+    const listener = (payload: any) => {
+      if (!shouldRefreshForChangedPaths(fieldPathArray, payload?.changedPaths)) return;
+      forceRefresh((v) => v + 1);
+    };
+    formValuesChangeEmitter.on('formValuesChange', listener);
+    return () => {
+      formValuesChangeEmitter.off('formValuesChange', listener);
+    };
+  }, [fieldPathArray, formValuesChangeEmitter]);
   const applyValue = React.useCallback((nextValue: any) => onChange?.(normalizeSubTableRows(nextValue)), [onChange]);
   const getLatestValue = React.useCallback(() => normalizeSubTableRows(getCurrentValue()), [getCurrentValue]);
   useEffect(() => {

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/__tests__/SubTableColumnModel.rowRecord.test.ts

@@ -0,0 +1,42 @@
+/**
+ * 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 { describe, expect, it, vi } from 'vitest';
+import { getLatestSubTableRowRecord, buildRowPathFromFieldIndex } from '../SubTableColumnModel';
+
+describe('SubTableColumnModel row record helpers', () => {
+  it('builds the row path from fieldIndex entries', () => {
+    expect(buildRowPathFromFieldIndex(['roles:0'])).toEqual(['roles', 0]);
+    expect(buildRowPathFromFieldIndex(['users:1', 'roles:2'])).toEqual(['users', 1, 'roles', 2]);
+  });
+
+  it('prefers the latest row value from form over the fallback record', () => {
+    const form = {
+      getFieldValue: vi.fn((path: any) => {
+        if (JSON.stringify(path) === JSON.stringify(['roles', 0])) {
+          return { uid: 'role-uid-1', __is_new__: true };
+        }
+      }),
+    };
+    const fallback = { uid: 'stale-role', __is_new__: false };
+
+    expect(getLatestSubTableRowRecord(form, ['roles:0'], fallback)).toEqual({
+      uid: 'role-uid-1',
+      __is_new__: true,
+    });
+    expect(form.getFieldValue).toHaveBeenCalledWith(['roles', 0]);
+  });
+
+  it('falls back to the record when latest row value is unavailable', () => {
+    const form = { getFieldValue: vi.fn(() => undefined) };
+    const fallback = { uid: 'stale-role', __is_new__: false };
+
+    expect(getLatestSubTableRowRecord(form, ['roles:0'], fallback)).toBe(fallback);
+  });
+});

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

@@ -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}
       />
     );

package/src/flow/models/fields/AssociationFieldModel/recordSelectSettingsUtils.ts

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+
+export function hasAncestorModel(model: any, modelNames: string[]) {
+  let cursor = model;
+  while (cursor) {
+    const modelName = cursor?.constructor?.name;
+    if (modelName && modelNames.includes(modelName)) {
+      return true;
+    }
+    cursor = cursor?.parent;
+  }
+  return false;
+}

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