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

package/src/flow/models/blocks/details/DetailsBlockModel.tsx

@@ -20,6 +20,7 @@ import {
   SingleRecordResource,
   createCurrentRecordMetaFactory,
   createRecordResolveOnServerWithLocal,
+  observer,
   tExpr,
 } from '@nocobase/flow-engine';
 import { Pagination, Space } from 'antd';
@@ -154,8 +155,8 @@ export class DetailsBlockModel extends CollectionBlockModel<{
           simple
           pageSize={1}
           showSizeChanger={false}
-          defaultCurrent={resource.getPage()}
-          total={resource.getTotalPage()}
+          current={resource.getPage()}
+          total={resource.getCount()}
           onChange={this.handlePageChange}
           style={{ display: 'inline-block' }}
         />
@@ -226,6 +227,8 @@ export class DetailsBlockModel extends CollectionBlockModel<{
   }
 }
 
+export const DetailsPagination = observer(({ model }: { model: DetailsBlockModel }) => model.renderPagination());
+
 const DetailsBlockContent = ({
   model,
   gridModel,
@@ -297,7 +300,9 @@ const DetailsBlockContent = ({
           model={gridModel}
           showFlowSettings={false}
         />
-        <div ref={paginationRef}>{model.renderPagination()}</div>
+        <div ref={paginationRef}>
+          <DetailsPagination model={model} />
+        </div>
       </div>
     </FormComponent>
   );

package/src/flow/models/blocks/details/__tests__/DetailsBlockModel.initialPaginationChangeRefresh.test.ts

@@ -7,10 +7,12 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+import { act, render, screen } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { FlowEngine, MultiRecordResource, SingleRecordResource } from '@nocobase/flow-engine';
+import React from 'react';
 import '../../../../index';
-import { DetailsBlockModel } from '../DetailsBlockModel';
+import { DetailsBlockModel, DetailsPagination } from '../DetailsBlockModel';
 import { DetailsGridModel } from '../DetailsGridModel';
 
 function setupDetailsBlockModel(options?: { filterByTk?: string | number }) {
@@ -93,6 +95,35 @@ describe('DetailsBlockModel initial pagination refresh', () => {
     expect(dispatchSpy.mock.calls.filter(([eventName]) => eventName === 'paginationChange')).toHaveLength(1);
   });
 
+  it('renders pagination from the current count and page after filtering', () => {
+    const { model, resource } = setupDetailsBlockModel();
+    resource.setData([{ id: 3, name: 'CC', title: 'filtered' }] as any);
+    resource.setMeta({ count: 7, page: 3, pageSize: 1, totalPage: 20 });
+
+    const paginationContainer = model.renderPagination() as any;
+    const pagination = paginationContainer.props.children;
+
+    expect(pagination.props.total).toBe(7);
+    expect(pagination.props.current).toBe(3);
+    expect(pagination.props.defaultCurrent).toBeUndefined();
+  });
+
+  it('updates the rendered pagination when filtering changes only resource metadata', () => {
+    const { model, resource } = setupDetailsBlockModel();
+    resource.setData([{ id: 1, name: 'AA', title: 'foo' }] as any);
+    resource.setMeta({ count: 7, page: 1, pageSize: 1, totalPage: 7 });
+
+    render(React.createElement(DetailsPagination, { model }));
+
+    expect(screen.getByRole('list')).toBeInTheDocument();
+
+    act(() => {
+      resource.setMeta({ count: 1, page: 1, pageSize: 1, totalPage: 1 });
+    });
+
+    expect(screen.queryByRole('list')).not.toBeInTheDocument();
+  });
+
   it('uses a real single-record details model and does not emit root paginationChange on initial render', async () => {
     const { model, resource } = setupDetailsBlockModel({ filterByTk: 1 });
     expect(resource).toBeInstanceOf(SingleRecordResource);

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

@@ -15,8 +15,10 @@ import {
   DndProvider,
   DragHandler,
   Droppable,
+  isCtxDateExpression,
   isRunJSValue,
   normalizeRunJSValue,
+  parseCtxDateExpression,
   tExpr,
   FlowModelRenderer,
   FlowSettingsButton,
@@ -44,6 +46,15 @@ import { normalizeFilterValueByOperator } from './valueNormalization';
 
 const RELATION_FIELD_TYPES = ['belongsTo', 'hasOne', 'hasMany', 'belongsToMany', 'belongsToArray'];
 const NUMERIC_FIELD_TYPES = ['integer', 'float', 'double', 'decimal'];
+const DATE_FILTER_OPERATORS = new Set([
+  '$dateOn',
+  '$dateNotOn',
+  '$dateBefore',
+  '$dateAfter',
+  '$dateNotBefore',
+  '$dateNotAfter',
+  '$dateBetween',
+]);
 
 function getFilterFormFieldMetaType(field: CollectionField) {
   if (RELATION_FIELD_TYPES.includes(field.type)) {
@@ -66,6 +77,14 @@ function getFilterFormFieldMetaType(field: CollectionField) {
   }
 }
 
+function parseDateFilterDefaultValue(operator: string | undefined, rawValue: unknown) {
+  if (!operator || !DATE_FILTER_OPERATORS.has(operator) || !isCtxDateExpression(rawValue)) {
+    return undefined;
+  }
+
+  return parseCtxDateExpression(rawValue);
+}
+
 function shouldShowFilterFormFieldMeta(field: CollectionField) {
   return Boolean(field?.interface);
 }
@@ -489,7 +508,7 @@ export class FilterFormBlockModel extends FilterBlockModel<{
     const rules = (params?.value || []) as any[];
     if (!Array.isArray(rules) || rules.length === 0) return appliedValues;
 
-    const resolveValue = async (raw: any) => {
+    const resolveValue = async (raw: any, operator?: string) => {
       // RunJS support
       if (isRunJSValue(raw)) {
         const { code, version } = normalizeRunJSValue(raw);
@@ -497,6 +516,11 @@ export class FilterFormBlockModel extends FilterBlockModel<{
         return ret?.success ? ret.value : undefined;
       }
 
+      const parsedDateFilterValue = parseDateFilterDefaultValue(operator, raw);
+      if (typeof parsedDateFilterValue !== 'undefined') {
+        return parsedDateFilterValue;
+      }
+
       return await (this.context as any).resolveJsonTemplate?.(raw);
     };
 
@@ -520,11 +544,11 @@ export class FilterFormBlockModel extends FilterBlockModel<{
 
       const current = (form as any).getFieldValue?.(name);
 
-      const resolved = await resolveValue(rule.value);
+      const operator = getDefaultOperator(itemModel as any);
+      const resolved = await resolveValue(rule.value, operator);
       if (options?.refreshSeq && options.refreshSeq !== this.defaultValuesRefreshSeq) return appliedValues;
       if (typeof resolved === 'undefined') continue;
 
-      const operator = getDefaultOperator(itemModel as any);
       const normalized = normalizeFilterValueByOperator(operator, resolved);
       const mode = this.normalizeFieldValueMode(rule.mode);
       if (mode === 'default' && !this.canApplyFormDefaultValue(String(name), current, force)) continue;

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

@@ -59,11 +59,42 @@ export class FilterFormGridModel extends GridModel {
 
   readonly loading = observable.ref(false);
 
-  private getAssociationFilterTargetKey(field: any) {
-    const filterTargetKey = field?.targetCollection?.filterTargetKey;
+  private isRecordSelectFilterField(subModel: FilterFormItemModel) {
+    const fieldModel = subModel.subModels?.field;
+    if (!fieldModel) {
+      return true;
+    }
+
+    const RecordSelectModel = this.flowEngine.getModelClass('FilterFormRecordSelectFieldModel');
+    if (!RecordSelectModel) {
+      return fieldModel.constructor?.name === 'FilterFormRecordSelectFieldModel';
+    }
+
+    return fieldModel instanceof RecordSelectModel;
+  }
+
+  private getAssociationFilterTargetKey(field: any, subModel: FilterFormItemModel) {
+    const normalizeKey = (key: any) => {
+      if (Array.isArray(key)) {
+        return key[0];
+      }
+      return key;
+    };
+
+    const fieldModelValueKey = normalizeKey(subModel.subModels?.field?.props?.fieldNames?.value);
+    if (fieldModelValueKey) {
+      return fieldModelValueKey;
+    }
+
+    const filterTargetKey = normalizeKey(field?.targetCollection?.filterTargetKey);
+    const fieldTargetKey = normalizeKey(field?.targetKey);
+
+    if (filterTargetKey && filterTargetKey !== 'id') {
+      return filterTargetKey;
+    }
 
-    if (Array.isArray(filterTargetKey)) {
-      return filterTargetKey[0] || 'id';
+    if (!this.isRecordSelectFilterField(subModel) && fieldTargetKey) {
+      return fieldTargetKey;
     }
 
     return filterTargetKey || 'id';
@@ -370,7 +401,7 @@ export class FilterFormGridModel extends GridModel {
           if (field?.target) {
             return {
               targetId: model.uid,
-              filterPaths: [`${fieldPath}.${this.getAssociationFilterTargetKey(field)}`],
+              filterPaths: [`${fieldPath}.${this.getAssociationFilterTargetKey(field, subModel)}`],
             };
           }
         }

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();
   }
 }