From 80e65fe5f69c82685412739cb7f0f8fb79fbc48f Mon Sep 17 00:00:00 2001 From: sealday Date: Wed, 5 Jun 2024 15:17:20 +0800 Subject: [PATCH] fix: subtable search (#1124) Reviewed-on: https://git.daoyoucloud.com/daoyoucloud/tachybase/pulls/1124 --- .../antd/association-field/SubTable.tsx | 13 ++--- .../{InternamTabs.tsx => InternalTabs.tsx} | 48 +++++++++---------- 2 files changed, 28 insertions(+), 33 deletions(-) rename packages/core/client/src/schema-component/antd/association-field/SubTabs/{InternamTabs.tsx => InternalTabs.tsx} (86%) diff --git a/packages/core/client/src/schema-component/antd/association-field/SubTable.tsx b/packages/core/client/src/schema-component/antd/association-field/SubTable.tsx index 46b54c5c3..0c2c447b0 100644 --- a/packages/core/client/src/schema-component/antd/association-field/SubTable.tsx +++ b/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, Tabs } from 'antd'; +import { Button } 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 }) => { diff --git a/packages/core/client/src/schema-component/antd/association-field/SubTabs/InternamTabs.tsx b/packages/core/client/src/schema-component/antd/association-field/SubTabs/InternalTabs.tsx similarity index 86% rename from packages/core/client/src/schema-component/antd/association-field/SubTabs/InternamTabs.tsx rename to packages/core/client/src/schema-component/antd/association-field/SubTabs/InternalTabs.tsx index 9f4e85b7b..432ef5f3f 100644 --- a/packages/core/client/src/schema-component/antd/association-field/SubTabs/InternamTabs.tsx +++ b/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(); + const { field } = useAssociationFieldContext(); const { t } = useTranslation(); const [changeForm, setChangeForm] = useState(); - const tableSchema = fieldSchema.reduceProperties((buf, schema) => { - const found = schema.reduceProperties( - (buf, schema) => { - if (schema.name === quickAddField) { - return schema; - } - return buf; - }, - new Schema({ name: 'not-found' }), - ); - if (found.name === quickAddField) { + const quickAddSchema = fieldSchema.reduceProperties((buf, schema) => { + const found = schema.reduceProperties((buf, schema) => { + if (schema.name === quickAddField) { + return schema; + } + return buf; + }); + if (found) { return found; } return buf; }, new Schema({})); - const tabparams = tableSchema['x-component-props']?.['service']?.['params']; - const [fieldServiceFilter, setFieldServiceFilter] = useFieldServiceFilter(tabparams?.filter); + const tabparams = quickAddSchema['x-component-props']?.['service']?.['params']; + 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') { - itemParams['service'] = tableSchema['x-component-props'].service; - itemParams['collectionName'] = cm.getCollection(tableSchema['x-collection-field']).name; + if (quickAddSchema && fieldInterface === 'm2o') { + itemParams['service'] = quickAddSchema['x-component-props'].service; + 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) { - const fieldItem = cm.getCollectionField(tableSchema['x-collection-field']); + } else if (quickAddSchema) { + 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)); - if (item?.label?.includes(value) || filterItem.length) { + const filterItem = item?.childrenItems?.filter((childrenItem) => fuzzysearch(value, childrenItem?.label)); + 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); } };