@nocobase/client-v2 2.2.0-beta.3 → 2.2.0-beta.6

package/src/flow/models/blocks/table/__tests__/TableActionsColumnModel.test.tsx

@@ -19,11 +19,16 @@ const capturedDroppableUids: string[] = [];
 const capturedRendererProps: any[] = [];
 let latestOnDragEnd: ((event: any) => void) | undefined;
 const capturedDndProviders: Array<{ persist: boolean }> = [];
+const capturedAddSubModelButtonProps: any[] = [];
 
 vi.mock('@nocobase/flow-engine', async () => {
   const actual = await vi.importActual<any>('@nocobase/flow-engine');
   return {
     ...actual,
+    AddSubModelButton: (props) => {
+      capturedAddSubModelButtonProps.push(props);
+      return <button data-testid="add-sub-model-button">{props.children}</button>;
+    },
     DndProvider: ({ children, onDragEnd, persist = true, ...restProps }) => {
       const engine = actual.useFlowEngine();
       const handleDragEnd = (event: any) => {
@@ -50,6 +55,17 @@ vi.mock('@nocobase/flow-engine', async () => {
       const ActualFlowModelRenderer = actual.FlowModelRenderer;
       return <ActualFlowModelRenderer {...props} />;
     },
+    FlowsFloatContextMenu: ({ children, extraToolbarItems = [], model }) => {
+      return (
+        <div data-test-flow-context-menu>
+          {children}
+          {extraToolbarItems.map((item) => {
+            const Component = item.component;
+            return <Component key={item.key} model={model} />;
+          })}
+        </div>
+      );
+    },
   };
 });
 
@@ -165,6 +181,7 @@ describe('TableActionsColumnModel: drag integration', () => {
     capturedDroppableUids.length = 0;
     capturedRendererProps.length = 0;
     capturedDndProviders.length = 0;
+    capturedAddSubModelButtonProps.length = 0;
     latestOnDragEnd = undefined;
   });
 
@@ -177,6 +194,7 @@ describe('TableActionsColumnModel: drag integration', () => {
       props: { width: 200, title: 'Actions' },
       subModels: { actions: [{ use: 'TestViewActionModel' }, { use: 'TestViewActionModel' }] },
     });
+    actionsCol.context.defineMethod('getModelClassName', (className: string) => className);
 
     const colProps = actionsCol.getColumnProps();
     const record = { id: 1, phone: '000000' } as any;
@@ -279,4 +297,40 @@ describe('TableActionsColumnModel: drag integration', () => {
 
     expect(moveModelSpy).toHaveBeenCalledWith(firstUid, secondUid, { persist: true });
   });
+
+  it('disables icon-only mode when adding row actions without icons', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ TableActionsColumnModel, TestViewActionModel });
+
+    const actionsCol = engine.createModel<TableActionsColumnModel>({
+      use: 'TableActionsColumnModel',
+      props: { width: 200, title: 'Actions' },
+    });
+    actionsCol.context.defineMethod('getModelClassName', (className: string) => className);
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <App>{actionsCol.getColumnProps().title as React.ReactNode}</App>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    const addButtonProps = capturedAddSubModelButtonProps.find(
+      (props) => props.subModelKey === 'actions' && props.subModelBaseClass === 'RecordActionGroupModel',
+    );
+    expect(addButtonProps).toBeDefined();
+    expect(addButtonProps.afterSubModelInit).toBeTypeOf('function');
+
+    const actionModel = {
+      setStepParams: vi.fn(),
+    };
+    await addButtonProps.afterSubModelInit(actionModel);
+
+    expect(actionModel.setStepParams).toHaveBeenCalledWith('buttonSettings', 'general', {
+      type: 'link',
+      icon: null,
+      iconOnly: false,
+    });
+  });
 });

package/src/flow/models/blocks/table/__tests__/TableBlockModel.mobileSettingsButtons.test.tsx

@@ -0,0 +1,78 @@
+/**
+ * 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 { FlowEngine } from '@nocobase/flow-engine';
+import '@nocobase/client';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import { TableBlockModel } from '../TableBlockModel';
+
+function createTableModel(options: { isMobileLayout?: boolean; flowSettingsEnabled?: boolean } = {}) {
+  const engine = new FlowEngine();
+  engine.registerModels({ TableBlockModel });
+  engine.context.defineProperty('isMobileLayout', { value: !!options.isMobileLayout });
+  engine.context.defineProperty('flowSettingsEnabled', { value: !!options.flowSettingsEnabled });
+
+  const ds = engine.dataSourceManager.getDataSource('main');
+  ds.addCollection({
+    name: 'posts',
+    filterTargetKey: 'id',
+    fields: [
+      { name: 'id', type: 'integer', interface: 'number' },
+      { name: 'title', type: 'string', interface: 'input' },
+    ],
+  });
+
+  return engine.createModel<TableBlockModel>({
+    uid: `posts-table-${options.isMobileLayout ? 'mobile' : 'desktop'}`,
+    use: 'TableBlockModel',
+    stepParams: {
+      resourceSettings: {
+        init: {
+          dataSourceKey: 'main',
+          collectionName: 'posts',
+        },
+      },
+    },
+  });
+}
+
+function getSettingsButton(element: React.ReactElement) {
+  return element.props.children as React.ReactElement;
+}
+
+describe('TableBlockModel mobile settings buttons', () => {
+  it('renders table actions and fields settings as icon-only buttons in mobile layouts', () => {
+    const model = createTableModel({ isMobileLayout: true, flowSettingsEnabled: true });
+    const actionButton = getSettingsButton(model.renderConfigureActions() as React.ReactElement);
+    const addColumn = model.getColumns().find((column) => column.key === 'addColumn');
+    const fieldsButton = getSettingsButton(
+      (addColumn?.title as React.ReactElement).type({ model }) as React.ReactElement,
+    );
+
+    expect(actionButton.props.children).toBeNull();
+    expect(actionButton.props['aria-label']).toBe('Actions');
+    expect(fieldsButton.props.children).toBeNull();
+    expect(fieldsButton.props['aria-label']).toBe('Fields');
+    expect(addColumn?.width).toBeUndefined();
+  });
+
+  it('keeps table actions and fields settings labels outside mobile layouts', () => {
+    const model = createTableModel({ flowSettingsEnabled: true });
+    const actionButton = getSettingsButton(model.renderConfigureActions() as React.ReactElement);
+    const addColumn = model.getColumns().find((column) => column.key === 'addColumn');
+    const fieldsButton = getSettingsButton(
+      (addColumn?.title as React.ReactElement).type({ model }) as React.ReactElement,
+    );
+
+    expect(actionButton.props.children).toBe('Actions');
+    expect(fieldsButton.props.children).toBe('Fields');
+    expect(addColumn?.width).toBe(100);
+  });
+});

package/src/flow/models/blocks/table/__tests__/TableColumnModel.test.tsx

@@ -130,9 +130,14 @@ describe('TableColumnModel sorter settings', () => {
     const titleFieldStep = model.getFlow('tableColumnSettings')?.steps?.fieldNames as any;
     const setStepParams = vi.fn();
     const setProps = vi.fn();
+    const setFieldProps = vi.fn();
     const dispatchEvent = vi.fn();
+    const saveFieldModel = vi.fn();
     const targetCollectionField = {
-      getComponentProps: () => ({}),
+      getComponentProps: () => ({
+        format: 'hh:mm:ss a',
+        timeFormat: 'hh:mm:ss a',
+      }),
     };
 
     await titleFieldStep.beforeParamsSave(
@@ -156,8 +161,10 @@ describe('TableColumnModel sorter settings', () => {
           subModels: {
             field: {
               use: 'DisplayTextFieldModel',
+              setProps: setFieldProps,
               setStepParams,
               dispatchEvent,
+              save: saveFieldModel,
             },
           },
           setStepParams,
@@ -169,6 +176,155 @@ describe('TableColumnModel sorter settings', () => {
     );
 
     expect(setStepParams).toHaveBeenCalledWith('tableColumnSettings', 'model', { use: 'DisplayTextFieldModel' });
+    expect(setFieldProps).toHaveBeenCalledWith(
+      expect.objectContaining({
+        format: 'hh:mm:ss a',
+        timeFormat: 'hh:mm:ss a',
+        titleField: 'code',
+      }),
+    );
+    expect(setProps).toHaveBeenCalledWith(
+      expect.objectContaining({
+        format: 'hh:mm:ss a',
+        timeFormat: 'hh:mm:ss a',
+        titleField: 'code',
+      }),
+    );
+    expect(saveFieldModel).toHaveBeenCalled();
+  });
+
+  it('clears stale datetime display props when association title field changes to date only', async () => {
+    const engine = new FlowEngine();
+    const model = new TableColumnModel({ uid: 'table-column-title-field-date-only', flowEngine: engine } as any);
+    const titleFieldStep = model.getFlow('tableColumnSettings')?.steps?.fieldNames as any;
+    const setStepParams = vi.fn();
+    const setProps = vi.fn();
+    const setFieldProps = vi.fn();
+    const targetCollectionField = {
+      getComponentProps: () => ({
+        dateOnly: true,
+        showTime: false,
+      }),
+    };
+
+    await titleFieldStep.beforeParamsSave(
+      {
+        collectionField: {
+          isAssociationField: () => true,
+          targetCollection: {
+            name: 'departments',
+            getField: () => targetCollectionField,
+          },
+        },
+        model: {
+          collectionField: {
+            dataSourceKey: 'main',
+          },
+          constructor: {
+            getDefaultBindingByField: () => ({
+              modelName: 'DisplayDateTimeFieldModel',
+            }),
+          },
+          subModels: {
+            field: {
+              use: 'DisplayDateTimeFieldModel',
+              setProps: setFieldProps,
+              setStepParams,
+              dispatchEvent: vi.fn(),
+              save: vi.fn(),
+            },
+          },
+          setStepParams,
+          setProps,
+        },
+      },
+      { label: 'dateOnly' },
+      { label: 'time' },
+    );
+
+    expect(setFieldProps).toHaveBeenCalledWith(
+      expect.objectContaining({
+        dateOnly: true,
+        format: undefined,
+        showTime: false,
+        timeFormat: undefined,
+        titleField: 'dateOnly',
+      }),
+    );
+    expect(setProps).toHaveBeenCalledWith(
+      expect.objectContaining({
+        dateOnly: true,
+        format: undefined,
+        showTime: false,
+        timeFormat: undefined,
+        titleField: 'dateOnly',
+      }),
+    );
+  });
+
+  it('keeps saved association title datetime format when table column initializes again', async () => {
+    const engine = new FlowEngine();
+    const model = new TableColumnModel({
+      uid: 'table-column-title-field-saved-datetime-format',
+      flowEngine: engine,
+    } as any);
+    const initStep = model.getFlow('tableColumnSettings')?.steps?.init as any;
+    const setProps = vi.fn();
+    const targetCollectionField = {
+      getComponentProps: () => ({
+        dateFormat: 'YYYY-MM-DD',
+        format: 'YYYY-MM-DD HH:mm:ss',
+        showTime: true,
+        timeFormat: 'HH:mm:ss',
+      }),
+    };
+
+    await initStep.handler({
+      model: {
+        context: {
+          collectionField: {
+            title: 'Shipments',
+            name: 'shipments',
+            isAssociationField: () => true,
+            getComponentProps: () => ({
+              fieldNames: {
+                label: 'shipmentsDatetime',
+              },
+            }),
+            targetCollection: {
+              getField: () => targetCollectionField,
+            },
+          },
+        },
+        props: {
+          titleField: 'shipmentsDatetime',
+        },
+        subModels: {
+          field: {
+            getStepParams: (flowKey, stepKey) =>
+              flowKey === 'datetimeSettings' && stepKey === 'dateFormat'
+                ? {
+                    picker: 'date',
+                    dateFormat: 'YYYY-MM-DD',
+                    showTime: true,
+                    timeFormat: 'h:mm a',
+                  }
+                : undefined,
+          },
+        },
+        applySubModelsBeforeRenderFlows: vi.fn(),
+        setProps,
+      },
+    });
+
+    expect(setProps).toHaveBeenCalledWith(
+      expect.objectContaining({
+        dateFormat: 'YYYY-MM-DD',
+        format: 'YYYY-MM-DD h:mm a',
+        showTime: true,
+        timeFormat: 'h:mm a',
+      }),
+    );
   });
 
   it('does not update field component setting when title field refresh fails', async () => {
@@ -203,8 +359,10 @@ describe('TableColumnModel sorter settings', () => {
             subModels: {
               field: {
                 use: 'DisplayTextFieldModel',
+                setProps: vi.fn(),
                 setStepParams: vi.fn(),
                 dispatchEvent: vi.fn().mockRejectedValue(new Error('beforeRender failed')),
+                save: vi.fn(),
               },
             },
             setStepParams,

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

@@ -11,7 +11,7 @@ import { FormItemModel } from '../../blocks/form/FormItemModel';
 import { FieldModel } from '../../base/FieldModel';
 export class AssociationFieldModel extends FieldModel {
   operator = '$eq';
-  updateAssociation = true;
+  updateAssociation = false;
 }
 
 AssociationFieldModel.registerFlow({

package/src/flow/models/fields/AssociationFieldModel/PopupSubTableFieldModel/PopupSubTableFieldModel.tsx

@@ -203,6 +203,8 @@ const DisplayTable = (props) => {
     onSelectExitRecordClick,
     resetPage,
     allowCreate,
+    formValuesChangeEmitter,
+    onResetFieldValue,
   } = props;
   const [currentPage, setCurrentPage] = useState(1);
   const [currentPageSize, setCurrentPageSize] = useState(pageSize);
@@ -223,6 +225,18 @@ const DisplayTable = (props) => {
     resetPage && setCurrentPage(1);
   }, [resetPage]);
 
+  useEffect(() => {
+    if (!formValuesChangeEmitter?.on || !formValuesChangeEmitter?.off || !onResetFieldValue) return;
+    const listener = () => {
+      onResetFieldValue();
+      setTableData([]);
+    };
+    formValuesChangeEmitter.on('onFieldReset', listener);
+    return () => {
+      formValuesChangeEmitter.off('onFieldReset', listener);
+    };
+  }, [formValuesChangeEmitter, onResetFieldValue]);
+
   const pagination = useMemo(() => {
     return {
       current: currentPage, // 当前页码
@@ -237,7 +251,7 @@ const DisplayTable = (props) => {
         return t('Total {{count}} items', { count: total });
       },
     } as any;
-  }, [currentPage, currentPageSize, tableData]);
+  }, [currentPage, currentPageSize, tableData, t]);
 
   const columns = useMemo(() => {
     const cols = adjustColumnOrder(
@@ -421,10 +435,6 @@ export class PopupSubTableFieldModel extends AssociationFieldModel {
           currentPageSize,
         });
       };
-      // 监听表单reset
-      this.context.blockModel.emitter.on('onFieldReset', () => {
-        this.props?.onChange([]);
-      });
     }
   }
 
@@ -457,8 +467,21 @@ export class PopupSubTableFieldModel extends AssociationFieldModel {
   }
 
   public render() {
+    const fieldPathArray = this.context.fieldPathArray ?? this.parent?.context?.fieldPathArray;
+    const onResetFieldValue = () => {
+      const value = [];
+      this.setProps({ value });
+      this.context.blockModel?.setFieldValue?.(fieldPathArray, value);
+    };
     return (
-      <DisplayTable {...this.props} collection={this.collection} baseColumns={this.getBaseColumns(this)} model={this} />
+      <DisplayTable
+        {...this.props}
+        collection={this.collection}
+        baseColumns={this.getBaseColumns(this)}
+        model={this}
+        formValuesChangeEmitter={this.context.blockModel?.emitter}
+        onResetFieldValue={onResetFieldValue}
+      />
     );
   }
 }

package/src/flow/models/fields/AssociationFieldModel/RecordSelectFieldModel.tsx

@@ -99,6 +99,18 @@ export function collectAssociationHydrationCandidates(options: {
   return candidates;
 }
 
+export function getAssociationHydrationNamePath(model: any) {
+  return model?.context?.fieldPathArray ?? model?.context?.fieldPath ?? model?.props?.name;
+}
+
+export function getAssociationHydrationSetterContext(model: any) {
+  if (typeof model?.context?.setFormValue === 'function') {
+    return model.context;
+  }
+
+  return model?.context?.blockModel?.context;
+}
+
 function markAssociationHydrationDone(statusMap: Map<string, HydrateStatus>, tkKey: string | null | undefined) {
   if (!tkKey) return;
   statusMap.set(tkKey, 'done');
@@ -245,8 +257,8 @@ const LazySelect = (props: Readonly<LazySelectProps>) => {
     });
     if (!candidates.length) return;
 
-    const namePath = model?.props?.name ?? model?.context?.fieldPathArray;
-    const blockCtx: any = model?.context?.blockModel?.context;
+    const namePath = getAssociationHydrationNamePath(model);
+    const setterCtx: any = getAssociationHydrationSetterContext(model);
 
     candidates.forEach(({ item, tk, tkKey }) => {
       void (async () => {
@@ -268,8 +280,8 @@ const LazySelect = (props: Readonly<LazySelectProps>) => {
               })
             : merge;
 
-          if (blockCtx && typeof blockCtx.setFormValue === 'function' && namePath != null) {
-            await blockCtx.setFormValue(namePath, nextValue, {
+          if (setterCtx && typeof setterCtx.setFormValue === 'function' && namePath != null) {
+            await setterCtx.setFormValue(namePath, nextValue, {
               source: 'default',
               markExplicit: false,
               triggerEvent: false,

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

@@ -231,6 +231,20 @@ export function getLatestSubTableRowRecord(form: any, fieldIndex: unknown, fallb
   return typeof latestRecord === 'undefined' ? fallbackRecord : latestRecord;
 }
 
+export function buildSubTableColumnNamePath(
+  fieldPath: Array<string | number>,
+  rowIdx: number,
+  namePath: string | number,
+  rowFieldIndex: unknown,
+): Array<string | number> {
+  const currentRowPath = buildRowPathFromFieldIndex(rowFieldIndex);
+  if (currentRowPath?.length) {
+    return [...currentRowPath, namePath];
+  }
+
+  return [...fieldPath, rowIdx, namePath];
+}
+
 function shouldCommitImmediately(value: any) {
   if (Array.isArray(value)) {
     return true;
@@ -372,9 +386,18 @@ const MemoCell: React.FC<CellProps> = React.memo(
         {parent.mapSubModels('field', (action: FieldModel) => {
           const fieldPath = action.context.fieldPath.split('.');
           const namePath = fieldPath.pop();
+          if (typeof namePath === 'undefined') {
+            return null;
+          }
+          const fieldNamePath = buildSubTableColumnNamePath(fieldPath, rowIdx, namePath, rowFork?.context?.fieldIndex);
+          const formItemName = buildDynamicNamePath([...fieldPath, rowIdx, namePath], parentFieldIndex);
 
           const fork: any = action.createFork({}, `${id}`);
           fork.context.defineProperty('currentObject', { get: () => record });
+          fork.context.defineProperty('fieldPathArray', {
+            get: () => fieldNamePath,
+            cache: false,
+          });
           if (rowFork) {
             const itemOptions = rowFork.context.getPropertyOptions?.('item');
             const { value: _value, ...itemOptionsWithoutValue } = (itemOptions || {}) as any;
@@ -415,7 +438,7 @@ const MemoCell: React.FC<CellProps> = React.memo(
             <FormItem
               {...parent.props}
               key={id}
-              name={buildDynamicNamePath([...fieldPath, rowIdx, namePath], parentFieldIndex)}
+              name={formItemName}
               style={{ marginBottom: 0 }}
               showLabel={false}
               disabled={

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

@@ -70,6 +70,7 @@ export function SubTableField(props) {
     getCurrentValue,
     fieldPathArray,
     formValuesChangeEmitter,
+    onResetFieldValue,
   } = props;
   const [currentPage, setCurrentPage] = useState(1);
   const [currentPageSize, setCurrentPageSize] = useState(pageSize);
@@ -97,6 +98,17 @@ export function SubTableField(props) {
       formValuesChangeEmitter.off('formValuesChange', listener);
     };
   }, [fieldPathArray, formValuesChangeEmitter]);
+  useEffect(() => {
+    if (!formValuesChangeEmitter?.on || !formValuesChangeEmitter?.off || !onResetFieldValue) return;
+    const listener = () => {
+      onResetFieldValue();
+      forceRefresh((v) => v + 1);
+    };
+    formValuesChangeEmitter.on('onFieldReset', listener);
+    return () => {
+      formValuesChangeEmitter.off('onFieldReset', listener);
+    };
+  }, [formValuesChangeEmitter, onResetFieldValue]);
   const applyValue = React.useCallback((nextValue: any) => onChange?.(normalizeSubTableRows(nextValue)), [onChange]);
   const getLatestValue = React.useCallback(() => normalizeSubTableRows(getCurrentValue()), [getCurrentValue]);
   useEffect(() => {
@@ -125,7 +137,7 @@ export function SubTableField(props) {
         return t('Total {{count}} items', { count: total });
       },
     } as any;
-  }, [currentPage, currentPageSize, currentValue.length]);
+  }, [currentPage, currentPageSize, currentValue.length, t]);
 
   // 新增一行
   const handleAdd = () => {

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

@@ -15,6 +15,7 @@ import {
   SubTableColumnModel,
   getLatestSubTableRowRecord,
   buildRowPathFromFieldIndex,
+  buildSubTableColumnNamePath,
   isSubTableColumnConfiguredReadPretty,
   getSubTableColumnTitleField,
   getSubTableColumnReadPrettyFieldProps,
@@ -47,6 +48,17 @@ describe('SubTableColumnModel row record helpers', () => {
     expect(buildRowPathFromFieldIndex(['users:1', 'roles:2'])).toEqual(['users', 1, 'roles', 2]);
   });
 
+  it('builds absolute form item paths for nested sub-table columns', () => {
+    expect(buildSubTableColumnNamePath(['roles'], 0, 'name', ['roles:0'])).toEqual(['roles', 0, 'name']);
+    expect(buildSubTableColumnNamePath(['orders', 'lines'], 1, 'product', ['orders:0', 'lines:1'])).toEqual([
+      'orders',
+      0,
+      'lines',
+      1,
+      'product',
+    ]);
+  });
+
   it('prefers the latest row value from form over the fallback record', () => {
     const form = {
       getFieldValue: vi.fn((path: any) => {