Merge pull request #64 from upendraTekdi/cohort_list

Task #223738: Integrate cohort search API on cohort list,
tekdi · Jul 30, 2024 · 2e9d938 · 2e9d938
2 parents 26932a9 + cd25825
commit 2e9d938
Show file tree

Hide file tree

Showing 10 changed files with 401 additions and 192 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -13,6 +13,7 @@
     "INCORRECT_DATA_ENTRY": "Incorrect Data Entry",
     "DUPLICATED_USER": "Duplicate User",
     "NO_USER_FOUND": "User not found",
+    "NO_CENTER_FOUND": "Centers not found",
     "ALL": "All",
     "NO_GO_BACK": "No, go back",
     "YES": "Yes",
@@ -26,7 +27,8 @@
     "DELETE": "Delete",
     "NO_DATA_FOUND": "No data found",
     "SUBMIT": "Submit",
-    "BACK": "Back"
+    "BACK": "Back",
+    "CANCEL": "Cancel"
   },
   "LOGIN_PAGE": {
     "USERNAME": "Username",
@@ -126,7 +128,10 @@
     "RENAME": "Rename",
     "CENTER_RENAMED": "Center Renamed Successfully!",
     "SEND_REQUEST": "Send Request",
-    "REQUEST_TO_DELETE_HAS_BEEN_SENT": "Request to Delete has been sent"
+    "SURE_DELETE_COHORT": "Are you sure you want to Delete Center ?",
+    "CENTER_UPDATE_SUCCESSFULLY": "Cohort has been Successfully Updated",
+    "CENTER_DELETE_SUCCESSFULLY": "Cohort has been Successfully Deleted",
+    "CENTER_CREATED_SUCCESSFULLY": "Cohort Created Successfully"
   },
   "FORM": {
     "FULL_NAME": "Full Name",

diff --git a/src/components/ActionIcon.tsx b/src/components/ActionIcon.tsx
@@ -7,7 +7,7 @@ import React from "react";
 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 EditIcon from "@mui/icons-material/Edit";
 import DeleteIcon from "@mui/icons-material/Delete";
 
 interface ActionCellProps {
@@ -41,8 +41,7 @@ const ActionIcon: React.FC<ActionCellProps> = ({
             flexDirection: "column",
             alignItems: "center",
             cursor: "pointer",
-        //    opacity: 0.5, // Reduced opacity to make it appear disabled
-            pointerEvents: "auto", // Enable pointer events to allow click
+            // pointerEvents: "none",
           }}
         >
           <EditIcon/>

diff --git a/src/components/CustomModal.tsx b/src/components/CustomModal.tsx
@@ -41,7 +41,7 @@ const CustomModal: React.FC<CustomModalProps> = ({
   children,
 }) => {
   const isSmallScreen = useMediaQuery((theme: Theme) =>
-    theme.breakpoints.down("sm"),
+    theme.breakpoints.down("sm")
   );
 
   return (
@@ -86,9 +86,9 @@ const CustomModal: React.FC<CustomModalProps> = ({
         </Box>
         <Divider sx={{ my: 2 }} />
         <Box id="modal-description">{children}</Box>
-        <Box mt={2} display="flex" justifyContent="center" gap={2}>
+        <Box mt={2} display="flex" justifyContent="space-around" gap={2}>
           <Button
-            fullWidth
+            // fullWidth
             onClick={primaryBtnClick}
             variant="contained"
             disabled={primaryBtnDisabled}

diff --git a/src/components/KaTableComponent.tsx b/src/components/KaTableComponent.tsx
@@ -4,6 +4,8 @@ import { SortingMode, PagingPosition } from "ka-table/enums";
 import { Paper, Checkbox } from "@mui/material";
 import "ka-table/style.css";
 import ActionIcon from "./ActionIcon";
+import { format } from "date-fns";
+import { DataKey, DateFormat } from "@/utils/app.constant";
 import { useTranslation } from "react-i18next";
 
 interface KaTableComponentProps {
@@ -92,7 +94,7 @@ const KaTableComponent: React.FC<KaTableComponentProps> = ({
             },
             cell: {
               content: (props) => {
-                if (props.column.key === "actions") {
+                if (props.column.key === DataKey.ACTIONS) {
                   return (
                     <ActionIcon
                       rowData={props.rowData}
@@ -101,6 +103,17 @@ const KaTableComponent: React.FC<KaTableComponentProps> = ({
                     />
                   );
                 }
+                if (props.column.key === DataKey.UPDATEDAT) {
+                  return format(
+                    props.rowData?.updatedAt,
+                    DateFormat.YYYY_MM_DD
+                  );
+                } else if (props.column.key === DataKey.CREATEDAT) {
+                  return format(
+                    props.rowData?.createdAt,
+                    DateFormat.YYYY_MM_DD
+                  );
+                }
                 if (props.column.key === "selection-cell") {
                   return (
                     <Checkbox

diff --git a/src/components/PageSelector.tsx b/src/components/PageSelector.tsx
@@ -33,7 +33,7 @@ const PageSizeSelector = ({ handleChange, pageSize, options }: any) => {
         <MenuItem value="">
           <em>None</em>
         </MenuItem>
-        {options.map((option: any) => (
+        {options?.map((option: any) => (
           <MenuItem key={option} value={option}>
             {option}
           </MenuItem>

diff --git a/src/components/SimpleModal.tsx b/src/components/SimpleModal.tsx
@@ -1,16 +1,10 @@
-import {
-  Box,
-  Button,
-  Divider,
-  Modal,
-  Typography
-} from '@mui/material';
-import React, { ReactNode } from 'react';
+import { Box, Button, Divider, Modal, Typography } from "@mui/material";
+import React, { ReactNode } from "react";
 
-import manageUserStore from '@/store/manageUserStore';
-import CloseSharpIcon from '@mui/icons-material/CloseSharp';
-import { useTheme, useMediaQuery } from '@mui/material';
-import { useTranslation } from 'next-i18next';
+import manageUserStore from "@/store/manageUserStore";
+import CloseSharpIcon from "@mui/icons-material/CloseSharp";
+import { useTheme, useMediaQuery } from "@mui/material";
+import { useTranslation } from "next-i18next";
 
 interface SimpleModalProps {
   secondaryActionHandler?: () => void;
@@ -37,32 +31,32 @@ const SimpleModal: React.FC<SimpleModalProps> = ({
   const { t } = useTranslation();
   const store = manageUserStore();
   const theme = useTheme<any>();
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
-  const isMediumScreen = useMediaQuery(theme.breakpoints.between('sm', 'md'));
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
+  const isMediumScreen = useMediaQuery(theme.breakpoints.between("sm", "md"));
 
-  const isLargeScreen = useMediaQuery(theme.breakpoints.up('lg'));
+  const isLargeScreen = useMediaQuery(theme.breakpoints.up("lg"));
 
   const modalStyle = {
-    paddingTop: '0',
+    paddingTop: "0",
     paddingLeft: theme.spacing(2),
     paddingRight: theme.spacing(2),
     paddingBottom: theme.spacing(2),
-    position: 'absolute',
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)',
-    width: isSmallScreen ? '90%' : isLargeScreen ? '65%' : '85%',
-    maxHeight: '80vh',
-    overflowY: 'auto',
-    backgroundColor: '#fff',
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: isSmallScreen ? "90%" : isLargeScreen ? "65%" : "85%",
+    maxHeight: "80vh",
+    overflowY: "auto",
+    backgroundColor: "#fff",
     borderRadius: theme.shape.borderRadius,
     boxShadow: theme.shadows[5],
   };
 
   const titleStyle = {
-    position: 'sticky',
-    top: '0',
-    backgroundColor: '#fff',
+    position: "sticky",
+    top: "0",
+    backgroundColor: "#fff",
     padding: theme.spacing(2),
     zIndex: 9999,
     borderBottom: `1px solid ${theme.palette.divider}`,
@@ -75,16 +69,12 @@ const SimpleModal: React.FC<SimpleModalProps> = ({
       aria-describedby="child-modal-description"
     >
       <Box sx={modalStyle}>
-        <Box
-          display={'flex'}
-          justifyContent={'space-between'}
-          sx={titleStyle}
-        >
-          <Box marginBottom={'0px'}>
+        <Box display={"flex"} justifyContent={"space-between"} sx={titleStyle}>
+          <Box marginBottom={"0px"}>
             <Typography
               variant="h2"
               sx={{
-                color: theme.palette.warning['A200'],
+                color: theme.palette.warning["A200"],
               }}
               component="h2"
             >
@@ -94,7 +84,7 @@ const SimpleModal: React.FC<SimpleModalProps> = ({
           <Box>
             <CloseSharpIcon
               sx={{
-                cursor: 'pointer',
+                cursor: "pointer",
               }}
               onClick={onClose}
               aria-label="Close"
@@ -106,39 +96,43 @@ const SimpleModal: React.FC<SimpleModalProps> = ({
         <Divider />
 
         {showFooter ? (
-          <Box alignContent={"center"} alignItems={"center"} justifyContent={"center"} display={'flex'}>
+          <Box
+            alignContent={"center"}
+            alignItems={"center"}
+            justifyContent={"center"}
+            display={"flex"}
+          >
             {primaryText && (
               <Button
                 variant="contained"
                 color="primary"
                 sx={{
-                  '&.Mui-disabled': {
+                  "&.Mui-disabled": {
                     backgroundColor: theme?.palette?.primary?.main,
                   },
-                //  minWidth: '84px',
-                //  height: '2.5rem',
+                  //  minWidth: '84px',
+                  //  height: '2.5rem',
                   padding: theme.spacing(1),
-                  fontWeight: '500',
-                 // width: '100%',
+                  fontWeight: "500",
+                  // width: '100%',
                 }}
                 onClick={primaryActionHandler}
-              >
-              </Button>
+              ></Button>
             )}
 
             {secondaryText && (
               <Button
                 variant="contained"
                 color="primary"
                 sx={{
-                  '&.Mui-disabled': {
+                  "&.Mui-disabled": {
                     backgroundColor: theme?.palette?.primary?.main,
                   },
-                  minWidth: '84px',
-                  height: '2.5rem',
+                  minWidth: "84px",
+                  height: "2.5rem",
                   padding: theme.spacing(1),
-                  fontWeight: '500',
-                  width: '100%',
+                  fontWeight: "500",
+                  width: "100%",
                 }}
                 onClick={secondaryActionHandler}
               >

diff --git a/src/components/UserTable.tsx b/src/components/UserTable.tsx
@@ -362,30 +362,36 @@ const UserTable: React.FC<UserTableProps> = ({
     let initialFormData: any = {};
     formFields.fields.forEach((item: any) => {
       const userData = response?.userData;
-      const customField = userData?.customFields?.find((field: any) => field.fieldId === item.fieldId);
-
+      const customField = userData?.customFields?.find(
+        (field: any) => field.fieldId === item.fieldId
+      );
+
       const getValue = (data: any, field: any) => {
         if (item?.isMultiSelect) {
-          if (item?.type === 'checkbox') {
-            return String(field.value).split(',');
+          if (item?.type === "checkbox") {
+            return String(field.value).split(",");
           }
           return [field.value];
         } else {
-          if (item?.type === 'numeric') {
+          if (item?.type === "numeric") {
             return Number(field.value);
-          } else if (item?.type === 'text') {
+          } else if (item?.type === "text") {
             return String(field.value);
           } else {
             return field.value;
           }
         }
       };
-  
+
       if (item.coreField) {
         initialFormData[item.name] = item?.isMultiSelect
-          ? userData[item.name] ? [userData[item.name]] : userData[item.name] || ''
-          : item?.type === 'numeric' ? Number(userData[item.name])
-            : item?.type === 'text' ? String(userData[item.name])
+          ? userData[item.name]
+            ? [userData[item.name]]
+            : userData[item.name] || ""
+          : item?.type === "numeric"
+            ? Number(userData[item.name])
+            : item?.type === "text"
+              ? String(userData[item.name])
               : userData[item.name];
       } else {
         initialFormData[item.name] = getValue(userData, customField);
@@ -395,14 +401,14 @@ const UserTable: React.FC<UserTableProps> = ({
   };
   const handleEdit = async (rowData: any) => {
     console.log("Edit row:", rowData);
-  
+
     try {
       const userId = rowData.userId;
       setUserId(userId);
       const fieldValue = true;
       const response = await getUserDetails(userId, fieldValue);
       console.log(role);
-  
+
       let formFields;
       if (Role.STUDENT === role) {
         formFields = await getFormRead("USERS", "STUDENT");
@@ -413,7 +419,7 @@ const UserTable: React.FC<UserTableProps> = ({
         setFormData(mapFields(formFields, response));
         handleOpenAddFacilitatorModal();
       }
-  
+
       console.log("response", response);
       console.log("formFields", formFields);
     } catch (error) {
@@ -553,12 +559,10 @@ const UserTable: React.FC<UserTableProps> = ({
       console.log(selectedUserId);
       const userId = selectedUserId;
       const userData = {
-        userData: [
-          {
-            reason: selectedReason,
-            status: "archived",
-          },
-        ],
+        userData: {
+          reason: selectedReason,
+          status: "archived",
+        },
       };
       const response = await deleteUser(userId, userData);
       handleCloseDeleteModal();
@@ -587,10 +591,9 @@ const UserTable: React.FC<UserTableProps> = ({
     handleFilterChange: handleFilterChange,
     handleSearch: handleSearch,
     handleAddUserClick: handleAddUserClick,
-    selectedBlockCode:selectedBlockCode,
-    selectedDistrictCode:selectedDistrictCode,
-    selectedStateCode:selectedStateCode
-
+    selectedBlockCode: selectedBlockCode,
+    selectedDistrictCode: selectedDistrictCode,
+    selectedStateCode: selectedStateCode,
   };
 
   return (