@nocobase/client-v2 2.1.0-beta.25 → 2.1.0-beta.26

package/src/flow/models/actions/AssociationActionUtils.ts

@@ -0,0 +1,90 @@
+/**
+ * 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 type { FlowModelContext } from '@nocobase/flow-engine';
+
+export const getAssociationBlockResourceSettings = (ctx: FlowModelContext | any) => {
+  const blockModel = ctx?.blockModel || ctx?.model?.context?.blockModel;
+  return (
+    blockModel?.getResourceSettingsInitParams?.() ||
+    blockModel?.getStepParams?.('resourceSettings', 'init') ||
+    ctx?.model?.getStepParams?.('resourceSettings', 'init')
+  );
+};
+
+export const isAssociationBlockContext = (ctx: FlowModelContext | any) => {
+  return !!getAssociationBlockResourceSettings(ctx)?.associationName;
+};
+
+export const getAssociationTargetResourceSettings = (ctx: FlowModelContext | any) => {
+  const resourceSettings = getAssociationBlockResourceSettings(ctx);
+  const association = ctx?.blockModel?.association || ctx?.model?.context?.blockModel?.association;
+  const targetCollection = association?.targetCollection;
+
+  return {
+    dataSourceKey: targetCollection?.dataSourceKey || resourceSettings?.dataSourceKey,
+    collectionName: targetCollection?.name || association?.target || resourceSettings?.collectionName,
+  };
+};
+
+const callAssociationResourceAction = async (resource: any, action: 'add' | 'remove', values: any[]) => {
+  if (typeof resource?.[action] === 'function') {
+    return await resource[action]({ values });
+  }
+
+  return await resource?.runAction?.(action, {
+    data: values,
+  });
+};
+
+export const applyDisassociateAction = async (ctx: FlowModelContext | any) => {
+  const resource = ctx?.blockModel?.resource || ctx?.resource;
+  const collection = ctx?.blockModel?.collection || ctx?.collection;
+
+  if (!isAssociationBlockContext(ctx)) {
+    ctx.message?.error?.(ctx.t('No association block selected'));
+    return;
+  }
+  if (!resource) {
+    ctx.message?.error?.(ctx.t('No resource selected for disassociation'));
+    return;
+  }
+  if (!ctx.record) {
+    ctx.message?.error?.(ctx.t('No record selected for disassociation'));
+    return;
+  }
+
+  const filterByTk = collection?.getFilterByTK?.(ctx.record);
+  await callAssociationResourceAction(resource, 'remove', [filterByTk]);
+  await resource.refresh?.();
+  ctx.message?.success?.(ctx.t('Record disassociated successfully'));
+};
+
+export const applyAssociateAction = async (ctx: FlowModelContext | any, selectedRows: any[]) => {
+  const resource = ctx?.blockModel?.resource || ctx?.resource;
+  const collection = ctx?.blockModel?.collection || ctx?.collection;
+
+  if (!isAssociationBlockContext(ctx)) {
+    ctx.message?.error?.(ctx.t('No association block selected'));
+    return;
+  }
+  if (!resource) {
+    ctx.message?.error?.(ctx.t('No resource selected for association'));
+    return;
+  }
+  if (!selectedRows?.length) {
+    ctx.message?.warning?.(ctx.t('Please select at least one record'));
+    return;
+  }
+
+  const values = selectedRows.map((row) => collection?.getFilterByTK?.(row) ?? row).filter((value) => value != null);
+  await callAssociationResourceAction(resource, 'add', values);
+  await resource.refresh?.();
+  ctx.message?.success?.(ctx.t('Record associated successfully'));
+};

package/src/flow/models/actions/DisassociateActionModel.tsx

@@ -0,0 +1,57 @@
+/**
+ * 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 { tExpr } from '@nocobase/flow-engine';
+import type { ButtonProps } from 'antd';
+import { ActionModel, ActionSceneEnum } from '../base';
+import { applyDisassociateAction, isAssociationBlockContext } from './AssociationActionUtils';
+
+export class DisassociateActionModel extends ActionModel {
+  static scene = ActionSceneEnum.record;
+  static capabilityActionName = 'update';
+
+  defaultProps: ButtonProps = {
+    type: 'link',
+    title: tExpr('Disassociate'),
+    icon: 'DisconnectOutlined',
+  };
+
+  getAclActionName() {
+    return 'update';
+  }
+}
+
+DisassociateActionModel.define({
+  label: tExpr('Disassociate'),
+  sort: 65,
+  hide(ctx) {
+    return !isAssociationBlockContext(ctx);
+  },
+});
+
+DisassociateActionModel.registerFlow({
+  key: 'disassociateSettings',
+  title: tExpr('Disassociate settings'),
+  on: 'click',
+  steps: {
+    confirm: {
+      use: 'confirm',
+      defaultParams: {
+        enable: true,
+        title: tExpr('Disassociate record'),
+        content: tExpr('Are you sure you want to disassociate it?'),
+      },
+    },
+    disassociate: {
+      async handler(ctx) {
+        await applyDisassociateAction(ctx);
+      },
+    },
+  },
+});

package/src/flow/models/actions/__tests__/AssociationActionModel.test.ts

@@ -0,0 +1,250 @@
+/**
+ * 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 { BaseRecordResource, FlowEngine } from '@nocobase/flow-engine';
+import {
+  applyDisassociateAction,
+  ActionModel,
+  applyAssociateAction,
+  AssociateActionModel,
+  CollectionActionGroupModel,
+  DisassociateActionModel,
+  getAssociationTargetResourceSettings,
+  PopupActionModel,
+  RecordActionGroupModel,
+} from '../../..';
+
+class TestAssociationResource<T = any> extends BaseRecordResource<T> {
+  async refresh(): Promise<void> {}
+}
+
+const createEngine = () => {
+  const engine = new FlowEngine();
+  engine.registerModels({
+    ActionModel,
+    AssociateActionModel,
+    DisassociateActionModel,
+    PopupActionModel,
+    CollectionActionGroupModel,
+    RecordActionGroupModel,
+  });
+  return engine;
+};
+
+const createContext = (engine: FlowEngine, resourceSettingsInit: any) => {
+  const collection = {
+    options: {
+      availableActions: ['list', 'update'],
+    },
+    getFilterByTK: vi.fn((record) => record.id),
+  };
+  return {
+    engine,
+    collection,
+    blockModel: {
+      collection,
+      getResourceSettingsInitParams: () => resourceSettingsInit,
+    },
+  } as any;
+};
+
+describe('association action models', () => {
+  it('uses update permission for association operations', () => {
+    expect(AssociateActionModel.prototype.getAclActionName.call({})).toBe('update');
+    expect(DisassociateActionModel.prototype.getAclActionName.call({})).toBe('update');
+    expect(AssociateActionModel.capabilityActionName).toBe('update');
+    expect(DisassociateActionModel.capabilityActionName).toBe('update');
+  });
+
+  it('uses association target collection for selector table blocks', () => {
+    const ctx: any = {
+      blockModel: {
+        association: {
+          target: 'transports',
+          targetCollection: {
+            name: 'transports',
+            dataSourceKey: 'main',
+          },
+        },
+        getResourceSettingsInitParams: () => ({
+          dataSourceKey: 'main',
+          collectionName: 'orders',
+          associationName: 'products.transports',
+        }),
+      },
+    };
+
+    expect(getAssociationTargetResourceSettings(ctx)).toEqual({
+      dataSourceKey: 'main',
+      collectionName: 'transports',
+    });
+  });
+
+  it('shows Associate only in collection actions of association blocks', async () => {
+    const engine = createEngine();
+
+    const relationItems = await CollectionActionGroupModel.defineChildren(
+      createContext(engine, {
+        dataSourceKey: 'main',
+        collectionName: 'orders',
+        associationName: 'products.o2m_orders',
+      }),
+    );
+    const normalItems = await CollectionActionGroupModel.defineChildren(
+      createContext(engine, {
+        dataSourceKey: 'main',
+        collectionName: 'orders',
+      }),
+    );
+
+    expect(relationItems.map((item: any) => item.useModel)).toContain('AssociateActionModel');
+    expect(relationItems.map((item: any) => item.useModel)).not.toContain('DisassociateActionModel');
+    expect(normalItems.map((item: any) => item.useModel)).not.toContain('AssociateActionModel');
+  });
+
+  it('shows Disassociate only in record actions of association blocks', async () => {
+    const engine = createEngine();
+
+    const relationItems = await RecordActionGroupModel.defineChildren(
+      createContext(engine, {
+        dataSourceKey: 'main',
+        collectionName: 'orders',
+        associationName: 'products.o2m_orders',
+      }),
+    );
+    const normalItems = await RecordActionGroupModel.defineChildren(
+      createContext(engine, {
+        dataSourceKey: 'main',
+        collectionName: 'orders',
+      }),
+    );
+
+    expect(relationItems.map((item: any) => item.useModel)).toContain('DisassociateActionModel');
+    expect(relationItems.map((item: any) => item.useModel)).not.toContain('AssociateActionModel');
+    expect(normalItems.map((item: any) => item.useModel)).not.toContain('DisassociateActionModel');
+  });
+
+  it('disassociates the current record through association resource remove action', async () => {
+    const resource = {
+      runAction: vi.fn(async () => ({})),
+      refresh: vi.fn(async () => {}),
+    };
+    const collection = {
+      getFilterByTK: vi.fn(() => 12),
+    };
+    const ctx: any = {
+      blockModel: {
+        collection,
+        resource,
+        getResourceSettingsInitParams: () => ({
+          dataSourceKey: 'main',
+          collectionName: 'orders',
+          associationName: 'products.o2m_orders',
+        }),
+      },
+      record: {
+        id: 12,
+      },
+      message: {
+        success: vi.fn(),
+        error: vi.fn(),
+      },
+      t: (value: string) => value,
+    };
+
+    await applyDisassociateAction(ctx);
+
+    expect(collection.getFilterByTK).toHaveBeenCalledWith(ctx.record);
+    expect(resource.runAction).toHaveBeenCalledWith('remove', {
+      data: [12],
+    });
+    expect(resource.refresh).toHaveBeenCalled();
+    expect(ctx.message.success).toHaveBeenCalledWith('Record disassociated successfully');
+  });
+
+  it('associates selected records through association resource add action', async () => {
+    const resource = {
+      runAction: vi.fn(async () => ({})),
+      refresh: vi.fn(async () => {}),
+    };
+    const collection = {
+      getFilterByTK: vi.fn((record) => record.id),
+    };
+    const ctx: any = {
+      blockModel: {
+        collection,
+        resource,
+        getResourceSettingsInitParams: () => ({
+          dataSourceKey: 'main',
+          collectionName: 'orders',
+          associationName: 'products.o2m_orders',
+        }),
+      },
+      message: {
+        success: vi.fn(),
+        warning: vi.fn(),
+        error: vi.fn(),
+      },
+      t: (value: string) => value,
+    };
+
+    await applyAssociateAction(ctx, [{ id: 11 }, { id: 12 }]);
+
+    expect(collection.getFilterByTK).toHaveBeenCalledWith({ id: 11 });
+    expect(collection.getFilterByTK).toHaveBeenCalledWith({ id: 12 });
+    expect(resource.runAction).toHaveBeenCalledWith('add', {
+      data: [11, 12],
+    });
+    expect(resource.refresh).toHaveBeenCalled();
+    expect(ctx.message.success).toHaveBeenCalledWith('Record associated successfully');
+  });
+
+  it('uses nested association resource url when adding associated records', async () => {
+    const engine = createEngine();
+    const resource = engine.createResource(TestAssociationResource);
+    const api = {
+      request: vi.fn().mockResolvedValue({ data: { data: {} } }),
+    };
+    resource.setAPIClient(api as any);
+    resource.setResourceName('products.o2m_orders');
+    resource.setSourceId('362872646860800');
+
+    const ctx: any = {
+      blockModel: {
+        collection: {
+          getFilterByTK: vi.fn((record) => record.id),
+        },
+        resource,
+        getResourceSettingsInitParams: () => ({
+          dataSourceKey: 'main',
+          collectionName: 'orders',
+          associationName: 'products.o2m_orders',
+          sourceId: '362872646860800',
+        }),
+      },
+      message: {
+        success: vi.fn(),
+        warning: vi.fn(),
+        error: vi.fn(),
+      },
+      t: (value: string) => value,
+    };
+
+    await applyAssociateAction(ctx, [{ id: 11 }]);
+
+    expect(api.request).toHaveBeenCalledWith(
+      expect.objectContaining({
+        method: 'post',
+        url: 'products/362872646860800/o2m_orders:add',
+        data: [11],
+      }),
+    );
+  });
+});

package/src/flow/models/actions/index.ts

@@ -8,8 +8,11 @@
  */
 
 export * from './AddNewActionModel';
+export * from './AssociateActionModel';
+export * from './AssociationActionUtils';
 export * from './BulkDeleteActionModel';
 export * from './DeleteActionModel';
+export * from './DisassociateActionModel';
 export * from './EditActionModel';
 export * from './FilterActionModel';
 export * from './JSActionModel';

package/src/flow/models/base/GridModel.tsx

@@ -118,6 +118,14 @@ export class GridModel<T extends { subModels: { items: FlowModel[] } } = Default
   private dragState?: DragState;
   private _memoItemFlowSettings?: Exclude<FlowModelRendererProps['showFlowSettings'], boolean>;
 
+  onInit(options) {
+    super.onInit(options);
+    // 历史数据里可能残留拖拽高亮框，初始化时立即清理，避免刷新页面后常驻显示。
+    if (this.props.dragOverlayRect) {
+      this.setProps('dragOverlayRect', null);
+    }
+  }
+
   private updateDragPointerPosition = (event: Event) => {
     if (!this.dragState) {
       return;
@@ -243,6 +251,12 @@ export class GridModel<T extends { subModels: { items: FlowModel[] } } = Default
     return this.normalizeLayoutFromSource();
   }
 
+  serialize(): Record<string, any> {
+    const data = super.serialize();
+    data.props = _.omit(data.props, ['dragOverlayRect']);
+    return data;
+  }
+
   syncLayoutProps(layout: GridLayoutV2) {
     const projection = projectLayoutToLegacyRows(layout);
     this.setProps('layout', layout);
@@ -801,11 +815,17 @@ export class GridModel<T extends { subModels: { items: FlowModel[] } } = Default
     this.setProps('dragOverlayRect', null);
   }
 
-  handleDragEnd(_event: DragEndEvent) {
+  handleDragEnd(event: DragEndEvent) {
     if (!this.dragState) {
       return;
     }
 
+    const finalPoint = this.computePointerPosition(event);
+    if (finalPoint) {
+      const finalSlot = this.resolveDragSlot(finalPoint);
+      this.applyPreview(finalSlot);
+    }
+
     const previewLayout = this.dragState.previewLayout;
     if (previewLayout) {
       if (previewLayout.layout) {

package/src/flow/models/base/__tests__/GridModel.dragSnapshotContainer.test.ts

@@ -283,4 +283,102 @@ describe('GridModel drag snapshot container', () => {
       type: 'column',
     });
   });
+
+  it('clears persisted drag overlay on init', () => {
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-hidden-stale-overlay',
+      props: {
+        dragOverlayRect: {
+          top: 10,
+          left: 20,
+          width: 100,
+          height: 40,
+          type: 'column',
+        },
+      },
+      structure: {} as any,
+    });
+
+    expect(model.props.dragOverlayRect).toBeNull();
+  });
+
+  it('omits drag overlay rect from serialized props', () => {
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-serialize-overlay',
+      props: {
+        rowGap: 24,
+        dragOverlayRect: {
+          top: 10,
+          left: 20,
+          width: 100,
+          height: 40,
+          type: 'column',
+        },
+      },
+      structure: {} as any,
+    });
+
+    const serialized = model.serialize();
+
+    expect(serialized.props).toMatchObject({ rowGap: 24 });
+    expect(serialized.props).not.toHaveProperty('dragOverlayRect');
+  });
+
+  it('recomputes the final slot from drag end position before saving layout', () => {
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-drag-final-slot',
+      props: {},
+      structure: {} as any,
+    });
+    const applyPreview = vi.fn((slot) => {
+      (model as any).dragState.previewLayout = slot
+        ? {
+            rows: { 'row-final': [['item-1']] },
+            sizes: { 'row-final': [24] },
+          }
+        : undefined;
+    });
+    const resolveDragSlot = vi.fn(() => ({
+      type: 'row-gap',
+      targetRowId: 'row-final',
+      position: 'below',
+      rect: { top: 200, left: 20, width: 440, height: 32 },
+    }));
+    const saveGridLayout = vi.fn();
+    const syncLayoutProps = vi.fn();
+    const finishDrag = vi.fn();
+
+    (model as any).applyPreview = applyPreview;
+    (model as any).resolveDragSlot = resolveDragSlot;
+    (model as any).saveGridLayout = saveGridLayout;
+    (model as any).syncLayoutProps = syncLayoutProps;
+    (model as any).finishDrag = finishDrag;
+    (model as any).dragState = {
+      sourceUid: 'item-1',
+      snapshot: { rows: {}, sizes: {} },
+      slots: [],
+      containerEl: null,
+      containerRect: { top: 0, left: 0, width: 0, height: 0 },
+      pointerOrigin: { x: 100, y: 100 },
+      activeSlotKey: null,
+      previewLayout: undefined,
+      refreshTimer: null,
+      generatedIds: new Map(),
+    };
+
+    model.handleDragEnd({
+      delta: { x: 30, y: 220 },
+    } as any);
+
+    expect(resolveDragSlot).toHaveBeenCalledWith({ x: 130, y: 320 });
+    expect(applyPreview).toHaveBeenCalledOnce();
+    expect(saveGridLayout).toHaveBeenCalledWith({
+      rows: { 'row-final': [['item-1']] },
+      sizes: { 'row-final': [24] },
+    });
+    expect(finishDrag).toHaveBeenCalledOnce();
+  });
 });

package/src/flow/models/blocks/details/DetailsItemModel.tsx

@@ -379,6 +379,9 @@ DetailsItemModel.registerFlow({
   steps: {
     aclCheckRefresh: {
       use: 'aclCheckRefresh',
+      defaultParams: {
+        strategy: 'formItem',
+      },
     },
   },
 });

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

@@ -38,7 +38,8 @@ import {
 import { MobileLazySelect } from '../mobile-components/MobileLazySelect';
 import { BlockSceneEnum } from '../../base/BlockModel';
 import { ActionWithoutPermission } from '../../base/ActionModel';
-import { EditFormModel } from '../../blocks/form/EditFormModel';
+import { EditFormModel } from '../../blocks';
+import { hasAncestorModel } from './recordSelectSettingsUtils';
 
 function isPlainObject(val: unknown): val is Record<string, any> {
   return !!val && typeof val === 'object' && !Array.isArray(val);
@@ -818,6 +819,9 @@ RecordSelectFieldModel.registerFlow({
         if (ctx?.blockModel?.constructor?.scene === BlockSceneEnum.filter) {
           return true;
         }
+        if (hasAncestorModel(ctx?.model, ['SubTableColumnModel', 'SubTableFieldModel'])) {
+          return true;
+        }
         return false;
       },
       defaultParams: {

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

@@ -194,7 +194,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 +204,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 +241,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 +347,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 +365,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 +434,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', {
@@ -607,6 +622,7 @@ export class SubTableColumnModel<
           rowFork={rowFork}
           memoKey={rowForkKey}
           width={this.props.width}
+          commitOnChange={this.hasFormulaColumn}
         />
       );
     };

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