@nocobase/client-v2 2.1.0-beta.29 → 2.1.0-beta.32

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

@@ -8,7 +8,7 @@
  */
 
 import { FlowEngine } from '@nocobase/flow-engine';
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 import { TableColumnModel } from '../TableColumnModel';
 
 describe('TableColumnModel sorter settings', () => {
@@ -69,4 +69,99 @@ describe('TableColumnModel sorter settings', () => {
 
     expect(hidden).toBe(true);
   });
+
+  it('updates field component setting when association title field changes', async () => {
+    const engine = new FlowEngine();
+    const model = new TableColumnModel({ uid: 'table-column-title-field-component', flowEngine: engine } as any);
+    const titleFieldStep = model.getFlow('tableColumnSettings')?.steps?.fieldNames as any;
+    const setStepParams = vi.fn();
+    const setProps = vi.fn();
+    const dispatchEvent = vi.fn();
+    const targetCollectionField = {
+      getComponentProps: () => ({}),
+    };
+
+    await titleFieldStep.beforeParamsSave(
+      {
+        collectionField: {
+          isAssociationField: () => true,
+          targetCollection: {
+            name: 'departments',
+            getField: () => targetCollectionField,
+          },
+        },
+        model: {
+          collectionField: {
+            dataSourceKey: 'main',
+          },
+          constructor: {
+            getDefaultBindingByField: () => ({
+              modelName: 'DisplayTextFieldModel',
+            }),
+          },
+          subModels: {
+            field: {
+              use: 'DisplayTextFieldModel',
+              setStepParams,
+              dispatchEvent,
+            },
+          },
+          setStepParams,
+          setProps,
+        },
+      },
+      { label: 'code' },
+      { label: 'name' },
+    );
+
+    expect(setStepParams).toHaveBeenCalledWith('tableColumnSettings', 'model', { use: 'DisplayTextFieldModel' });
+  });
+
+  it('does not update field component setting when title field refresh fails', async () => {
+    const engine = new FlowEngine();
+    const model = new TableColumnModel({ uid: 'table-column-title-field-component-failed', flowEngine: engine } as any);
+    const titleFieldStep = model.getFlow('tableColumnSettings')?.steps?.fieldNames as any;
+    const setStepParams = vi.fn();
+    const setProps = vi.fn();
+    const targetCollectionField = {
+      getComponentProps: () => ({}),
+    };
+
+    await expect(
+      titleFieldStep.beforeParamsSave(
+        {
+          collectionField: {
+            isAssociationField: () => true,
+            targetCollection: {
+              name: 'departments',
+              getField: () => targetCollectionField,
+            },
+          },
+          model: {
+            collectionField: {
+              dataSourceKey: 'main',
+            },
+            constructor: {
+              getDefaultBindingByField: () => ({
+                modelName: 'DisplayTextFieldModel',
+              }),
+            },
+            subModels: {
+              field: {
+                use: 'DisplayTextFieldModel',
+                setStepParams: vi.fn(),
+                dispatchEvent: vi.fn().mockRejectedValue(new Error('beforeRender failed')),
+              },
+            },
+            setStepParams,
+            setProps,
+          },
+        },
+        { label: 'code' },
+        { label: 'name' },
+      ),
+    ).rejects.toThrow('beforeRender failed');
+
+    expect(setStepParams).not.toHaveBeenCalledWith('tableColumnSettings', 'model', expect.anything());
+  });
 });

package/src/flow/models/blocks/table/__tests__/TableSelectModel.test.ts

@@ -0,0 +1,41 @@
+/**
+ * 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 } from 'vitest';
+import '@nocobase/client';
+import { getAssociationSelectAssociatedRecordsFilter, getAssociationSelectForeignKeyFilter } from '../TableSelectModel';
+
+describe('TableSelectModel', () => {
+  it('filters out already associated o2m records in association select table', () => {
+    expect(
+      getAssociationSelectForeignKeyFilter({
+        interface: 'o2m',
+        name: 'orders',
+        foreignKey: 'f_y2quq75zibi',
+      }),
+    ).toEqual({
+      f_y2quq75zibi: {
+        $is: null,
+      },
+    });
+  });
+
+  it('filters out already associated m2m records in association select table', () => {
+    expect(
+      getAssociationSelectAssociatedRecordsFilter(
+        {
+          filterTargetKey: 'id',
+        },
+        [{ id: 11 }, { id: 12 }],
+      ),
+    ).toEqual({
+      'id.$ne': [11, 12],
+    });
+  });
+});

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

@@ -30,6 +30,7 @@ import { useTranslation } from 'react-i18next';
 import { buildRecordPickerPopupContextInputArgs, RecordPickerContent } from '../RecordPickerFieldModel';
 import { AssociationFieldModel } from '../AssociationFieldModel';
 import { adjustColumnOrder } from '../../../blocks/table/utils';
+import { isSubTableColumnFieldComponentContext } from '../SubTableFieldModel/SubTableColumnModel';
 import { EditFormContent } from './actions/PopupSubTableEditActionModel';
 import { QuickEditFormModel } from '../../../blocks/form/QuickEditFormModel';
 import { ActionWithoutPermission } from '../../../base/ActionModel';
@@ -901,6 +902,9 @@ PopupSubTableFieldModel.define({
 EditableItemModel.bindModelToInterface('PopupSubTableFieldModel', ['m2m', 'o2m', 'mbm'], {
   order: 300,
   when: (ctx, field) => {
+    if (isSubTableColumnFieldComponentContext(ctx)) {
+      return false;
+    }
     if (field.targetCollection) {
       return field.targetCollection.template !== 'file';
     }

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

@@ -36,6 +36,12 @@ import { FieldDeletePlaceholder, CustomWidth } from '../../../blocks/table/Table
 import { buildDynamicNamePath } from '../../../blocks/form/dynamicNamePath';
 import { getSubTableRowIdentity } from './rowIdentity';
 
+export const SUB_TABLE_COLUMN_FIELD_COMPONENT_CONTEXT = 'subTableColumn';
+
+export function isSubTableColumnFieldComponentContext(ctx) {
+  return (ctx?.model?.constructor as any)?.fieldComponentContext === SUB_TABLE_COLUMN_FIELD_COMPONENT_CONTEXT;
+}
+
 const SubTableRowRuleBinder: React.FC<{ model: any }> = ({ model }) => {
   React.useEffect(() => {
     const emitter = model?.flowEngine?.emitter;
@@ -401,6 +407,7 @@ export class SubTableColumnModel<
   T extends SubTableColumnModelStructure = SubTableColumnModelStructure,
 > extends EditableItemModel<T> {
   static renderMode = ModelRenderMode.RenderFunction;
+  static fieldComponentContext = SUB_TABLE_COLUMN_FIELD_COMPONENT_CONTEXT;
 
   renderHiddenInConfig() {
     return <FieldWithoutPermissionPlaceholder targetModel={this} />;

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';
 
@@ -389,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

@@ -14,6 +14,7 @@ import React from 'react';
 import { EllipsisWithTooltip } from '../../components/EllipsisWithTooltip';
 import { openViewFlow } from '../../flows/openViewFlow';
 import { FieldModel } from '../base/FieldModel';
+import { hasDisplayValue, normalizeDisplayValue } from '../utils/displayValueUtils';
 
 export function transformNestedData(inputData) {
   const resultArray = [];
@@ -150,11 +151,15 @@ export class ClickableFieldModel extends FieldModel {
 
   renderInDisplayStyle(value, record?, isToMany?, wrap?) {
     const { clickToOpen = false, displayStyle, titleField, overflowMode, disabled, ...restProps } = this.props;
-    if (value && typeof value === 'object' && restProps.target) {
+    const titleCollectionField = titleField
+      ? this.context.collectionField?.targetCollection?.getField?.(titleField) || this.context.collectionField
+      : this.context.collectionField;
+    const displayValue = normalizeDisplayValue(value, { collectionField: titleCollectionField });
+    if (!hasDisplayValue(displayValue) && value && typeof value === 'object' && restProps.target) {
       return;
     }
-    const result = this.renderComponent(value, wrap);
-    const display = record ? (value ? result : 'N/A') : result;
+    const result = this.renderComponent(displayValue, wrap);
+    const display = record ? (hasDisplayValue(displayValue) ? result : 'N/A') : result;
     const isTag = displayStyle === 'tag';
     const handleClick = (e) => {
       clickToOpen && this.onClick(e, record);
@@ -170,7 +175,7 @@ export class ClickableFieldModel extends FieldModel {
 
     if (isTag) {
       return (
-        value && (
+        hasDisplayValue(displayValue) && (
           <Tag {...restProps} style={commonStyle} onClick={handleClick} className={restProps.className}>
             {display}
           </Tag>

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

@@ -12,7 +12,8 @@ import { Typography } from 'antd';
 import { castArray } from 'lodash';
 import { css } from '@emotion/css';
 import React from 'react';
-import { FieldModel } from '../base/FieldModel';
+import { FieldModel } from '../base';
+import { hasDisplayValue, normalizeDisplayValue } from '../utils/displayValueUtils';
 
 export class DisplayTitleFieldModel extends FieldModel {
   get collectionField(): CollectionField {
@@ -55,13 +56,20 @@ export class DisplayTitleFieldModel extends FieldModel {
     };
     if (titleField) {
       const result = castArray(value).flatMap((v, idx) => {
-        const result = this.renderComponent(v?.[titleField]);
-        const node = v?.[titleField] ? result : 'N/A';
+        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];
       });
       return <Typography.Text {...typographyProps}>{result}</Typography.Text>;
     } else {
-      const textContent = <Typography.Text {...typographyProps}>{this.renderComponent(value)}</Typography.Text>;
+      const textContent = (
+        <Typography.Text {...typographyProps}>
+          {this.renderComponent(normalizeDisplayValue(value, { collectionField: this.context.collectionField }))}
+        </Typography.Text>
+      );
       return textContent;
     }
   }

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

@@ -12,25 +12,55 @@ import { Select, Tag, Tooltip } from 'antd';
 import React from 'react';
 import { FieldModel } from '../base/FieldModel';
 import { MobileSelect } from './mobile-components/MobileSelect';
+import { enumToOptions, getSelectedEnumLabels } from '../../internal/utils/enumOptionsUtils';
+
+const getOriginalEnumOptions = (model: SelectFieldModel) => {
+  const fromEnum = enumToOptions(model.context.collectionField?.uiSchema?.enum, (text) => text) || [];
+  if (fromEnum.length > 0) {
+    return fromEnum.map((option) => ({ ...option }));
+  }
+  const current = Array.isArray(model.props.options) ? model.props.options : [];
+  return current.map((option) => ({ ...option }));
+};
 
 export class SelectFieldModel extends FieldModel {
   render() {
+    const fallbackOptions = getOriginalEnumOptions(this);
     const options = this.props.options?.map((v) => {
       return {
         ...v,
         label: this.translate(v.label),
       };
     });
+    const selectedLabels = getSelectedEnumLabels(this.props.value, fallbackOptions).map((item) => ({
+      ...item,
+      label: this.translate(item.label),
+    }));
+    const value = Array.isArray(this.props.value)
+      ? selectedLabels
+      : selectedLabels.length > 0
+        ? selectedLabels[0]
+        : this.props.value;
 
     // TODO: 移动端相关的代码需迁移到单独的插件中
     if (this.context.isMobileLayout) {
-      return <MobileSelect {...this.props} options={options} />;
+      return <MobileSelect {...this.props} options={options} displayValue={value} />;
     }
 
     return (
       <Select
         {...this.props}
+        value={value}
+        labelInValue
+        onChange={(nextValue) => {
+          if (Array.isArray(nextValue)) {
+            this.props.onChange?.(nextValue.map((item: any) => item?.value));
+            return;
+          }
+          this.props.onChange?.(nextValue?.value);
+        }}
         options={options}
+        labelRender={(item) => item.label}
         maxTagCount="responsive"
         maxTagPlaceholder={(omittedValues) => (
           <Tooltip

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

@@ -9,7 +9,9 @@
 
 import { describe, expect, it, vi } from 'vitest';
 import { FlowEngine } from '@nocobase/flow-engine';
+import { render, screen } from '@testing-library/react';
 import { ClickableFieldModel } from '../ClickableFieldModel';
+import { DisplayTextFieldModel } from '../DisplayTextFieldModel';
 
 function createRolesFieldModel(sourceRecord: Record<string, any>) {
   const engine = new FlowEngine();
@@ -84,4 +86,25 @@ describe('ClickableFieldModel', () => {
       { debounce: true },
     );
   });
+
+  it('renders object title field values by configured target title field', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ DisplayTextFieldModel });
+
+    const model = engine.createModel<DisplayTextFieldModel>({
+      use: DisplayTextFieldModel,
+      uid: 'display-text-association-title',
+    });
+    model.context.defineProperty('collectionField', {
+      value: {
+        targetCollectionTitleFieldName: 'code',
+        isAssociationField: () => true,
+      },
+    });
+
+    render(model.renderInDisplayStyle({ id: 2, name: 'Sales', code: 'S-001' }, { id: 1 }, false));
+
+    expect(screen.getByText('S-001')).toBeInTheDocument();
+    expect(screen.queryByText('Sales')).not.toBeInTheDocument();
+  });
 });

package/src/flow/models/fields/mobile-components/MobileSelect.tsx

@@ -13,7 +13,7 @@ import { Button, CheckList, Popup, SearchBar } from 'antd-mobile';
 import React, { useEffect, useMemo, useState } from 'react';
 
 export function MobileSelect(props) {
-  const { value, onChange, onChangeComplete, disabled, options = [], mode } = props;
+  const { value, displayValue, onChange, onChangeComplete, disabled, options = [], mode } = props;
   const ctx = useFlowModelContext();
   const t = ctx.t;
   const [visible, setVisible] = useState(false);
@@ -44,6 +44,7 @@ export function MobileSelect(props) {
       <div onClick={() => !disabled && setVisible(true)}>
         <Select
           {...props}
+          value={displayValue ?? value}
           open={false}
           dropdownStyle={{ display: 'none' }}
           showSearch={false}

package/src/flow/models/fields/mobile-components/__tests__/MobileSelect.test.tsx

@@ -178,6 +178,13 @@ describe('MobileSelect', () => {
     clickTrigger();
     expect(screen.queryByTestId('popup')).not.toBeInTheDocument();
   });
+
+  it('prefers displayValue for trigger rendering', () => {
+    const displayValue = [{ label: 'Published', value: 'published' }];
+    renderMobileSelect({ value: ['published'], displayValue, mode: 'multiple' });
+
+    expect(mockState.selectProps?.value).toEqual(displayValue);
+  });
 });
 
 function SubTableCellHarness({ value, onCommit, mode }: { value: any; onCommit: (value: any) => void; mode?: string }) {

package/src/flow/models/utils/displayValueUtils.ts

@@ -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 { isValidElement } from 'react';
+
+export function hasDisplayValue(value: any) {
+  return value !== undefined && value !== null && value !== '';
+}
+
+function getTitleFieldName(collectionField: any) {
+  const targetCollection = collectionField?.targetCollection;
+  return (
+    collectionField?.targetCollectionTitleFieldName ||
+    targetCollection?.titleCollectionField?.name ||
+    targetCollection?.titleField ||
+    targetCollection?.options?.titleField
+  );
+}
+
+function getTitleCollectionField(collectionField: any, titleFieldName: string) {
+  return (
+    collectionField?.targetCollection?.getField?.(titleFieldName) ||
+    collectionField?.targetCollection?.titleCollectionField
+  );
+}
+
+export function normalizeDisplayValue(value: any, options: { collectionField?: any } = {}): any {
+  if (!hasDisplayValue(value) || isValidElement(value)) {
+    return value;
+  }
+  if (['string', 'number', 'boolean'].includes(typeof value)) {
+    return value;
+  }
+  if (Array.isArray(value)) {
+    const parts = value.map((item) => normalizeDisplayValue(item, options)).filter(hasDisplayValue);
+    return parts.length ? parts.map(String).join(', ') : undefined;
+  }
+  if (value instanceof Date) {
+    return value.toISOString();
+  }
+  if (typeof value === 'object') {
+    const titleFieldName = getTitleFieldName(options.collectionField);
+    if (titleFieldName) {
+      return normalizeDisplayValue(value[titleFieldName], {
+        collectionField: getTitleCollectionField(options.collectionField, titleFieldName),
+      });
+    }
+    return undefined;
+  }
+  return value;
+}

package/src/flow/system-settings/useSystemSettings.tsx

@@ -7,8 +7,10 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+import { useFlowEngine } from '@nocobase/flow-engine';
 import { useApp } from '../../flow-compat';
-import { useEffect, useState } from 'react';
+import languageCodes from '../../locale/languageCodes';
+import { useEffect, useMemo, useState } from 'react';
 
 /**
  * 读取系统设置并兼容旧 hook 的返回结构。
@@ -25,7 +27,19 @@ import { useEffect, useState } from 'react';
 export const useSystemSettings = () => {
   const app = useApp();
   const source = app.systemSettings;
+  const flowEngine = useFlowEngine({ throwError: false });
   const [, forceUpdate] = useState(0);
+  const enabledLanguages = source.data?.data?.enabledLanguages;
+  const languageOptions = useMemo(
+    () =>
+      (Array.isArray(enabledLanguages) ? enabledLanguages : [])
+        .filter((code) => languageCodes[code])
+        .map((code) => ({
+          label: languageCodes[code].label,
+          value: code,
+        })),
+    [enabledLanguages],
+  );
 
   useEffect(() => {
     void source.load();
@@ -34,6 +48,27 @@ export const useSystemSettings = () => {
     });
   }, [source]);
 
+  useEffect(() => {
+    if (!flowEngine) {
+      return;
+    }
+
+    flowEngine.context.defineProperty('locale', {
+      get: (ctx) => ctx.api?.auth?.locale || ctx.i18n?.language,
+      cache: false,
+      meta: {
+        type: 'string',
+        title: '{{t("Current language")}}',
+        sort: 970,
+        interface: 'select',
+        uiSchema: {
+          enum: languageOptions,
+          'x-component': 'Select',
+        },
+      },
+    });
+  }, [flowEngine, languageOptions]);
+
   return {
     loading: source.loading,
     data: source.data,

package/src/utils/globalDeps.ts

@@ -19,6 +19,7 @@ import { dayjs } from '@nocobase/utils/client';
 import * as nocobaseFlowEngine from '@nocobase/flow-engine';
 import * as ahooks from 'ahooks';
 import * as antd from 'antd';
+import axios from 'axios';
 import * as i18next from 'i18next';
 import lodash from 'lodash';
 import React from 'react';
@@ -68,6 +69,7 @@ export function defineGlobalDeps(requirejs: RequireJS) {
 
   // utils
   requirejs.define('ahooks', () => ahooks);
+  requirejs.define('axios', () => axios);
   requirejs.define('dayjs', () => dayjs);
   requirejs.define('lodash', () => lodash);
   requirejs.define('@emotion/css', () => emotionCss);

package/src/utils/remotePlugins.ts

@@ -12,33 +12,16 @@ import type { PluginClass } from '../PluginManager';
 import type { PluginData } from '../PluginManager';
 import type { RequireJS } from './requirejs';
 
-/**
- * @internal
- */
-export function defineDevPlugins(plugins: Record<string, PluginClass>) {
-  Object.entries(plugins).forEach(([packageName, plugin]) => {
-    window.define(`${packageName}/client-v2`, () => plugin);
-  });
+function getClientV2ModuleId(packageName: string) {
+  return `${packageName}/client-v2`;
 }
 
 /**
  * @internal
  */
-export function definePluginClient(packageName: string) {
-  window.define(`${packageName}/client-v2`, ['exports', packageName], function (_exports: any, _pluginExports: any) {
-    Object.defineProperty(_exports, '__esModule', {
-      value: true,
-    });
-    Object.keys(_pluginExports).forEach(function (key) {
-      if (key === '__esModule') return;
-      if (key in _exports && _exports[key] === _pluginExports[key]) return;
-      Object.defineProperty(_exports, key, {
-        enumerable: true,
-        get: function () {
-          return _pluginExports[key];
-        },
-      });
-    });
+export function defineDevPlugins(plugins: Record<string, PluginClass>) {
+  Object.entries(plugins).forEach(([packageName, plugin]) => {
+    window.define(getClientV2ModuleId(packageName), () => plugin);
   });
 }
 
@@ -49,7 +32,7 @@ export function configRequirejs(requirejs: any, pluginData: PluginData[]) {
   requirejs.requirejs.config({
     waitSeconds: 120,
     paths: pluginData.reduce<Record<string, string>>((acc, cur) => {
-      acc[cur.packageName] = cur.url;
+      acc[getClientV2ModuleId(cur.packageName)] = cur.url;
       return acc;
     }, {}),
   });
@@ -85,10 +68,7 @@ export function processRemotePlugins(pluginData: PluginData[], resolve: (plugins
 export function getRemotePlugins(requirejs: any, pluginData: PluginData[] = []): Promise<Array<[string, PluginClass]>> {
   configRequirejs(requirejs, pluginData);
 
-  const packageNames = pluginData.map((item) => item.packageName);
-  packageNames.forEach((packageName) => {
-    definePluginClient(packageName);
-  });
+  const packageNames = pluginData.map((item) => getClientV2ModuleId(item.packageName));
 
   return new Promise((resolve, reject) => {
     requirejs.requirejs(packageNames, processRemotePlugins(pluginData, resolve), reject);