mirror of
https://github.com/nocobase/nocobase
synced 2024-11-15 05:46:00 +00:00
fix(GridCard): set the count of columns displayed in a row (#3960)
* fix(GridCard): set the count of columns displayed in a row * test: add e2e * chore: fix e2e
This commit is contained in:
Zeke Zhang
GitHub
parent
c735664ea9
commit
ce0f4ddf04
@ -1,4 +1,5 @@
|
||||
import { expect, expectSettingsMenu, oneEmptyGridCardBlock, test } from '@nocobase/test/e2e';
|
||||
import { T3813 } from './templatesOfBug';
|
||||
|
||||
test.describe('grid card block schema settings', () => {
|
||||
test('supported options', async ({ page, mockPage }) => {
|
||||
@ -29,7 +30,7 @@ test.describe('grid card block schema settings', () => {
|
||||
let boxSize = await page.getByLabel('grid-card-item').first().boundingBox();
|
||||
// 默认是 3 列
|
||||
// 之所以这样断言，是因为不同平台的浏览器渲染的 width 可能会有一点点差异，所以这里只能用一个范围来判断
|
||||
expect(boxSize.width).toBeGreaterThan(400);
|
||||
expect(boxSize.width).toBeGreaterThan(390);
|
||||
expect(boxSize.width).toBeLessThan(410);
|
||||
|
||||
// 修改成 2 列（在桌面端）
|
||||
@ -46,6 +47,33 @@ test.describe('grid card block schema settings', () => {
|
||||
expect(boxSize.width).toBeGreaterThan(600);
|
||||
expect(boxSize.width).toBeLessThan(620);
|
||||
});
|
||||
|
||||
// https://nocobase.height.app/T-3813
|
||||
test('set the count of columns displayed in a row of new version', async ({ page, mockPage, mockRecords }) => {
|
||||
const nocoPage = await mockPage(T3813).waitForInit();
|
||||
await mockRecords('general', 10);
|
||||
await nocoPage.goto();
|
||||
|
||||
let boxSize = await page.getByLabel('grid-card-item').first().boundingBox();
|
||||
// 默认是 3 列
|
||||
// 之所以这样断言，是因为不同平台的浏览器渲染的 width 可能会有一点点差异，所以这里只能用一个范围来判断
|
||||
expect(boxSize.width).toBeGreaterThan(390);
|
||||
expect(boxSize.width).toBeLessThan(410);
|
||||
|
||||
// 修改成 2 列（在桌面端）
|
||||
await page.getByLabel('block-item-BlockItem-general-').hover();
|
||||
await page.getByLabel('designer-schema-settings-BlockItem-blockSettings:gridCard-general').hover();
|
||||
await page.getByRole('menuitem', { name: 'Set the count of columns displayed in a row' }).click();
|
||||
await page.getByLabel('block-item-Slider-general-Desktop device').getByText('2', { exact: true }).click();
|
||||
await page.getByRole('button', { name: 'OK', exact: true }).click();
|
||||
|
||||
// 需要刷新页面才会生效
|
||||
await page.reload();
|
||||
|
||||
boxSize = await page.getByLabel('grid-card-item').first().boundingBox();
|
||||
expect(boxSize.width).toBeGreaterThan(600);
|
||||
expect(boxSize.width).toBeLessThan(620);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('actions schema settings', () => {});
|
||||
|
||||
@ -0,0 +1,151 @@
|
||||
import { PageConfig, generalWithM2oSingleSelect } from '@nocobase/test/e2e';
|
||||
|
||||
export const T3813: PageConfig = {
|
||||
collections: generalWithM2oSingleSelect,
|
||||
pageSchema: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-component': 'Page',
|
||||
'x-index': 1,
|
||||
properties: {
|
||||
'1lqiou007g2': {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-component': 'Grid',
|
||||
'x-initializer': 'page:addBlock',
|
||||
'x-index': 1,
|
||||
properties: {
|
||||
'3psy01qtzke': {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-component': 'Grid.Row',
|
||||
'x-app-version': '0.21.0-alpha.6',
|
||||
properties: {
|
||||
r8tniqb18uy: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-component': 'Grid.Col',
|
||||
'x-app-version': '0.21.0-alpha.6',
|
||||
properties: {
|
||||
'3cffxb3eila': {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-acl-action': 'general:view',
|
||||
'x-decorator': 'GridCard.Decorator',
|
||||
'x-use-decorator-props': 'useGridCardBlockDecoratorProps',
|
||||
'x-decorator-props': {
|
||||
collection: 'general',
|
||||
dataSource: 'main',
|
||||
readPretty: true,
|
||||
action: 'list',
|
||||
params: {
|
||||
pageSize: 12,
|
||||
},
|
||||
runWhenParamsChanged: true,
|
||||
rowKey: 'id',
|
||||
},
|
||||
'x-component': 'BlockItem',
|
||||
'x-use-component-props': 'useGridCardBlockItemProps',
|
||||
'x-toolbar': 'BlockSchemaToolbar',
|
||||
'x-settings': 'blockSettings:gridCard',
|
||||
'x-app-version': '0.21.0-alpha.6',
|
||||
properties: {
|
||||
actionBar: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-initializer': 'gridCard:configureActions',
|
||||
'x-component': 'ActionBar',
|
||||
'x-component-props': {
|
||||
style: {
|
||||
marginBottom: 'var(--nb-spacing)',
|
||||
},
|
||||
},
|
||||
'x-app-version': '0.21.0-alpha.6',
|
||||
'x-uid': 'zpvgtbawsn5',
|
||||
'x-async': false,
|
||||
'x-index': 1,
|
||||
},
|
||||
list: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'array',
|
||||
'x-component': 'GridCard',
|
||||
'x-use-component-props': 'useGridCardBlockProps',
|
||||
'x-app-version': '0.21.0-alpha.6',
|
||||
properties: {
|
||||
item: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'object',
|
||||
'x-component': 'GridCard.Item',
|
||||
'x-read-pretty': true,
|
||||
'x-use-component-props': 'useGridCardItemProps',
|
||||
'x-app-version': '0.21.0-alpha.6',
|
||||
properties: {
|
||||
grid: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-component': 'Grid',
|
||||
'x-initializer': 'details:configureFields',
|
||||
'x-app-version': '0.21.0-alpha.6',
|
||||
'x-uid': 'w3xcdsm5s0u',
|
||||
'x-async': false,
|
||||
'x-index': 1,
|
||||
},
|
||||
actionBar: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-align': 'left',
|
||||
'x-initializer': 'gridCard:configureItemActions',
|
||||
'x-component': 'ActionBar',
|
||||
'x-use-component-props': 'useGridCardActionBarProps',
|
||||
'x-component-props': {
|
||||
layout: 'one-column',
|
||||
},
|
||||
'x-app-version': '0.21.0-alpha.6',
|
||||
'x-uid': 'soskqb7aufc',
|
||||
'x-async': false,
|
||||
'x-index': 2,
|
||||
},
|
||||
},
|
||||
'x-uid': 'e86uubphlyw',
|
||||
'x-async': false,
|
||||
'x-index': 1,
|
||||
},
|
||||
},
|
||||
'x-uid': '51jobmt3bt6',
|
||||
'x-async': false,
|
||||
'x-index': 2,
|
||||
},
|
||||
},
|
||||
'x-uid': 'a08k64ryw2d',
|
||||
'x-async': false,
|
||||
'x-index': 1,
|
||||
},
|
||||
},
|
||||
'x-uid': 'd7ppy8ara48',
|
||||
'x-async': false,
|
||||
'x-index': 1,
|
||||
},
|
||||
},
|
||||
'x-uid': 'porsjpnaluc',
|
||||
'x-async': false,
|
||||
'x-index': 1,
|
||||
},
|
||||
},
|
||||
'x-uid': 'h98zl5a4yuj',
|
||||
'x-async': false,
|
||||
},
|
||||
},
|
||||
'x-uid': 'ozneak5mngm',
|
||||
'x-async': true,
|
||||
},
|
||||
};
|
||||
@ -1,6 +1,7 @@
|
||||
import { ArrayItems } from '@formily/antd-v5';
|
||||
import { ISchema } from '@formily/json-schema';
|
||||
import { useField, useFieldSchema } from '@formily/react';
|
||||
import { Slider } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import { useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
@ -16,9 +17,9 @@ import {
|
||||
screenSizeTitleMaps,
|
||||
} from '../../../../schema-component/antd/grid-card/options';
|
||||
import { SchemaSettingsTemplate } from '../../../../schema-settings';
|
||||
import { columnCountMarks } from './utils';
|
||||
import { SchemaSettingsDataScope } from '../../../../schema-settings/SchemaSettingsDataScope';
|
||||
import { setDataLoadingModeSettingsItem } from '../details-multi/setDataLoadingModeSettingsItem';
|
||||
import { columnCountMarks } from './utils';
|
||||
|
||||
export const gridCardBlockSettings = new SchemaSettings({
|
||||
name: 'blockSettings:gridCard',
|
||||
@ -35,7 +36,7 @@ export const gridCardBlockSettings = new SchemaSettings({
|
||||
|
||||
const columnCountSchema = useMemo(() => {
|
||||
return {
|
||||
'x-component': 'Slider',
|
||||
'x-component': Slider,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component-props': {
|
||||
min: 1,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user