@nocobase/client-v2 2.3.0-alpha.1 → 2.3.0-beta.11

package/src/flow/models/blocks/filter-form/__tests__/FilterFormGridModel.onModelCreated.test.ts

@@ -15,7 +15,9 @@ import { FilterFormItemModel } from '../FilterFormItemModel';
 import { FilterFormGridModel } from '../FilterFormGridModel';
 import { InputFieldModel } from '../../../fields/InputFieldModel';
 import { NumberFieldModel } from '../../../fields/NumberFieldModel';
+import { CascadeSelectFieldModel } from '../../../fields/AssociationFieldModel/CascadeSelectFieldModel';
 import { RecordSelectFieldModel } from '../../../fields/AssociationFieldModel/RecordSelectFieldModel';
+import { FilterFormRecordSelectFieldModel } from '../fields/FilterFormRecordSelectFieldModel';
 
 class DummyResource {
   supportsFilter = true;
@@ -41,7 +43,9 @@ function createEngine() {
     DummyCollectionBlockModel,
     InputFieldModel,
     NumberFieldModel,
+    CascadeSelectFieldModel,
     RecordSelectFieldModel,
+    FilterFormRecordSelectFieldModel,
   });
 
   return engine;
@@ -76,7 +80,13 @@ function createGridModel(engine: FlowEngine) {
   return { gridModel, saveConnectFieldsConfig };
 }
 
-function createFilterItemModel(engine: FlowEngine, dataBlockModel: DummyCollectionBlockModel, fieldPath: string) {
+function createFilterItemModel(
+  engine: FlowEngine,
+  dataBlockModel: DummyCollectionBlockModel,
+  fieldPath: string,
+  fieldModel?: string,
+  fieldProps?: Record<string, unknown>,
+) {
   const subModel = engine.createModel<FilterFormItemModel>({
     uid: `filter-item-${fieldPath}`,
     use: 'FilterFormItemModel',
@@ -94,6 +104,14 @@ function createFilterItemModel(engine: FlowEngine, dataBlockModel: DummyCollecti
         },
       },
     },
+    subModels: fieldModel
+      ? {
+          field: {
+            use: fieldModel,
+            props: fieldProps,
+          },
+        }
+      : undefined,
   });
 
   subModel.context.defineProperty('blockGridModel', {
@@ -244,4 +262,159 @@ describe('FilterFormGridModel onModelCreated', () => {
       ],
     });
   });
+
+  it('keeps the target collection filter key for record select relation fields with targetKey', async () => {
+    const engine = createEngine();
+    const ds = engine.dataSourceManager.getDataSource('main');
+
+    ds.addCollection({
+      name: 'departments',
+      filterTargetKey: 'id',
+      fields: [
+        { name: 'id', type: 'integer', interface: 'number', filterable: { operators: [] } },
+        { name: 'code', type: 'string', interface: 'input', filterable: { operators: [] } },
+        { name: 'name', type: 'string', interface: 'input', filterable: { operators: [] } },
+      ],
+    });
+    ds.addCollection({
+      name: 'users',
+      filterTargetKey: 'id',
+      fields: [
+        { name: 'id', type: 'integer', interface: 'number', filterable: { operators: [] } },
+        {
+          name: 'department',
+          type: 'belongsTo',
+          interface: 'm2o',
+          target: 'departments',
+          targetKey: 'code',
+          filterable: { operators: [] },
+        },
+      ],
+    });
+
+    const dataBlockModel = createDataBlockModel(engine);
+    const { gridModel, saveConnectFieldsConfig } = createGridModel(engine);
+    const subModel = createFilterItemModel(engine, dataBlockModel, 'department', 'FilterFormRecordSelectFieldModel');
+
+    await gridModel.onModelCreated(subModel);
+
+    expect(saveConnectFieldsConfig).toHaveBeenCalledTimes(1);
+    const [, payload] = saveConnectFieldsConfig.mock.calls[0] as unknown as [any, any];
+    expect(payload).toEqual({
+      targets: [
+        {
+          targetId: dataBlockModel.uid,
+          filterPaths: ['department.id'],
+        },
+      ],
+    });
+  });
+
+  it('falls back to association targetKey for non-record-select filter fields when target collection filter key is id', async () => {
+    const engine = createEngine();
+    const ds = engine.dataSourceManager.getDataSource('main');
+
+    ds.addCollection({
+      name: 'chinaRegions',
+      fields: [
+        { name: 'code', type: 'string', interface: 'input', filterable: { operators: [] } },
+        { name: 'name', type: 'string', interface: 'input', filterable: { operators: [] } },
+      ],
+    });
+    ds.addCollection({
+      name: 'users',
+      filterTargetKey: 'id',
+      fields: [
+        { name: 'id', type: 'integer', interface: 'number', filterable: { operators: [] } },
+        {
+          name: 'birthPlace',
+          type: 'belongsToMany',
+          interface: 'chinaRegion',
+          target: 'chinaRegions',
+          targetKey: 'code',
+          filterable: { operators: [] },
+        },
+      ],
+    });
+
+    const dataBlockModel = createDataBlockModel(engine);
+    const { gridModel, saveConnectFieldsConfig } = createGridModel(engine);
+    const subModel = createFilterItemModel(engine, dataBlockModel, 'birthPlace', 'InputFieldModel');
+
+    await gridModel.onModelCreated(subModel);
+
+    expect(saveConnectFieldsConfig).toHaveBeenCalledTimes(1);
+    const [, payload] = saveConnectFieldsConfig.mock.calls[0] as unknown as [any, any];
+    expect(payload).toEqual({
+      targets: [
+        {
+          targetId: dataBlockModel.uid,
+          filterPaths: ['birthPlace.code'],
+        },
+      ],
+    });
+  });
+
+  it('uses the Cascader value key for both the filter value and connected field path', async () => {
+    const engine = createEngine();
+    const ds = engine.dataSourceManager.getDataSource('main');
+
+    ds.addCollection({
+      name: 'organizations',
+      template: 'tree',
+      filterTargetKey: 'id',
+      fields: [
+        { name: 'id', type: 'integer', interface: 'number', filterable: { operators: [] } },
+        { name: 'code', type: 'string', interface: 'input', filterable: { operators: [] } },
+        { name: 'name', type: 'string', interface: 'input', filterable: { operators: [] } },
+      ],
+    });
+    ds.addCollection({
+      name: 'users',
+      filterTargetKey: 'id',
+      fields: [
+        { name: 'id', type: 'integer', interface: 'number', filterable: { operators: [] } },
+        {
+          name: 'organization',
+          type: 'belongsTo',
+          interface: 'm2o',
+          target: 'organizations',
+          targetKey: 'code',
+          filterable: { operators: [] },
+        },
+      ],
+    });
+
+    const dataBlockModel = createDataBlockModel(engine);
+    const { gridModel, saveConnectFieldsConfig } = createGridModel(engine);
+    const subModel = createFilterItemModel(engine, dataBlockModel, 'organization', 'CascadeSelectFieldModel', {
+      fieldNames: { label: 'name', value: 'id' },
+      value: {
+        id: 52,
+        code: 'ORG-52',
+        name: 'Leaf organization',
+        parent: { id: 1, code: 'ORG-1', name: 'Root organization', parent: null },
+      },
+    });
+    subModel.mounted = true;
+    subModel.context.defineProperty('form', {
+      value: {
+        getFieldValue: () => subModel.subModels.field.props.value,
+      },
+    });
+
+    await gridModel.onModelCreated(subModel);
+
+    expect(subModel.getFilterValue()).toBe(52);
+    expect(saveConnectFieldsConfig).toHaveBeenCalledTimes(1);
+    const [, payload] = saveConnectFieldsConfig.mock.calls[0] as unknown as [unknown, unknown];
+    expect(payload).toEqual({
+      targets: [
+        {
+          targetId: dataBlockModel.uid,
+          filterPaths: ['organization.id'],
+        },
+      ],
+    });
+  });
 });

package/src/flow/models/blocks/filter-form/__tests__/FilterFormGridModel.toggleFormFieldsCollapse.test.ts

@@ -21,6 +21,35 @@ describe('FilterFormGridModel.toggleFormFieldsCollapse', () => {
     engine.registerModels({ FilterFormGridModel });
   });
 
+  it.each([false, true])('preserves collapsed fields in mobile layout with settings enabled: %s', (settingsEnabled) => {
+    engine.flowSettings[settingsEnabled ? 'enable' : 'disable']();
+    const rows = {
+      first: [['field-1']],
+      second: [['field-2']],
+      third: [['field-3']],
+    };
+    const model = engine.createModel<FilterFormGridModel>({
+      uid: 'mobile-filter-grid',
+      use: 'FilterFormGridModel',
+      props: { rows },
+      subModels: {
+        items: ['field-1', 'field-2', 'field-3'].map((uid) => ({ use: 'FlowModel', uid })),
+      },
+    });
+    model.context.defineProperty('isMobileLayout', { value: true });
+    model.setStepParams(GRID_FLOW_KEY, GRID_STEP, { rows });
+    type VisibleLayoutReader = { getVisibleLayout(): { rows: Record<string, string[][]> } };
+    const renderedItems = () =>
+      Object.values((model as unknown as VisibleLayoutReader).getVisibleLayout().rows).flat(2);
+
+    expect(renderedItems()).toEqual(['field-1', 'field-2', 'field-3']);
+    model.toggleFormFieldsCollapse(true, 1);
+    expect(renderedItems()).toEqual(['field-1']);
+    model.toggleFormFieldsCollapse(false, 1);
+    expect(renderedItems()).toEqual(['field-1', 'field-2', 'field-3']);
+    expect(model.getStepParams(GRID_FLOW_KEY, GRID_STEP).rows).toEqual(rows);
+  });
+
   it('uses rowOrder from the full layout when collapsing after reorder', () => {
     const model = engine.createModel<FilterFormGridModel>({
       uid: 'filter-grid-collapse-order',

package/src/flow/models/blocks/filter-form/__tests__/FilterFormItemModel.defineChildren.test.ts

@@ -9,11 +9,13 @@
 
 import { describe, expect, it } from 'vitest';
 import '../../../../index';
-import { FlowEngine } from '@nocobase/flow-engine';
+import { FilterableItemModel, FlowEngine } from '@nocobase/flow-engine';
 import { CollectionBlockModel } from '../../../base';
+import { CascadeSelectFieldModel } from '../../../fields/AssociationFieldModel/CascadeSelectFieldModel';
 import { InputFieldModel } from '../../../fields/InputFieldModel';
 import { NumberFieldModel } from '../../../fields/NumberFieldModel';
 import { FilterFormRecordSelectFieldModel } from '../fields/FilterFormRecordSelectFieldModel';
+import { FilterFormFieldModel } from '../fields/FilterFormFieldModel';
 import { FilterFormItemModel } from '../FilterFormItemModel';
 
 class DummyResource {
@@ -32,6 +34,20 @@ class DummyCollectionBlockModel extends CollectionBlockModel {
   }
 }
 
+class TestCascaderFilterFieldModel extends FilterFormFieldModel {}
+
+FilterableItemModel.bindModelToInterface('TestCascaderFilterFieldModel', ['testChinaRegion'], {
+  isDefault: true,
+  defaultProps: {
+    fieldNames: {
+      label: 'name',
+      value: 'code',
+    },
+    labelInValue: true,
+    multiple: false,
+  },
+});
+
 describe('FilterFormItemModel defineChildren association fields', () => {
   it('hides default operator setting for association filter fields', () => {
     const engine = new FlowEngine();
@@ -191,6 +207,348 @@ describe('FilterFormItemModel defineChildren association fields', () => {
     expect(filterItem.collectionField).toBeTruthy();
   });
 
+  it('lists filterable children from association field interfaces', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({
+      FilterFormItemModel: FilterFormItemModel as any,
+      DummyCollectionBlockModel,
+      InputFieldModel,
+      FilterFormRecordSelectFieldModel,
+    });
+    engine.context.defineProperty('t', {
+      value: (value: string) => (value === '{{t("Province/city/area name")}}' ? '省/市/区名称' : value),
+    });
+
+    const ds = engine.dataSourceManager.getDataSource('main');
+    ds?.addCollection({
+      name: 'students',
+      filterTargetKey: 'id',
+      fields: [
+        { name: 'id', type: 'integer', interface: 'number', filterable: { operators: [] } },
+        {
+          name: 'studentName',
+          title: 'Student name',
+          type: 'string',
+          interface: 'input',
+          filterable: { operators: [] },
+        },
+        {
+          name: 'birthPlace',
+          title: 'Birth place',
+          type: 'belongsToMany',
+          interface: 'chinaRegion',
+          target: 'chinaRegions',
+          filterable: {
+            children: [
+              {
+                name: 'name',
+                title: '{{t("Province/city/area name")}}',
+                operators: 'string',
+                schema: {
+                  title: '{{t("Province/city/area name")}}',
+                  type: 'string',
+                  'x-component': 'Input',
+                },
+              },
+            ],
+          },
+        },
+      ],
+    });
+
+    const model = engine.createModel<DummyCollectionBlockModel>({
+      uid: 'students-block',
+      use: 'DummyCollectionBlockModel',
+      stepParams: {
+        resourceSettings: {
+          init: {
+            dataSourceKey: 'main',
+            collectionName: 'students',
+          },
+        },
+      },
+    });
+    const getFilterFields = model.getFilterFields.bind(model);
+    model.getFilterFields = async () => {
+      const fields = await getFilterFields();
+      return fields.map((field: any) =>
+        field.name === 'birthPlace'
+          ? {
+              name: field.name,
+              title: field.title,
+              type: field.type,
+              interface: field.interface,
+              target: field.target,
+              filterable: field.filterable,
+              isAssociationField: () => true,
+            }
+          : field,
+      ) as any;
+    };
+
+    const children = (await FilterFormItemModel.defineChildren({
+      blockGridModel: {
+        filterSubModels: (_key: string, predicate: (item: any) => boolean) => [model].filter(predicate),
+      },
+      t: (value: string) => value,
+    } as any)) as any[];
+
+    const groups = await children[0].children();
+    const fieldsGroup = groups.find((group: any) => group.key === 'fields');
+    const associationGroup = groups.find((group: any) => group.key === 'relation-fields');
+    const fieldKeys = (fieldsGroup?.children || []).map((item: any) => item.key);
+    const associationKeys = (associationGroup?.children || []).map((item: any) => item.key);
+
+    expect(fieldKeys).toContain('studentName');
+    expect(associationKeys).toContain('birthPlace-associationField');
+    expect(associationKeys).not.toContain('studentName-associationField');
+
+    const regionAssociation = associationGroup?.children?.find(
+      (item: any) => item.key === 'birthPlace-associationField',
+    );
+    const regionGroups = await regionAssociation.children();
+    const regionFieldsGroup = regionGroups.find((group: any) => group.key === 'birthPlace-fields');
+    const regionNameItem = regionFieldsGroup?.children?.find((item: any) => item.key === 'birthPlace.name');
+
+    expect(regionNameItem?.label).toBe('Birth place / 省/市/区名称');
+
+    const createOptions = await regionNameItem.createModelOptions();
+    const filterItem = engine.createModel({
+      uid: 'filter-item-region-name',
+      ...createOptions,
+    } as any) as unknown as FilterFormItemModel;
+
+    expect(filterItem.fieldPath).toBe('birthPlace.name');
+    expect(filterItem.context.filterField).toMatchObject({
+      name: 'name',
+      title: 'Birth place / 省/市/区名称',
+      interface: 'input',
+      type: 'string',
+    });
+    expect(filterItem.context.filterField?.filterable?.operators).toBe('string');
+    expect(filterItem.collectionField).toMatchObject({
+      name: 'name',
+      title: 'Birth place / 省/市/区名称',
+      interface: 'input',
+      type: 'string',
+    });
+    expect(filterItem.collectionField?.filterable?.operators).toBe('string');
+    expect(filterItem.subModels.field).toBeInstanceOf(InputFieldModel);
+  });
+
+  it('uses explicit filterable binding for association fields that provide a filter model', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({
+      FilterFormItemModel: FilterFormItemModel as any,
+      DummyCollectionBlockModel,
+      InputFieldModel,
+      TestCascaderFilterFieldModel,
+      FilterFormRecordSelectFieldModel,
+    });
+
+    const ds = engine.dataSourceManager.getDataSource('main');
+    ds?.addCollection({
+      name: 'departments',
+      filterTargetKey: 'id',
+      fields: [
+        { name: 'id', type: 'integer', interface: 'number', filterable: { operators: [] } },
+        { name: 'name', type: 'string', interface: 'input', filterable: { operators: [] } },
+      ],
+    });
+    ds?.addCollection({
+      name: 'chinaRegions',
+      fields: [
+        { name: 'code', type: 'string', interface: 'input', filterable: { operators: [] } },
+        { name: 'name', type: 'string', interface: 'input', filterable: { operators: [] } },
+      ],
+    });
+    ds?.addCollection({
+      name: 'students',
+      filterTargetKey: 'id',
+      fields: [
+        {
+          name: 'department',
+          title: 'Department',
+          type: 'belongsTo',
+          interface: 'm2o',
+          target: 'departments',
+          filterable: { operators: [] },
+        },
+        {
+          name: 'birthPlace',
+          title: 'Birth place',
+          type: 'belongsToMany',
+          interface: 'testChinaRegion',
+          target: 'chinaRegions',
+          targetKey: 'code',
+          filterable: { operators: [] },
+        },
+      ],
+    });
+
+    const model = engine.createModel<DummyCollectionBlockModel>({
+      uid: 'students-direct-region-block',
+      use: 'DummyCollectionBlockModel',
+      stepParams: {
+        resourceSettings: {
+          init: {
+            dataSourceKey: 'main',
+            collectionName: 'students',
+          },
+        },
+      },
+    });
+
+    const children = (await FilterFormItemModel.defineChildren({
+      blockGridModel: {
+        filterSubModels: (_key: string, predicate: (item: any) => boolean) => [model].filter(predicate),
+      },
+      t: (value: string) => value,
+    } as any)) as any[];
+    const groups = await children[0].children();
+    const fieldsGroup = groups.find((group: any) => group.key === 'fields');
+    const departmentItem = fieldsGroup?.children?.find((item: any) => item.key === 'department');
+    const birthPlaceItem = fieldsGroup?.children?.find((item: any) => item.key === 'birthPlace');
+
+    const departmentCreateOptions = await departmentItem.createModelOptions();
+    const birthPlaceCreateOptions = await birthPlaceItem.createModelOptions();
+
+    expect(departmentCreateOptions.subModels.field.use).toBe('FilterFormRecordSelectFieldModel');
+    expect(birthPlaceCreateOptions.subModels.field.use).toBe('TestCascaderFilterFieldModel');
+    expect(birthPlaceCreateOptions.subModels.field.props).toMatchObject({
+      fieldNames: {
+        label: 'name',
+        value: 'code',
+      },
+      labelInValue: true,
+      multiple: false,
+    });
+
+    const filterItem = engine.createModel({
+      uid: 'filter-item-birth-place-direct',
+      ...birthPlaceCreateOptions,
+    } as any) as unknown as FilterFormItemModel;
+
+    expect(filterItem.fieldPath).toBe('birthPlace');
+    expect(filterItem.subModels.field).toBeInstanceOf(TestCascaderFilterFieldModel);
+  });
+
+  it('uses Cascader by default for tree to-one associations and keeps Dropdown for other associations', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({
+      FilterFormItemModel: FilterFormItemModel as any,
+      DummyCollectionBlockModel,
+      CascadeSelectFieldModel,
+      FilterFormRecordSelectFieldModel,
+    });
+
+    const ds = engine.dataSourceManager.getDataSource('main');
+    ds?.addCollection({
+      name: 'organizations',
+      template: 'tree',
+      filterTargetKey: 'id',
+      titleField: 'name',
+      fields: [
+        { name: 'id', type: 'integer', interface: 'number', filterable: { operators: [] } },
+        { name: 'name', type: 'string', interface: 'input', filterable: { operators: [] } },
+      ],
+    });
+    ds?.addCollection({
+      name: 'departments',
+      filterTargetKey: 'id',
+      fields: [
+        { name: 'id', type: 'integer', interface: 'number', filterable: { operators: [] } },
+        { name: 'name', type: 'string', interface: 'input', filterable: { operators: [] } },
+      ],
+    });
+    ds?.addCollection({
+      name: 'users',
+      filterTargetKey: 'id',
+      fields: [
+        {
+          name: 'organization',
+          title: 'Organization',
+          type: 'belongsTo',
+          interface: 'm2o',
+          target: 'organizations',
+          filterable: { operators: [] },
+        },
+        {
+          name: 'department',
+          title: 'Department',
+          type: 'belongsTo',
+          interface: 'm2o',
+          target: 'departments',
+          filterable: { operators: [] },
+        },
+        {
+          name: 'organizations',
+          title: 'Organizations',
+          type: 'belongsToMany',
+          interface: 'm2m',
+          target: 'organizations',
+          filterable: { operators: [] },
+        },
+      ],
+    });
+
+    const model = engine.createModel<DummyCollectionBlockModel>({
+      uid: 'users-tree-association-block',
+      use: 'DummyCollectionBlockModel',
+      stepParams: {
+        resourceSettings: {
+          init: {
+            dataSourceKey: 'main',
+            collectionName: 'users',
+          },
+        },
+      },
+    });
+
+    const children = (await FilterFormItemModel.defineChildren({
+      blockGridModel: {
+        filterSubModels: (_key: string, predicate: (item: any) => boolean) => [model].filter(predicate),
+      },
+      t: (value: string) => value,
+    } as any)) as any[];
+    const groups = await children[0].children();
+    const fieldsGroup = groups.find((group: any) => group.key === 'fields');
+    const organizationItem = fieldsGroup?.children?.find((item: any) => item.key === 'organization');
+    const departmentItem = fieldsGroup?.children?.find((item: any) => item.key === 'department');
+    const organizationsItem = fieldsGroup?.children?.find((item: any) => item.key === 'organizations');
+
+    const organizationCreateOptions = await organizationItem.createModelOptions();
+    const departmentCreateOptions = await departmentItem.createModelOptions();
+    const organizationsCreateOptions = await organizationsItem.createModelOptions();
+
+    expect(organizationCreateOptions.subModels.field.use).toBe('CascadeSelectFieldModel');
+    expect(organizationCreateOptions.subModels.field.props).toMatchObject({
+      fieldNames: { label: 'name', value: 'id' },
+    });
+    expect(departmentCreateOptions.subModels.field.use).toBe('FilterFormRecordSelectFieldModel');
+    expect(organizationsCreateOptions.subModels.field.use).toBe('FilterFormRecordSelectFieldModel');
+
+    const filterItem = engine.createModel<FilterFormItemModel>({
+      uid: 'filter-item-tree-organization',
+      ...organizationCreateOptions,
+    });
+    const modelStep = filterItem.getFlow('filterFormItemSettings')?.steps?.model as any;
+    const settingsContext = {
+      engine,
+      collectionField: ds?.getCollection('users')?.getField('organization'),
+      t: (value: string) => engine.translate(value),
+    };
+    const options = modelStep.uiMode(settingsContext).props.options;
+
+    expect(modelStep.hideInSettings(settingsContext)).not.toBe(true);
+    expect(options).toEqual(
+      expect.arrayContaining([
+        { label: 'Dropdown select', value: 'FilterFormRecordSelectFieldModel' },
+        { label: 'Cascader', value: 'CascadeSelectFieldModel' },
+      ]),
+    );
+  });
+
   it('provides fallback field metadata for sql fields without collection context', async () => {
     const engine = new FlowEngine();
     engine.registerModels({