feat: support filter blocks in select record drawer (#2828)

* feat: support filter blocks in select record drawer

* feat: improve UX

* chore: add migration

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': {

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',

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 (
     <SchemaInitializer.Item
       icon={<TableOutlined />}
@@ -27,7 +37,7 @@ export const DataBlockInitializer = (props) => {
         }
         setVisible(false);
       }}
-      items={useCollectionDataSourceItems(componentType)}
+      items={items || defaultItems}
     />
   );
 };

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 (
     <SchemaInitializer.Item
@@ -27,7 +28,7 @@ export const FilterBlockInitializer = (props) => {
         }
         setVisible(false);
       }}
-      items={useCollectionDataSourceItems(componentType)}
+      items={items || defaultItems}
     />
   );
 };

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 (
     <DataBlockInitializer
       {...props}
@@ -19,6 +21,7 @@ export const FilterCollapseBlockInitializer = (props) => {
         });
         insert(schema);
       }}
+      items={items}
     />
   );
 };

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 (
     <FilterBlockInitializer
       {...props}
@@ -20,6 +23,7 @@ export const FilterFormBlockInitializer = (props) => {
         return s;
       }}
       createBlockSchema={createFilterFormBlockSchema}
+      items={items}
     />
   );
 };

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 (
     <SchemaInitializer.Item
       icon={<FormOutlined />}
       {...others}
       onClick={async ({ item }) => {
-        const field = item.field;
         insert(
           createTableSelectorSchema({
             rowKey: collection.filterTargetKey,

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;

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