Skip to content

Commit bcd09c3

Browse files
authored
Merge pull request #1129 from xieliuduo/dev6-widgetClick
refactor: BoardActionProvider widgetActionProvider
2 parents c653c1b + d4ff798 commit bcd09c3

File tree

60 files changed

+1429
-1242
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

60 files changed

+1429
-1242
lines changed
Lines changed: 298 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,298 @@
1+
/**
2+
* Datart
3+
*
4+
* Copyright 2021
5+
*
6+
* Licensed under the Apache License, Version 2.0 (the "License");
7+
* you may not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing, software
13+
* distributed under the License is distributed on an "AS IS" BASIS,
14+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15+
* See the License for the specific language governing permissions and
16+
* limitations under the License.
17+
*/
18+
import { urlSearchTransfer } from 'app/pages/MainPage/pages/VizPage/utils';
19+
import { ChartMouseEventParams } from 'app/types/Chart';
20+
import { createBrowserHistory } from 'history';
21+
import { RootState } from 'types';
22+
import { jumpTypes } from '../constants';
23+
import { boardActions } from '../pages/Board/slice';
24+
import {
25+
getChartWidgetDataAsync,
26+
getWidgetData,
27+
} from '../pages/Board/slice/thunk';
28+
import {
29+
BoardLinkFilter,
30+
VizRenderMode,
31+
Widget,
32+
} from '../pages/Board/slice/types';
33+
import {
34+
editDashBoardInfoActions,
35+
editWidgetInfoActions,
36+
} from '../pages/BoardEditor/slice';
37+
import {
38+
editorWidgetClearLinkageAction,
39+
widgetClearLinkageAction,
40+
} from '../pages/BoardEditor/slice/actions/actions';
41+
import {
42+
getEditChartWidgetDataAsync,
43+
getEditWidgetData,
44+
} from '../pages/BoardEditor/slice/thunk';
45+
import { getValueByRowData } from '../utils/widget';
46+
const history = createBrowserHistory();
47+
export const toggleLinkageAction =
48+
(boardEditing: boolean, boardId: string, widgetId: string, toggle: boolean) =>
49+
dispatch => {
50+
if (boardEditing) {
51+
dispatch(
52+
editWidgetInfoActions.changeWidgetInLinking({
53+
boardId,
54+
widgetId,
55+
toggle,
56+
}),
57+
);
58+
} else {
59+
dispatch(
60+
boardActions.changeWidgetInLinking({
61+
boardId,
62+
widgetId,
63+
toggle,
64+
}),
65+
);
66+
}
67+
};
68+
// tableChartClickAction
69+
export const tableChartClickAction =
70+
(
71+
boardId: string,
72+
editing: boolean,
73+
renderMode: VizRenderMode,
74+
widget: Widget,
75+
params: ChartMouseEventParams,
76+
) =>
77+
dispatch => {
78+
const opt = {
79+
pageInfo: { pageNo: params?.value?.pageNo },
80+
sorters: [
81+
{
82+
column: params?.seriesName!,
83+
operator: (params?.value as any)?.direction,
84+
aggOperator: (params?.value as any)?.aggOperator,
85+
},
86+
],
87+
};
88+
if (editing) {
89+
dispatch(
90+
getEditChartWidgetDataAsync({
91+
widgetId: widget.id,
92+
option: opt,
93+
}),
94+
);
95+
} else {
96+
dispatch(
97+
getChartWidgetDataAsync({
98+
boardId,
99+
widgetId: widget.id,
100+
renderMode,
101+
option: opt,
102+
}),
103+
);
104+
}
105+
};
106+
107+
export const widgetClickJumpAction =
108+
(
109+
boardId: string,
110+
editing: boolean,
111+
renderMode: VizRenderMode,
112+
widget: Widget,
113+
params: ChartMouseEventParams,
114+
) =>
115+
(dispatch, getState) => {
116+
const state = getState() as RootState;
117+
const orgId = state?.main?.orgId || '';
118+
const folderIds = state.viz?.vizs?.map(v => v.relId) || [];
119+
const jumpConfig = widget.config?.jumpConfig;
120+
const targetType = jumpConfig?.targetType || jumpTypes[0].value;
121+
122+
if (
123+
jumpConfig?.targetType === 'INTERNAL' &&
124+
!folderIds.includes(jumpConfig.target.relId)
125+
) {
126+
history.push(`/404/targetVizDeleted`);
127+
return;
128+
}
129+
const URL = jumpConfig?.URL || '';
130+
const queryName = jumpConfig?.queryName || '';
131+
const targetId = jumpConfig?.target?.relId;
132+
const jumpFieldName: string = jumpConfig?.field?.jumpFieldName || '';
133+
if (
134+
params.componentType === 'table' &&
135+
jumpFieldName !== params.seriesName
136+
) {
137+
console.log('__ jumpFieldName !== params.seriesName');
138+
return;
139+
}
140+
const rowDataValue = getValueByRowData(params.data, jumpFieldName);
141+
if (typeof jumpConfig?.filter === 'object' && targetType === 'INTERNAL') {
142+
const searchParamsStr = urlSearchTransfer.toUrlString({
143+
[jumpConfig?.filter?.filterId]: rowDataValue,
144+
});
145+
if (targetId) {
146+
history.push(
147+
`/organizations/${orgId}/vizs/${targetId}?${searchParamsStr}`,
148+
);
149+
}
150+
} else if (targetType === 'URL') {
151+
let jumpUrl;
152+
if (URL.indexOf('?') > -1) {
153+
jumpUrl = `${URL}&${queryName}=${rowDataValue}`;
154+
} else {
155+
jumpUrl = `${URL}?${queryName}=${rowDataValue}`;
156+
}
157+
window.location.href = jumpUrl;
158+
}
159+
};
160+
161+
export const widgetClickLinkageAction =
162+
(
163+
boardId: string,
164+
editing: boolean,
165+
renderMode: VizRenderMode,
166+
widget: Widget,
167+
params: ChartMouseEventParams,
168+
) =>
169+
(dispatch, getState) => {
170+
const { componentType, seriesType, seriesName } = params;
171+
const isTableHandle = componentType === 'table' && seriesType === 'body';
172+
173+
const linkRelations = widget.relations.filter(re => {
174+
const {
175+
config: { type, widgetToWidget },
176+
} = re;
177+
if (type !== 'widgetToWidget') return false;
178+
if (isTableHandle) {
179+
if (widgetToWidget?.triggerColumn === seriesName) return true;
180+
return false;
181+
}
182+
return true;
183+
});
184+
185+
const boardFilters = linkRelations.map(re => {
186+
let linkageFieldName: string =
187+
re?.config?.widgetToWidget?.triggerColumn || '';
188+
189+
const filter: BoardLinkFilter = {
190+
triggerWidgetId: widget.id,
191+
triggerValue: getValueByRowData(params.data, linkageFieldName),
192+
triggerDataChartId: widget.datachartId,
193+
linkerWidgetId: re.targetId,
194+
};
195+
return filter;
196+
});
197+
198+
if (editing) {
199+
dispatch(
200+
editDashBoardInfoActions.changeBoardLinkFilter({
201+
boardId: boardId,
202+
triggerId: widget.id,
203+
linkFilters: boardFilters,
204+
}),
205+
);
206+
} else {
207+
dispatch(
208+
boardActions.changeBoardLinkFilter({
209+
boardId: boardId,
210+
triggerId: widget.id,
211+
linkFilters: boardFilters,
212+
}),
213+
);
214+
}
215+
dispatch(toggleLinkageAction(editing, boardId, widget.id, true));
216+
setTimeout(() => {
217+
boardFilters.forEach(f => {
218+
if (editing) {
219+
dispatch(
220+
getEditChartWidgetDataAsync({
221+
widgetId: f.linkerWidgetId,
222+
option: {
223+
pageInfo: { pageNo: 1 },
224+
},
225+
}),
226+
);
227+
} else {
228+
dispatch(
229+
getChartWidgetDataAsync({
230+
boardId,
231+
widgetId: f.linkerWidgetId,
232+
renderMode,
233+
option: {
234+
pageInfo: { pageNo: 1 },
235+
},
236+
}),
237+
);
238+
}
239+
});
240+
}, 60);
241+
};
242+
//
243+
export const widgetChartClickAction =
244+
(
245+
boardId: string,
246+
editing: boolean,
247+
renderMode: VizRenderMode,
248+
widget: Widget,
249+
params: ChartMouseEventParams,
250+
) =>
251+
dispatch => {
252+
//is tableChart
253+
if (
254+
params.componentType === 'table' &&
255+
params.seriesType === 'paging-sort-filter'
256+
) {
257+
dispatch(
258+
tableChartClickAction(boardId, editing, renderMode, widget, params),
259+
);
260+
return;
261+
}
262+
// jump
263+
const jumpConfig = widget.config?.jumpConfig;
264+
if (jumpConfig && jumpConfig.open) {
265+
dispatch(
266+
widgetClickJumpAction(boardId, editing, renderMode, widget, params),
267+
);
268+
return;
269+
}
270+
// linkage
271+
const linkageConfig = widget.config.linkageConfig;
272+
if (linkageConfig?.open && widget.relations.length) {
273+
dispatch(
274+
widgetClickLinkageAction(boardId, editing, renderMode, widget, params),
275+
);
276+
return;
277+
}
278+
};
279+
export const widgetGetDataAction =
280+
(editing: boolean, widget: Widget, renderMode: VizRenderMode) => dispatch => {
281+
const boardId = widget.dashboardId;
282+
if (editing) {
283+
getEditWidgetData({ widget });
284+
} else {
285+
dispatch(getWidgetData({ boardId, widget, renderMode }));
286+
}
287+
};
288+
289+
export const widgetToClearLinkageAction =
290+
(editing: boolean, widget: Widget, renderMode: VizRenderMode) => dispatch => {
291+
if (editing) {
292+
dispatch(editorWidgetClearLinkageAction(widget));
293+
} else {
294+
dispatch(widgetClearLinkageAction(widget, renderMode));
295+
}
296+
// dispatch(widgetClearLinkageAction(widget, renderMode));
297+
// dispatch(editorWidgetClearLinkageAction(widget));
298+
};
Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
/**
2+
* Datart
3+
*
4+
* Copyright 2021
5+
*
6+
* Licensed under the Apache License, Version 2.0 (the "License");
7+
* you may not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing, software
13+
* distributed under the License is distributed on an "AS IS" BASIS,
14+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15+
* See the License for the specific language governing permissions and
16+
* limitations under the License.
17+
*/
18+
19+
import { generateShareLinkAsync } from 'app/utils/fetch';
20+
import { createContext, FC, memo, useMemo } from 'react';
21+
import { useDispatch } from 'react-redux';
22+
import { useHistory } from 'react-router';
23+
import { BOARD_UNDO } from '../../constants';
24+
import { boardDownLoadAction } from '../../pages/Board/slice/asyncActions';
25+
import { fetchBoardDetail } from '../../pages/Board/slice/thunk';
26+
import { editBoardStackActions } from '../../pages/BoardEditor/slice';
27+
import { clearEditBoardState } from '../../pages/BoardEditor/slice/actions/actions';
28+
import { toUpdateDashboard } from '../../pages/BoardEditor/slice/thunk';
29+
30+
export interface BoardActionContextProps {
31+
// read
32+
onGenerateShareLink?: (date, usePwd) => any;
33+
onBoardToDownLoad: () => any;
34+
// edit
35+
updateBoard?: (callback?: () => void) => void;
36+
boardToggleAllowOverlap: (allow: boolean) => void;
37+
onCloseBoardEditor: (boardId: string) => void;
38+
undo: () => void;
39+
redo: () => void;
40+
}
41+
export const BoardActionContext = createContext<BoardActionContextProps>(
42+
{} as BoardActionContextProps,
43+
);
44+
export const BoardActionProvider: FC<{
45+
boardId: string;
46+
}> = memo(({ boardId, children }) => {
47+
const dispatch = useDispatch();
48+
const history = useHistory();
49+
50+
const actions = useMemo(() => {
51+
const actionObj: BoardActionContextProps = {
52+
updateBoard: (callback?: () => void) => {
53+
dispatch(toUpdateDashboard({ boardId, callback }));
54+
},
55+
boardToggleAllowOverlap: (allow: boolean) => {
56+
dispatch(editBoardStackActions.toggleAllowOverlap(allow));
57+
},
58+
onGenerateShareLink: async (expireDate, enablePassword) => {
59+
const result = await generateShareLinkAsync(
60+
expireDate,
61+
enablePassword,
62+
boardId,
63+
'DASHBOARD',
64+
);
65+
return result;
66+
},
67+
onBoardToDownLoad: () => {
68+
dispatch(boardDownLoadAction({ boardId }));
69+
},
70+
onCloseBoardEditor: (boardId: string) => {
71+
const pathName = history.location.pathname;
72+
const prePath = pathName.split('/boardEditor')[0];
73+
history.push(`${prePath}`);
74+
dispatch(clearEditBoardState());
75+
// 更新view界面数据
76+
dispatch(fetchBoardDetail({ dashboardRelId: boardId }));
77+
},
78+
undo: () => {
79+
dispatch({ type: BOARD_UNDO.undo });
80+
},
81+
redo: () => {
82+
dispatch({ type: BOARD_UNDO.redo });
83+
},
84+
};
85+
return actionObj;
86+
}, [boardId, dispatch, history]);
87+
return (
88+
<BoardActionContext.Provider value={actions}>
89+
{children}
90+
</BoardActionContext.Provider>
91+
);
92+
});

0 commit comments

Comments
 (0)