#1220 | Set zIndex to 1 for all MaterialTables, set zIndex to 2 for L…

…ightbox media display
avniproject · Jun 10, 2024 · 8042d82 · 8042d82
1 parent d1eca13
commit 8042d82
Show file tree

Hide file tree

Showing 16 changed files with 112 additions and 256 deletions.
diff --git a/src/adminApp/CustomFilters.js b/src/adminApp/CustomFilters.js
@@ -29,17 +29,8 @@ const useStyles = makeStyles({
   }
 });
 
-const customFilters = ({
-  operationalModules,
-  getOperationalModules,
-  history,
-  organisation,
-  filename,
-  userInfo
-}) => {
-  const typeOfFilter = history.location.pathname.endsWith("myDashboardFilters")
-    ? "myDashboardFilters"
-    : "searchFilters";
+const customFilters = ({ operationalModules, getOperationalModules, history, organisation, filename, userInfo }) => {
+  const typeOfFilter = history.location.pathname.endsWith("myDashboardFilters") ? "myDashboardFilters" : "searchFilters";
   React.useEffect(() => {
     getOperationalModules();
   }, []);
@@ -68,17 +59,12 @@ const customFilters = ({
 
   useEffect(() => {
     http.get("/organisationConfig").then(res => {
-      const settings = _.filter(
-        res.data._embedded.organisationConfig,
-        config => config.organisationId === organisation.id
-      );
+      const settings = _.filter(res.data._embedded.organisationConfig, config => config.organisationId === organisation.id);
       const orgSettings = isEmpty(settings) ? emptyOrgSettings : createOrgSettings(settings[0]);
       setSettings(orgSettings);
       res.data._embedded.organisationConfig[0] &&
         setWorklistUpdationRule(
-          res.data._embedded.organisationConfig[0].worklistUpdationRule
-            ? res.data._embedded.organisationConfig[0].worklistUpdationRule
-            : ""
+          res.data._embedded.organisationConfig[0].worklistUpdationRule ? res.data._embedded.organisationConfig[0].worklistUpdationRule : ""
         );
     });
   }, []);
@@ -119,21 +105,13 @@ const customFilters = ({
     onClick: (event, rowData) => {
       const voidedMessage = `Do you want to delete ${rowData.titleKey} filter ?`;
       if (window.confirm(voidedMessage)) {
-        const filteredFilters = omitTableData(
-          settings.settings[filterType].filter(f => f.titleKey !== rowData.titleKey)
-        );
+        const filteredFilters = omitTableData(settings.settings[filterType].filter(f => f.titleKey !== rowData.titleKey));
         const newSettings = {
           uuid: settings.uuid,
           settings: {
             languages: settings.settings.languages,
-            myDashboardFilters:
-              filterType === "myDashboardFilters"
-                ? filteredFilters
-                : omitTableData(settings.settings.myDashboardFilters),
-            searchFilters:
-              filterType === "searchFilters"
-                ? filteredFilters
-                : omitTableData(settings.settings.searchFilters)
+            myDashboardFilters: filterType === "myDashboardFilters" ? filteredFilters : omitTableData(settings.settings.myDashboardFilters),
+            searchFilters: filterType === "searchFilters" ? filteredFilters : omitTableData(settings.settings.searchFilters)
           },
           worklistUpdationRule: worklistUpdationRule
         };
@@ -181,13 +159,14 @@ const customFilters = ({
         }}
         columns={filterDisplayColumns}
         data={buildFilterData(settings.settings[filterType], subjectTypes)}
-        options={{ search: false, paging: false }}
-        actions={
-          hasEditPrivilege(userInfo) && [
-            editFilter(filterType, `Edit ${_.startCase(filterType)}`),
-            deleteFilter(filterType)
-          ]
-        }
+        options={{
+          headerStyle: {
+            zIndex: 1
+          },
+          search: false,
+          paging: false
+        }}
+        actions={hasEditPrivilege(userInfo) && [editFilter(filterType, `Edit ${_.startCase(filterType)}`), deleteFilter(filterType)]}
       />
     </Box>
   );
@@ -196,11 +175,7 @@ const customFilters = ({
     <div />
   ) : (
     <Box>
-      {typeOfFilter === "myDashboardFilters" ? (
-        <Title title="My Dashboard Filters" />
-      ) : (
-        <Title title="Search Filters" />
-      )}
+      {typeOfFilter === "myDashboardFilters" ? <Title title="My Dashboard Filters" /> : <Title title="Search Filters" />}
       <Paper className={styles.root}>
         <p />
         {renderFilterTable(typeOfFilter)}
@@ -233,8 +208,7 @@ export const buildFilterData = (filters, subjectTypes) => {
   });
 };
 
-export const omitTableData = filters =>
-  _.map(filters, filter => _.omit(filter, ["tableData", "Scope", "Filter Type", "Subject"]));
+export const omitTableData = filters => _.map(filters, filter => _.omit(filter, ["tableData", "Scope", "Filter Type", "Subject"]));
 
 export default withRouter(
   connect(

diff --git a/src/assignment/subjectAssignment/SubjectAssignment.js b/src/assignment/subjectAssignment/SubjectAssignment.js
@@ -3,6 +3,8 @@ import ScreenWithAppBar from "../../common/components/ScreenWithAppBar";
 import MaterialTable from "material-table";
 import api from "../api";
 import {
+  getAssignmentValue,
+  getFilterPayload,
   getMetadataOptions,
   initialState,
   SubjectAssignmentReducer
@@ -16,7 +18,6 @@ import { refreshTable } from "../util/util";
 import { AssignmentToolBar } from "../components/AssignmentToolBar";
 import Paper from "@material-ui/core/Paper";
 import { includes, map, mapValues } from "lodash";
-import { getAssignmentValue, getFilterPayload } from "../reducers/SubjectAssignmentReducer";
 import { SubjectAssignmentAction } from "../components/SubjectAssignmentAction";
 import materialTableIcons from "../../common/material-table/MaterialTableIcons";
 
@@ -91,6 +92,9 @@ const SubjectAssignment = () => {
                   pageSizeOptions: [10, 15, 25],
                   addRowPosition: "first",
                   sorting: true,
+                  headerStyle: {
+                    zIndex: 1
+                  },
                   debounceInterval: 500,
                   search: false,
                   maxBodyHeight: "75vh",
@@ -141,11 +145,7 @@ const SubjectAssignment = () => {
     );
   };
 
-  return (
-    <ScreenWithAppBar appbarTitle={"Subject Assignment"}>
-      {state.loaded && renderData()}
-    </ScreenWithAppBar>
-  );
+  return <ScreenWithAppBar appbarTitle={"Subject Assignment"}>{state.loaded && renderData()}</ScreenWithAppBar>;
 };
 
 export default SubjectAssignment;
diff --git a/src/assignment/taskAssignment/TaskAssignment.js b/src/assignment/taskAssignment/TaskAssignment.js
@@ -34,20 +34,9 @@ const tableRef = React.createRef();
 const TaskAssignment = ({ history, ...props }) => {
   const classes = useStyles();
   const [state, dispatch] = React.useReducer(TaskAssignmentReducer, initialState);
-  const {
-    filterCriteria,
-    taskMetadata,
-    displayAction,
-    assignmentCriteria,
-    applyableTaskStatuses
-  } = state;
-  const { taskTypeOptions, taskStatusOptions, userOptions } = getMetadataOptions(
-    taskMetadata,
-    filterCriteria
-  );
-  const applyableTaskStatusesOptions = map(applyableTaskStatuses, ({ name, id }) =>
-    labelValue(name, id)
-  );
+  const { filterCriteria, taskMetadata, displayAction, assignmentCriteria, applyableTaskStatuses } = state;
+  const { taskTypeOptions, taskStatusOptions, userOptions } = getMetadataOptions(taskMetadata, filterCriteria);
+  const applyableTaskStatusesOptions = map(applyableTaskStatuses, ({ name, id }) => labelValue(name, id));
 
   useEffect(() => {
     api.getTaskMetadata().then(response => dispatch({ type: "setData", payload: response }));
@@ -89,20 +78,17 @@ const TaskAssignment = ({ history, ...props }) => {
               pageSizeOptions: [10, 15, 25],
               addRowPosition: "first",
               sorting: true,
+              headerStyle: {
+                zIndex: 1
+              },
               debounceInterval: 500,
               search: false,
               selection: true,
               maxBodyHeight: "75vh",
               minBodyHeight: "75vh"
             }}
             components={{
-              Toolbar: props => (
-                <AssignmentToolBar
-                  dispatch={dispatch}
-                  assignmentCriteria={assignmentCriteria}
-                  {...props}
-                />
-              ),
+              Toolbar: props => <AssignmentToolBar dispatch={dispatch} assignmentCriteria={assignmentCriteria} {...props} />,
               Container: props => <Paper {...props} elevation={0} />
             }}
           />

diff --git a/src/common/components/messages/GroupSentMessagesTable.js b/src/common/components/messages/GroupSentMessagesTable.js
@@ -16,8 +16,7 @@ const useStyles = makeStyles(theme => ({
   expansionPanel: {
     marginBottom: "11px",
     borderRadius: "5px",
-    boxShadow:
-      "0px 0px 3px 1px rgba(0,0,0,0.2), 0px 1px 2px 0px rgba(0,0,0,0.14), 0px 2px 1px -1px rgba(0,0,0,0.12)"
+    boxShadow: "0px 0px 3px 1px rgba(0,0,0,0.2), 0px 1px 2px 0px rgba(0,0,0,0.14), 0px 2px 1px -1px rgba(0,0,0,0.12)"
   },
   expansionHeading: {
     fontSize: "1rem",
@@ -88,6 +87,9 @@ const GroupMessagesTable = ({ messages, title, showDeliveryStatus, showDeliveryD
             pageSizeOptions: [10, 15, 20],
             addRowPosition: "first",
             sorting: true,
+            headerStyle: {
+              zIndex: 1
+            },
             debounceInterval: 500,
             search: false,
             toolbar: false

diff --git a/src/common/components/messages/SentMessagesTable.js b/src/common/components/messages/SentMessagesTable.js
@@ -60,6 +60,9 @@ const SentMessagesTable = ({ sentMessages, isMsgsSentAvailable }) => {
         pageSizeOptions: [10, 15, 20],
         addRowPosition: "first",
         sorting: true,
+        headerStyle: {
+          zIndex: 1
+        },
         debounceInterval: 500,
         search: false,
         toolbar: false

diff --git a/src/common/components/messages/YetToBeSentMessagesTable.js b/src/common/components/messages/YetToBeSentMessagesTable.js
@@ -67,6 +67,9 @@ const YetToBeSentMessagesTable = ({ msgsYetToBeSent, isMsgsNotYetSentAvailable }
         pageSizeOptions: [10, 15, 20],
         addRowPosition: "first",
         sorting: true,
+        headerStyle: {
+          zIndex: 1
+        },
         debounceInterval: 500,
         search: false,
         toolbar: false

diff --git a/src/dataEntryApp/components/MediaObservations.js b/src/dataEntryApp/components/MediaObservations.js
@@ -1,15 +1,10 @@
 import React from "react";
 import ReactImageVideoLightbox from "react-image-video-lightbox";
 
-const MediaObservations = ({
-  mediaDataList,
-  currentMediaItemIndex,
-  onClose,
-  showResourceCount
-}) => {
+const MediaObservations = ({ mediaDataList, currentMediaItemIndex, onClose, showResourceCount }) => {
   React.useEffect(() => {
     const LightboxContainer = document.querySelector("div.mediaObservationContainer");
-    LightboxContainer.firstChild.style.zIndex = 1;
+    LightboxContainer.firstChild.style.zIndex = 2;
   });
 
   return (

diff --git a/src/dataEntryApp/components/MediaUploader.js b/src/dataEntryApp/components/MediaUploader.js
@@ -1,5 +1,5 @@
 import React, { Fragment, useEffect, useState } from "react";
-import { get, isEmpty, includes, lowerCase, isArrayLikeObject, omit, startsWith } from "lodash";
+import { get, includes, isArrayLikeObject, isEmpty, lowerCase, omit, startsWith } from "lodash";
 import { Box, Button, Grid, makeStyles, Typography } from "@material-ui/core";
 import FormControl from "@material-ui/core/FormControl";
 import http from "../../common/utils/httpClient";
@@ -180,7 +180,7 @@ export const MediaUploader = ({ label, obsValue, mediaType, update, formElement
   useEffect(() => {
     if (openImage) {
       const LightBoxContainer = document.querySelector("div.imagePreviewContainer");
-      LightBoxContainer.firstChild.style.zIndex = 1;
+      LightBoxContainer.firstChild.style.zIndex = 2;
     }
   }, [openImage]);
 

diff --git a/src/dataEntryApp/views/search/SubjectSearchTable.js b/src/dataEntryApp/views/search/SubjectSearchTable.js
@@ -3,20 +3,7 @@ import MaterialTable from "material-table";
 import http from "common/utils/httpClient";
 import Chip from "@material-ui/core/Chip";
 import { useTranslation } from "react-i18next";
-import {
-  filter,
-  uniqBy,
-  get,
-  isEmpty,
-  join,
-  map,
-  flatten,
-  find,
-  reject,
-  isNil,
-  size,
-  head
-} from "lodash";
+import { filter, find, flatten, get, head, isEmpty, isNil, join, map, reject, size, uniqBy } from "lodash";
 import { extensionScopeTypes } from "../../../formDesigner/components/Extensions/ExtensionReducer";
 import { ExtensionOption } from "../subjectDashBoard/components/extension/ExtensionOption";
 import { Grid } from "@material-ui/core";
@@ -36,13 +23,10 @@ const SubjectSearchTable = ({ searchRequest, organisationConfigs }) => {
   const customSearchFields = get(organisationConfigs, "organisationConfig.searchResultFields", []);
   const subjectType = find(subjectTypes, ({ uuid }) => uuid === get(searchRequest, "subjectType"));
   const isPerson = get(subjectType, "type", "Person") === "Person";
-  const getResultConcepts = customSearchFields =>
-    map(customSearchFields, ({ searchResultConcepts }) => searchResultConcepts);
+  const getResultConcepts = customSearchFields => map(customSearchFields, ({ searchResultConcepts }) => searchResultConcepts);
   const customColumns = isEmpty(subjectType)
     ? getResultConcepts(customSearchFields)
-    : getResultConcepts(
-        filter(customSearchFields, ({ subjectTypeUUID }) => subjectTypeUUID === subjectType.uuid)
-      );
+    : getResultConcepts(filter(customSearchFields, ({ subjectTypeUUID }) => subjectTypeUUID === subjectType.uuid));
 
   const renderNameWithIcon = ({ uuid, fullName, firstName, profilePicture, subjectTypeName }) => {
     return (
@@ -87,9 +71,7 @@ const SubjectSearchTable = ({ searchRequest, organisationConfigs }) => {
           render: row => row.subjectTypeName && t(row.subjectTypeName)
         }
       : null,
-    isPerson
-      ? { title: t("gender"), field: "gender", render: row => row.gender && t(row.gender) }
-      : null,
+    isPerson ? { title: t("gender"), field: "gender", render: row => row.gender && t(row.gender) } : null,
     isPerson
       ? {
           title: t("age"),
@@ -166,6 +148,9 @@ const SubjectSearchTable = ({ searchRequest, organisationConfigs }) => {
           pageSizeOptions: [10, 15, 20],
           addRowPosition: "first",
           sorting: true,
+          headerStyle: {
+            zIndex: 1
+          },
           debounceInterval: 500,
           search: false,
           selection: !isEmpty(searchExtensions)

diff --git a/src/dataEntryApp/views/subjectDashBoard/PlannedVisitsTable.js b/src/dataEntryApp/views/subjectDashBoard/PlannedVisitsTable.js
@@ -99,6 +99,9 @@ const PlannedVisitsTable = ({ plannedVisits, doBaseUrl, cancelBaseURL, onDelete
         pageSizeOptions: [10, 15, 20],
         addRowPosition: "first",
         sorting: true,
+        headerStyle: {
+          zIndex: 1
+        },
         debounceInterval: 500,
         search: false,
         toolbar: false

diff --git a/src/formDesigner/components/Dashboard/ShowDashboardFilters.js b/src/formDesigner/components/Dashboard/ShowDashboardFilters.js
@@ -40,7 +40,14 @@ const ShowDashboardFilters = ({ filters, editAction, deleteAction, operationalMo
       icons={materialTableIcons}
       columns={getFilterColumns(operationalModules)}
       data={filters}
-      options={{ search: false, paging: false, toolbar: false }}
+      options={{
+        headerStyle: {
+          zIndex: 1
+        },
+        search: false,
+        paging: false,
+        toolbar: false
+      }}
       actions={
         editAction || deleteAction
           ? [