WEB-4460 add modal controllers to dashboard

Author: henry-tp

app/components/navpatientheader/index.js

@@ -100,7 +100,7 @@ const NavPatientHeader = ({ api, trackMetric, patient, clinicPatient, user, perm
 
       <EditPatientDialog
         api={api}
-        trackMetric={trackMetric}
+        clinicPatient={clinicPatient}
         isOpen={isEditPatientModalOpen}
         onClose={() => setIsEditPatientModalOpen(false)}
       />

app/pages/clinicworkspace/TideDashboardV2/DataConnectionsModalController.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import DataConnectionsModal from '../../../components/datasources/DataConnectionsModal';
+import { closeModals } from './tideDashboardSlice';
+
+const DataConnectionsModalController = ({ patients }) => {
+  const dispatch = useDispatch();
+
+  const dataConnectionsModal = useSelector(state => state.blip.tideDashboard.dataConnectionsModal);
+  const { patientId, isOpen } = dataConnectionsModal;
+
+  const patient = patients.find(patient => patient.id === patientId);
+
+  const handleClose = () => dispatch(closeModals());
+
+  return (
+    <DataConnectionsModal
+      open={isOpen}
+      patient={patient}
+      onClose={handleClose}
+    />
+  );
+};
+
+export default DataConnectionsModalController;

app/pages/clinicworkspace/TideDashboardV2/EditPatientDialogController.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { closeModals } from './tideDashboardSlice';
+import { RTKQueryApi } from '../../../redux/api/baseApi';
+import EditPatientDialog from '../../../components/navpatientheader/EditPatientDialog';
+import { tagTypes } from './tideDashboardApi';
+
+const { TIDE_DASHBOARD_PATIENTS } = tagTypes;
+
+const EditPatientDialogController = ({ api, patients }) => {
+  const dispatch = useDispatch();
+  const editPatientDialog = useSelector(state => state.blip.tideDashboard.editPatientDialog);
+
+  const clinicPatient = patients.find(patient => patient.id === editPatientDialog.patientId);
+
+  const handleCloseModal = () => {
+    dispatch(closeModals());
+  };
+
+  const handleEditSuccess = () => {
+    dispatch(RTKQueryApi.util.invalidateTags([TIDE_DASHBOARD_PATIENTS]));
+  };
+
+  return (
+    <>
+      <EditPatientDialog
+        api={api}
+        clinicPatient={clinicPatient}
+        isOpen={editPatientDialog.isOpen}
+        onClose={handleCloseModal}
+        onEditSuccess={handleEditSuccess}
+      />
+    </>
+  );
+};
+
+export default EditPatientDialogController;

app/pages/clinicworkspace/TideDashboardV2/TideDashboardV2.js

@@ -22,6 +22,9 @@ import FilterBySites from './FilterBySites';
 import PatientCount from '../components/PatientCount';
 import AppliedFiltersList from './AppliedFiltersList';
 
+import EditPatientDialogController from './EditPatientDialogController';
+import DataConnectionsModalController from './DataConnectionsModalController';
+
 const Gap = () => <Box sx={{ marginLeft: 'auto' }}></Box>;
 
 const TideDashboardV2 = ({ api, trackMetric }) => {
@@ -90,6 +93,9 @@ const TideDashboardV2 = ({ api, trackMetric }) => {
           />
         </Flex>
       </Grid>
+
+      <EditPatientDialogController api={api} patients={patients} />
+      <DataConnectionsModalController patients={patients}/>
     </>
   );
 };

app/pages/clinicworkspace/TideDashboardV2/tideDashboardSlice.js

@@ -5,6 +5,14 @@ import { CATEGORY } from './FilterByCategory';
 const getInitialState = () => ({
   category: CATEGORY.DEFAULT,
   offset: 0,
+  editPatientDialog: {
+    patientId: null,
+    isOpen: false,
+  },
+  dataConnectionsModal: {
+    patientId: null,
+    isOpen: false,
+  },
 });
 
 const tideDashboardSlice = createSlice({
@@ -17,13 +25,36 @@ const tideDashboardSlice = createSlice({
     setOffset: (state, action) => {
       state.offset = action.payload;
     },
+    setEditPatientDialogPatientId: (state, action) => {
+      state.editPatientDialog.patientId = action.payload;
+    },
+    setEditPatientDialogIsOpen: (state, action) => {
+      state.editPatientDialog.isOpen = action.payload;
+    },
+    setDataConnectionsModalPatientId: (state, action) => {
+      state.dataConnectionsModal.patientId = action.payload;
+    },
+    setDataConnectionsModalIsOpen: (state, action) => {
+      state.dataConnectionsModal.isOpen = action.payload;
+    },
+    closeModals: (state) => {
+      const { editPatientDialog, dataConnectionsModal } = getInitialState();
+
+      state.editPatientDialog = editPatientDialog;
+      state.dataConnectionsModal = dataConnectionsModal;
+    },
     resetTideDashboardState: () => getInitialState(),
   },
 });
 
 export const {
   setCategory,
   setOffset,
+  setEditPatientDialogPatientId,
+  setEditPatientDialogIsOpen,
+  setDataConnectionsModalPatientId,
+  setDataConnectionsModalIsOpen,
+  closeModals,
   resetTideDashboardState,
 } = tideDashboardSlice.actions;
 

app/pages/clinicworkspace/TideDashboardV2/useTableColumns.js

@@ -17,6 +17,7 @@ import {
   TimeInTargetPercentCell,
   FlagCell,
   PatientLastReviewedCell,
+  MoreMenuCell,
 } from './Cells';
 
 import TagListCell from '../components/TagListCell';
@@ -112,7 +113,7 @@ const getColumnTypes = (t, category, thresholds) => ({
     title: '',
     field: 'moreMenu',
     align: 'center',
-    render: patient => null, // TODO: Implement
+    render: patient => <MoreMenuCell patient={patient} />,
   }, // More
 });