@nocobase/client-v2 2.1.0-alpha.35 → 2.1.0-alpha.36

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

@@ -8,7 +8,18 @@
  */
 
 import { describe, expect, it, vi } from 'vitest';
-import { getLatestSubTableRowRecord, buildRowPathFromFieldIndex } from '../SubTableColumnModel';
+import { FlowEngine } from '@nocobase/flow-engine';
+import { DisplayTitleFieldModel } from '../../../DisplayTitleFieldModel';
+import { titleField } from '../../../../../actions/titleField';
+import {
+  SubTableColumnModel,
+  getLatestSubTableRowRecord,
+  buildRowPathFromFieldIndex,
+  isSubTableColumnConfiguredReadPretty,
+  getSubTableColumnTitleField,
+  getSubTableColumnReadPrettyFieldProps,
+  isSubTableColumnReadPretty,
+} from '../SubTableColumnModel';
 
 describe('SubTableColumnModel row record helpers', () => {
   it('builds the row path from fieldIndex entries', () => {
@@ -39,4 +50,162 @@ describe('SubTableColumnModel row record helpers', () => {
 
     expect(getLatestSubTableRowRecord(form, ['roles:0'], fallback)).toBe(fallback);
   });
+
+  it('treats a display-only column pattern as read-pretty mode', () => {
+    expect(isSubTableColumnReadPretty({ props: { pattern: 'readPretty' } })).toBe(true);
+    expect(isSubTableColumnReadPretty({ props: { readPretty: true } })).toBe(true);
+    expect(isSubTableColumnReadPretty({ props: { pattern: 'editable' } })).toBe(false);
+  });
+
+  it('treats a saved display-only column pattern as read-pretty during beforeRender restore', () => {
+    expect(
+      isSubTableColumnConfiguredReadPretty({
+        props: {},
+        getStepParams: vi.fn(() => ({ pattern: 'readPretty' })),
+      }),
+    ).toBe(true);
+  });
+
+  it('passes the association title field to read-pretty cell field models', () => {
+    const relationValue = { id: 1, name: 'Alice' };
+    expect(
+      getSubTableColumnReadPrettyFieldProps(
+        {
+          props: {},
+          collectionField: {
+            targetCollectionTitleFieldName: 'name',
+          },
+        },
+        relationValue,
+      ),
+    ).toEqual({
+      value: relationValue,
+      titleField: 'name',
+    });
+  });
+
+  it('resolves the saved title field before the target collection default', () => {
+    expect(
+      getSubTableColumnTitleField({
+        props: { titleField: 'nickname' },
+        subModels: {
+          field: {
+            props: {
+              titleField: 'name',
+            },
+          },
+        },
+        collectionField: {
+          targetCollectionTitleFieldName: 'title',
+        },
+      }),
+    ).toBe('nickname');
+  });
+
+  it('applies the configured title field to a display-only association column', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ SubTableColumnModel, DisplayTitleFieldModel });
+    engine.registerActions({ titleField });
+
+    const rolesField = {
+      name: 'roles',
+      title: 'Roles',
+      collection: { name: 'users' },
+      targetCollectionTitleFieldName: 'name',
+      targetCollection: {
+        name: 'roles',
+        getField: vi.fn((name: string) => ({
+          name,
+          getComponentProps: () => ({ componentField: name }),
+        })),
+      },
+      isAssociationField: () => true,
+      getComponentProps: () => ({}),
+    };
+
+    const column = engine.createModel<SubTableColumnModel>({
+      use: SubTableColumnModel,
+      uid: 'roles-display-column-title-field',
+      stepParams: {
+        fieldSettings: {
+          init: {
+            dataSourceKey: 'main',
+            collectionName: 'users',
+            fieldPath: 'roles',
+          },
+        },
+        subTableColumnSettings: {
+          pattern: {
+            pattern: 'readPretty',
+          },
+          fieldNames: {
+            label: 'nickname',
+          },
+        },
+      },
+    });
+    column.context.defineProperty('collectionField', { value: rolesField });
+    column.context.defineProperty('blockModel', { value: { addAppends: vi.fn() } });
+    column.setSubModel('field', {
+      use: DisplayTitleFieldModel,
+      uid: 'roles-display-field-title-field',
+    });
+
+    await column.dispatchEvent('beforeRender');
+
+    expect(column.props.titleField).toBe('nickname');
+    expect(column.props.componentField).toBe('nickname');
+  });
+
+  it('applies saved display field settings to the inner field during column beforeRender', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ SubTableColumnModel, DisplayTitleFieldModel });
+
+    const rolesCollection = {
+      name: 'roles',
+      filterTargetKey: 'id',
+    };
+    const rolesField = {
+      name: 'roles',
+      title: 'Roles',
+      collection: { name: 'users' },
+      targetCollection: rolesCollection,
+      isAssociationField: () => true,
+      getComponentProps: () => ({ titleField: 'name' }),
+    };
+
+    const column = engine.createModel<SubTableColumnModel>({
+      use: SubTableColumnModel,
+      uid: 'roles-title-column',
+      stepParams: {
+        fieldSettings: {
+          init: {
+            dataSourceKey: 'main',
+            collectionName: 'users',
+            fieldPath: 'roles',
+          },
+        },
+      },
+    });
+    column.context.defineProperty('collectionField', { value: rolesField });
+    column.context.defineProperty('blockModel', { value: { addAppends: vi.fn() } });
+
+    const field = column.setSubModel('field', {
+      use: DisplayTitleFieldModel,
+      uid: 'roles-title-display',
+      stepParams: {
+        displayFieldSettings: {
+          clickToOpen: {
+            clickToOpen: true,
+          },
+        },
+      },
+    }) as DisplayTitleFieldModel;
+
+    expect(field.props.clickToOpen).toBeUndefined();
+
+    await column.dispatchEvent('beforeRender');
+
+    expect(field.props.clickToOpen).toBe(true);
+  });
 });

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

@@ -8,6 +8,7 @@
  */
 
 import { CollectionField, tExpr } from '@nocobase/flow-engine';
+import { uid } from '@formily/shared';
 import { Tag } from 'antd';
 import { castArray, get } from 'lodash';
 import React from 'react';
@@ -38,9 +39,49 @@ const hasAssociationPathName = (parent: unknown): parent is { associationPathNam
 
 const hasUsableSourceId = (sourceId: unknown) => sourceId !== undefined && sourceId !== null && String(sourceId) !== '';
 
+function getParentAssociationField(model: FieldModel): CollectionField | null {
+  const parentCollectionField =
+    (model.parent as any)?.context?.collectionField || (model.parent as any)?.collectionField;
+  return parentCollectionField?.isAssociationField?.() ? parentCollectionField : null;
+}
+
+export function applyClickToOpenProps(ctx: any, params: any) {
+  const collectionField = ctx.collectionField?.isAssociationField?.()
+    ? ctx.collectionField
+    : ctx.model?.parent?.context?.collectionField || ctx.collectionField;
+  ctx.model.setProps({
+    clickToOpen: params.clickToOpen,
+    ...(collectionField?.getComponentProps?.() || {}),
+  });
+}
+
+export async function refreshClickToOpenRuntime(ctx: any) {
+  ctx.model.invalidateFlowCache?.('beforeRender', true);
+  await ctx.model.rerender?.();
+
+  const parent = ctx.model.parent;
+  if (!parent) {
+    return;
+  }
+  parent.invalidateFlowCache?.('beforeRender', true);
+  parent.setProps?.({
+    __displayFieldRefreshKey: uid(),
+  });
+  await parent.rerender?.();
+}
+
+export async function applyClickToOpenSetting(ctx: any, params: any) {
+  applyClickToOpenProps(ctx, params);
+  await refreshClickToOpenRuntime(ctx);
+}
+
 export class ClickableFieldModel extends FieldModel {
   get collectionField(): CollectionField {
-    return this.context.collectionField;
+    const collectionField = this.context.collectionField;
+    if (collectionField?.isAssociationField?.()) {
+      return collectionField;
+    }
+    return getParentAssociationField(this) || collectionField;
   }
 
   /**
@@ -294,8 +335,11 @@ ClickableFieldModel.registerFlow({
       hideInSettings(ctx) {
         return ctx.disableFieldClickToOpen;
       },
+      async afterParamsSave(ctx, params) {
+        await applyClickToOpenSetting(ctx, params);
+      },
       handler(ctx, params) {
-        ctx.model.setProps({ clickToOpen: params.clickToOpen, ...ctx.collectionField.getComponentProps() });
+        applyClickToOpenProps(ctx, params);
       },
     },
   },

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

@@ -12,12 +12,20 @@ import { Typography } from 'antd';
 import { castArray } from 'lodash';
 import { css } from '@emotion/css';
 import React from 'react';
-import { FieldModel } from '../base';
-import { hasDisplayValue, normalizeDisplayValue } from '../utils/displayValueUtils';
+import { openViewFlow } from '../../flows/openViewFlow';
+import { applyClickToOpenProps, applyClickToOpenSetting, ClickableFieldModel } from './ClickableFieldModel';
 
-export class DisplayTitleFieldModel extends FieldModel {
+function isParentAssociationField(ctx: any) {
+  return !!ctx.model?.parent?.context?.collectionField?.isAssociationField?.();
+}
+
+export class DisplayTitleFieldModel extends ClickableFieldModel {
   get collectionField(): CollectionField {
-    return this.context.collectionField;
+    const collectionField = this.context.collectionField;
+    if (collectionField?.isAssociationField?.()) {
+      return collectionField;
+    }
+    return (this.parent as any)?.context?.collectionField || collectionField;
   }
 
   renderComponent(value) {
@@ -56,20 +64,13 @@ export class DisplayTitleFieldModel extends FieldModel {
     };
     if (titleField) {
       const result = castArray(value).flatMap((v, idx) => {
-        const titleCollectionField =
-          this.context.collectionField?.targetCollection?.getField?.(titleField) || this.context.collectionField;
-        const displayValue = normalizeDisplayValue(v?.[titleField], { collectionField: titleCollectionField });
-        const result = this.renderComponent(displayValue);
-        const node = hasDisplayValue(displayValue) ? result : 'N/A';
-        return idx === 0 ? [node] : [<span key={`sep-${idx}`}>, </span>, node];
+        const node = this.renderInDisplayStyle(v?.[titleField], v, Array.isArray(value));
+        const keyedNode = React.isValidElement(node) ? React.cloneElement(node, { key: `item-${idx}` }) : node;
+        return idx === 0 ? [keyedNode] : [<span key={`sep-${idx}`}>, </span>, keyedNode];
       });
       return <Typography.Text {...typographyProps}>{result}</Typography.Text>;
     } else {
-      const textContent = (
-        <Typography.Text {...typographyProps}>
-          {this.renderComponent(normalizeDisplayValue(value, { collectionField: this.context.collectionField }))}
-        </Typography.Text>
-      );
+      const textContent = <Typography.Text {...typographyProps}>{this.renderInDisplayStyle(value)}</Typography.Text>;
       return textContent;
     }
   }
@@ -83,5 +84,29 @@ DisplayTitleFieldModel.registerFlow({
     overflowMode: {
       use: 'overflowMode',
     },
+    clickToOpen: {
+      title: tExpr('Enable click-to-open'),
+      uiMode: { type: 'switch', key: 'clickToOpen' },
+      defaultParams: (ctx) => {
+        if (ctx.disableFieldClickToOpen) {
+          return {
+            clickToOpen: false,
+          };
+        }
+        return {
+          clickToOpen: ctx.collectionField?.isAssociationField?.() || isParentAssociationField(ctx),
+        };
+      },
+      hideInSettings(ctx) {
+        return ctx.disableFieldClickToOpen;
+      },
+      async afterParamsSave(ctx, params) {
+        await applyClickToOpenSetting(ctx, params);
+      },
+      handler(ctx, params) {
+        applyClickToOpenProps(ctx, params);
+      },
+    },
   },
 });
+DisplayTitleFieldModel.registerFlow(openViewFlow);

package/src/flow/models/fields/__tests__/ClickableFieldModel.test.ts

@@ -8,9 +8,11 @@
  */
 
 import { describe, expect, it, vi } from 'vitest';
-import { FlowEngine } from '@nocobase/flow-engine';
-import { render, screen } from '@testing-library/react';
+import { FlowEngine, FlowModel } from '@nocobase/flow-engine';
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { ClickableFieldModel } from '../ClickableFieldModel';
+import { DisplayTitleFieldModel } from '../DisplayTitleFieldModel';
 import { DisplayTextFieldModel } from '../DisplayTextFieldModel';
 
 function createRolesFieldModel(sourceRecord: Record<string, any>) {
@@ -87,6 +89,133 @@ describe('ClickableFieldModel', () => {
     );
   });
 
+  it('uses the parent association field when the display model is bound to the title field', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ ClickableFieldModel });
+
+    const usersCollection = {
+      name: 'users',
+      filterTargetKey: 'id',
+    };
+    const rolesCollection = {
+      name: 'roles',
+      filterTargetKey: 'name',
+    };
+    const rolesField = {
+      name: 'roles',
+      target: 'roles',
+      targetKey: 'name',
+      type: 'belongsToMany',
+      interface: 'm2m',
+      collection: usersCollection,
+      targetCollection: rolesCollection,
+      isAssociationField: () => true,
+    };
+    const titleField = {
+      name: 'title',
+      collection: rolesCollection,
+      isAssociationField: () => false,
+    };
+
+    const parent = engine.createModel<FlowModel>({
+      use: FlowModel,
+      uid: 'roles-column',
+    });
+    parent.context.defineProperty('collectionField', { value: rolesField });
+
+    const model = engine.createModel<ClickableFieldModel>({
+      use: ClickableFieldModel,
+      uid: 'roles-title-display',
+    });
+    model.setParent(parent);
+    model.context.defineProperty('collectionField', { value: titleField });
+    model.context.defineProperty('blockModel', { value: { collection: usersCollection } });
+    model.context.defineProperty('record', { value: { id: 1 } });
+    const dispatchEvent = vi.spyOn(model, 'dispatchEvent').mockResolvedValue([]);
+    const event = { type: 'click' };
+
+    model.onClick(event, { name: 'admin', title: 'Admin' });
+
+    expect(dispatchEvent).toHaveBeenCalledWith(
+      'click',
+      {
+        event,
+        filterByTk: 'admin',
+        collectionName: 'users',
+        associationName: 'users.roles',
+        sourceId: 1,
+      },
+      { debounce: true },
+    );
+  });
+
+  it('renders title display values as links when click-to-open is enabled', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ DisplayTitleFieldModel });
+
+    const usersCollection = {
+      name: 'users',
+      filterTargetKey: 'id',
+    };
+    const rolesCollection = {
+      name: 'roles',
+      filterTargetKey: 'name',
+    };
+    const rolesField = {
+      name: 'roles',
+      target: 'roles',
+      targetKey: 'name',
+      type: 'belongsToMany',
+      interface: 'm2m',
+      collection: usersCollection,
+      targetCollection: rolesCollection,
+      isAssociationField: () => true,
+    };
+    const titleField = {
+      name: 'title',
+      collection: rolesCollection,
+      isAssociationField: () => false,
+    };
+
+    const parent = engine.createModel<FlowModel>({
+      use: FlowModel,
+      uid: 'roles-title-column',
+    });
+    parent.context.defineProperty('collectionField', { value: rolesField });
+
+    const model = engine.createModel<DisplayTitleFieldModel>({
+      use: DisplayTitleFieldModel,
+      uid: 'roles-title-display-link',
+      props: {
+        clickToOpen: true,
+        titleField: 'name',
+        value: { name: 'admin', title: 'Admin' },
+      },
+    });
+    model.setParent(parent);
+    model.context.defineProperty('collectionField', { value: titleField });
+    model.context.defineProperty('blockModel', { value: { collection: usersCollection } });
+    model.context.defineProperty('record', { value: { id: 1 } });
+    const dispatchEvent = vi.spyOn(model, 'dispatchEvent').mockResolvedValue([]);
+
+    render(React.createElement(React.Fragment, null, model.render()));
+    const link = screen.getByText('admin').closest('a');
+    expect(link).toBeTruthy();
+
+    fireEvent.click(link);
+
+    expect(dispatchEvent).toHaveBeenCalledWith(
+      'click',
+      expect.objectContaining({
+        filterByTk: 'admin',
+        collectionName: 'users',
+        associationName: 'users.roles',
+        sourceId: 1,
+      }),
+      { debounce: true },
+    );
+  });
+
   it('renders object title field values by configured target title field', () => {
     const engine = new FlowEngine();
     engine.registerModels({ DisplayTextFieldModel });
@@ -107,4 +236,53 @@ describe('ClickableFieldModel', () => {
     expect(screen.getByText('S-001')).toBeInTheDocument();
     expect(screen.queryByText('Sales')).not.toBeInTheDocument();
   });
+
+  it('refreshes the parent column when title display click-to-open changes', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ DisplayTitleFieldModel });
+
+    const rolesField = {
+      name: 'roles',
+      target: 'roles',
+      collection: { name: 'users' },
+      targetCollection: { name: 'roles' },
+      isAssociationField: () => true,
+      getComponentProps: () => ({ titleField: 'name' }),
+    };
+    const titleField = {
+      name: 'title',
+      collection: { name: 'roles' },
+      isAssociationField: () => false,
+    };
+
+    const parent = engine.createModel<FlowModel>({
+      use: FlowModel,
+      uid: 'roles-title-column-refresh',
+    });
+    parent.context.defineProperty('collectionField', { value: rolesField });
+    const parentSetProps = vi.spyOn(parent, 'setProps');
+    const parentRerender = vi.spyOn(parent, 'rerender').mockResolvedValue(undefined);
+
+    const model = engine.createModel<DisplayTitleFieldModel>({
+      use: DisplayTitleFieldModel,
+      uid: 'roles-title-display-refresh',
+    });
+    model.setParent(parent);
+    model.context.defineProperty('collectionField', { value: titleField });
+    const modelRerender = vi.spyOn(model, 'rerender').mockResolvedValue(undefined);
+
+    const clickToOpenStep = model.getFlow('displayFieldSettings').steps.clickToOpen;
+
+    await clickToOpenStep.afterParamsSave(model.context as any, { clickToOpen: true }, { clickToOpen: false });
+
+    expect(model.props).toMatchObject({
+      clickToOpen: true,
+      titleField: 'name',
+    });
+    expect(modelRerender).toHaveBeenCalled();
+    expect(parentSetProps).toHaveBeenCalledWith({
+      __displayFieldRefreshKey: expect.any(String),
+    });
+    expect(parentRerender).toHaveBeenCalled();
+  });
 });

package/src/utils/globalDeps.ts

@@ -16,6 +16,7 @@ import * as formilyCore from '@formily/core';
 import * as formilyReact from '@formily/react';
 import * as formilyReactive from '@formily/reactive';
 import * as formilyShared from '@formily/shared';
+import * as nocobaseEvaluators from '@nocobase/evaluators/client';
 import * as nocobaseClientUtils from '@nocobase/utils/client';
 import { dayjs } from '@nocobase/utils/client';
 import * as nocobaseFlowEngine from '@nocobase/flow-engine';
@@ -71,6 +72,8 @@ export function defineGlobalDeps(requirejs: RequireJS) {
   requirejs.define('@nocobase/client-v2', () => nocobaseClientV2);
   requirejs.define('@nocobase/client-v2/client-v2', () => nocobaseClientV2);
   requirejs.define('@nocobase/flow-engine', () => nocobaseFlowEngine);
+  requirejs.define('@nocobase/evaluators', () => nocobaseEvaluators);
+  requirejs.define('@nocobase/evaluators/client', () => nocobaseEvaluators);
 
   // utils
   requirejs.define('ahooks', () => ahooks);