cards refresh when bd is changed and dialog to confirm

Author: james-l-m-young

src/card/Card.tsx

@@ -13,7 +13,7 @@ import {
   updateReportTypeThunk,
   updateReportDatabaseThunk,
 } from './CardThunks';
-import { toggleReportSettings } from './CardActions';
+import { forceRefreshCard, toggleReportSettings } from './CardActions';
 import { getReportState } from './CardSelectors';
 import {
   getDashboardIsEditable,
@@ -149,6 +149,7 @@ const NeoCard = ({
             title={report.title}
             expanded={expanded}
             onToggleCardExpand={onToggleCardExpand}
+            onForceRefresh={forceRefreshCard(0,id)}
             onGlobalParameterUpdate={onGlobalParameterUpdate}
             onSelectionUpdate={(selectable, field) => onSelectionUpdate(id, selectable, field)}
             onTitleUpdate={(title) => onTitleUpdate(id, title)}

src/card/CardActions.ts

@@ -91,3 +91,9 @@ export const updateReportDatabase = (pagenumber: number, id: number, database: a
   type: UPDATE_REPORT_DATABASE,
   payload: { pagenumber, id, database },
 });
+
+export const FORCE_REFRESH_CARD = 'PAGE/CARD/FORCE_REFRESH_CARD';
+export const forceRefreshCard = (pagenumber: number, id: number) => ({
+  type: FORCE_REFRESH_CARD,
+  payload: { pagenumber, id },
+});

src/card/CardReducer.ts

@@ -13,6 +13,7 @@ import {
   UPDATE_REPORT_TYPE,
   UPDATE_SELECTION,
   UPDATE_REPORT_DATABASE,
+  FORCE_REFRESH_CARD
 } from './CardActions';
 import { TOGGLE_CARD_SETTINGS } from './CardActions';
 import { createUUID } from '../utils/uuid';
@@ -25,6 +26,7 @@ const update = (state, mutations) => Object.assign({}, state, mutations);
 
 export const CARD_INITIAL_STATE = {
   id: createUUID(),
+  forceRefresh: 0,
   title: '',
   query: '\n\n\n',
   settingsOpen: false,
@@ -136,6 +138,10 @@ export const cardReducer = (state = CARD_INITIAL_STATE, action: { type: any; pay
       state = update(state, { database: database });
       return state;
     }
+    case FORCE_REFRESH_CARD: {
+      state = update(state, {forceRefresh: state.forceRefresh + 1});
+      return state;
+    }
     default: {
       return state;
     }

src/card/view/CardView.tsx

@@ -41,6 +41,7 @@ const NeoCardView = ({
   onToggleCardSettings,
   onTitleUpdate,
   onFieldsUpdate,
+  onForceRefresh,
   expanded,
   onToggleCardExpand,
 }) => {

src/dashboard/header/DashboardChangeDatabaseConfirmDialog.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Button, Dialog } from '@neo4j-ndl/react';
+import { BackspaceIconOutline, ExclamationTriangleIconOutline } from '@neo4j-ndl/react/icons';
+
+/**
+ * Configures setting the current Neo4j database connection for the dashboard.
+ */
+export const NeoDashboardChangeDatabaseConfirm = ({ open, onConfirm, handleClose }) => {
+  return (
+    <Dialog size='small' open={open == true} onClose={handleClose} aria-labelledby='form-dialog-title'>
+      <Dialog.Header id='form-dialog-title'>Change Database For All Reports?</Dialog.Header>
+      <Dialog.Subtitle>
+        This will change the database for all reports.
+      </Dialog.Subtitle>
+      <Dialog.Actions>
+        <Button
+          onClick={() => {
+            handleClose();
+          }}
+          style={{ float: 'right' }}
+        >
+          <BackspaceIconOutline className='btn-icon-base-l' />
+          Cancel
+        </Button>
+        <Button
+          onClick={() => {
+            onConfirm();
+            handleClose();
+          }}
+          color='danger'
+          fill='outlined'
+          style={{ float: 'right', marginRight: '5px' }}
+        >
+          Continue
+          <ExclamationTriangleIconOutline className='btn-icon-base-r' />
+        </Button>
+      </Dialog.Actions>
+    </Dialog>
+  );
+};
+
+export default NeoDashboardChangeDatabaseConfirm;

src/dashboard/header/DashboardHeader.tsx

@@ -18,13 +18,21 @@ import { Button } from '@neo4j-ndl/react';
 import { CircleStackIconOutline } from '@neo4j-ndl/react/icons';
 import { loadDatabaseListFromNeo4jThunk } from '../DashboardThunks';
 import NeoDashboardSidebarDatabaseMenu from '../sidebar/menu/DashboardSidebarDatabaseMenu';
+import { hardResetAllCardsThunk, setPageNumberThunk } from '../../settings/SettingsThunks';
+import { updateAllReportsDatabaseThunk } from '../../page/PageThunks';
+import NeoDashboardChangeDatabaseConfirm from './DashboardChangeDatabaseConfirmDialog';
 
 // Which (small) pop-up menu is currently open for the sidebar.
 enum Menu {
   DATABASE = 0,
   NONE = 1,
 }
 
+enum Modal {
+  CHANGE = 0,
+  NONE = 1,
+}
+
 export const NeoDashboardHeader = ({
   database,
   standaloneSettings,
@@ -40,11 +48,13 @@ export const NeoDashboardHeader = ({
   setTheme,
   loadDatabaseListFromNeo4j,
   readonly,
+  refreshPage
 }) => {
   const downloadImageEnabled = settings ? settings.downloadImageEnabled : false;
   const [dashboardTitleText, setDashboardTitleText] = React.useState(dashboardTitle);
   const [databases, setDatabases] = useState([]);
   const [menuOpen, setMenuOpen] = useState(Menu.NONE);
+  const [modalOpen, setModalOpen] = useState(Modal.NONE);
   const [isDarkMode, setDarkMode] = React.useState(themeMode !== 'light');
   const [menuAnchor, setMenuAnchor] = useState<HTMLElement | null>(null);
   const [dataDatabase, setDataDatabase] = React.useState(database ? database : 'neo4j');
@@ -66,6 +76,13 @@ export const NeoDashboardHeader = ({
   }, [isDarkMode]);
   const content = (
     <div className='n-relative n-bg-palette-neutral-bg-weak n-w-full'>
+            <NeoDashboardChangeDatabaseConfirm
+              open={modalOpen == Modal.CHANGE}
+              onConfirm={() => {
+                setModalOpen(Modal.NONE);
+              }}
+              handleClose={() => setModalOpen(Modal.NONE)}
+            />
       <div className='n-min-w-full'>
         <div className='n-flex n-justify-between n-h-16 n-items-center n-py-6 md:n-justify-start md:n-space-x-10 n-mx-4'>
           <NeoDashboardHeaderLogo resetApplication={resetApplication} />
@@ -136,7 +153,11 @@ export const NeoDashboardHeader = ({
         databases={databases}
         selected={dataDatabase}
         setSelected={(newDatabase) => {
+          setModalOpen(Modal.CHANGE);
           setDataDatabase(newDatabase);
+          console.log(newDatabase)
+          console.log(dataDatabase)
+          refreshPage(newDatabase)
         }}
         open={menuOpen == Menu.DATABASE}
         anchorEl={menuAnchor}
@@ -177,6 +198,12 @@ const mapDispatchToProps = (dispatch) => ({
   loadDatabaseListFromNeo4j: (driver, callback) => {
     dispatch(loadDatabaseListFromNeo4jThunk(driver, callback))
   },
+
+  refreshPage: (database: string) => {
+    console.log("refreshPage")
+    // dispatch(hardResetAllCardsThunk());
+    dispatch(updateAllReportsDatabaseThunk(database));
+  },
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(NeoDashboardHeader);

src/dashboard/header/DashboardHeaderPageList.tsx

@@ -26,6 +26,7 @@ export const NeoDashboardHeaderPageList = ({
   addPage,
   movePage,
   selectPage,
+  refreshPage,
 }) => {
   const [canSwitchPages, setCanSwitchPages] = React.useState(true);
 
@@ -114,6 +115,9 @@ const mapDispatchToProps = (dispatch) => ({
   onConnectionModalOpen: () => {
     dispatch(setConnectionModalOpen(true));
   },
+  refreshPage: () => {
+    dispatch(setPageNumberThunk(0))
+  }
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(NeoDashboardHeaderPageList);

src/page/PageThunks.ts

@@ -1,7 +1,8 @@
 import { createNotification } from '../application/ApplicationActions';
 import { CARD_INITIAL_STATE } from '../card/CardReducer';
-import { createReport, removeReport, updateAllCardPositionsInPage } from './PageActions';
+import { createReport, forceRefreshPage, removeReport, updateAllCardPositionsInPage } from './PageActions';
 import { createUUID } from '../utils/uuid';
+import { forceRefreshCard, hardResetCardSettings, toggleCardSettings, updateReportDatabase } from '../card/CardActions';
 
 export const createNotificationThunk = (title: any, message: any) => (dispatch: any) => {
   dispatch(createNotification(title, message));
@@ -51,3 +52,24 @@ export const updatePageLayoutThunk = (layout: any) => (dispatch: any, getState:
     dispatch(createNotificationThunk('Cannot update page layout', e));
   }
 };
+
+export const updateAllReportsDatabaseThunk = (database) => (dispatch: any, getState: any) => {
+  try{
+    console.log('updateAllReportsDatabaseThunk')
+    const state = getState();
+    const { pages } = state.dashboard;
+    const { pagenumber } = getState().dashboard.settings;
+    pages.map((page, index) => {
+          console.log(page);
+          page.reports.map((report) => {
+            console.log("page: " + index + " | id: " + report.id);
+            dispatch(updateReportDatabase(index,report.id, database));
+            if (pagenumber === index){
+              dispatch(forceRefreshCard(index,report.id));
+            }
+          });
+        });
+      } catch (e) {
+        dispatch(createNotificationThunk('Unable to set database for all cards', e));
+      }
+};

src/settings/SettingsThunks.ts

@@ -6,6 +6,7 @@ import { updateDashboardSetting } from './SettingsActions';
 
 export const setPageNumberThunk = (number) => (dispatch: any, getState: any) => {
   try {
+    console.log("setPageNumberThunk")
     if (number == undefined) {
       throw 'The specified page could not be found, was it moved, removed, or renamed?';
     }
@@ -17,13 +18,31 @@ export const setPageNumberThunk = (number) => (dispatch: any, getState: any) =>
 
     const page = pages[number];
     page.reports.map((report) => {
+      console.log("pg: " + number + " | " + report.id)
       dispatch(hardResetCardSettings(number, report.id));
     });
   } catch (e) {
     dispatch(createNotificationThunk('Unable to set page number', e));
   }
 };
 
+export const hardResetAllCardsThunk = () => (dispatch: any, getState: any) => {
+  try{
+    console.log("hardResetAllCardsThunk")
+    const { pages } = getState().dashboard;
+
+    pages.map((page, index) => {
+      console.log(page);
+      page.reports.map((report) => {
+        console.log("page: " + index + " | id: " + report.id)
+        dispatch(hardResetCardSettings(index,report.id))
+      })
+    });
+  } catch (e) {
+    dispatch(createNotificationThunk('Unable to refresh cards', e));
+  }
+}
+
 export const updateGlobalParameterThunk = (key, value) => (dispatch: any, getState: any) => {
   try {
     const { settings } = getState().dashboard;