chore: Tree select controller naming & description improvement

scottsut · scottsut · commit ef8cd7784aa9 · 2023-03-31T12:26:50.000+08:00
diff --git a/frontend/src/app/pages/DashBoardPage/components/Widgets/ControllerWidget/ControllerWidgetCore.tsx b/frontend/src/app/pages/DashBoardPage/components/Widgets/ControllerWidget/ControllerWidgetCore.tsx
@@ -75,7 +75,7 @@ export const ControllerWidgetCore: React.FC<{}> = memo(() => {
     valueOptions,
     valueOptionType,
     parentField,
-    treeType,
+    buildingMethod,
     // sqlOperator,
   } = useMemo(() => config as ControllerConfig, [config]);
   const title = getWidgetTitle(widget.config.customConfig.props);
@@ -107,7 +107,7 @@ export const ControllerWidgetCore: React.FC<{}> = memo(() => {
 
     if (valueOptionType === 'common') {
       if (parentField?.length) {
-        return convertToTree(dataRows, treeType);
+        return convertToTree(dataRows, buildingMethod);
       }
       return dataRows.map(ele => {
         const item: RelationFilterValue = {
@@ -122,7 +122,13 @@ export const ControllerWidgetCore: React.FC<{}> = memo(() => {
     } else {
       return [];
     }
-  }, [dataset?.rows, valueOptionType, valueOptions, parentField, treeType]);
+  }, [
+    dataset?.rows,
+    valueOptionType,
+    valueOptions,
+    parentField,
+    buildingMethod,
+  ]);
 
   const onControllerChange = useCallback(() => {
     form.submit();
diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/TreeTypeSetter/TreeTypeSetter.tsx b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/TreeTypeSetter/TreeTypeSetter.tsx
@@ -48,20 +48,20 @@ function TreeTypeSetter({ form }: TreeTypeSetterProps) {
   return (
     <Form.Item
       shouldUpdate
-      label={t('treeSelectType')}
-      name={['config', 'treeType']}
+      label={t('treeBuildingMethod')}
+      name={['config', 'buildingMethod']}
     >
       <Radio.Group onChange={handleChangeFn}>
-        <Radio.Button value="treeControl">
-          {t('treeControl') + ' '}
-          <Tooltip title={t('treeControlTip')}>
+        <Radio.Button value="byParent">
+          {t('byParent') + ' '}
+          <Tooltip title={t('byParentTip')}>
             <QuestionCircleOutlined />
           </Tooltip>
         </Radio.Button>
 
-        <Radio.Button value="treeSelect">
-          {t('treeSelect') + ' '}
-          <Tooltip title={t('treeSelectTip')}>
+        <Radio.Button value="byHierarchy">
+          {t('byHierarchy') + ' '}
+          <Tooltip title={t('byHierarchyTip')}>
             <QuestionCircleOutlined />
           </Tooltip>
         </Radio.Button>
diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/ValuesOptionsSetter/ValuesOptionsSetter.tsx b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/ValuesOptionsSetter/ValuesOptionsSetter.tsx
@@ -102,8 +102,8 @@ const ValuesOptionsSetter: FC<{
     return form?.getFieldValue('config')?.parentField as string[];
   }, [form]);
 
-  const getTreeType = useCallback(() => {
-    return form?.getFieldValue('config')?.treeType as string;
+  const getTreeBuildingMethod = useCallback(() => {
+    return form?.getFieldValue('config')?.buildingMethod as string;
   }, [form]);
 
   const isMultiple = useMemo(() => {
@@ -195,7 +195,7 @@ const ValuesOptionsSetter: FC<{
       if (type !== 'view') {
         const [viewId, ...columns] = value;
         const parentField = getParentField();
-        const treeType = getTreeType();
+        const buildingMethod = getTreeBuildingMethod();
 
         if (parentField) {
           columns.push(...parentField);
@@ -204,7 +204,7 @@ const ValuesOptionsSetter: FC<{
 
         setOptionValues(
           parentField?.length > 0
-            ? convertToTree(dataset?.rows, treeType)
+            ? convertToTree(dataset?.rows, buildingMethod)
             : convertToList(dataset?.rows),
         );
       }
@@ -214,7 +214,7 @@ const ValuesOptionsSetter: FC<{
       fetchNewDataset,
       getParentField,
       getViewOption,
-      getTreeType,
+      getTreeBuildingMethod,
     ],
   );
 
@@ -279,11 +279,11 @@ const ValuesOptionsSetter: FC<{
       }
       const dataset = await fetchNewDataset(viewId, columns, dataView);
       const config: ControllerConfig = getControllerConfig();
-      const treeType = getTreeType();
+      const buildingMethod = getTreeBuildingMethod();
 
       setOptionValues(
         parentField
-          ? convertToTree(dataset?.rows, treeType)
+          ? convertToTree(dataset?.rows, buildingMethod)
           : convertToList(dataset?.rows),
       );
       setLabelOptions(options);
@@ -300,7 +300,7 @@ const ValuesOptionsSetter: FC<{
       fetchNewDataset,
       getControllerConfig,
       getViewOption,
-      getTreeType,
+      getTreeBuildingMethod,
     ],
   );
 
@@ -387,7 +387,9 @@ const ValuesOptionsSetter: FC<{
                   <Form.Item name={['config', 'parentField']} noStyle>
                     <TreeSetter
                       mode={
-                        getTreeType() === 'treeSelect' ? 'multiple' : undefined
+                        getTreeBuildingMethod() === 'byHierarchy'
+                          ? 'multiple'
+                          : undefined
                       }
                       onChange={onParentFieldChange}
                       viewFieldList={labelOptions}
@@ -398,7 +400,7 @@ const ValuesOptionsSetter: FC<{
 
                 {getOptionType() === 'common' && (
                   <Space direction="vertical" style={{ width: '100%' }}>
-                    {!(isTree && getTreeType() === 'treeSelect') && (
+                    {!(isTree && getTreeBuildingMethod() === 'byHierarchy') && (
                       <Select
                         showSearch
                         placeholder={tc('optionLabelField')}
diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/types.ts b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/types.ts
@@ -42,7 +42,7 @@ export interface ControllerConfig {
   assistViewFields?: string[]; //辅助添加view字段
   controllerDate?: ControllerDate; //存储时间
   parentField?: string[]; //父节点字段
-  treeType?: 'treeControl' | 'treeSelect'; //树控制器类型
+  buildingMethod?: 'byParent' | 'byHierarchy'; //树控制器类型
 
   minValue?: number; // slider min
   maxValue?: number; // slider max
diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/utils.ts b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/utils.ts
@@ -288,7 +288,7 @@ export const getRangeValueControllerConfig = () => {
 export const getDropdownTreeControllerConfig = () => {
   const config = getInitControllerConfig();
   config.sqlOperator = FilterSqlOperator.In;
-  config.treeType = 'treeControl';
+  config.buildingMethod = 'byParent';
   config.parentField = [];
   return config;
 };
diff --git a/frontend/src/app/pages/DashBoardPage/utils/widget.ts b/frontend/src/app/pages/DashBoardPage/utils/widget.ts
@@ -836,7 +836,7 @@ export const convertToTree = (col, type) => {
   let copyCol = CloneValueDeep(col);
   let emptyParentList = ['null', 'undefined', 'false'];
 
-  if (type === 'treeControl') {
+  if (type === 'byParent') {
     const parent = copyCol?.find(
       v => !v[v.length - 1] || emptyParentList.includes(v[v.length - 1]),
     ) || [null];
diff --git a/frontend/src/locales/en/translation.json b/frontend/src/locales/en/translation.json
@@ -1177,11 +1177,11 @@
       "delete": "Delete",
       "populate": "Populate From Field Values",
       "parentFieldId": "Select Parent Field",
-      "treeSelectType": "Select Tree Type",
-      "treeControl": "Tree Control",
-      "treeControlTip": "Multi-level structure list (folders, organizational structures, categories, countries, etc. Use tree controls to fully display hierarchical relationships.)",
-      "treeSelect": "Tree Select",
-      "treeSelectTip": "Tree selection control (can be used when the optional data structure is a tree structure, such as company hierarchy, subject system, taxonomy, etc.)"
+      "treeBuildingMethod": "Building Method",
+      "byParent": "By Parent",
+      "byParentTip": "Automatically build a tree by specifying a value field (ID) and a parent field (Parent ID); for example: folder tree",
+      "byHierarchy": "By Hierarchy",
+      "byHierarchyTip": "Build a tree from multiple dimension fields with natural hierarchical attributes; for example: country, province, city"
     },
     "date": {
       "year": "Year",
diff --git a/frontend/src/locales/zh/translation.json b/frontend/src/locales/zh/translation.json
@@ -1175,11 +1175,11 @@
       "delete": "删除",
       "populate": "从字段填充备选项",
       "parentFieldId": "父ID字段",
-      "treeSelectType": "树类型选择",
-      "treeControl": "树形控件",
-      "treeControlTip": "多层次的结构列表（文件夹、组织架构、生物分类、国家地区等等。使用 树控件 可以完整展现其中的层级关系。）",
-      "treeSelect": "树选择",
-      "treeSelectTip": "树型选择控件（可选择的数据结构是一个树形结构时，可以使用，例如公司层级、学科系统、分类目录等等。）"
+      "treeBuildingMethod": "构建树方式",
+      "byParent": "父子字段",
+      "byParentTip": "通过指定取值字段（ID）和父级字段（Parent ID）来自动构建树；例如：文件夹树",
+      "byHierarchy": "层级字段",
+      "byHierarchyTip": "通过多个拥有天然层级属性的维度字段来构建树；例如：国家、省份、城市"
     },
     "date": {
       "year": "年",
