@nocobase/client-v2 3.0.0-alpha.1 → 3.0.0-alpha.11

package/src/flow/models/blocks/filter-form/FilterFormItemModel.tsx

@@ -31,6 +31,12 @@ import {
 import { FilterFormFieldModel } from './fields';
 import { normalizeFilterValueByOperator } from './valueNormalization';
 
+type CollectionWithManager = Collection & {
+  collectionManager?: {
+    getCollection?: (name: string) => Collection | undefined;
+  };
+};
+
 const getAssociationTargetCollection = (field: any, collection?: Collection, model?: CollectionBlockModel) => {
   if (field?.targetCollection) {
     return field.targetCollection;
@@ -42,6 +48,10 @@ const getAssociationTargetCollection = (field: any, collection?: Collection, mod
   if (collection?.dataSource?.getCollection) {
     return collection.dataSource.getCollection(targetName);
   }
+  const collectionManager = (collection as CollectionWithManager | undefined)?.collectionManager;
+  if (collectionManager?.getCollection) {
+    return collectionManager.getCollection(targetName);
+  }
   const dataSourceKey = collection?.dataSourceKey;
   if (dataSourceKey && model?.context?.dataSourceManager?.getCollection) {
     return model.context.dataSourceManager.getCollection(dataSourceKey, targetName);
@@ -168,6 +178,74 @@ const buildVirtualFilterCollectionField = (ctx: FlowModelContext, filterField: a
   return result;
 };
 
+const getFilterableChildren = (field: any) => {
+  const children = field?.filterable?.children;
+  return Array.isArray(children) ? children : [];
+};
+
+const hasAssociationChildren = (field: any, collection?: Collection, model?: CollectionBlockModel) => {
+  return (
+    isAssociationCollectionField(field) &&
+    (getFilterableChildren(field).length > 0 || !!getAssociationTargetCollection(field, collection, model))
+  );
+};
+
+const inferFilterableChildInterface = (child: any) => {
+  if (child?.interface) {
+    return child.interface;
+  }
+
+  const schema = child?.schema || child?.uiSchema;
+  const component = schema?.['x-component'];
+  if (component === 'Select') {
+    return 'select';
+  }
+  if (component === 'Checkbox.Group') {
+    return 'checkboxGroup';
+  }
+  if (component === 'Checkbox') {
+    return 'checkbox';
+  }
+
+  const type = child?.type || schema?.type;
+  if (type === 'number' || type === 'integer') {
+    return 'number';
+  }
+  return 'input';
+};
+
+const translateFilterableChildTitle = (title: unknown, t: (value: string) => string) => {
+  return typeof title === 'string' ? t(title) : title;
+};
+
+const buildFilterableChildField = (child: any, t: (value: string) => string) => {
+  const name = child?.name || child?.value;
+  if (!name) {
+    return;
+  }
+
+  const schema = child?.schema || child?.uiSchema || {};
+  const rawTitle = child?.title || child?.label || schema?.title || name;
+  const title = translateFilterableChildTitle(rawTitle, t);
+  const filterable = child?.filterable || (child?.operators ? { operators: child.operators } : undefined);
+
+  return {
+    ...child,
+    name,
+    title,
+    type: child?.type || schema?.type || 'string',
+    interface: inferFilterableChildInterface(child),
+    uiSchema: {
+      ...schema,
+      title: translateFilterableChildTitle(schema?.title || title, t),
+    },
+    filterable,
+    __filterFormVirtual: true,
+    isAssociationField: () => false,
+    getComponentProps: () => schema?.['x-component-props'] || {},
+  };
+};
+
 const buildFilterFormFieldItem = ({
   model,
   collection,
@@ -187,11 +265,7 @@ const buildFilterFormFieldItem = ({
   if (!binding) {
     return;
   }
-  const isAssociation = isAssociationCollectionField(field);
-  const fieldModel =
-    isAssociation && ctxWithFlags.engine?.getModelClass?.('FilterFormRecordSelectFieldModel')
-      ? 'FilterFormRecordSelectFieldModel'
-      : binding.modelName;
+  const fieldModel = binding.modelName;
   const label = field.title || field.name;
   const displayLabel = labelPrefix ? `${labelPrefix} / ${label}` : label;
   return {
@@ -211,7 +285,10 @@ const buildFilterFormFieldItem = ({
         },
         filterFormItemSettings: {
           init: {
-            filterField: _.pick(field, ['name', 'title', 'interface', 'type']),
+            filterField: {
+              ..._.pick(field, ['name', 'title', 'interface', 'type', 'filterable', 'uiSchema', '__filterFormVirtual']),
+              title: displayLabel,
+            },
             defaultTargetUid: model.uid,
           },
         },
@@ -245,7 +322,8 @@ const buildAssociationFieldMenuItem = ({
   depth: number;
 }) => {
   const targetCollection = getAssociationTargetCollection(field, collection, model);
-  if (!targetCollection) {
+  const filterableChildren = getFilterableChildren(field);
+  if (!targetCollection && !filterableChildren.length) {
     return;
   }
   if (depth > MAX_ASSOCIATION_DEPTH) {
@@ -262,10 +340,35 @@ const buildAssociationFieldMenuItem = ({
       const targetFields = getTargetFilterableFields(field, collection, model);
       const fieldItems: any[] = [];
       const associationItems: any[] = [];
+      const addedFieldPaths = new Set<string>();
+
+      filterableChildren.forEach((child: any) => {
+        const virtualChildField = buildFilterableChildField(child, t);
+        if (!virtualChildField) {
+          return;
+        }
+
+        const childFieldPath = `${fieldPath}.${virtualChildField.name}`;
+        const childItem = buildFilterFormFieldItem({
+          model,
+          collection,
+          ctxWithFlags,
+          field: virtualChildField,
+          fieldPath: childFieldPath,
+          labelPrefix: label,
+        });
+        if (childItem) {
+          addedFieldPaths.add(childFieldPath);
+          fieldItems.push(childItem);
+        }
+      });
 
       targetFields.forEach((targetField: any) => {
         const targetFieldPath = `${fieldPath}.${targetField.name}`;
-        if (targetField?.targetCollection) {
+        if (addedFieldPaths.has(targetFieldPath)) {
+          return;
+        }
+        if (hasAssociationChildren(targetField, collection, model)) {
           const associationItem = buildAssociationFieldMenuItem({
             model,
             collection,
@@ -358,7 +461,7 @@ const getModelFieldGroups = async (model: CollectionBlockModel) => {
       baseItems.push(baseItem);
     }
 
-    if (field?.targetCollection) {
+    if (hasAssociationChildren(field, collection, model)) {
       const associationItem = buildAssociationFieldMenuItem({
         model,
         collection,
@@ -489,6 +592,14 @@ export class FilterFormItemModel extends FilterableItemModel<{
           title: initFilterField?.title || initFilterField?.name,
         },
       });
+      if (initFilterField?.__filterFormVirtual) {
+        const virtualField = buildVirtualFilterCollectionField(this.context, initFilterField);
+        if (virtualField) {
+          this.context.defineProperty('collectionField', {
+            value: virtualField,
+          });
+        }
+      }
     }
   }
 
@@ -692,7 +803,8 @@ FilterFormItemModel.registerFlow({
           // @ts-ignore
           (fieldSettingsInitParams?.dataSourceKey && fieldSettingsInitParams?.collectionName)
         );
-        if (!hasCollectionContext && !collectionField && normalizedFilterField) {
+        const shouldUseVirtualFilterField = !!normalizedFilterField?.__filterFormVirtual;
+        if ((shouldUseVirtualFilterField || (!hasCollectionContext && !collectionField)) && normalizedFilterField) {
           const virtualField = buildVirtualFilterCollectionField(ctx, normalizedFilterField);
           if (virtualField) {
             ctx.model.context.defineProperty('collectionField', {
@@ -787,10 +899,13 @@ FilterFormItemModel.registerFlow({
           type: 'select',
           key: 'use',
           props: {
-            options: classes.map((model) => ({
-              label: t(model.modelName),
-              value: model.modelName,
-            })),
+            options: classes.map((model) => {
+              const ModelClass = ctx.engine.getModelClass(model.modelName);
+              return {
+                label: t(ModelClass?.meta?.label || model.modelName),
+                value: model.modelName,
+              };
+            }),
           },
         };
       },

package/src/flow/models/blocks/filter-form/FilterFormSubmitActionModel.tsx

@@ -8,23 +8,76 @@
  */
 
 import type { ButtonProps } from 'antd/es/button';
+import { reaction } from '@formily/reactive';
 import { tExpr } from '@nocobase/flow-engine';
 import { FilterFormActionModel } from './FilterFormActionModel';
 
+type FilterFormBlockState = {
+  autoTriggerFilter: boolean;
+};
+
+const mountedSubmitActions = new WeakSet<object>();
+const visibleSubmitActionsByBlock = new WeakMap<FilterFormBlockState, Set<object>>();
+const hiddenReactionDisposers = new WeakMap<object, () => void>();
+
+const syncAutoTriggerFilter = (blockModel: FilterFormBlockState, lifecycleAction: object & { hidden?: boolean }) => {
+  let visibleSubmitActions = visibleSubmitActionsByBlock.get(blockModel);
+
+  if (mountedSubmitActions.has(lifecycleAction) && !lifecycleAction.hidden) {
+    if (!visibleSubmitActions) {
+      visibleSubmitActions = new Set<object>();
+      visibleSubmitActionsByBlock.set(blockModel, visibleSubmitActions);
+    }
+    visibleSubmitActions.add(lifecycleAction);
+  } else {
+    visibleSubmitActions?.delete(lifecycleAction);
+  }
+
+  blockModel.autoTriggerFilter = Boolean(!visibleSubmitActions?.size);
+  if (!visibleSubmitActions?.size) {
+    visibleSubmitActionsByBlock.delete(blockModel);
+  }
+};
+
 export class FilterFormSubmitActionModel extends FilterFormActionModel {
   defaultProps: ButtonProps = {
     title: tExpr('Filter'),
     type: 'primary',
   };
 
-  onInit(options): void {
-    super.onInit(options);
-    this.context.blockModel.autoTriggerFilter = false;
+  private getLifecycleAction(): object & { hidden?: boolean } {
+    return this.context.model || this;
+  }
+
+  private syncAutoTriggerFilter(): void {
+    const blockModel = this.context.blockModel as FilterFormBlockState;
+    const lifecycleAction = this.getLifecycleAction();
+    syncAutoTriggerFilter(blockModel, lifecycleAction);
+  }
+
+  onMount(): void {
+    super.onMount();
+    const blockModel = this.context.blockModel as FilterFormBlockState;
+    const lifecycleAction = this.getLifecycleAction();
+    mountedSubmitActions.add(lifecycleAction);
+    hiddenReactionDisposers.get(lifecycleAction)?.();
+    hiddenReactionDisposers.set(
+      lifecycleAction,
+      reaction(
+        () => lifecycleAction.hidden,
+        () => syncAutoTriggerFilter(blockModel, lifecycleAction),
+      ),
+    );
+    this.syncAutoTriggerFilter();
   }
 
   onUnmount(): void {
     super.onUnmount();
-    this.context.blockModel.autoTriggerFilter = true;
+    const lifecycleAction = this.getLifecycleAction();
+    hiddenReactionDisposers.get(lifecycleAction)?.();
+    hiddenReactionDisposers.delete(lifecycleAction);
+    mountedSubmitActions.delete(lifecycleAction);
+    this.syncAutoTriggerFilter();
   }
 }
 

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'],
+        },
+      ],
+    });
+  });
 });