#Vulcan 274 - Minimize functionality for sub reports

src/card/Card.tsx

@@ -76,7 +76,8 @@
   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<Neo4jContextState>(Neo4jContext);
@@ -129,8 +130,12 @@
     report.settings && report.settings.legendDefinition !== undefined ? report.settings.legendDefinition : {}
   );
 
-  const onHandleMinimize = () => {
-    onPutItem(report);
+  const onHandleMinimize = (report) => {
+    onMinimizeReport(report);
+  };
+
+  const onHandleSubReportMinimize = (report) => {
+    onMinimizeSubReport(report);
   };
 
   useEffect(() => {
@@ -180,13 +185,13 @@
                 return (
                   <Item
                     sx={{
                       gridColumn: subReport.x + 1 + '/' + (subReport.x + subReport.width + 1),
                       gridRow: subReport.y + 1 + '/' + (subReport.y + subReport.height + 1),
                     }}
                     key={subReport.id}
                   >
                     <NeoCardView
-                      id={id}
+                      id={subReport.id}
                       legendDefinition={subReport?.settings?.legendDefinition}
                       settingsOpen={false}
                       editable={editable}
@@ -202,7 +207,7 @@
                       setActive={setActive}
                       onDownloadImage={() => downloadComponentAsImage(ref)}
                       query={subReport.query}
-                      onHandleMinimize={onHandleMinimize}
+                      onHandleMinimize={() => onHandleSubReportMinimize(subReport)}
                       globalParameters={globalParameters}
                       fields={subReport.fields ? subReport.fields : []}
                       selection={subReport.selection}
@@ -244,7 +249,7 @@
               onDownloadImage={() => downloadComponentAsImage(ref)}
               query={report.query}
               globalParameters={globalParameters}
-              onHandleMinimize={onHandleMinimize}
+              onHandleMinimize={() => onHandleMinimize(report)}
               fields={report.fields ? report.fields : []}
               selection={report.selection}
               widthPx={width}

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);

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,

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: {

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 {