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

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/__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) => {

package/src/flow/models/fields/AssociationFieldModel/__tests__/RecordPickerFieldModel.itemContext.test.ts

@@ -28,6 +28,7 @@ import {
   normalizeRecordPickerValue,
   shouldClearRecordPickerValueOnMultipleChange,
 } from '../RecordPickerFieldModel';
+import { getAssociationHydrationNamePath, getAssociationHydrationSetterContext } from '../RecordSelectFieldModel';
 
 function createMockCollection() {
   return {
@@ -93,6 +94,28 @@ describe('RecordPickerFieldModel item context', () => {
     expect(shouldClearRecordPickerValueOnMultipleChange({ type: 'belongsTo' }, true, false)).toBe(false);
   });
 
+  it('uses the current field context for association hydration writes', () => {
+    const setFormValue = vi.fn();
+    const blockSetFormValue = vi.fn();
+    const model = {
+      props: {
+        name: 'orders',
+      },
+      context: {
+        fieldPathArray: ['orders', 0, 'lines', 1, 'product'],
+        setFormValue,
+        blockModel: {
+          context: {
+            setFormValue: blockSetFormValue,
+          },
+        },
+      },
+    };
+
+    expect(getAssociationHydrationNamePath(model)).toEqual(['orders', 0, 'lines', 1, 'product']);
+    expect(getAssociationHydrationSetterContext(model)).toBe(model.context);
+  });
+
   it('itemChain helpers: createParentItemAccessorsFromInputArgs works', () => {
     const inputArgs = {
       parentItem: { value: { id: 1 } },

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

@@ -197,6 +197,11 @@ export class ClickableFieldModel extends FieldModel {
       titleField,
       overflowMode,
       disabled,
+      dateOnly,
+      dateFormat,
+      format,
+      picker,
+      showTime,
       timeFormat,
       ...restProps
     } = this.props;

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

@@ -8,14 +8,42 @@
  */
 
 import { DisplayItemModel, tExpr } from '@nocobase/flow-engine';
+import { getDateTimeFormat, getPickerFormat } from '@nocobase/utils/client';
 import dayjs from 'dayjs';
 import React from 'react';
 import { ClickableFieldModel } from './ClickableFieldModel';
 
+const stripTimeFromFormat = (format?: string) =>
+  format ? format.replace(/\s*[Hh]{1,2}:mm(?::ss)?(?:\.SSS)?(?:\s*[aA])?/g, '').trim() : format;
+
+interface DisplayDateTimeFormatProps {
+  dateOnly?: boolean;
+  picker?: string;
+  format?: string;
+  dateFormat?: string;
+  showTime?: boolean;
+  timeFormat?: string;
+}
+
+const resolveDisplayDateTimeFormat = (props: DisplayDateTimeFormatProps) => {
+  const { dateOnly, picker = 'date', format, dateFormat, showTime, timeFormat } = props;
+  const normalizedFormat = stripTimeFromFormat(format);
+  if (picker !== 'date') {
+    return dateFormat || normalizedFormat || getPickerFormat(picker);
+  }
+
+  if (!dateOnly && !dateFormat && typeof showTime === 'undefined' && !timeFormat && normalizedFormat) {
+    return format;
+  }
+
+  const normalizedDateFormat = dateFormat || normalizedFormat || getPickerFormat(picker);
+  return getDateTimeFormat(picker, normalizedDateFormat, showTime, timeFormat);
+};
+
 export class DisplayDateTimeFieldModel extends ClickableFieldModel {
   public renderComponent(value) {
     const { className, style } = this.props;
-    const finalFormat = this.props.format;
+    const finalFormat = resolveDisplayDateTimeFormat(this.props);
     let formattedValue = '';
     if (value) {
       const day = dayjs(value);

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

@@ -15,17 +15,20 @@ import { MobileSelect } from './mobile-components/MobileSelect';
 import { enumToOptions, getSelectedEnumLabels, translateOptionLabel } from '../../internal/utils/enumOptionsUtils';
 
 const getOriginalEnumOptions = (model: SelectFieldModel) => {
-  const fromEnum = enumToOptions(model.context.collectionField?.uiSchema?.enum, (text) => text) || [];
+  const fromEnum = enumToOptions(model.context.collectionField?.uiSchema?.enum, model.translate) || [];
   if (fromEnum.length > 0) {
     return fromEnum.map((option) => ({ ...option }));
   }
   const current = Array.isArray(model.props.options) ? model.props.options : [];
-  return current.map((option) => ({ ...option }));
+  return current.map((option) => ({
+    ...option,
+    label: translateOptionLabel(option.label, model.translate),
+  }));
 };
-
 export class SelectFieldModel extends FieldModel {
   render() {
     const fallbackOptions = getOriginalEnumOptions(this);
+
     const options = this.props.options?.map((v) => {
       return {
         ...v,
@@ -46,7 +49,6 @@ export class SelectFieldModel extends FieldModel {
     if (this.context.isMobileLayout) {
       return <MobileSelect {...this.props} options={options} displayValue={value} />;
     }
-
     return (
       <Select
         {...this.props}

package/src/flow/models/fields/__tests__/DisplayDateTimeFieldModel.test.tsx

@@ -0,0 +1,96 @@
+/**
+ * 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 { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { DisplayDateTimeFieldModel } from '../DisplayDateTimeFieldModel';
+
+describe('DisplayDateTimeFieldModel', () => {
+  it('uses dateFormat, showTime, and timeFormat when rendering read pretty datetime text', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ DisplayDateTimeFieldModel });
+
+    const model = engine.createModel<DisplayDateTimeFieldModel>({
+      use: DisplayDateTimeFieldModel,
+      uid: 'display-datetime-field-format',
+      props: {
+        value: '2026-06-15 13:05:06',
+        dateFormat: 'YYYY-MM-DD',
+        showTime: true,
+        timeFormat: 'HH:mm:ss',
+      },
+    });
+
+    render(model.render());
+
+    expect(screen.getByText('2026-06-15 13:05:06')).toBeInTheDocument();
+  });
+
+  it('does not reuse a time-only format when rendering datetime text', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ DisplayDateTimeFieldModel });
+
+    const model = engine.createModel<DisplayDateTimeFieldModel>({
+      use: DisplayDateTimeFieldModel,
+      uid: 'display-datetime-field-stale-time-format',
+      props: {
+        value: '2026-06-15 13:05:06',
+        format: 'HH:mm:ss',
+        showTime: true,
+        timeFormat: 'HH:mm:ss',
+      },
+    });
+
+    render(model.render());
+
+    expect(screen.getByText('2026-06-15 13:05:06')).toBeInTheDocument();
+    expect(screen.queryByText('13:05:06')).not.toBeInTheDocument();
+  });
+
+  it('keeps an existing complete datetime format when no split format props are configured', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ DisplayDateTimeFieldModel });
+
+    const model = engine.createModel<DisplayDateTimeFieldModel>({
+      use: DisplayDateTimeFieldModel,
+      uid: 'display-datetime-field-complete-format',
+      props: {
+        value: '2026-06-15 13:05:06',
+        format: 'YYYY/MM/DD HH:mm:ss',
+      },
+    });
+
+    render(model.render());
+
+    expect(screen.getByText('2026/06/15 13:05:06')).toBeInTheDocument();
+  });
+
+  it('renders only the date for date-only fields even when a datetime format remains', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ DisplayDateTimeFieldModel });
+
+    const model = engine.createModel<DisplayDateTimeFieldModel>({
+      use: DisplayDateTimeFieldModel,
+      uid: 'display-datetime-field-date-only',
+      props: {
+        value: '2026-06-15 13:05:06',
+        dateOnly: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        showTime: false,
+        timeFormat: 'HH:mm:ss',
+      },
+    });
+
+    render(model.render());
+
+    expect(screen.getByText('2026-06-15')).toBeInTheDocument();
+    expect(screen.queryByText('2026-06-15 13:05:06')).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,43 @@
+/**
+ * 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 { describe, expect, it } from 'vitest';
+import { SelectFieldModel } from '../SelectFieldModel';
+
+function mockT(text: string) {
+  if (text === '{{t("Yes")}}') return '是';
+  if (text === '{{t("No")}}') return '否';
+  return text;
+}
+
+describe('SelectFieldModel', () => {
+  it('translates enum fallback labels for selected values', () => {
+    const model = {
+      props: {
+        value: true,
+      },
+      context: {
+        collectionField: {
+          uiSchema: {
+            enum: [
+              { label: '{{t("Yes")}}', value: true },
+              { label: '{{t("No")}}', value: false },
+            ],
+          },
+        },
+      },
+      translate: mockT,
+    } as unknown as SelectFieldModel;
+
+    const element = SelectFieldModel.prototype.render.call(model) as React.ReactElement;
+
+    expect(element.props.value).toEqual({ label: '是', value: true });
+  });
+});

package/src/flow/utils/__tests__/dateTimeFormat.test.ts

@@ -48,6 +48,264 @@ describe('dateTimeFormat', () => {
     });
   });
 
+  it('uses the association title field when deciding the format schema', () => {
+    const ctx = {
+      model: {
+        props: {
+          titleField: 'shipmentsTime',
+        },
+        context: {
+          collectionField: {
+            type: 'belongsTo',
+            targetCollection: {
+              getField: (name) =>
+                name === 'shipmentsTime'
+                  ? {
+                      type: 'time',
+                      interface: 'time',
+                    }
+                  : null,
+            },
+          },
+        },
+      },
+    };
+
+    expect(Object.keys(dateTimeFormat.uiSchema(ctx))).toEqual(['timeFormat']);
+  });
+
+  it('saves association title time field format as a time format', () => {
+    const setProps = vi.fn();
+    const ctx = {
+      model: {
+        props: {
+          titleField: 'shipmentsTime',
+        },
+        context: {
+          collectionField: {
+            type: 'belongsTo',
+            targetCollection: {
+              getField: (name) =>
+                name === 'shipmentsTime'
+                  ? {
+                      type: 'time',
+                      interface: 'time',
+                    }
+                  : null,
+            },
+          },
+        },
+        setProps,
+      },
+    };
+
+    dateTimeFormat.handler(ctx, { timeFormat: 'hh:mm:ss a' });
+
+    expect(setProps).toHaveBeenCalledWith({
+      timeFormat: 'hh:mm:ss a',
+      format: 'hh:mm:ss a',
+    });
+  });
+
+  it('applies and persists date time format params when settings are saved', async () => {
+    const setProps = vi.fn();
+    const save = vi.fn();
+    const ctx = {
+      model: {
+        props: {
+          titleField: 'shipmentsDatetime',
+        },
+        context: {
+          collectionField: {
+            type: 'belongsTo',
+            targetCollection: {
+              getField: (name) =>
+                name === 'shipmentsDatetime'
+                  ? {
+                      type: 'datetime',
+                      interface: 'datetime',
+                    }
+                  : null,
+            },
+          },
+        },
+        setProps,
+        save,
+      },
+    };
+
+    await dateTimeFormat.beforeParamsSave(ctx, {
+      picker: 'date',
+      dateFormat: 'YYYY-MM-DD',
+      showTime: true,
+      timeFormat: 'hh:mm:ss a',
+    });
+
+    expect(setProps).toHaveBeenCalledWith({
+      picker: 'date',
+      dateFormat: 'YYYY-MM-DD',
+      showTime: true,
+      timeFormat: 'hh:mm:ss a',
+      format: 'YYYY-MM-DD hh:mm:ss a',
+    });
+    expect(save).toHaveBeenCalled();
+  });
+
+  it('syncs table association column props when title date time format settings are saved', async () => {
+    const setProps = vi.fn();
+    const save = vi.fn();
+    const setParentProps = vi.fn();
+    const model = {
+      props: {
+        titleField: 'shipmentsDatetime',
+      },
+      context: {
+        collectionField: {
+          type: 'belongsTo',
+          targetCollection: {
+            getField: (name) =>
+              name === 'shipmentsDatetime'
+                ? {
+                    type: 'datetime',
+                    interface: 'datetime',
+                  }
+                : null,
+          },
+        },
+      },
+      setProps,
+      save,
+      parent: {
+        use: 'TableColumnModel',
+        collectionField: {
+          isAssociationField: () => true,
+        },
+        setProps: setParentProps,
+      },
+    };
+    model.parent['subModels'] = {
+      field: model,
+    };
+
+    await dateTimeFormat.beforeParamsSave(
+      { model },
+      {
+        picker: 'date',
+        dateFormat: 'YYYY-MM-DD',
+        showTime: true,
+        timeFormat: 'hh:mm:ss a',
+      },
+    );
+
+    expect(setParentProps).toHaveBeenCalledWith({
+      picker: 'date',
+      dateFormat: 'YYYY-MM-DD',
+      showTime: true,
+      timeFormat: 'hh:mm:ss a',
+      format: 'YYYY-MM-DD hh:mm:ss a',
+    });
+    expect(save).toHaveBeenCalled();
+  });
+
+  it('hides time format for association title date-only fields', () => {
+    const ctx = {
+      model: {
+        props: {
+          titleField: 'shipmentsDateOnly',
+          showTime: true,
+        },
+        context: {
+          collectionField: {
+            type: 'belongsTo',
+            targetCollection: {
+              getField: (name) =>
+                name === 'shipmentsDateOnly'
+                  ? {
+                      type: 'dateOnly',
+                      interface: 'date',
+                      getComponentProps: () => ({
+                        dateOnly: true,
+                        showTime: false,
+                      }),
+                    }
+                  : null,
+            },
+          },
+        },
+      },
+    };
+    const schema = dateTimeFormat.uiSchema(ctx);
+    const timeFormatField: any = schema.timeFormat;
+    const showTimeField: any = schema.showTime;
+    const timeFormatState = {
+      hidden: false,
+      form: {
+        values: {
+          picker: 'date',
+          showTime: true,
+        },
+      },
+    };
+    const showTimeState = {
+      hidden: false,
+      value: true,
+      form: {
+        values: {
+          picker: 'date',
+        },
+      },
+    };
+
+    timeFormatField['x-reactions'][0](timeFormatState);
+    showTimeField['x-reactions'][1](showTimeState);
+
+    expect(timeFormatState.hidden).toBe(true);
+    expect(showTimeState.hidden).toBe(true);
+    expect(showTimeState.value).toBe(false);
+    expect(dateTimeFormat.defaultParams(ctx)).toMatchObject({
+      showTime: false,
+    });
+  });
+
+  it('saves association title date-only field format without time even when params contain showTime', () => {
+    const setProps = vi.fn();
+    const ctx = {
+      model: {
+        props: {
+          titleField: 'shipmentsDateOnly',
+        },
+        context: {
+          collectionField: {
+            type: 'belongsTo',
+            targetCollection: {
+              getField: (name) =>
+                name === 'shipmentsDateOnly'
+                  ? {
+                      type: 'dateOnly',
+                      interface: 'date',
+                    }
+                  : null,
+            },
+          },
+        },
+        setProps,
+      },
+    };
+
+    dateTimeFormat.handler(ctx, {
+      dateFormat: 'YYYY-MM-DD',
+      showTime: true,
+      timeFormat: 'HH:mm:ss',
+    });
+
+    expect(setProps).toHaveBeenCalledWith({
+      dateFormat: 'YYYY-MM-DD',
+      showTime: false,
+      timeFormat: 'HH:mm:ss',
+      format: 'YYYY-MM-DD',
+    });
+  });
+
   it('uses format as the default time format when timeFormat is missing', () => {
     const ctx = {
       model: {