From 505bbf54a8d05ef4f8ff991574023bd036a7f53c Mon Sep 17 00:00:00 2001 From: Zeke Zhang <958414905@qq.com> Date: Wed, 17 Jul 2024 11:34:26 +0800 Subject: [PATCH] fix: correct issue with filter form field operator settings being ineffective (#4891) --- .../src/block-provider/CollectOperators.tsx | 2 +- .../form/__e2e__/schemaSettings.test.ts | 19 ++ .../filter-blocks/form/__e2e__/templates.ts | 170 ++++++++++++++++++ .../antd/form-item/SchemaSettingOptions.tsx | 4 + 4 files changed, 194 insertions(+), 1 deletion(-) diff --git a/packages/core/client/src/block-provider/CollectOperators.tsx b/packages/core/client/src/block-provider/CollectOperators.tsx index a3355286e..dd6c1e623 100644 --- a/packages/core/client/src/block-provider/CollectOperators.tsx +++ b/packages/core/client/src/block-provider/CollectOperators.tsx @@ -12,7 +12,7 @@ import React, { FC, createContext, useCallback, useRef } from 'react'; const NOOP = () => {}; const CollectOperatorsContext = createContext<{ - /** 手机单个字段的操作符 */ + /** 收集单个字段的操作符 */ collectOperator: (name: string | number, operator: string) => void; /** 获取所有字段的操作符 */ getOperators: () => Record; diff --git a/packages/core/client/src/modules/blocks/filter-blocks/form/__e2e__/schemaSettings.test.ts b/packages/core/client/src/modules/blocks/filter-blocks/form/__e2e__/schemaSettings.test.ts index 1ec219beb..b3ddf8ec4 100644 --- a/packages/core/client/src/modules/blocks/filter-blocks/form/__e2e__/schemaSettings.test.ts +++ b/packages/core/client/src/modules/blocks/filter-blocks/form/__e2e__/schemaSettings.test.ts @@ -14,6 +14,7 @@ import { oneFormAndOneTableWithSameCollection, test, } from '@nocobase/test/e2e'; +import { T4798 } from './templates'; test.describe('filter block schema settings', () => { test('supported options', async ({ page, mockPage }) => { @@ -162,6 +163,24 @@ test.describe('filter block schema settings', () => { await clearBlockTemplates(); }); + + test('the operator of association field should work', async ({ page, mockPage, mockRecords }) => { + const nocoPage = await mockPage(T4798).waitForInit(); + await mockRecords('general', 3); + await nocoPage.goto(); + + // 默认操作符为 “contains”，更改为 “is” + await page.getByLabel('block-item-CollectionField-').hover(); + await page.getByLabel('designer-schema-settings-CollectionField-fieldSettings:FilterFormItem-general-').hover(); + await page.getByRole('menuitem', { name: 'Operator contains' }).click(); + await page.getByRole('option', { name: 'is', exact: true }).click(); + + // 刷新页面后，操作符应该还是 “is” + await page.reload(); + await page.getByLabel('block-item-CollectionField-').hover(); + await page.getByLabel('designer-schema-settings-CollectionField-fieldSettings:FilterFormItem-general-').hover(); + await expect(page.getByRole('menuitem', { name: 'Operator is' })).toBeVisible(); + }); }); }); diff --git a/packages/core/client/src/modules/blocks/filter-blocks/form/__e2e__/templates.ts b/packages/core/client/src/modules/blocks/filter-blocks/form/__e2e__/templates.ts index b7cdd138a..ca5ce130b 100644 --- a/packages/core/client/src/modules/blocks/filter-blocks/form/__e2e__/templates.ts +++ b/packages/core/client/src/modules/blocks/filter-blocks/form/__e2e__/templates.ts @@ -865,3 +865,173 @@ export const oneFilterFormAndTableWithManualLoadingData = { }, keepUid: true, }; +export const T4798 = { + collections: [ + { + name: 'general', + title: 'General', + fields: [ + { + name: 'manyToOne', + interface: 'm2o', + target: 'users', + }, + ], + }, + ], + pageSchema: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Page', + 'x-app-version': '1.2.20-alpha', + properties: { + azl2bh031d4: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid', + 'x-initializer': 'page:addBlock', + 'x-app-version': '1.2.20-alpha', + properties: { + gbq9qs73wwn: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid.Row', + 'x-app-version': '1.2.20-alpha', + properties: { + a1vhv24xe9p: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid.Col', + 'x-app-version': '1.2.20-alpha', + properties: { + ukjf5k8v8ya: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-decorator': 'FilterFormBlockProvider', + 'x-use-decorator-props': 'useFilterFormBlockDecoratorProps', + 'x-decorator-props': { + dataSource: 'main', + collection: 'general', + }, + 'x-toolbar': 'BlockSchemaToolbar', + 'x-settings': 'blockSettings:filterForm', + 'x-component': 'CardItem', + 'x-filter-targets': [], + 'x-app-version': '1.2.20-alpha', + properties: { + '5sxff0jskc3': { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'FormV2', + 'x-use-component-props': 'useFilterFormBlockProps', + 'x-app-version': '1.2.20-alpha', + properties: { + grid: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid', + 'x-initializer': 'filterForm:configureFields', + 'x-app-version': '1.2.20-alpha', + properties: { + '89zq19tm2in': { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid.Row', + 'x-app-version': '1.2.20-alpha', + properties: { + ygjidym7p66: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid.Col', + 'x-app-version': '1.2.20-alpha', + properties: { + 'manyToOne.nickname': { + _isJSONSchemaObject: true, + version: '2.0', + type: 'string', + 'x-toolbar': 'FormItemSchemaToolbar', + 'x-settings': 'fieldSettings:FilterFormItem', + 'x-designer-props': { + interface: 'input', + }, + 'x-component': 'CollectionField', + 'x-read-pretty': false, + 'x-decorator': 'FormItem', + 'x-collection-field': 'general.manyToOne.nickname', + 'x-app-version': '1.2.20-alpha', + 'x-uid': 'p9q6a24uv2c', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'u90miwx3hgl', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'bkvwl1qec30', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'wu5tw51gtif', + 'x-async': false, + 'x-index': 1, + }, + ypbbpv6r1yx: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-initializer': 'filterForm:configureActions', + 'x-component': 'ActionBar', + 'x-component-props': { + layout: 'one-column', + style: { + float: 'right', + }, + }, + 'x-app-version': '1.2.20-alpha', + 'x-uid': 'kfkrokmpy5i', + 'x-async': false, + 'x-index': 2, + }, + }, + 'x-uid': 'p2bta9e2our', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'gsjxmdmkr4r', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': '5a2h74u28a7', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': '892gtpuxa3z', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'sjyf2qxl2qw', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'sibnj3xytix', + 'x-async': true, + 'x-index': 1, + }, +}; diff --git a/packages/core/client/src/schema-component/antd/form-item/SchemaSettingOptions.tsx b/packages/core/client/src/schema-component/antd/form-item/SchemaSettingOptions.tsx index 857415e7c..b6714859a 100644 --- a/packages/core/client/src/schema-component/antd/form-item/SchemaSettingOptions.tsx +++ b/packages/core/client/src/schema-component/antd/form-item/SchemaSettingOptions.tsx @@ -16,6 +16,7 @@ import { useTranslation } from 'react-i18next'; import { useOperators } from '../../../block-provider/CollectOperators'; import { useFormBlockContext } from '../../../block-provider/FormBlockProvider'; import { useCollectionManager_deprecated, useCollection_deprecated } from '../../../collection-manager'; +import { useCollectOperator } from '../../../modules/blocks/filter-blocks/form/hooks/useCollectOperator'; import { SchemaSettingsModalItem, SchemaSettingsSelectItem, SchemaSettingsSwitchItem } from '../../../schema-settings'; import { isPatternDisabled } from '../../../schema-settings/isPatternDisabled'; import { useCompile, useDesignable, useFieldModeOptions } from '../../hooks'; @@ -472,6 +473,9 @@ export const EditPattern = () => { * 该方法确保 operator 一定有值（需要在 FormItem 中调用） */ export const useEnsureOperatorsValid = () => { + // TODO: 等给 Schema 中都加上 'x-use-decorator-props': 'useFormItemProps' 后，可以删除这个方法 + useCollectOperator(); + const fieldSchema = useFieldSchema(); const operatorList = useOperatorList(); const { getOperators, collectOperator } = useOperators();