mirror of
https://github.com/nocobase/nocobase
synced 2024-11-15 05:36:05 +00:00
fix(connect-data-blocks): should immediately show in the drop-down menu (#3953)
* test: add e2e tests * fix: should immediately show in the drop-down menu * fix: should not lose the filtering function when dragging and connecting
This commit is contained in:
Zeke Zhang
GitHub
parent
606ef55db8
commit
d75db22777
@ -91,7 +91,7 @@ export const DataBlockCollector = ({
|
||||
params?: { filter: FilterParam };
|
||||
}) => {
|
||||
const collection = useCollection_deprecated();
|
||||
const { recordDataBlocks, removeDataBlock } = useFilterBlock();
|
||||
const { recordDataBlocks } = useFilterBlock();
|
||||
const { service } = useBlockRequestContext();
|
||||
const field = useField();
|
||||
const fieldSchema = useFieldSchema();
|
||||
@ -153,12 +153,6 @@ export const DataBlockCollector = ({
|
||||
if (shouldApplyFilter) addBlockToDataBlocks();
|
||||
}, [addBlockToDataBlocks, shouldApplyFilter]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
removeDataBlock(fieldSchema['x-uid']);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return <div ref={container}>{children}</div>;
|
||||
};
|
||||
|
||||
@ -185,18 +179,14 @@ export const useFilterBlock = () => {
|
||||
|
||||
if (existingBlock) {
|
||||
// 这里的值有可能会变化，所以需要更新
|
||||
existingBlock.service = block.service;
|
||||
existingBlock.defaultFilter = block.defaultFilter;
|
||||
existingBlock.dataLoadingMode = block.dataLoadingMode;
|
||||
Object.assign(existingBlock, block);
|
||||
return;
|
||||
}
|
||||
// 由于 setDataBlocks 是异步操作，所以上面的 existingBlock 在判断时有可能用的是旧的 dataBlocks,所以下面还需要根据 uid 进行去重操作
|
||||
setDataBlocks((prev) => uniqBy([...prev, block], 'uid'));
|
||||
};
|
||||
const removeDataBlock = (uid: string) => {
|
||||
const blocks = dataBlocks.filter((item) => item.uid !== uid);
|
||||
if (blocks.length === dataBlocks.length) return;
|
||||
|
||||
if (dataBlocks.every((item) => item.uid !== uid)) return;
|
||||
setDataBlocks((prev) => prev.filter((item) => item.uid !== uid));
|
||||
};
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ import {
|
||||
twoTableWithAssociationFields,
|
||||
twoTableWithSameCollection,
|
||||
} from '@nocobase/test/e2e';
|
||||
import { T3843 } from './templatesOfBug';
|
||||
import { T3843, oneTableWithRoles } from './templatesOfBug';
|
||||
|
||||
test.describe('table block schema settings', () => {
|
||||
test('supported options', async ({ page, mockPage }) => {
|
||||
@ -287,6 +287,91 @@ test.describe('table block schema settings', () => {
|
||||
});
|
||||
|
||||
test('connecting two blocks connected by a foreign key', async ({ page, mockPage, mockRecords }) => {});
|
||||
|
||||
test('should immediately show in the drop-down menu of Connect data blocks when adding a block for the first time', async ({
|
||||
page,
|
||||
mockPage,
|
||||
}) => {
|
||||
await mockPage(oneTableWithRoles).goto();
|
||||
|
||||
// 1. 创建一个详情区块
|
||||
await page.getByLabel('schema-initializer-Grid-page:').hover();
|
||||
await page.getByRole('menuitem', { name: 'table Details right' }).hover();
|
||||
await page.getByRole('menuitem', { name: 'Roles' }).click();
|
||||
await page.mouse.move(300, 0);
|
||||
await page.getByLabel('schema-initializer-Grid-details:configureFields-roles').hover();
|
||||
await page.getByRole('menuitem', { name: 'Role name' }).click();
|
||||
await page.mouse.move(300, 0);
|
||||
|
||||
// 2. 创建的详情区块应该立即出现在 Connect data blocks 的下拉菜单中
|
||||
await page.getByLabel('block-item-CardItem-roles-table').hover();
|
||||
await page.getByLabel('designer-schema-settings-CardItem-blockSettings:table-roles').hover();
|
||||
await page.getByRole('menuitem', { name: 'Connect data blocks right' }).hover();
|
||||
await page.getByRole('menuitem', { name: 'Roles #' }).click();
|
||||
|
||||
// 3. 点击 Table 行，筛选功能应该正常
|
||||
// 初次点击，变为选中状态
|
||||
await page.getByRole('button', { name: 'Admin' }).click();
|
||||
await expect(page.getByLabel('block-item-CollectionField-').getByText('Admin')).toBeVisible();
|
||||
// 再次点击，取消选中状态
|
||||
await page.getByRole('button', { name: 'Admin' }).click();
|
||||
await expect(page.getByLabel('block-item-CollectionField-').getByText('Admin')).toBeHidden();
|
||||
|
||||
// 4. 删除详情区块，Connect data blocks 的下拉菜单应该立即消失
|
||||
await page.getByLabel('block-item-CardItem-roles-details').hover();
|
||||
await page.getByLabel('designer-schema-settings-CardItem-blockSettings:detailsWithPagination-roles').hover();
|
||||
await page.getByRole('menuitem', { name: 'Delete' }).click();
|
||||
await page.getByRole('button', { name: 'OK', exact: true }).click();
|
||||
|
||||
await page.getByLabel('block-item-CardItem-roles-').hover();
|
||||
await page.getByLabel('designer-schema-settings-CardItem-blockSettings:table-roles').hover();
|
||||
await page.getByRole('menuitem', { name: 'Connect data blocks right' }).hover();
|
||||
await expect(page.getByRole('menuitem', { name: 'No blocks to connect' })).toBeVisible();
|
||||
});
|
||||
|
||||
test('should not lose the filtering function when dragging and connecting', async ({ page, mockPage }) => {
|
||||
await mockPage(oneTableWithRoles).goto();
|
||||
|
||||
// 1. 创建一个详情区块
|
||||
await page.getByLabel('schema-initializer-Grid-page:').hover();
|
||||
await page.getByRole('menuitem', { name: 'table Details right' }).hover();
|
||||
await page.getByRole('menuitem', { name: 'Roles' }).click();
|
||||
await page.mouse.move(300, 0);
|
||||
await page.getByLabel('schema-initializer-Grid-details:configureFields-roles').hover();
|
||||
await page.getByRole('menuitem', { name: 'Role name' }).click();
|
||||
await page.mouse.move(300, 0);
|
||||
|
||||
// 2. 拖动详情区块
|
||||
await page.getByLabel('block-item-CardItem-roles-details').hover();
|
||||
await page
|
||||
.getByLabel('designer-drag-handler-CardItem-blockSettings:detailsWithPagination-roles')
|
||||
.dragTo(page.getByLabel('block-item-CardItem-roles-table'));
|
||||
|
||||
// 3. 创建的详情区块应该立即出现在 Connect data blocks 的下拉菜单中
|
||||
await page.getByLabel('block-item-CardItem-roles-table').hover();
|
||||
await page.getByLabel('designer-schema-settings-CardItem-blockSettings:table-roles').hover();
|
||||
await page.getByRole('menuitem', { name: 'Connect data blocks right' }).hover();
|
||||
await page.getByRole('menuitem', { name: 'Roles #' }).click();
|
||||
|
||||
// 4. 点击 Table 行，筛选功能应该正常
|
||||
// 初次点击，变为选中状态
|
||||
await page.getByRole('button', { name: 'Admin' }).click();
|
||||
await expect(page.getByLabel('block-item-CollectionField-').getByText('Admin')).toBeVisible();
|
||||
// 再次点击，取消选中状态
|
||||
await page.getByRole('button', { name: 'Admin' }).click();
|
||||
await expect(page.getByLabel('block-item-CollectionField-').getByText('Admin')).toBeHidden();
|
||||
|
||||
// 5. 删除详情区块，Connect data blocks 的下拉菜单应该立即消失
|
||||
await page.getByLabel('block-item-CardItem-roles-details').hover();
|
||||
await page.getByLabel('designer-schema-settings-CardItem-blockSettings:detailsWithPagination-roles').hover();
|
||||
await page.getByRole('menuitem', { name: 'Delete' }).click();
|
||||
await page.getByRole('button', { name: 'OK', exact: true }).click();
|
||||
|
||||
await page.getByLabel('block-item-CardItem-roles-').hover();
|
||||
await page.getByLabel('designer-schema-settings-CardItem-blockSettings:table-roles').hover();
|
||||
await page.getByRole('menuitem', { name: 'Connect data blocks right' }).hover();
|
||||
await expect(page.getByRole('menuitem', { name: 'No blocks to connect' })).toBeVisible();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -1169,3 +1169,193 @@ export const T3843 = {
|
||||
'x-async': true,
|
||||
},
|
||||
};
|
||||
export const oneTableWithRoles: PageConfig = {
|
||||
pageSchema: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-component': 'Page',
|
||||
'x-app-version': '0.21.0-alpha.5',
|
||||
properties: {
|
||||
g31hdrdqs8h: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-component': 'Grid',
|
||||
'x-initializer': 'page:addBlock',
|
||||
'x-app-version': '0.21.0-alpha.5',
|
||||
properties: {
|
||||
w3qd8et7ny1: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-component': 'Grid.Row',
|
||||
'x-app-version': '0.21.0-alpha.5',
|
||||
properties: {
|
||||
jy1b9o63ko7: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-component': 'Grid.Col',
|
||||
'x-app-version': '0.21.0-alpha.5',
|
||||
properties: {
|
||||
iwtxze1jmpm: {
|
||||
'x-uid': 'exvpbgr35zn',
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-decorator': 'TableBlockProvider',
|
||||
'x-acl-action': 'roles:list',
|
||||
'x-use-decorator-props': 'useTableBlockDecoratorProps',
|
||||
'x-decorator-props': {
|
||||
collection: 'roles',
|
||||
dataSource: 'main',
|
||||
action: 'list',
|
||||
params: {
|
||||
pageSize: 20,
|
||||
},
|
||||
rowKey: 'name',
|
||||
showIndex: true,
|
||||
dragSort: false,
|
||||
},
|
||||
'x-toolbar': 'BlockSchemaToolbar',
|
||||
'x-settings': 'blockSettings:table',
|
||||
'x-component': 'CardItem',
|
||||
'x-filter-targets': [
|
||||
{
|
||||
uid: 'a7n5crnwx91',
|
||||
},
|
||||
{
|
||||
uid: 'z10rv1j5j7x',
|
||||
field: 'roles.name',
|
||||
},
|
||||
],
|
||||
'x-app-version': '0.21.0-alpha.5',
|
||||
properties: {
|
||||
actions: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-initializer': 'table:configureActions',
|
||||
'x-component': 'ActionBar',
|
||||
'x-component-props': {
|
||||
style: {
|
||||
marginBottom: 'var(--nb-spacing)',
|
||||
},
|
||||
},
|
||||
'x-app-version': '0.21.0-alpha.5',
|
||||
'x-uid': 'bz6xai67sd4',
|
||||
'x-async': false,
|
||||
'x-index': 1,
|
||||
},
|
||||
'3r100r39y9k': {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'array',
|
||||
'x-initializer': 'table:configureColumns',
|
||||
'x-component': 'TableV2',
|
||||
'x-use-component-props': 'useTableBlockProps',
|
||||
'x-component-props': {
|
||||
rowKey: 'id',
|
||||
rowSelection: {
|
||||
type: 'checkbox',
|
||||
},
|
||||
},
|
||||
'x-app-version': '0.21.0-alpha.5',
|
||||
properties: {
|
||||
actions: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
title: '{{ t("Actions") }}',
|
||||
'x-action-column': 'actions',
|
||||
'x-decorator': 'TableV2.Column.ActionBar',
|
||||
'x-component': 'TableV2.Column',
|
||||
'x-designer': 'TableV2.ActionColumnDesigner',
|
||||
'x-initializer': 'table:configureItemActions',
|
||||
'x-app-version': '0.21.0-alpha.5',
|
||||
properties: {
|
||||
huffguvj9ju: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-decorator': 'DndContext',
|
||||
'x-component': 'Space',
|
||||
'x-component-props': {
|
||||
split: '|',
|
||||
},
|
||||
'x-app-version': '0.21.0-alpha.5',
|
||||
'x-uid': 'kumec65v6eo',
|
||||
'x-async': false,
|
||||
'x-index': 1,
|
||||
},
|
||||
},
|
||||
'x-uid': '0behu2op8h2',
|
||||
'x-async': false,
|
||||
'x-index': 1,
|
||||
},
|
||||
o3kdcl5v6ex: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-decorator': 'TableV2.Column.Decorator',
|
||||
'x-toolbar': 'TableColumnSchemaToolbar',
|
||||
'x-settings': 'fieldSettings:TableColumn',
|
||||
'x-component': 'TableV2.Column',
|
||||
'x-app-version': '0.21.0-alpha.5',
|
||||
properties: {
|
||||
title: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
'x-collection-field': 'roles.title',
|
||||
'x-component': 'CollectionField',
|
||||
'x-component-props': {
|
||||
ellipsis: true,
|
||||
},
|
||||
'x-read-pretty': true,
|
||||
'x-decorator': null,
|
||||
'x-decorator-props': {
|
||||
labelStyle: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
'x-app-version': '0.21.0-alpha.5',
|
||||
'x-uid': 'yga0n3a2puj',
|
||||
'x-async': false,
|
||||
'x-index': 1,
|
||||
},
|
||||
},
|
||||
'x-uid': 'd452dent98m',
|
||||
'x-async': false,
|
||||
'x-index': 2,
|
||||
},
|
||||
},
|
||||
'x-uid': 'byorarf2lw2',
|
||||
'x-async': false,
|
||||
'x-index': 2,
|
||||
},
|
||||
},
|
||||
'x-async': false,
|
||||
'x-index': 1,
|
||||
},
|
||||
},
|
||||
'x-uid': 'ousy05pzp3u',
|
||||
'x-async': false,
|
||||
'x-index': 1,
|
||||
},
|
||||
},
|
||||
'x-uid': 'znu51ytf7f5',
|
||||
'x-async': false,
|
||||
'x-index': 1,
|
||||
},
|
||||
},
|
||||
'x-uid': 'gvzvz05oi9h',
|
||||
'x-async': false,
|
||||
'x-index': 1,
|
||||
},
|
||||
},
|
||||
'x-uid': 'mk589w74bvs',
|
||||
'x-async': true,
|
||||
'x-index': 1,
|
||||
},
|
||||
};
|
||||
|
||||
@ -553,6 +553,7 @@ export const SchemaSettingsRemove: FC<SchemaSettingsRemoveProps> = (props) => {
|
||||
const form = useForm();
|
||||
const { modal } = App.useApp();
|
||||
const { removeActiveFieldName } = useFormActiveFields() || {};
|
||||
const { removeDataBlock } = useFilterBlock();
|
||||
|
||||
return (
|
||||
<SchemaSettingsItem
|
||||
@ -584,6 +585,7 @@ export const SchemaSettingsRemove: FC<SchemaSettingsRemoveProps> = (props) => {
|
||||
field.setInitialValue(null);
|
||||
field.reset();
|
||||
}
|
||||
removeDataBlock(fieldSchema['x-uid']);
|
||||
},
|
||||
});
|
||||
}}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user