Merge pull request #158 from AkshataKatwal16/admin

Issue feat: add tool-tip to reassign cohorts icon, modify delete popup
tekdi · Aug 25, 2024 · 1bfe7f2 · 1bfe7f2
2 parents 5a1884b + 672f5df
commit 1bfe7f2
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 117 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -119,7 +119,6 @@
     "USER_COHORTS": "{{name}} belongs to below cohorts",
     "DELETE_COHORT_WARNING":"Do you want to delete user from cohort?"
 
-
   },
   "LOGIN_PAGE": {
     "USERNAME": "Username",

diff --git a/src/components/DeleteUserModal.tsx b/src/components/DeleteUserModal.tsx
@@ -1,21 +1,15 @@
 import {
   Box,
-  Button,
+  Checkbox,
   Divider,
-  FormControl,
-  Modal,
+  FormControlLabel,
   Radio,
-  TextField,
   Typography,
 } from "@mui/material";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useTheme } from "@mui/material/styles";
 import { useTranslation } from "next-i18next";
-import CloseIcon from "@mui/icons-material/Close";
-import { showToastMessage } from "./Toastify";
 import CustomModal from "./CustomModal";
-import { Checkbox, FormControlLabel } from '@mui/material';
-
 
 interface DeleteUserModalProps {
   open: boolean;
@@ -27,11 +21,10 @@ interface DeleteUserModalProps {
   handleDeleteAction: any;
   confirmButtonDisable: boolean;
   setConfirmButtonDisable: any;
-  centers:any;
-  userId?:string;
-  userType?:string;
-  userName?:string
-
+  centers: any;
+  userId?: string;
+  userType?: string;
+  userName?: string;
 }
 
 const DeleteUserModal: React.FC<DeleteUserModalProps> = ({
@@ -46,137 +39,142 @@ const DeleteUserModal: React.FC<DeleteUserModalProps> = ({
   setConfirmButtonDisable,
   centers,
   userId,
-  userName
+  userName,
 }) => {
-  console.log(userName)
   const { t } = useTranslation();
   const theme = useTheme<any>();
   const reasons = [
     { value: "Incorrect Data Entry", label: t("COMMON.INCORRECT_DATA_ENTRY") },
     { value: "Duplicated User", label: t("COMMON.DUPLICATED_USER") },
   ];
-  const [checkedCohortDeletion, setCheckedCohortDeletion] = useState(centers!=="-"? true: false);
+  const [checkedCohortDeletion, setCheckedCohortDeletion] = useState<boolean>(centers === "-" ? true : false);
+
+  useEffect(() => {
+    if (centers === "-") {
+      setCheckedCohortDeletion(true);
+    } else {
+      setCheckedCohortDeletion(false);
+    }
+  }, [centers]);
 
   const handleRadioChange = (value: string) => {
-    console.log(value);
     setSelectedValue(value);
     setConfirmButtonDisable(false);
   };
+
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setCheckedCohortDeletion(event.target.checked);
   };
+
   const handleOtherReasonChange = (event: any) => {
     setOtherReason(event.target.value);
   };
-  
+
   const handleClose = () => {
-    if(centers!=="")
-    { setCheckedCohortDeletion(true);}
-    else
-    {
+    if (centers === "-") {
+      setCheckedCohortDeletion(true);
+    } else {
       setCheckedCohortDeletion(false);
     }
     onClose();
   };
+
   const wrappedHandleDeleteAction = async () => {
-   // setCheckedCohortDeletion(false);
-    await handleDeleteAction(); 
-    handleClose(); 
+    await handleDeleteAction();
+    handleClose();
   };
+
   return (
-    <>
-      <CustomModal
-        open={open}
-        handleClose={handleClose}
-        title={t("COMMON.DELETE_USER")}
-       // subtitle={t("COMMON.REASON_FOR_DELETION")}
-        primaryBtnText={t("COMMON.DELETE_USER_WITH_REASON")}
-        // secondaryBtnText="Cancel"
-        primaryBtnClick={wrappedHandleDeleteAction}
-        primaryBtnDisabled={ confirmButtonDisable}
-        // secondaryBtnClick={handleSecondaryClick}
-      >
-        <>
-       { centers!=="-" && (<Box 
-  sx={{ 
-    border: '1px solid #ccc', 
-    borderRadius: '8px', 
-    padding: '16px',
-    width: 'fit-content',
-    backgroundColor: '#f9f9f9',
-    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
-  }}
->
-  <Typography variant="body1" sx={{ marginBottom: '12px', fontWeight: 'bold', color: '#333' }}>
-  {t("COMMON.USER_COHORTS", {name: userName})} 
-  </Typography>
-
-  <Box 
-    sx={{ 
-      border: '1px solid #ddd',
-      borderRadius: '8px',
-      padding: '8px',
-      marginBottom: '16px',
-      backgroundColor: '#fff',
-      maxHeight: '200px',
-      overflowY: 'auto',
-    }}
-  >
-    {centers}
-  </Box>
+    <CustomModal
+      open={open}
+      handleClose={handleClose}
+      title={t("COMMON.DELETE_USER")}
+      primaryBtnText={t("COMMON.DELETE_USER_WITH_REASON")}
+      primaryBtnClick={wrappedHandleDeleteAction}
+      primaryBtnDisabled={confirmButtonDisable}
+    >
+      {centers !== "-" && (
+        <Box
+          sx={{
+            border: "1px solid #ccc",
+            borderRadius: "8px",
+            padding: "16px",
+            width: "fit-content",
+            backgroundColor: "#f9f9f9",
+            boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
+          }}
+        >
+          <Typography
+            variant="body1"
+            sx={{ marginBottom: "12px", fontWeight: "bold", color: "#333" }}
+          >
+            {t("COMMON.USER_COHORTS", { name: userName })}
+          </Typography>
 
-  <FormControlLabel
-    control={
-      <Checkbox
-        checked={checkedCohortDeletion}
-        onChange={handleChange}
-        color="primary"
-      />
-    }
-    label=  {t("COMMON.DELETE_COHORT_WARNING")} 
-    sx={{ marginTop: '12px', color: '#555' }}
-  />
-</Box>)
-}
+          <Box
+            sx={{
+              border: "1px solid #ddd",
+              borderRadius: "8px",
+              padding: "8px",
+              marginBottom: "16px",
+              backgroundColor: "#fff",
+              maxHeight: "200px",
+              overflowY: "auto",
+            }}
+          >
+            {centers}
+          </Box>
+
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={checkedCohortDeletion}
+                onChange={handleChange}
+                color="primary"
+              />
+            }
+            label={t("COMMON.DELETE_COHORT_WARNING")}
+            sx={{ marginTop: "12px", color: "#555" }}
+          />
+        </Box>
+      )}
+      {checkedCohortDeletion && (
+        <Box padding={"0 1rem"}>
+          <Typography id="modal-subtitle" variant="h2" marginTop="10px">
+            {t("COMMON.REASON_FOR_DELETION")}
+          </Typography>
 
-        {checkedCohortDeletion && ( <Box padding={"0 1rem"}>
-          <Typography id="modal-subtitle" variant="h2"  marginTop= "10px">
-         { t("COMMON.REASON_FOR_DELETION")}              </Typography>
-
-            {reasons?.map((option) => (
-              <>
-                <Box
-                  display={"flex"}
-                  justifyContent={"space-between"}
-                  alignItems={"center"}
+          {reasons?.map((option) => (
+            <React.Fragment key={option.value}>
+              <Box
+                display={"flex"}
+                justifyContent={"space-between"}
+                alignItems={"center"}
+              >
+                <Typography
+                  variant="h2"
+                  sx={{
+                    color: theme.palette.warning["A200"],
+                    fontSize: "14px",
+                  }}
+                  component="h2"
                 >
-                  <Typography
-                    variant="h2"
-                    sx={{
-                      color: theme.palette.warning["A200"],
-                      fontSize: "14px",
-                    }}
-                    component="h2"
-                  >
-                    {option.label}
-                  </Typography>
+                  {option.label}
+                </Typography>
 
-                  <Radio
-                    sx={{ pb: "20px" }}
-                    onChange={() => handleRadioChange(option.value)}
-                    value={option.value}
-                    checked={selectedValue === option.value}
-                  />
-                </Box>
-                <Divider />
-              </>
-            ))}
-          </Box>
-        )
-}
-        </>
-      </CustomModal>
-    </>
+                <Radio
+                  sx={{ pb: "20px" }}
+                  onChange={() => handleRadioChange(option.value)}
+                  value={option.value}
+                  checked={selectedValue === option.value}
+                />
+              </Box>
+              <Divider />
+            </React.Fragment>
+          ))}
+        </Box>
+      )}
+    </CustomModal>
   );
 };
 

diff --git a/src/components/KaTableComponent.tsx b/src/components/KaTableComponent.tsx
@@ -38,7 +38,7 @@ interface KaTableComponentProps {
   showIcons?: boolean;
   noDataMessage?: any;
   pagination?: boolean;
-
+  reassignType?:string;
 }
 
 const KaTableComponent: React.FC<KaTableComponentProps> = ({
@@ -54,6 +54,7 @@ const KaTableComponent: React.FC<KaTableComponentProps> = ({
   pageSizes,
   noDataMessage,
   pagination = true,
+  reassignType
 }) => {
   const [selectedRowIds, setSelectedRowIds] = useState<number[]>([]);
   const { t } = useTranslation();
@@ -118,6 +119,7 @@ console.log(columns)
                       onDelete={onDelete}
                      userAction={props.rowData?.userId}
                       disable={props.rowData?.status === Status.ARCHIVED}
+                      reassignType={reassignType}
                     />
                   );
                 }

diff --git a/src/components/UserTable.tsx b/src/components/UserTable.tsx
@@ -1040,6 +1040,7 @@ const UserTable: React.FC<UserTableProps> = ({
           pagination={pagination}
          // reassignCohort={reassignCohort}
           noDataMessage={data?.length === 0 ? t("COMMON.NO_USER_FOUND") : ""}
+          reassignType={userType===Role.TEAM_LEADERS?  t("COMMON.REASSIGN_BLOCKS"):  t("COMMON.REASSIGN_CENTERS")}
         />
       ) : (
         loading === false &&