From 33779d3da28f336fc439fdf68640a67ad0dd9209 Mon Sep 17 00:00:00 2001
From: YANG QIA <2013xile@gmail.com>
Date: Fri, 15 Dec 2023 11:33:08 +0800
Subject: [PATCH] fix: fix T-2749 (#3194)
---
.../src/client/filter/FilterItemDesigner.tsx | 20 +++++++++++++---
.../client/filter/FilterItemInitializers.tsx | 18 ++++++++++++--
.../src/client/hooks/filter.ts | 5 ++--
.../src/client/utils.ts | 24 +++++++++++++++++++
4 files changed, 60 insertions(+), 7 deletions(-)
diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterItemDesigner.tsx b/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterItemDesigner.tsx
index 597a9062c..ab53de442 100644
--- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterItemDesigner.tsx
+++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterItemDesigner.tsx
@@ -12,6 +12,7 @@ import {
useCompile,
useDesignable,
SchemaSettingsSelectItem,
+ CollectionFieldOptions,
} from '@nocobase/client';
import { useChartsTranslation } from '../locale';
import { Schema, useField, useFieldSchema } from '@formily/react';
@@ -22,6 +23,7 @@ import { getPropsSchemaByComponent, setDefaultValue } from './utils';
import { ChartFilterVariableInput } from './FilterVariableInput';
import { useChartFilter, useCollectionJoinFieldTitle } from '../hooks';
import { Typography } from 'antd';
+import { getFormulaInterface } from '../utils';
const { Text } = Typography;
const EditTitle = () => {
@@ -76,9 +78,19 @@ const EditOperator = () => {
const { dn } = useDesignable();
const { setField } = useContext(ChartFilterContext);
const { getInterface, getCollectionJoinField } = useCollectionManager();
+
+ const getOperators = (props: CollectionFieldOptions) => {
+ let fieldInterface = props?.interface;
+ if (fieldInterface === 'formula') {
+ fieldInterface = getFormulaInterface(props.dataType) || props.dataType;
+ }
+ const interfaceConfig = getInterface(fieldInterface);
+ const operatorList = interfaceConfig?.filterable?.operators || [];
+ return { operatorList, interfaceConfig };
+ };
+
let props = getCollectionJoinField(fieldName);
- let interfaceConfig = getInterface(props?.interface);
- let operatorList = interfaceConfig?.filterable?.operators || [];
+ let { operatorList, interfaceConfig } = getOperators(props);
if (!operatorList.length) {
const names = fieldName.split('.');
const name = names.pop();
@@ -86,7 +98,9 @@ const EditOperator = () => {
if (!props) {
return null;
}
- interfaceConfig = getInterface(props.interface);
+ const res = getOperators(props);
+ operatorList = res.operatorList;
+ interfaceConfig = res.interfaceConfig;
if (!interfaceConfig) {
return null;
}
diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterItemInitializers.tsx b/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterItemInitializers.tsx
index f4381f6c5..eacbe22f5 100644
--- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterItemInitializers.tsx
+++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterItemInitializers.tsx
@@ -20,11 +20,13 @@ import { useMemoizedFn } from 'ahooks';
import { FormLayout, FormItem } from '@formily/antd-v5';
import { uid } from '@formily/shared';
import { useChartData, useChartFilter, useChartFilterSourceFields, useFieldComponents } from '../hooks/filter';
-import { Alert } from 'antd';
+import { Alert, Typography } from 'antd';
import { getPropsSchemaByComponent } from './utils';
import { Field, onFieldValueChange } from '@formily/core';
import { css, cx } from '@emotion/css';
import { ConfigProvider } from 'antd';
+import { ErrorBoundary } from 'react-error-boundary';
+const { Paragraph, Text } = Typography;
const FieldComponentProps: React.FC = observer((props) => {
const form = useForm();
@@ -32,6 +34,16 @@ const FieldComponentProps: React.FC = observer((props) => {
return schema ? : null;
});
+const ErrorFallback = ({ error }) => {
+ return (
+
+
+ {error.message}
+
+
+ );
+};
+
export const ChartFilterFormItem = observer(
(props: any) => {
const field = useField();
@@ -68,7 +80,9 @@ export const ChartFilterFormItem = observer(
return (
-
+ console.log(err)} FallbackComponent={ErrorFallback}>
+
+
);
diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/hooks/filter.ts b/packages/plugins/@nocobase/plugin-data-visualization/src/client/hooks/filter.ts
index f4717c685..e75c5199d 100644
--- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/hooks/filter.ts
+++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/hooks/filter.ts
@@ -8,7 +8,7 @@ import { ChartFilterContext } from '../filter/FilterProvider';
import { useMemoizedFn } from 'ahooks';
import { parse } from '@nocobase/utils/client';
import lodash from 'lodash';
-import { getValuesByPath } from '../utils';
+import { getFormulaComponent, getValuesByPath } from '../utils';
import deepmerge from 'deepmerge';
export const useCustomFieldInterface = () => {
@@ -88,9 +88,10 @@ export const useChartFilter = () => {
},
};
if (field.interface === 'formula') {
+ const component = getFormulaComponent(field.dataType) || 'Input';
schema = {
...schema,
- 'x-component': 'InputNumber',
+ 'x-component': component,
};
}
if (['oho', 'o2m'].includes(field.interface)) {
diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/utils.ts b/packages/plugins/@nocobase/plugin-data-visualization/src/client/utils.ts
index 0bdc9c8da..3e5abb5b6 100644
--- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/utils.ts
+++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/utils.ts
@@ -133,3 +133,27 @@ export const getValuesByPath = (values: any, path: string) => {
}
return result;
};
+
+export const getFormulaComponent = (type: string) => {
+ return {
+ boolean: 'Checkbox',
+ integer: 'InputNumber',
+ bigInt: 'InputNumber',
+ double: 'InputNumber',
+ decimal: 'InputNumber',
+ date: 'DatePicker',
+ string: 'Input',
+ }[type];
+};
+
+export const getFormulaInterface = (type: string) => {
+ return {
+ boolean: 'boolean',
+ integer: 'integer',
+ bigInt: 'integer',
+ double: 'number',
+ decimal: 'number',
+ date: 'datetime',
+ string: 'input',
+ }[type];
+};