Skip to content

Commit ac87ed6

Browse files
scottsutscottsut
committed
refactor: Tree select config UI improvement
1 parent ef8cd77 commit ac87ed6

File tree

13 files changed

+91
-66
lines changed

13 files changed

+91
-66
lines changed

‎frontend/src/app/pages/DashBoardPage/components/Widgets/ControllerWidget/Controller/TreeController.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export interface TreeControllerFormProps {
2929
label?: React.ReactNode;
3030
name?: string;
3131
required?: boolean;
32-
parentField?: string[];
32+
parentFields?: string[];
3333
}
3434

3535
export const TreeControllerForm: React.FC<TreeControllerFormProps> = memo(

‎frontend/src/app/pages/DashBoardPage/components/Widgets/ControllerWidget/ControllerWidgetCore.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export const ControllerWidgetCore: React.FC<{}> = memo(() => {
7474
controllerValues,
7575
valueOptions,
7676
valueOptionType,
77-
parentField,
77+
parentFields,
7878
buildingMethod,
7979
// sqlOperator,
8080
} = useMemo(() => config as ControllerConfig, [config]);
@@ -106,7 +106,7 @@ export const ControllerWidgetCore: React.FC<{}> = memo(() => {
106106
const dataRows = dataset?.rows || [];
107107

108108
if (valueOptionType === 'common') {
109-
if (parentField?.length) {
109+
if (parentFields?.length) {
110110
return convertToTree(dataRows, buildingMethod);
111111
}
112112
return dataRows.map(ele => {
@@ -126,7 +126,7 @@ export const ControllerWidgetCore: React.FC<{}> = memo(() => {
126126
dataset?.rows,
127127
valueOptionType,
128128
valueOptions,
129-
parentField,
129+
parentFields,
130130
buildingMethod,
131131
]);
132132

@@ -367,7 +367,7 @@ export const ControllerWidgetCore: React.FC<{}> = memo(() => {
367367
form.setFieldsValue({ value: controllerValues });
368368
return (
369369
<TreeControllerForm
370-
parentField={parentField}
370+
parentFields={parentFields}
371371
onChange={onControllerChange}
372372
treeData={optionRows}
373373
name={'value'}
@@ -387,7 +387,7 @@ export const ControllerWidgetCore: React.FC<{}> = memo(() => {
387387
leftControlLabel,
388388
config,
389389
controllerDate,
390-
parentField,
390+
parentFields,
391391
onRangeTimeChange,
392392
onTimeChange,
393393
]);

‎frontend/src/app/pages/DashBoardPage/pages/Board/slice/thunk.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -497,14 +497,14 @@ export const getControllerOptions = createAsyncThunk<
497497

498498
const [viewId, ...columns] = config.assistViewFields;
499499

500-
const parentField = config?.parentField;
500+
const parentFields = config?.parentFields;
501501

502502
const executeToken = executeTokenMap?.[viewId];
503503

504504
const view = viewMap[viewId];
505505
if (!view) return null;
506-
if (parentField) {
507-
columns.push(...parentField);
506+
if (parentFields) {
507+
columns.push(...parentFields);
508508
}
509509

510510
const requestParams = getControlOptionQueryParams({

‎frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/TreeSetter/TreeSetter.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ function TreeSetter({
4343
mode={mode}
4444
optionFilterProp={'label'}
4545
onChange={onChange}
46-
placeholder={tc('parentFieldId')}
46+
placeholder={mode ? tc('parentFieldsHierarchy') : tc('parentFields')}
4747
showSearch
4848
allowClear
4949
options={viewFieldList}

‎frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/TreeTypeSetter/TreeTypeSetter.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ function TreeTypeSetter({ form }: TreeTypeSetterProps) {
3737
form?.setFieldsValue({
3838
config: {
3939
...getControllerConfig,
40-
parentField: undefined,
40+
parentFields: undefined,
4141
controllerValues: [],
4242
valueOptions: [],
4343
assistViewFields: [],

‎frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/ValuesOptionsSetter/AssistViewFields.tsx‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,20 @@ import styled from 'styled-components/macro';
2323
export interface AssistViewFieldsProps {
2424
onChange?: (value: string[], type) => void;
2525
value?: string[];
26+
isHierarchyTree?: boolean;
2627
style: object;
2728
viewList;
2829
viewFieldList;
2930
}
3031
export const AssistViewFields: React.FC<AssistViewFieldsProps> = memo(
31-
({ onChange, value: propsValue, style, viewList, viewFieldList }) => {
32+
({
33+
onChange,
34+
value: propsValue,
35+
isHierarchyTree,
36+
style,
37+
viewList,
38+
viewFieldList,
39+
}) => {
3240
const tc = useI18NPrefix(`viz.control`);
3341
const [val, setVal] = useState<string[]>([]);
3442

@@ -56,17 +64,19 @@ export const AssistViewFields: React.FC<AssistViewFieldsProps> = memo(
5664
}}
5765
options={viewList}
5866
></Select>
59-
<Select
60-
optionFilterProp={'label'}
61-
onChange={value => {
62-
handleOnChange([val?.[0] || '', value], 'viewField');
63-
}}
64-
placeholder={tc('selectViewField')}
65-
showSearch
66-
value={val?.[1]}
67-
loading={!viewFieldList}
68-
options={viewFieldList}
69-
></Select>
67+
{!isHierarchyTree && (
68+
<Select
69+
optionFilterProp={'label'}
70+
onChange={value => {
71+
handleOnChange([val?.[0] || '', value], 'viewField');
72+
}}
73+
placeholder={tc('selectViewField')}
74+
showSearch
75+
value={val?.[1]}
76+
loading={!viewFieldList}
77+
options={viewFieldList}
78+
></Select>
79+
)}
7080
</StyleSpace>
7181
);
7282
},

‎frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/ValuesOptionsSetter/ValuesOptionsSetter.tsx‎

Lines changed: 43 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -98,8 +98,8 @@ const ValuesOptionsSetter: FC<{
9898
return form?.getFieldValue('config') as ControllerConfig;
9999
}, [form]);
100100

101-
const getParentField = useCallback(() => {
102-
return form?.getFieldValue('config')?.parentField as string[];
101+
const getParentFields = useCallback(() => {
102+
return form?.getFieldValue('config')?.parentFields as string[];
103103
}, [form]);
104104

105105
const getTreeBuildingMethod = useCallback(() => {
@@ -194,16 +194,16 @@ const ValuesOptionsSetter: FC<{
194194

195195
if (type !== 'view') {
196196
const [viewId, ...columns] = value;
197-
const parentField = getParentField();
197+
const parentFields = getParentFields();
198198
const buildingMethod = getTreeBuildingMethod();
199199

200-
if (parentField) {
201-
columns.push(...parentField);
200+
if (parentFields) {
201+
columns.push(...parentFields);
202202
}
203203
const dataset = await fetchNewDataset(viewId, columns, dataView);
204204

205205
setOptionValues(
206-
parentField?.length > 0
206+
parentFields?.length > 0
207207
? convertToTree(dataset?.rows, buildingMethod)
208208
: convertToList(dataset?.rows),
209209
);
@@ -212,7 +212,7 @@ const ValuesOptionsSetter: FC<{
212212
[
213213
convertToList,
214214
fetchNewDataset,
215-
getParentField,
215+
getParentFields,
216216
getViewOption,
217217
getTreeBuildingMethod,
218218
],
@@ -231,7 +231,7 @@ const ValuesOptionsSetter: FC<{
231231
...config,
232232
assistViewFields: [],
233233
controllerValues: [],
234-
parentField: undefined,
234+
parentFields: undefined,
235235
},
236236
});
237237
return;
@@ -242,7 +242,7 @@ const ValuesOptionsSetter: FC<{
242242
...config,
243243
assistViewFields: value,
244244
controllerValues: [],
245-
parentField: undefined,
245+
parentFields: undefined,
246246
},
247247
});
248248
getViewData(value, type);
@@ -271,18 +271,18 @@ const ValuesOptionsSetter: FC<{
271271
);
272272

273273
const onInitOptions = useCallback(
274-
async (value: string[], parentField?: string[]) => {
274+
async (value: string[], parentFields?: string[]) => {
275275
const [viewId, ...columns] = value;
276276
const { option: options, dataView } = await getViewOption(viewId);
277-
if (parentField) {
278-
columns.push(...parentField);
277+
if (parentFields) {
278+
columns.push(...parentFields);
279279
}
280280
const dataset = await fetchNewDataset(viewId, columns, dataView);
281281
const config: ControllerConfig = getControllerConfig();
282282
const buildingMethod = getTreeBuildingMethod();
283283

284284
setOptionValues(
285-
parentField
285+
parentFields
286286
? convertToTree(dataset?.rows, buildingMethod)
287287
: convertToList(dataset?.rows),
288288
);
@@ -313,28 +313,40 @@ const ValuesOptionsSetter: FC<{
313313
}
314314

315315
const assistViewFields = config?.assistViewFields;
316-
const parentField = config?.parentField;
316+
const parentFields = config?.parentFields;
317317
if (assistViewFields && assistViewFields[0] && assistViewFields[1]) {
318-
onInitOptions(assistViewFields, parentField);
318+
onInitOptions(assistViewFields, parentFields);
319319
}
320320
}, [form, getControllerConfig, onInitOptions]);
321321

322322
const getOptionType = useCallback(() => {
323323
return getControllerConfig()?.valueOptionType as ValueOptionType;
324324
}, [getControllerConfig]);
325325

326-
const onParentFieldChange = useCallback(
326+
const onParentFieldsChange = useCallback(
327327
(val: string | string[]) => {
328-
const config: ControllerConfig = getControllerConfig();
329-
form?.setFieldsValue({
330-
config: {
331-
...config,
332-
parentField: Array.isArray(val) ? val : [val],
333-
},
334-
});
335-
getViewData(config.assistViewFields || []);
328+
let mergedConfig: ControllerConfig = {
329+
...getControllerConfig(),
330+
parentFields: Array.isArray(val) ? val : [val],
331+
};
332+
333+
if (getTreeBuildingMethod() === 'byHierarchy') {
334+
mergedConfig.assistViewFields = mergedConfig.assistViewFields!.slice(
335+
0,
336+
1,
337+
);
338+
339+
if ((val as string[]).length) {
340+
mergedConfig.assistViewFields = mergedConfig.assistViewFields.concat(
341+
(val as string[])[0],
342+
);
343+
}
344+
}
345+
346+
form?.setFieldsValue({ config: mergedConfig });
347+
getViewData(mergedConfig.assistViewFields || []);
336348
},
337-
[getControllerConfig, getViewData, form],
349+
[getControllerConfig, getTreeBuildingMethod, getViewData, form],
338350
);
339351

340352
useEffect(() => {
@@ -380,18 +392,21 @@ const ValuesOptionsSetter: FC<{
380392
onChange={onViewFieldChange}
381393
viewList={viewList}
382394
viewFieldList={labelOptions}
395+
isHierarchyTree={
396+
isTree && getTreeBuildingMethod() === 'byHierarchy'
397+
}
383398
style={{ margin: '6px 0' }}
384399
/>
385400
</Form.Item>
386401
{isTree && (
387-
<Form.Item name={['config', 'parentField']} noStyle>
402+
<Form.Item name={['config', 'parentFields']} noStyle>
388403
<TreeSetter
389404
mode={
390405
getTreeBuildingMethod() === 'byHierarchy'
391406
? 'multiple'
392407
: undefined
393408
}
394-
onChange={onParentFieldChange}
409+
onChange={onParentFieldsChange}
395410
viewFieldList={labelOptions}
396411
style={{ margin: '6px 0' }}
397412
/>
@@ -420,7 +435,7 @@ const ValuesOptionsSetter: FC<{
420435
</Select>
421436
)}
422437
<Form.Item name={['config', 'controllerValues']}>
423-
{getParentField()?.length ? (
438+
{getParentFields()?.length ? (
424439
<TreeSelect
425440
placeholder={tc('selectDefaultValue')}
426441
multiple

‎frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export interface ControllerConfig {
4141
canChangeSqlOperator?: boolean; // 是否显示 sqlOperator 切换
4242
assistViewFields?: string[]; //辅助添加view字段
4343
controllerDate?: ControllerDate; //存储时间
44-
parentField?: string[]; //父节点字段
44+
parentFields?: string[]; //父节点字段
4545
buildingMethod?: 'byParent' | 'byHierarchy'; //树控制器类型
4646

4747
minValue?: number; // slider min

‎frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/utils.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -289,7 +289,7 @@ export const getDropdownTreeControllerConfig = () => {
289289
const config = getInitControllerConfig();
290290
config.sqlOperator = FilterSqlOperator.In;
291291
config.buildingMethod = 'byParent';
292-
config.parentField = [];
292+
config.parentFields = [];
293293
return config;
294294
};
295295

‎frontend/src/app/pages/DashBoardPage/pages/BoardEditor/slice/thunk.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -684,14 +684,14 @@ export const getEditControllerOptions = createAsyncThunk<
684684
if (!Array.isArray(config.assistViewFields)) return null;
685685
if (config.assistViewFields.length < 2) return null;
686686

687-
const parentField = config?.parentField;
687+
const parentFields = config?.parentFields;
688688
const boardState = rootState.board as BoardState;
689689
const viewMap = boardState.viewMap;
690690
const [viewId, ...columns] = config.assistViewFields;
691691
const view = viewMap[viewId];
692692
if (!view) return null;
693-
if (parentField) {
694-
columns.push(...parentField);
693+
if (parentFields) {
694+
columns.push(...parentFields);
695695
}
696696
const requestParams = getControlOptionQueryParams({
697697
view,

0 commit comments

Comments
 (0)