Merge pull request #16 from AkshataKatwal16/admin

Issue feat: PS-1286,PS-1299 sort user list by names, add pagination
tekdi · Jul 10, 2024 · 914465b · 914465b
2 parents 86ac71b + 767b76a
commit 914465b
Show file tree

Hide file tree

Showing 7 changed files with 430 additions and 155 deletions.
diff --git a/src/components/KaTableComponent.tsx b/src/components/KaTableComponent.tsx
@@ -1,36 +1,56 @@
 // components/KaTableComponent.tsx
 
-import React from 'react';
-import { ITableProps, Table } from 'ka-table';
-import {SortingMode , PagingPosition} from 'ka-table/enums';
-import { Paper } from '@mui/material';
-import 'ka-table/style.css';
+import React from "react";
+import { ITableProps, Table } from "ka-table";
+import { SortingMode, PagingPosition } from "ka-table/enums";
+import { Paper } from "@mui/material";
+import "ka-table/style.css";
+import { IPagingProps } from "ka-table/props";
+import { updatePageIndex, updatePageSize } from "ka-table/actionCreators";
 
 interface KaTableComponentProps {
-  columns: ITableProps['columns'];
-  data: ITableProps['data'];
+  columns: ITableProps["columns"];
+  data: ITableProps["data"];
+  offset?: any;
+  limit?: any;
+  PagesSelector?: any;
+  PageSizeSelector?:any
 }
 
-const KaTableComponent: React.FC<KaTableComponentProps> = ({ columns, data }) => {
+const KaTableComponent: React.FC<KaTableComponentProps> = ({
+  columns,
+  data,
+  offset,
+  limit,
+  PagesSelector,
+  PageSizeSelector
+}) => {
   const tableProps: ITableProps = {
     columns,
     data,
-    rowKeyField: 'id',
+    rowKeyField: "id",
     sortingMode: SortingMode.Single,
-
   };
 
   return (
     <Paper>
-      <Table {...tableProps}
-       paging= {{
-        enabled: true,
-        pageIndex: 0,
-        pageSize: 10,
-        pageSizes: [5, 10, 15],
-        position: PagingPosition.Bottom
-    }}
-
+      <Table
+        {...tableProps}
+        paging={{
+          enabled: true,
+          pageIndex: 0,
+          pageSize: limit,
+          pageSizes: [5, 10,15],
+          position: PagingPosition.Bottom,
+        }}
+        childComponents={{
+          pagingSizes: {
+            content: (props) => <PageSizeSelector {...props} />,
+          },
+          pagingPages: {
+            content: (props) => <PagesSelector {...props} />,
+          },
+        }}
       />
     </Paper>
   );

diff --git a/src/components/PageSelector.tsx b/src/components/PageSelector.tsx
@@ -0,0 +1,48 @@
+import FormControl from "@mui/material/FormControl";
+import InputLabel from "@mui/material/InputLabel";
+import MenuItem from "@mui/material/MenuItem";
+import Select from "@mui/material/Select";
+import React from "react";
+
+const PageSizeSelector = ({ handleChange, pageSize}: any) => {
+    const [open, setOpen] = React.useState(false);
+    //const [age, setAge] = React.useState<string | number>("");
+
+    const handleClose = () => {
+      setOpen(false);
+    };
+
+    const handleOpen = () => {
+      setOpen(true);
+    };
+
+    return (
+        <>
+          <>
+      <FormControl sx={{ m: 1, minWidth: 120 }}>
+        <InputLabel id="demo-controlled-open-select-label">
+          Page Size
+        </InputLabel>
+        <Select
+          labelId="demo-controlled-open-select-label"
+          id="demo-controlled-open-select"
+          open={open}
+          onClose={handleClose}
+          onOpen={handleOpen}
+          value={pageSize}
+          label="Page Size"
+          onChange={handleChange}
+        >
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
+          <MenuItem value={5}>5</MenuItem>
+          <MenuItem value={10}>10</MenuItem>
+          <MenuItem value={15}>15</MenuItem>
+        </Select>
+      </FormControl>
+    </>
+        </>
+    );
+  };
+  export default PageSizeSelector;
diff --git a/src/components/UserComponent.tsx b/src/components/UserComponent.tsx
@@ -13,16 +13,24 @@ import SearchBar from "@/components/layouts/header/SearchBar";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { useTranslation } from "next-i18next";
 
-
-
 const AllStates = ["maharashtra", "Gujarat"];
 const AllDistrict = ["Kolhapur", "Pune"];
 const AllBlocks = ["Kothrud", "Warje"];
-const Sort = ["Names", "A-Z" , "Z-A" ,"Centers"];
+const Sort = ["A-Z", "Z-A"];
 
-
-const UserComponent = ({ children ,userType ,searchPlaceHolder, selectedState, selectedDistrict ,selectedBlock, selectedSort ,  handleStateChange, handleDistrictChange, handleBlockChange, handleSortChange}: any) => {
-
+const UserComponent = ({
+  children,
+  userType,
+  searchPlaceHolder,
+  selectedState,
+  selectedDistrict,
+  selectedBlock,
+  selectedSort,
+  handleStateChange,
+  handleDistrictChange,
+  handleBlockChange,
+  handleSortChange,
+}: any) => {
   const { t } = useTranslation();
 
   const isMobile = useMediaQuery("(max-width:600px)");
@@ -33,119 +41,120 @@ const UserComponent = ({ children ,userType ,searchPlaceHolder, selectedState, s
         flexDirection: "column",
         gap: isMobile ? "0.1px" : "16px",
       }}
-    >
-      <Box
-      sx={{
-        display: "flex",
-        flexDirection: isMobile ? "column" : "row",
-        width: isMobile ? "90%" : "100%", 
-        backgroundColor: "#EEEEEE",
-        p: isMobile ? "0.5rem" : "1rem", 
-      }}
     >
       <Box
         sx={{
           display: "flex",
           flexDirection: isMobile ? "column" : "row",
-          gap: isMobile ? "0.5rem" : "2rem", 
-          width: "100%",
+          width: isMobile ? "90%" : "100%",
+          backgroundColor: "#EEEEEE",
+          p: isMobile ? "0.5rem" : "1rem",
         }}
       >
-        <FormControl
+        <Box
           sx={{
-            width: isMobile ? "100%" : "auto", 
-            mb: isMobile ? "0.5rem" : "0", 
+            display: "flex",
+            flexDirection: isMobile ? "column" : "row",
+            gap: isMobile ? "0.5rem" : "2rem",
+            width: "100%",
           }}
         >
-          <Select
-            value={selectedState}
-            onChange={handleStateChange}
-            displayEmpty
+          <FormControl
             sx={{
-              borderRadius: "0.5rem",
-              width: "117px",
-              height: "32px",
-              fontSize: "14px",
+              width: isMobile ? "100%" : "auto",
+              mb: isMobile ? "0.5rem" : "0",
             }}
           >
-            <MenuItem value="All states">
-              {t("FACILITATORS.ALL_STATES")}
-            </MenuItem>
-            {AllStates.map((state, index) => (
-              <MenuItem value={state} key={index}>
-                {state}
+            <Select
+              value={selectedState}
+              onChange={handleStateChange}
+              displayEmpty
+              sx={{
+                borderRadius: "0.5rem",
+                width: "117px",
+                height: "32px",
+                fontSize: "14px",
+              }}
+            >
+              <MenuItem value="All states">
+                {t("FACILITATORS.ALL_STATES")}
               </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
-        <FormControl
-          sx={{
-            width: isMobile ? "100%" : "auto",
-            mb: isMobile ? "0.5rem" : "0", 
-          }}
-        >
-          <Select
-            value={selectedDistrict}
-            onChange={handleDistrictChange}
-            displayEmpty
+              {AllStates.map((state, index) => (
+                <MenuItem value={state} key={index}>
+                  {state}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+          <FormControl
             sx={{
-              borderRadius: "0.5rem",
-              width: "117px",
-              height: "32px",
-              fontSize: "14px",
+              width: isMobile ? "100%" : "auto",
+              mb: isMobile ? "0.5rem" : "0",
             }}
           >
-            <MenuItem value="All Districts">
-              {t("FACILITATORS.ALL_DISTRICTS")}
-            </MenuItem>
-            {AllDistrict.map((district, index) => (
-              <MenuItem value={district} key={index}>
-                {district}
+            <Select
+              value={selectedDistrict}
+              onChange={handleDistrictChange}
+              displayEmpty
+              sx={{
+                borderRadius: "0.5rem",
+                width: "117px",
+                height: "32px",
+                fontSize: "14px",
+              }}
+            >
+              <MenuItem value="All Districts">
+                {t("FACILITATORS.ALL_DISTRICTS")}
               </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
-        <FormControl
-          sx={{
-            width: isMobile ? "100%" : "auto", 
-          }}
-        >
-          <Select
-            value={selectedBlock}
-            onChange={handleBlockChange}
-            displayEmpty
+              {AllDistrict.map((district, index) => (
+                <MenuItem value={district} key={index}>
+                  {district}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+          <FormControl
             sx={{
-              borderRadius: "0.5rem",
-              width: "117px",
-              height: "32px",
-              fontSize: "14px",
+              width: isMobile ? "100%" : "auto",
             }}
           >
-            <MenuItem value="All Blocks">All Blocks</MenuItem>
-            {AllBlocks.map((block, index) => (
-              <MenuItem value={block} key={index}>
-                {block}
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
+            <Select
+              value={selectedBlock}
+              onChange={handleBlockChange}
+              displayEmpty
+              sx={{
+                borderRadius: "0.5rem",
+                width: "117px",
+                height: "32px",
+                fontSize: "14px",
+              }}
+            >
+              <MenuItem value="All Blocks">All Blocks</MenuItem>
+              {AllBlocks.map((block, index) => (
+                <MenuItem value={block} key={index}>
+                  {block}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </Box>
       </Box>
-    </Box>
-      <Typography>
-         {userType}
-      </Typography>
+      <Typography>{userType}</Typography>
       <Box
-       sx={{
-        display: "flex",
-        flexDirection: "row",
-        gap:  "35%",
-      }}
+        sx={{
+          display: "flex",
+          flexDirection: "row",
+          gap: "35%",
+        }}
       >
         <Box>
-        <SearchBar className="searchBox" placeholder={searchPlaceHolder} backgroundColor="#EEEEEE" />
-
+          <SearchBar
+            className="searchBox"
+            placeholder={searchPlaceHolder}
+            backgroundColor="#EEEEEE"
+          />
         </Box>
-      <FormControl>
+        <FormControl>
           <Select
             value={selectedSort}
             onChange={handleSortChange}
@@ -167,7 +176,7 @@ const UserComponent = ({ children ,userType ,searchPlaceHolder, selectedState, s
           </Select>
         </FormControl>
       </Box>
-     
+
       <Box
         sx={{
           display: "flex",
@@ -178,7 +187,7 @@ const UserComponent = ({ children ,userType ,searchPlaceHolder, selectedState, s
           width: "100px",
           borderRadius: "20px",
           border: "1px solid var(--M3-ref-neutral-neutral10, #1E1B16)",
-          marginTop:isMobile? "10px" : null
+          marginTop: isMobile ? "10px" : null,
         }}
       >
         <Typography>{t("COMMON.ADD_NEW")}</Typography>
@@ -189,6 +198,4 @@ const UserComponent = ({ children ,userType ,searchPlaceHolder, selectedState, s
   );
 };
 
-
-
 export default UserComponent;