Merge pull request #224 from AkshataKatwal16/admin

Issue feat PS-2043: Add confirmation modal while reassigning block having already assigned TL

public/locales/en/common.json

@@ -126,7 +126,12 @@
     "NO_BLOCK_AVAILABLE": "No blocks available",
     "PLEASE_SELECT_BLOCK_LIST": "Please select block from block list",
     "ALL_CENTERS": "All centers",
-    "NO_CENTERS": "No centers"
+    "NO_CENTERS": "No centers",
+    "MULTIPLE_TEAM_LEADERS_ASSIGNED": "Selected block {{selectedBlockForTL}} already has {{assignedTeamLeader}} Team Leaders assigned.",
+    "SINGLE_TEAM_LEADERS_ASSIGNED":"Selected block {{selectedBlockForTL}} already has {{assignedTeamLeader}} Team Leader assigned.",
+    "CONTINUE_ASSIGNED_TEAM_LEADER":"Still do you want to continue to assign team leader to {{selectedBlockForTL}}",
+    "ASSIGNED_TEAM_LEADERS":"{{assignedTeamLeaderNames}} and more..",
+    "CONTINUE":"Continue"
   },
   "LOGIN_PAGE": {
     "USERNAME": "Username",

src/components/CommonUserModal.tsx

@@ -20,11 +20,12 @@ import {
   FormContextType,
   Role,
   RoleId,
+  Status,
   apiCatchingDuration,
 } from "@/utils/app.constant";
 import { useLocationState } from "@/utils/useLocationState";
 import useSubmittedButtonStore from "@/utils/useSharedState";
-import { Box, Button, useTheme } from "@mui/material";
+import { Box, Button, Checkbox, FormControlLabel, Typography, useTheme } from "@mui/material";
 import { IChangeEvent } from "@rjsf/core";
 import { RJSFSchema } from "@rjsf/utils";
 import { useQuery } from "@tanstack/react-query";
@@ -35,6 +36,9 @@ import { transformArray } from "../utils/Helper";
 import AreaSelection from "./AreaSelection";
 import SendCredentialModal from "./SendCredentialModal";
 import { showToastMessage } from "./Toastify";
+import { cohortMemberList } from "@/services/UserList";
+import CustomModal from "./CustomModal";
+import { setConfig } from "next/config";
 
 interface UserModalProps {
   open: boolean;
@@ -46,6 +50,8 @@ interface UserModalProps {
   userType: string;
 }
 
+
+
 const CommonUserModal: React.FC<UserModalProps> = ({
   open,
   onClose,
@@ -60,6 +66,10 @@ const CommonUserModal: React.FC<UserModalProps> = ({
   const [uiSchema, setUiSchema] = React.useState<any>();
   const [openModal, setOpenModal] = React.useState(false);
   const [adminInfo, setAdminInfo] = React.useState<any>();
+  const [createTLAlertModal, setcreateTLAlertModal] = useState(false);
+  const [confirmButtonDisable, setConfirmButtonDisable] = useState(true);
+  const [checkedConfirmation, setCheckedConfirmation] = useState<boolean>(false);
+
   const messageKeyMap: Record<string, string> = {
     [FormContextType.STUDENT]: "LEARNERS.LEARNER_CREATED_SUCCESSFULLY",
     [FormContextType.TEACHER]: "FACILITATORS.FACILITATOR_CREATED_SUCCESSFULLY",
@@ -167,7 +177,10 @@ const CommonUserModal: React.FC<UserModalProps> = ({
     stateFieldId,
     dynamicFormForBlock,
     stateDefaultValue,
+    assignedTeamLeader,
+    assignedTeamLeaderNames
   } = useLocationState(open, onClose, roleType);
+  console.log(assignedTeamLeaderNames)
 
   useEffect(() => {
     const getAddUserFormData = () => {
@@ -464,15 +477,14 @@ const CommonUserModal: React.FC<UserModalProps> = ({
   const handleChange = (event: IChangeEvent<any>) => {
     console.log("Form data changed:", event.formData);
   };
-
   const handleError = (errors: any) => {
     console.log("Form errors:", errors);
   };
   const handleBackAction = () => {
     setCreateFacilitator(false);
     setOpenModal(false);
   };
-
+ 
   const handleAction = () => {
     setTimeout(() => {
       setCreateFacilitator(true);
@@ -499,6 +511,45 @@ const CommonUserModal: React.FC<UserModalProps> = ({
       setSubmitButtonEnable(true);
     }
   }, [dynamicForm, dynamicFormForBlock, open]);
+
+
+  const handleChangeCheckBox = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setCheckedConfirmation(event.target.checked);
+
+  };
+
+  const wrappedHandleContinueAction = () => {
+    handleCloseConfirmation();
+     setOpenModal(true);
+     //onClose();
+
+
+
+}
+
+  const handleCancelAction = async () => {
+    // await handleDeleteAction();
+    handleCloseConfirmation();
+//setAssignedTeamLeaderNames([]);
+   };
+  const handleCloseConfirmation=  () => {
+    // await handleDeleteAction();
+   // handleCloseConfirmation();
+   setcreateTLAlertModal(false);
+   setCheckedConfirmation(false);
+   setConfirmButtonDisable(true);
+ //  setAssignedTeamLeaderNames([]);
+
+   };
+
+
+   useEffect(() => {
+    if (checkedConfirmation) {
+      setConfirmButtonDisable(false);
+    } else {
+      setConfirmButtonDisable(true);
+    }
+  }, [checkedConfirmation]);
   useEffect(() => {
     if (typeof window !== "undefined" && window.localStorage) {
       const admin = localStorage.getItem("adminInfo");
@@ -554,7 +605,18 @@ const CommonUserModal: React.FC<UserModalProps> = ({
                   !isEditModal &&
                   noError
                 ) {
-                  setOpenModal(true);
+                 // setOpenModal(true);
+                 console.log(assignedTeamLeaderNames.length)
+                 if(assignedTeamLeaderNames.length!==0 && userType===FormContextType.TEAM_LEADER)
+                 {
+                    setcreateTLAlertModal(true);
+                                     // setOpenModal(true)
+
+                 }
+                 else{
+                  //onClose();
+                  setOpenModal(true)
+                 }
                 }
                 console.log("Submit button was clicked");
               }}
@@ -664,8 +726,91 @@ const CommonUserModal: React.FC<UserModalProps> = ({
               : Role.TEACHER
         }
       />
+
+
+
+
+
+
+
+
+
+<CustomModal
+          width="40%"
+          open={createTLAlertModal}
+          handleClose={handleCloseConfirmation}
+          primaryBtnText={t("COMMON.CONTINUE")}
+          primaryBtnClick={wrappedHandleContinueAction}
+          primaryBtnDisabled={confirmButtonDisable}
+          secondaryBtnText={t("COMMON.CANCEL")}
+          secondaryBtnClick={handleCancelAction}
+        >
+          <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" }}
+            >
+{assignedTeamLeaderNames.length>1 ?(
+              <>
+               {t('COMMON.MULTIPLE_TEAM_LEADERS_ASSIGNED', { selectedBlockForTL: selectedBlock[0],assignedTeamLeader: assignedTeamLeader})}
+
+              </>
+            ):(<>
+
+              {t('COMMON.SINGLE_TEAM_LEADERS_ASSIGNED', { selectedBlockForTL: selectedBlock[0],assignedTeamLeader: assignedTeamLeader})}
+
+                        </>)
+}
+
+            </Typography>
+            <Box
+            sx={{
+              border: "1px solid #ddd",
+              borderRadius: "8px",
+              padding: "8px",
+              marginBottom: "16px",
+              backgroundColor: "#fff",
+              maxHeight: "200px",
+              overflowY: "auto",
+            }}
+          >
+            {assignedTeamLeaderNames.length>1 ?(
+            <>
+             {t('COMMON.ASSIGNED_TEAM_LEADERS', { assignedTeamLeaderNames:assignedTeamLeaderNames[0]})}
+
+            </> 
+
+
+            ):(<>
+              {assignedTeamLeaderNames[0]}
+            </>)
+
+            }
+         </Box>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={checkedConfirmation}
+                  onChange={handleChangeCheckBox}
+                  color="primary"
+                />
+              }
+              label={ t('COMMON.CONTINUE_ASSIGNED_TEAM_LEADER', {selectedBlockForTL: selectedBlock[0]})}
+              sx={{ marginTop: "12px", color: "#555" }}
+            />
+          </Box>
+        </CustomModal>
     </>
   );
 };
 
-export default CommonUserModal;
+export default CommonUserModal;

src/components/CustomModal.tsx

@@ -15,7 +15,7 @@ import CloseIcon from "@mui/icons-material/Close";
 interface CustomModalProps {
   open: boolean;
   handleClose: () => void;
-  title: string;
+  title?: string;
   subtitle?: string;
   primaryBtnText: string;
   secondaryBtnText?: string;
@@ -25,6 +25,7 @@ interface CustomModalProps {
   backdropClose?: boolean;
   primaryBtnDisabled?: boolean;
   children: React.ReactNode;
+  width?:string
 }
 
 const CustomModal: React.FC<CustomModalProps> = ({
@@ -40,6 +41,7 @@ const CustomModal: React.FC<CustomModalProps> = ({
   backdropClose = true,
   primaryBtnDisabled = true,
   children,
+  width
 }) => {
   // const isSmallScreen = useMediaQuery((theme: Theme) =>
   //   theme.breakpoints.down("sm"),
@@ -61,7 +63,7 @@ const CustomModal: React.FC<CustomModalProps> = ({
           top: "50%",
           left: "50%",
           transform: "translate(-50%, -50%)",
-          width: isSmallScreen ? "90%" : isLargeScreen ? "65%" : "85%",
+          width: isSmallScreen ? "90%" : isLargeScreen ? width : width,
           maxWidth: "90%",
           bgcolor: "background.paper",
           boxShadow: 24,

src/components/DeleteUserModal.tsx

@@ -86,6 +86,7 @@ const DeleteUserModal: React.FC<DeleteUserModalProps> = ({
 
   return (
     <CustomModal
+    width="25%"
       open={open}
       handleClose={handleClose}
       title={t("COMMON.DELETE_USER")}