diff --git a/packages/core/client/src/schema-component/antd/action/Action.Drawer.style.ts b/packages/core/client/src/schema-component/antd/action/Action.Drawer.style.ts index 796638b2f..7e6ebea7f 100644 --- a/packages/core/client/src/schema-component/antd/action/Action.Drawer.style.ts +++ b/packages/core/client/src/schema-component/antd/action/Action.Drawer.style.ts @@ -12,6 +12,9 @@ export const useStyles = genStyleHook('nb-action-drawer', (token) => { '.ant-drawer-body': { paddingTop: token.paddingContentVerticalLG, backgroundColor: 'var(--colorBgDrawer)' }, }, '&.nb-record-picker-selector': { + '.ant-drawer-wrapper-body': { + backgroundColor: 'var(--colorBgDrawer)', + }, '.nb-block-item': { marginBottom: token.marginLG, '.general-schema-designer': { diff --git a/packages/core/client/src/schema-initializer/buttons/TableSelectorInitializers.tsx b/packages/core/client/src/schema-initializer/buttons/TableSelectorInitializers.tsx index 6cce917c5..d47288a58 100644 --- a/packages/core/client/src/schema-initializer/buttons/TableSelectorInitializers.tsx +++ b/packages/core/client/src/schema-initializer/buttons/TableSelectorInitializers.tsx @@ -1,10 +1,11 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; -import { SchemaInitializer } from '../..'; +import { SchemaInitializer, useCollection } from '../..'; import { gridRowColWrap } from '../utils'; export const TableSelectorInitializers = (props: any) => { const { t } = useTranslation(); + const { name } = useCollection(); const { insertPosition, component } = props; return ( @@ -17,11 +18,12 @@ export const TableSelectorInitializers = (props: any) => { component={component} items={[ { + key: 'dataBlocksInTableSelector', type: 'itemGroup', title: t('Selector'), children: [ { - key: 'details', + key: 'detailsBlockInTableSelector', type: 'item', title: 'Table', component: 'TableSelectorInitializer', @@ -29,10 +31,33 @@ export const TableSelectorInitializers = (props: any) => { ], }, { + key: 'filterBlocksInTableSelector', + type: 'itemGroup', + title: '{{t("Filter blocks")}}', + children: [ + { + key: 'filterFormBlockInTableSelector', + type: 'item', + title: '{{t("Form")}}', + component: 'FilterFormBlockInitializer', + name, + }, + { + key: 'filterCollapseBlockInTableSelector', + type: 'item', + title: '{{t("Collapse")}}', + component: 'FilterCollapseBlockInitializer', + name, + }, + ], + }, + { + key: 'otherBlocksInTableSelector', type: 'itemGroup', title: t('Other blocks'), children: [ { + key: 'markdownBlockInTableSelector', type: 'item', title: t('Add text'), component: 'BlockInitializer', diff --git a/packages/core/client/src/schema-initializer/items/DataBlockInitializer.tsx b/packages/core/client/src/schema-initializer/items/DataBlockInitializer.tsx index baa2624e4..2a01b53cd 100644 --- a/packages/core/client/src/schema-initializer/items/DataBlockInitializer.tsx +++ b/packages/core/client/src/schema-initializer/items/DataBlockInitializer.tsx @@ -6,10 +6,20 @@ import { useSchemaTemplateManager } from '../../schema-templates'; import { useCollectionDataSourceItems } from '../utils'; export const DataBlockInitializer = (props) => { - const { templateWrap, onCreateBlockSchema, componentType, createBlockSchema, insert, isCusomeizeCreate, ...others } = - props; + const { + templateWrap, + onCreateBlockSchema, + componentType, + createBlockSchema, + insert, + isCusomeizeCreate, + items, + ...others + } = props; const { getTemplateSchemaByMode } = useSchemaTemplateManager(); const { setVisible } = useContext(SchemaInitializerButtonContext); + const defaultItems = useCollectionDataSourceItems(componentType); + return ( } @@ -27,7 +37,7 @@ export const DataBlockInitializer = (props) => { } setVisible(false); }} - items={useCollectionDataSourceItems(componentType)} + items={items || defaultItems} /> ); }; diff --git a/packages/core/client/src/schema-initializer/items/FilterBlockInitializer.tsx b/packages/core/client/src/schema-initializer/items/FilterBlockInitializer.tsx index 0edd04d40..451a09dce 100644 --- a/packages/core/client/src/schema-initializer/items/FilterBlockInitializer.tsx +++ b/packages/core/client/src/schema-initializer/items/FilterBlockInitializer.tsx @@ -6,9 +6,10 @@ import { useSchemaTemplateManager } from '../../schema-templates'; import { useCollectionDataSourceItems } from '../utils'; export const FilterBlockInitializer = (props) => { - const { templateWrap, onCreateBlockSchema, componentType, createBlockSchema, insert, ...others } = props; + const { templateWrap, onCreateBlockSchema, componentType, createBlockSchema, insert, items, ...others } = props; const { getTemplateSchemaByMode } = useSchemaTemplateManager(); const { setVisible } = useContext(SchemaInitializerButtonContext); + const defaultItems = useCollectionDataSourceItems(componentType); return ( { } setVisible(false); }} - items={useCollectionDataSourceItems(componentType)} + items={items || defaultItems} /> ); }; diff --git a/packages/core/client/src/schema-initializer/items/FilterCollapseBlockInitializer.tsx b/packages/core/client/src/schema-initializer/items/FilterCollapseBlockInitializer.tsx index 180ec1981..615ea0846 100644 --- a/packages/core/client/src/schema-initializer/items/FilterCollapseBlockInitializer.tsx +++ b/packages/core/client/src/schema-initializer/items/FilterCollapseBlockInitializer.tsx @@ -1,11 +1,13 @@ -import React from 'react'; import { TableOutlined } from '@ant-design/icons'; +import React from 'react'; -import { DataBlockInitializer } from './DataBlockInitializer'; import { createCollapseBlockSchema } from '../utils'; +import { DataBlockInitializer } from './DataBlockInitializer'; export const FilterCollapseBlockInitializer = (props) => { - const { insert } = props; + const { insert, item } = props; + const items = item?.key === 'filterCollapseBlockInTableSelector' && []; + return ( { }); insert(schema); }} + items={items} /> ); }; diff --git a/packages/core/client/src/schema-initializer/items/FilterFormBlockInitializer.tsx b/packages/core/client/src/schema-initializer/items/FilterFormBlockInitializer.tsx index e63714549..cafe71fd5 100644 --- a/packages/core/client/src/schema-initializer/items/FilterFormBlockInitializer.tsx +++ b/packages/core/client/src/schema-initializer/items/FilterFormBlockInitializer.tsx @@ -1,9 +1,12 @@ -import React from 'react'; import { FormOutlined } from '@ant-design/icons'; +import React from 'react'; import { createFilterFormBlockSchema } from '../utils'; import { FilterBlockInitializer } from './FilterBlockInitializer'; export const FilterFormBlockInitializer = (props) => { + const { item } = props; + const items = item?.key === 'filterFormBlockInTableSelector' && []; + return ( { return s; }} createBlockSchema={createFilterFormBlockSchema} + items={items} /> ); }; diff --git a/packages/core/client/src/schema-initializer/items/TableSelectorInitializer.tsx b/packages/core/client/src/schema-initializer/items/TableSelectorInitializer.tsx index 0ae317987..96ccbf061 100644 --- a/packages/core/client/src/schema-initializer/items/TableSelectorInitializer.tsx +++ b/packages/core/client/src/schema-initializer/items/TableSelectorInitializer.tsx @@ -1,21 +1,18 @@ -import React from 'react'; import { FormOutlined } from '@ant-design/icons'; +import React from 'react'; import { useCollection } from '../../collection-manager'; -import { useSchemaTemplateManager } from '../../schema-templates'; import { SchemaInitializer } from '../SchemaInitializer'; import { createTableSelectorSchema } from '../utils'; export const TableSelectorInitializer = (props) => { const { onCreateBlockSchema, componentType, createBlockSchema, insert, ...others } = props; - const { getTemplateSchemaByMode } = useSchemaTemplateManager(); const collection = useCollection(); return ( } {...others} onClick={async ({ item }) => { - const field = item.field; insert( createTableSelectorSchema({ rowKey: collection.filterTargetKey, diff --git a/packages/core/client/src/schema-initializer/utils.ts b/packages/core/client/src/schema-initializer/utils.ts index 5f0f51655..46343e5a4 100644 --- a/packages/core/client/src/schema-initializer/utils.ts +++ b/packages/core/client/src/schema-initializer/utils.ts @@ -1435,7 +1435,7 @@ export const createTableSelectorSchema = (options) => { ...others, }, 'x-designer': 'TableSelectorDesigner', - 'x-component': 'BlockItem', + 'x-component': 'CardItem', properties: { actions: { type: 'void', @@ -1805,7 +1805,7 @@ const getChildren = ({ }: { collections: any[]; getCollectionFields: (name: any) => CollectionFieldOptions[]; - componentName: any; + componentName: string; searchValue: string; getTemplatesByCollection: (collectionName: string, resourceName?: string) => any; t; diff --git a/packages/plugins/@nocobase/plugin-ui-schema-storage/src/server/migrations/20231015125000-support-filter-blocks-in-select-record-drawer.ts b/packages/plugins/@nocobase/plugin-ui-schema-storage/src/server/migrations/20231015125000-support-filter-blocks-in-select-record-drawer.ts new file mode 100644 index 000000000..c21d6a48c --- /dev/null +++ b/packages/plugins/@nocobase/plugin-ui-schema-storage/src/server/migrations/20231015125000-support-filter-blocks-in-select-record-drawer.ts @@ -0,0 +1,24 @@ +import { Migration } from '@nocobase/server'; + +export default class extends Migration { + async up() { + const result = await this.app.version.satisfies('<=0.14.0-alpha.7'); + if (!result) { + return; + } + const r = this.db.getRepository('uiSchemas'); + const items = await r.find({ + filter: { + 'schema.x-designer': 'TableSelectorDesigner', + }, + }); + await this.db.sequelize.transaction(async (transaction) => { + for (const item of items) { + const schema = item.schema; + // BlockItem -> CardItem + schema['x-component'] = 'CardItem'; + await item.save({ transaction }); + } + }); + } +}