fix: subtable search (#1124)

Reviewed-on: daoyoucloud/tachybase#1124

packages/core/client/src/schema-component/antd/association-field/SubTable.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, { useContext, useMemo, useState } from 'react';
 import {
   action,
   ArrayField,
@@ -7,13 +7,11 @@ import {
   observer,
   RecursionField,
   useFieldSchema,
-  useForm,
 } from '@tachybase/schema';
 
-import { useAsyncEffect } from 'ahooks';
+import { Button } from 'antd';
-import { Button, Tabs } from 'antd';
 import { createStyles } from 'antd-style';
-import { set, unionBy, uniqBy } from 'lodash';
+import { unionBy, uniqBy } from 'lodash';
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -23,12 +21,11 @@ import {
   SchemaComponentOptions,
   useActionContext,
 } from '../..';
-import { useAPIClient, useRequest } from '../../../api-client';
 import { useCreateActionProps } from '../../../block-provider/hooks';
 import { FormActiveFieldsProvider } from '../../../block-provider/hooks/useFormActiveFields';
 import { TableSelectorParamsProvider } from '../../../block-provider/TableSelectorProvider';
 import { CollectionProvider_deprecated } from '../../../collection-manager';
-import { CollectionRecordProvider, useCollectionManager, useCollectionRecord } from '../../../data-source';
+import { CollectionRecordProvider, useCollectionRecord } from '../../../data-source';
 import { markRecordAsNew } from '../../../data-source/collection-record/isNewRecord';
 import { FlagProvider } from '../../../flag-provider';
 import { useCompile } from '../../hooks';
@@ -36,7 +33,7 @@ import { ActionContextProvider } from '../action';
 import { Table } from '../table-v2/Table';
 import { useAssociationFieldContext, useFieldNames } from './hooks';
 import { useTableSelectorProps } from './InternalPicker';
-import { InternalTabs } from './SubTabs/InternamTabs';
+import { InternalTabs } from './SubTabs/InternalTabs';
 import { getLabelFormatValue, useLabelUiSchema } from './util';
 
 const useStyles = createStyles(({ css }) => {

packages/core/client/src/schema-component/antd/association-field/SubTabs/InternalTabs.tsx

@@ -1,9 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { ArrayField, observer, onFieldChange, Schema, useFieldSchema, useFormEffects } from '@tachybase/schema';
+import { fuzzysearch } from '@tachybase/utils/client';
 
-import { CheckOutlined, CheckSquareOutlined, SearchOutlined } from '@ant-design/icons';
+import { CheckOutlined, SearchOutlined } from '@ant-design/icons';
 import { useAsyncEffect, useDeepCompareEffect } from 'ahooks';
-import { Badge, Button, Input, Space, Tabs } from 'antd';
+import { Button, Input, Space, Tabs } from 'antd';
 import flat from 'flat';
 import { useTranslation } from 'react-i18next';
 
@@ -23,27 +24,24 @@ export const InternalTabs = observer((props) => {
   const quickAddParentField = fieldSchema['parent']['x-component-props']['quickAddParentCollection'];
   const [options, setOptions] = useState([]);
   const [defOptions, setDefOptions] = useState([]);
-  const { field, options: collectionField } = useAssociationFieldContext<ArrayField>();
+  const { field } = useAssociationFieldContext<ArrayField>();
   const { t } = useTranslation();
   const [changeForm, setChangeForm] = useState<any>();
 
-  const tableSchema = fieldSchema.reduceProperties((buf, schema) => {
+  const quickAddSchema = fieldSchema.reduceProperties((buf, schema) => {
-    const found = schema.reduceProperties(
+    const found = schema.reduceProperties((buf, schema) => {
-      (buf, schema) => {
+      if (schema.name === quickAddField) {
-        if (schema.name === quickAddField) {
+        return schema;
-          return schema;
+      }
-        }
+      return buf;
-        return buf;
+    });
-      },
+    if (found) {
-      new Schema({ name: 'not-found' }),
-    );
-    if (found.name === quickAddField) {
       return found;
     }
     return buf;
   }, new Schema({}));
-  const tabparams = tableSchema['x-component-props']?.['service']?.['params'];
+  const tabparams = quickAddSchema['x-component-props']?.['service']?.['params'];
-  const [fieldServiceFilter, setFieldServiceFilter] = useFieldServiceFilter(tabparams?.filter);
+  const [fieldServiceFilter] = useFieldServiceFilter(tabparams?.filter);
   const formFilter = flat(tabparams?.filter || {});
   const formFieldFilter = Object.values(formFilter)
     ?.map((item) => {
@@ -69,9 +67,9 @@ export const InternalTabs = observer((props) => {
         itemParams['parentOptions'] = parentItem?.data?.data;
       }
 
-      if (tableSchema && fieldInterface === 'm2o') {
+      if (quickAddSchema && fieldInterface === 'm2o') {
-        itemParams['service'] = tableSchema['x-component-props'].service;
+        itemParams['service'] = quickAddSchema['x-component-props'].service;
-        itemParams['collectionName'] = cm.getCollection(tableSchema['x-collection-field']).name;
+        itemParams['collectionName'] = cm.getCollection(quickAddSchema['x-collection-field']).name;
         const childrenItem = await api.request({
           url: itemParams['collectionName'] + ':list',
           params,
@@ -119,8 +117,8 @@ export const InternalTabs = observer((props) => {
         }
         setOptions(optionsItem);
         setDefOptions(optionsItem);
-      } else if (tableSchema) {
+      } else if (quickAddSchema) {
-        const fieldItem = cm.getCollectionField(tableSchema['x-collection-field']);
+        const fieldItem = cm.getCollectionField(quickAddSchema['x-collection-field']);
         if (!fieldItem?.uiSchema || !fieldItem?.uiSchema.enum) return;
         fieldItem.uiSchema.enum.forEach((item) => {
           optionsItem.push(item);
@@ -156,8 +154,8 @@ export const InternalTabs = observer((props) => {
     if (quickAddParentField && quickAddParentField.value !== 'none') {
       const filterOption = defOptions
         .map((item) => {
-          const filterItem = item?.childrenItems?.filter((childrenItem) => childrenItem?.label?.includes(value));
+          const filterItem = item?.childrenItems?.filter((childrenItem) => fuzzysearch(value, childrenItem?.label));
-          if (item?.label?.includes(value) || filterItem.length) {
+          if (fuzzysearch(value, item?.label) || filterItem.length) {
             return {
               ...item,
               childrenItems: filterItem.length ? filterItem : item.childrenItems,
@@ -167,7 +165,7 @@ export const InternalTabs = observer((props) => {
         .filter(Boolean);
       setOptions(filterOption);
     } else {
-      const filterOption = defOptions.filter((item) => item?.label?.includes(value));
+      const filterOption = defOptions.filter((item) => fuzzysearch(value, item?.label));
       setOptions(filterOption);
     }
   };