Merge pull request #42 from upendraTekdi/cohort_list

Task #223115: add tooltips on icons
tekdi · Jul 19, 2024 · 96926e9 · 96926e9
2 parents 39e4a92 + 3e2afd5
commit 96926e9
Show file tree

Hide file tree

Showing 7 changed files with 184 additions and 154 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -21,7 +21,9 @@
     "SORT": "Sort",
     "EDIT_COHORT_NAME": "Edit Cohort",
     "NAME": "Name",
-    "UPDATE_COHORT": "Update Cohort"
+    "UPDATE_COHORT": "Update Cohort",
+    "EDIT": "Edit",
+    "DELETE": "Delete"
   },
   "LOGIN_PAGE": {
     "USERNAME": "Username",

diff --git a/public/locales/hi/common.json b/public/locales/hi/common.json
@@ -1,7 +1,9 @@
 {
   "COMMON": {
     "LANGUAGE": "भाषा",
-    "LOADING": "लोडिंग"
+    "LOADING": "लोडिंग",
+    "EDIT": "संपादित करें",
+    "DELETE": "हटाएं"
   },
   "LOGIN_PAGE": {
     "USERNAME": "उपयोगकर्ता नाम",
@@ -18,8 +20,6 @@
     "SORT": "क्रमबद्ध करें",
     "EDIT_COHORT_NAME": "समूह संपादित करें",
     "UPDATE_COHORT": "अद्यतन समूह"
-
-
   },
   "COHORTS": {
     "SEARCHBAR_PLACEHOLDER": "कोहॉर्ट्स खोजें.."

diff --git a/public/locales/mr/common.json b/public/locales/mr/common.json
@@ -6,7 +6,9 @@
     "SORT": "क्रमवारी लावा",
     "EDIT_COHORT_NAME": "समूह संपादित करा",
     "NAME": "नाव",
-    "UPDATE_COHORT": "कोहॉर्ट अपडेट करा"
+    "UPDATE_COHORT": "कोहॉर्ट अपडेट करा",
+    "EDIT": "संपादित करा",
+    "DELETE": "हटवा"
   },
   "LOGIN_PAGE": {
     "USERNAME": "वापरकर्तानाव",

diff --git a/public/locales/or/common.json b/public/locales/or/common.json
@@ -5,7 +5,9 @@
     "UPDATE_COHORT": "କୋହୋର୍ଟ୍ ଅଦ୍ୟତନ କରନ୍ତୁ",
     "SORT": "ସର୍ଟ",
     "OTHER": "ଅନ୍ୟ",
-    "NAME": "ନାମ"
+    "NAME": "ନାମ",
+    "EDIT": "ସଂପାଦନା",
+    "DELETE": "ବିଲୋପ"
   },
   "LOGIN_PAGE": {
     "USERNAME": "ଉପଯୋଗକର୍ତା ନାମ",

diff --git a/src/components/ActionIcon.tsx b/src/components/ActionIcon.tsx
@@ -1,7 +1,12 @@
 // components/ActionCell.tsx
 
 import React from "react";
-import { Box, Typography } from "@mui/material";
+
+// import EditIcon from '@mui/icons-material/ModeEditOutlineOutlined';
+// import DeleteIcon from '@mui/icons-material/DeleteOutlined';
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import { useTranslation } from "next-i18next";
+import { Box, Typography, Tooltip } from "@mui/material";
 import EditIcon from "@mui/icons-material/Edit";
 import DeleteIcon from "@mui/icons-material/Delete";
 
@@ -16,6 +21,7 @@ const ActionIcon: React.FC<ActionCellProps> = ({
   onEdit,
   onDelete,
 }) => {
+  const { t } = useTranslation();
   return (
     <Box
       sx={{
@@ -25,40 +31,40 @@ const ActionIcon: React.FC<ActionCellProps> = ({
         alignItems: "center",
       }}
     >
-      <Box
-        onClick={() => {
-          onEdit(rowData);
-        }}
-        sx={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          cursor: "pointer",
-          opacity: 0.5, // Reduced opacity to make it appear disabled
-          pointerEvents: "auto", // Enable pointer events to allow click
-        }}
-      >
-        <EditIcon sx={{ color: "rgba(0, 0, 0, 0.5)" }} />
-        <Typography variant="body2">
-          Edit
-        </Typography>
-      </Box>
-      <Box
-        onClick={() => {
-          onDelete(rowData);
-        }}
-        sx={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          cursor: "pointer",
-        }}
-      >
-        <DeleteIcon sx={{ color: "rgba(0, 0, 0, 0.5)" }} />
-        <Typography variant="body2">
-          Delete
-        </Typography>
-      </Box>
+      <Tooltip title={t("COMMON.EDIT")}>
+        <Box
+          onClick={() => {
+            onEdit(rowData);
+          }}
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            cursor: "pointer",
+            opacity: 0.5, // Reduced opacity to make it appear disabled
+            pointerEvents: "auto", // Enable pointer events to allow click
+          }}
+        >
+          <EditIcon sx={{ color: "rgba(0, 0, 0, 0.5)" }} />
+          <Typography variant="body2">Edit</Typography>
+        </Box>
+      </Tooltip>
+      <Tooltip title={t("COMMON.DELETE")}>
+        <Box
+          onClick={() => {
+            onDelete(rowData);
+          }}
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            cursor: "pointer",
+          }}
+        >
+          <DeleteIcon sx={{ color: "rgba(0, 0, 0, 0.5)" }} />
+          <Typography variant="body2">Delete</Typography>
+        </Box>
+      </Tooltip>
     </Box>
   );
 };

diff --git a/src/components/HeaderComponent.tsx b/src/components/HeaderComponent.tsx
@@ -9,6 +9,7 @@ import {
   Grid,
   Button,
   InputLabel,
+  Tooltip,
 } from "@mui/material";
 import Select, { SelectChangeEvent } from "@mui/material/Select";
 import AddIcon from "@mui/icons-material/Add";
@@ -85,7 +86,6 @@ const HeaderComponent = ({
       //   handleDistrictChange([], []);
       //   handleBlockChange([], []);
       // }
-
     }
     try {
       const response = await getDistrictList(selectedCodes);
@@ -215,46 +215,50 @@ const HeaderComponent = ({
           />
         </Box>
         <Box display={"flex"} gap={1}>
-          <FormControl sx={{ minWidth: "120px" }}>
-            <Select
-              value={selectedFilter}
-              onChange={handleFilterChange}
-              displayEmpty
-              style={{
-                borderRadius: "8px",
-                height: "40px",
-                fontSize: "14px",
-              }}
-            >
-              <MenuItem value="All">
-                <em>All</em>
-              </MenuItem>
-              {Filter?.map((filter, index) => (
-                <MenuItem value={filter} key={index}>
-                  {filter}
+          <Tooltip title="Filter">
+            <FormControl sx={{ minWidth: "120px" }}>
+              <Select
+                value={selectedFilter}
+                onChange={handleFilterChange}
+                displayEmpty
+                style={{
+                  borderRadius: "8px",
+                  height: "40px",
+                  fontSize: "14px",
+                }}
+              >
+                <MenuItem value="All">
+                  <em>All</em>
                 </MenuItem>
-              ))}
-            </Select>
-          </FormControl>
-          <FormControl sx={{ minWidth: "120px" }}>
-            <Select
-              value={selectedSort}
-              onChange={handleSortChange}
-              displayEmpty
-              style={{
-                borderRadius: "8px",
-                height: "40px",
-                fontSize: "14px",
-              }}
-            >
-              <MenuItem value="Sort">{t("COMMON.SORT")}</MenuItem>
-              {Sort.map((state, index) => (
-                <MenuItem value={state} key={index}>
-                  {state}
-                </MenuItem>
-              ))}
-            </Select>
-          </FormControl>
+                {Filter?.map((filter, index) => (
+                  <MenuItem value={filter} key={index}>
+                    {filter}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Tooltip>
+          <Tooltip title={t("COMMON.SORT")}>
+            <FormControl sx={{ minWidth: "120px" }}>
+              <Select
+                value={selectedSort}
+                onChange={handleSortChange}
+                displayEmpty
+                style={{
+                  borderRadius: "8px",
+                  height: "40px",
+                  fontSize: "14px",
+                }}
+              >
+                <MenuItem value="Sort">{t("COMMON.SORT")}</MenuItem>
+                {Sort.map((state, index) => (
+                  <MenuItem value={state} key={index}>
+                    {state}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Tooltip>
         </Box>
       </Box>
       <Box
@@ -270,17 +274,19 @@ const HeaderComponent = ({
           boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.1)",
         }}
       >
-        <Button
-          //  variant="contained"
-          startIcon={<AddIcon />}
-          sx={{
-            textTransform: "none",
-            fontSize: "14px",
-            color: theme.palette.primary["100"],
-          }}
-        >
-          {t("COMMON.ADD_NEW")}
-        </Button>
+        <Tooltip title={t("COMMON.ADD_NEW")}>
+          <Button
+            //  variant="contained"
+            startIcon={<AddIcon />}
+            sx={{
+              textTransform: "none",
+              fontSize: "14px",
+              color: theme.palette.primary["100"],
+            }}
+          >
+            {t("COMMON.ADD_NEW")}
+          </Button>
+        </Tooltip>
       </Box>
       {children}
     </Box>