Merge pull request #142 from rahulg1254/admin-master

Task #223691 feat: Removed action buttons from state, Profile name correction, Added inline loaders, pagination correction, don't show table when no data,
tekdi · Aug 20, 2024 · d2ab242 · d2ab242
2 parents c46bb8b + 8a82e39
commit d2ab242
Show file tree

Hide file tree

Showing 5 changed files with 319 additions and 240 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -55,7 +55,7 @@
     "BLOCK_CODE": "Block Code",
     "BLOCKS_NOT_FOUND": "Blocks not found",
     "STATE_NOT_FOUND": "States not found",
-    "DISTRICT_NOT_FOUND": "Districts not found",
+    "DISTRICT_NOT_FOUND": "District not found",
     "USERS_EMAIL": "Users Email",
     "STATE_NAME_REQUIRED": "State Name is Required",
     "DISTRICT_NAME_REQUIRED": "District Name is Required",

diff --git a/src/components/layouts/header/Profile.tsx b/src/components/layouts/header/Profile.tsx
@@ -27,7 +27,7 @@ const Profile = () => {
   const adminInformation = useSubmittedButtonStore(
     (state: any) => state?.adminInformation
   );
-  console.log(adminInformation)
+  console.log(adminInformation);
   const [submitValue, setSubmitValue] = React.useState<boolean>(false);
 
   const [role, setRole] = React.useState<string | null>("");
@@ -41,7 +41,7 @@ const Profile = () => {
     (state: any) => state.setAdminInformation
   );
   const router = useRouter();
-  
+
   const handleClick4 = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl4(event.currentTarget);
     setProfileClick(true);
@@ -141,25 +141,26 @@ const Profile = () => {
 
     try {
       const fieldValue = true;
-      const response = await getUserDetailsInfo(adminInformation?.userId, fieldValue);
-     // console.log(role);
+      const response = await getUserDetailsInfo(
+        adminInformation?.userId,
+        fieldValue
+      );
+      // console.log(role);
 
       let formFields;
       if (Role.STUDENT === adminInformation?.role) {
         formFields = await getFormRead("USERS", "STUDENT");
         setFormData(mapFields(formFields, response));
         console.log("mapped formdata", formdata);
-      } else if (Role.TEACHER ===  adminInformation?.role) {
+      } else if (Role.TEACHER === adminInformation?.role) {
         console.log("mapped formdata", formdata);
 
         formFields = await getFormRead("USERS", "TEACHER");
         setFormData(mapFields(formFields, response));
-      } else if (Role.TEAM_LEADER ===  adminInformation?.role) {
+      } else if (Role.TEAM_LEADER === adminInformation?.role) {
         formFields = await getFormRead("USERS", "TEAM LEADER");
         setFormData(mapFields(formFields, response));
-      }
-      else
-      {
+      } else {
         formFields = await getFormRead("USERS", "ADMIN");
         setFormData(mapFields(formFields, response));
       }
@@ -189,10 +190,8 @@ const Profile = () => {
   }, [formdata]);
   useEffect(() => {
     if (typeof window !== "undefined" && window.localStorage) {
-     const admin = localStorage.getItem("adminInfo");
-     if(admin)
-    setAdminInfo(JSON.parse(admin))
-
+      const admin = localStorage.getItem("adminInfo");
+      if (admin) setAdminInfo(JSON.parse(admin));
     }
   }, []);
 
@@ -211,13 +210,13 @@ const Profile = () => {
         return FormContextType.TEAM_LEADER;
     }
   })();
-  
+
   return (
     <>
       <Button
         aria-label="menu"
         color="inherit"
-        aria-controls="profile-menu"  
+        aria-controls="profile-menu"
         aria-haspopup="true"
         onClick={handleClick4}
       >
@@ -250,8 +249,14 @@ const Profile = () => {
               }}
             >
               {userName
-                ? userName.charAt(0).toUpperCase() +
-                  userName.slice(1).toLowerCase()
+                ? userName
+                    .split(" ")
+                    .map(
+                      (name) =>
+                        name.charAt(0).toUpperCase() +
+                        name.slice(1).toLowerCase()
+                    )
+                    .join(" ")
                 : ""}
             </Typography>
             <FeatherIcon icon="chevron-down" size="20" />
@@ -291,26 +296,28 @@ const Profile = () => {
             <EditIcon />
           </IconButton> */}
 
-<Box
-  sx={{
-    backgroundColor: "#FFC107",
-    width: "50px", 
-    height: "50px",
-    borderRadius: "50%",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    marginBottom: "20px",
-  }}
->
-  <Typography variant="h6" sx={{ fontWeight: "bold", fontSize: "18px" }}>
-    {adminInfo?.name
-      ?.split(" ")
-      .map((word: any) => word[0])
-      .join("")}
-  </Typography>
-</Box>
-
+          <Box
+            sx={{
+              backgroundColor: "#FFC107",
+              width: "50px",
+              height: "50px",
+              borderRadius: "50%",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              marginBottom: "20px",
+            }}
+          >
+            <Typography
+              variant="h6"
+              sx={{ fontWeight: "bold", fontSize: "18px" }}
+            >
+              {adminInfo?.name
+                ?.split(" ")
+                .map((word: any) => word[0])
+                .join("")}
+            </Typography>
+          </Box>
 
           <Typography variant="h5" sx={{ marginBottom: "10px" }}>
             {adminInfo?.name}
@@ -341,20 +348,18 @@ const Profile = () => {
           </Button>
         </Box>
       </Menu>
-{console.log(adminInfo?.role)}
-   { openEditModal && ( <CommonUserModal
-        open={openEditModal}
-        onClose={handleCloseAddLearnerModal}
-        formData={formdata}
-        isEditModal={true}
-        userId={userId}
-        onSubmit={handleModalSubmit}
-        userType={
-         userType
-        }
-      />
-   )
-}
+      {console.log(adminInfo?.role)}
+      {openEditModal && (
+        <CommonUserModal
+          open={openEditModal}
+          onClose={handleCloseAddLearnerModal}
+          formData={formdata}
+          isEditModal={true}
+          userId={userId}
+          onSubmit={handleModalSubmit}
+          userType={userType}
+        />
+      )}
     </>
   );
 };

diff --git a/src/pages/block.tsx b/src/pages/block.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import KaTableComponent from "../components/KaTableComponent";
 import { DataType } from "ka-table/enums";
 import HeaderComponent from "@/components/HeaderComponent";
-import { Chip, Pagination } from "@mui/material";
+import { Chip, Pagination, Typography } from "@mui/material";
 import Box from "@mui/material/Box";
 import FormControl from "@mui/material/FormControl";
 import InputLabel from "@mui/material/InputLabel";
@@ -85,6 +85,7 @@ const Block: React.FC = () => {
   const [cohortId, setCohortId] = useState<any>();
   const [stateFieldId, setStateFieldId] = useState<string>("");
   const [searchKeyword, setSearchKeyword] = useState("");
+  const [pagination, setPagination] = useState(true);
 
   useEffect(() => {
     const fetchUserDetail = async () => {
@@ -221,8 +222,15 @@ const Block: React.FC = () => {
       const totalCount = response?.result?.totalCount || 0;
       setPaginationCount(totalCount);
 
+      setPagination(totalCount > 10);
       setPageSizeArray(
-        totalCount >= 15 ? [5, 10, 15, 20] : totalCount >= 10 ? [5, 10] : [5]
+        totalCount > 15
+          ? [5, 10, 15]
+          : totalCount > 10
+            ? [5, 10]
+            : totalCount > 5
+              ? [5]
+              : []
       );
 
       setPageCount(Math.ceil(totalCount / limit));
@@ -356,14 +364,19 @@ const Block: React.FC = () => {
     setPageOffset(value - 1);
   };
   const PagesSelector = () => (
-    <Box mt={3}>
-      <Pagination
-        color="primary"
-        count={pageCount}
-        page={pageOffset + 1}
-        onChange={handlePaginationChange}
-      />
-    </Box>
+    <>
+      <Box sx={{ display: { xs: "block" } }}>
+        <Pagination
+          color="primary"
+          count={pageCount}
+          page={pageOffset + 1}
+          onChange={handlePaginationChange}
+          siblingCount={0}
+          boundaryCount={1}
+          sx={{ marginTop: "10px" }}
+        />
+      </Box>
+    </>
   );
 
   const PageSizeSelectorFunction = () => (
@@ -492,7 +505,14 @@ const Block: React.FC = () => {
         showSort={true}
       >
         {loading ? (
-          <Loader showBackdrop={true} loadingText="Loading..." />
+          <Box
+            display="flex"
+            justifyContent="center"
+            alignItems="center"
+            height="20vh" // Adjust height as needed
+          >
+            <Loader showBackdrop={false} loadingText="Loading..." />
+          </Box>
         ) : (
           <>
             <Box
@@ -560,29 +580,52 @@ const Block: React.FC = () => {
             </Box>
 
             <Box sx={{ marginTop: 2 }}>
-              <KaTableComponent
-                columns={columns}
-                data={blockData.map((block) => ({
-                  block: transformLabel(block.label),
-                  createdAt: block.createdAt,
-                  updatedAt: block.updatedAt,
-                  createdBy: block.createdBy,
-                  updatedBy: block.updatedBy,
-                  value: block.value,
-                }))}
-                limit={pageLimit}
-                offset={pageOffset}
-                paginationEnable={paginationCount >= Numbers.FIVE}
-                PagesSelector={PagesSelector}
-                PageSizeSelector={PageSizeSelectorFunction}
-                pageSizes={pageSizeArray}
-                onEdit={handleEdit}
-                onDelete={handleDelete}
-                extraActions={[]}
-                noDataMessage={
-                  blockData.length === 0 ? t("COMMON.BLOCKS_NOT_FOUND") : ""
-                }
-              />
+              {loading ? (
+                <Box
+                  display="flex"
+                  justifyContent="center"
+                  alignItems="center"
+                  height="20vh" // Adjust height as needed
+                >
+                  <Loader showBackdrop={false} loadingText="Loading..." />
+                </Box>
+              ) : blockData.length > 0 ? (
+                <KaTableComponent
+                  columns={columns}
+                  data={blockData.map((block) => ({
+                    block: transformLabel(block.label),
+                    createdAt: block.createdAt,
+                    updatedAt: block.updatedAt,
+                    createdBy: block.createdBy,
+                    updatedBy: block.updatedBy,
+                    value: block.value,
+                  }))}
+                  limit={pageLimit}
+                  offset={pageOffset}
+                  paginationEnable={paginationCount >= Numbers.FIVE}
+                  PagesSelector={PagesSelector}
+                  PageSizeSelector={PageSizeSelectorFunction}
+                  pageSizes={pageSizeArray}
+                  onEdit={handleEdit}
+                  pagination={pagination}
+                  onDelete={handleDelete}
+                  extraActions={[]}
+                  noDataMessage={
+                    blockData.length === 0 ? t("COMMON.BLOCKS_NOT_FOUND") : ""
+                  }
+                />
+              ) : (
+                <Box
+                  display="flex"
+                  justifyContent="center"
+                  alignItems="center"
+                  height="20vh" // Adjust height as needed
+                >
+                  <Typography marginTop="10px" textAlign="center">
+                    {t("COMMON.BLOCKS_NOT_FOUND")}
+                  </Typography>
+                </Box>
+              )}
             </Box>
           </>
         )}