diff --git a/src/card/Card.tsx b/src/card/Card.tsx index c462bd5b8..863dfc7d1 100644 --- a/src/card/Card.tsx +++ b/src/card/Card.tsx @@ -76,7 +76,8 @@ const NeoCard = ({ onDatabaseChanged, // action to take when the user changes the database related to the card loadDatabaseListFromNeo4j, // Thunk to get the list of databases createNotification, // Thunk to create a global notification pop-up. - onPutItem, + onMinimizeReport, + onMinimizeSubReport, }) => { // Will be used to fetch the list of current databases const { driver } = useContext(Neo4jContext); @@ -129,8 +130,12 @@ const NeoCard = ({ report.settings && report.settings.legendDefinition !== undefined ? report.settings.legendDefinition : {} ); - const onHandleMinimize = () => { - onPutItem(report); + const onHandleMinimize = (report) => { + onMinimizeReport(report); + }; + + const onHandleSubReportMinimize = (report) => { + onMinimizeSubReport(report); }; useEffect(() => { @@ -186,7 +191,7 @@ const NeoCard = ({ key={subReport.id} > downloadComponentAsImage(ref)} query={subReport.query} - onHandleMinimize={onHandleMinimize} + onHandleMinimize={() => onHandleSubReportMinimize(subReport)} globalParameters={globalParameters} fields={subReport.fields ? subReport.fields : []} selection={subReport.selection} @@ -244,7 +249,7 @@ const NeoCard = ({ onDownloadImage={() => downloadComponentAsImage(ref)} query={report.query} globalParameters={globalParameters} - onHandleMinimize={onHandleMinimize} + onHandleMinimize={() => onHandleMinimize(report)} fields={report.fields ? report.fields : []} selection={report.selection} widthPx={width} diff --git a/src/page/Page.tsx b/src/page/Page.tsx index a61eccbef..a81832b02 100644 --- a/src/page/Page.tsx +++ b/src/page/Page.tsx @@ -10,6 +10,7 @@ import { cloneReportThunk, moveReportToToolboxThunk, removeReportFromToolboxThunk, + moveSubReportToToolboxThunk, } from './PageThunks'; import { getDashboardIsEditable, getPageNumber } from '../settings/SettingsSelectors'; import { getDashboardSettings } from '../dashboard/DashboardSelectors'; @@ -100,6 +101,7 @@ export const NeoPage = ({ onPageLayoutUpdate = () => {}, // action to take when the page layout is updated. onMinimizeClick = () => {}, onMaximizeClick = () => {}, + onMinimizeSubReportClick = () => {}, toolbox, }) => { const getReportKey = (pagenumber: number, id: string) => { @@ -143,8 +145,12 @@ export const NeoPage = ({ onMaximizeClick(item.id); }; - const onPutItem = (item) => { - onMinimizeClick(item.id); + const onMinimizeReport = (report) => { + onMinimizeClick(report.id); + }; + + const onMinimizeSubReport = (report) => { + onMinimizeSubReportClick(report.id); }; /** @@ -300,7 +306,8 @@ export const NeoPage = ({ enableSaveButtonForIds={enableSaveButtonForIds} dashboardSettings={dashboardSettings} onRemovePressed={onRemovePressed} - onPutItem={onPutItem} + onMinimizeReport={onMinimizeReport} + onMinimizeSubReport={onMinimizeSubReport} onClonePressed={(id) => { const { x, y } = getAddCardButtonPosition(); onClonePressed(id, x, y); @@ -332,6 +339,7 @@ const mapDispatchToProps = (dispatch) => ({ onPageLayoutUpdate: (layout) => dispatch(updatePageLayoutThunk(layout)), onMinimizeClick: (reportId) => dispatch(moveReportToToolboxThunk(reportId)), onMaximizeClick: (reportId) => dispatch(removeReportFromToolboxThunk(reportId)), + onMinimizeSubReportClick: (reportId) => dispatch(moveSubReportToToolboxThunk(reportId)), }); export default connect(mapStateToProps, mapDispatchToProps)(NeoPage); diff --git a/src/page/PageActions.ts b/src/page/PageActions.ts index 44647f55d..b6f3c890c 100644 --- a/src/page/PageActions.ts +++ b/src/page/PageActions.ts @@ -16,6 +16,12 @@ export const moveReportToToolbox = (pagenumber: number, id: any) => ({ payload: { pagenumber, id }, }); +export const MOVE_SUB_REPORT_TO_TOOLBOX = 'PAGE/MOVE_SUB_REPORT_TO_TOOLBOX' +export const moveSubReportToToolbox = (pagenumber: number, id: any) => ({ + type: MOVE_SUB_REPORT_TO_TOOLBOX, + payload: { pagenumber, id }, +}); + export const REMOVE_REPORT_FROM_TOOLBOX = 'PAGE/REMOVE_REPORT_FROM_TOOLBOX' export const removeReportFromToolbox = (pagenumber: number, id: any) => ({ type: REMOVE_REPORT_FROM_TOOLBOX, diff --git a/src/page/PageReducer.ts b/src/page/PageReducer.ts index cba45d330..aef3435d6 100644 --- a/src/page/PageReducer.ts +++ b/src/page/PageReducer.ts @@ -7,6 +7,7 @@ import { SET_PAGE_TITLE, FORCE_REFRESH_PAGE, UPDATE_ALL_CARD_POSITIONS_IN_PAGE, + MOVE_SUB_REPORT_TO_TOOLBOX, } from './PageActions'; import { createUUID } from '../dashboard/DashboardThunks'; @@ -98,25 +99,72 @@ export const pageReducer = (state = PAGE_INITIAL_STATE, action: { type: any; pay case MOVE_REPORT_TO_TOOLBOX: { const { id } = payload; let cards = state.reports.filter((o) => o.id !== id); - let item = state.reports.filter((o) => o.id === id); - let temp = [...item] - if(state.toolbox) { - temp = [...temp, ...state.toolbox] + let report = state.reports.filter((o) => o.id === id); + let copyReport = [...report] + if (state.toolbox) { + copyReport = [...copyReport, ...state.toolbox] } return { ...state, reports: cards, - toolbox: temp + toolbox: copyReport + } + } + case MOVE_SUB_REPORT_TO_TOOLBOX: { + const { id } = payload; + let subReportObj: any = {} + let subReportArr: any = [] + let cards: any = [] + let parentReportId = '' + + // Find parent report id of subreports logic + state.reports.forEach((_x: any) => { + _x.subReports.forEach(_y => { + if (_y.id === id) { + parentReportId = _x.id + subReportObj = { ..._y, parentReportId: _x.id } + } + }) + }) + + subReportArr.push(subReportObj) + + if (state.toolbox) { + subReportArr = [...subReportArr, ...state.toolbox] + } + + // Contruct new parent report by removing the sub report + let parentReport = [...state.reports.filter(_x => _x.id !== parentReportId)] + let newParentReport: any = state.reports.find(_x => _x.id === parentReportId) + cards = [...parentReport, { ...newParentReport, subReports: [...newParentReport.subReports.filter(_y => _y.id !== id)] }] + + + return { + ...state, + toolbox: subReportArr, + reports: cards } } case REMOVE_REPORT_FROM_TOOLBOX: { const { id } = payload; - const revertReport = state.toolbox.filter(item => item.id === id) - + const revertReport: any = state.toolbox.find(item => item.id === id) + let card: any = [] + let box: any = [] + + if (revertReport.parentReportId) { + const report: any = state.reports.find(_x => _x.id === revertReport.parentReportId) + const reports = state.reports.filter(_x => _x.id !== revertReport.parentReportId) + const subReports = report.subReports.filter(_x => _x.id !== revertReport.id) + card = [...reports, { ...report, subReports: [...subReports, { ...revertReport, parentReportId: undefined }] }] + } else { + card = [...state.reports, revertReport] + } + box = state.toolbox.filter(item => item.id !== id) + return { ...state, - reports: [...state.reports, ...revertReport], - toolbox: state.toolbox.filter(item => item.id !== id) + reports: card, + toolbox: box } } case UPDATE_ALL_CARD_POSITIONS_IN_PAGE: { diff --git a/src/page/PageThunks.ts b/src/page/PageThunks.ts index ee205ae18..1880f905f 100644 --- a/src/page/PageThunks.ts +++ b/src/page/PageThunks.ts @@ -1,6 +1,6 @@ import { createNotification } from '../application/ApplicationActions'; import { CARD_INITIAL_STATE } from '../card/CardReducer'; -import { createReport, removeReport, updateAllCardPositionsInPage, moveReportToToolbox, removeReportFromToolbox } from './PageActions'; +import { createReport, removeReport, updateAllCardPositionsInPage, moveReportToToolbox, removeReportFromToolbox, moveSubReportToToolbox } from './PageActions'; import { createUUID } from '../dashboard/DashboardThunks'; export const createNotificationThunk = (title: any, message: any) => (dispatch: any) => { @@ -40,6 +40,16 @@ export const moveReportToToolboxThunk = (id: string) => (dispatch: any, getState } } +export const moveSubReportToToolboxThunk = (id: string) => (dispatch: any, getState: any) => { + try { + const state = getState() + const { pagenumber } = state.dashboard.settings; + dispatch(moveSubReportToToolbox(pagenumber, id)); + } catch (error) { + dispatch(createNotificationThunk('Cannot move sub report to toolbox report', error)); + } +} + export const removeReportFromToolboxThunk = (id: string) => (dispatch: any, getState: any) => { try {