Change Page size for master and employees

This commit is contained in:
Vikas Nale 2025-05-04 13:00:21 +05:30
parent a14e5c88b4
commit 028f717ae2
2 changed files with 138 additions and 107 deletions

View File

@ -31,7 +31,7 @@ const EmployeeList = () => {
const [employeeList, setEmployeeList] = useState([]);
const [modelConfig, setModelConfig] = useState();
const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage] = useState(10);
const [itemsPerPage] = useState(15);
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const [searchText, setSearchText] = useState("");
const [filteredData, setFilteredData] = useState([]);

View File

@ -1,18 +1,25 @@
import React, { useEffect,useState } from "react";
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import {MANAGE_MASTER} from "../../utils/constants";
import { MANAGE_MASTER } from "../../utils/constants";
const MasterTable = ( {data, columns, loading, handleModalData} ) =>
{
const hasMasterPermission = useHasUserPermission(MANAGE_MASTER)
const selectedMaster = useSelector((store)=>store.localVariables.selectedMaster)
const hiddenColumns = [ "id", "featurePermission", "tenant", "tenantId", "checkLists" ];
const MasterTable = ({ data, columns, loading, handleModalData }) => {
const hasMasterPermission = useHasUserPermission(MANAGE_MASTER);
const selectedMaster = useSelector(
(store) => store.localVariables.selectedMaster
);
const hiddenColumns = [
"id",
"featurePermission",
"tenant",
"tenantId",
"checkLists",
];
const safeData = Array.isArray(data) ? data : [];
const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage] = useState(10);
const [itemsPerPage] = useState(20);
const sortKeys = {
"Application Role": "role",
@ -20,7 +27,6 @@ const MasterTable = ( {data, columns, loading, handleModalData} ) =>
"Job Role": "name",
};
const sortKey = sortKeys[selectedMaster];
const sortedData = [...safeData].sort((a, b) => {
if (!sortKey) return 0;
@ -65,43 +71,51 @@ const MasterTable = ( {data, columns, loading, handleModalData} ) =>
<thead>
<tr>
<th></th>
<th> {selectedMaster === "Activity" ? "Activity":"Name" }</th>
<th> {selectedMaster === "Activity" ? "Unit":"Description" }</th>
<th className={` ${!hasMasterPermission && 'd-none'}`}>Actions</th>
<th> {selectedMaster === "Activity" ? "Activity" : "Name"}</th>
<th> {selectedMaster === "Activity" ? "Unit" : "Description"}</th>
<th className={` ${!hasMasterPermission && "d-none"}`}>
Actions
</th>
</tr>
</thead>
<tbody>
{currentItems.length > 0 ? (
currentItems.map((item, index) => (
<tr key={index}>
<td></td>
{updatedColumns.map( ( col ) => (
<td style={{ width: "20px" }}>
<i class="bx bx-right-arrow-alt"></i>
</td>
{updatedColumns.map((col) => (
<td className="text-start mx-2" key={col.key}>
{col.key === "description" ? (
item[col.key] !== undefined && item[col.key] !== null ? (
item[col.key] !== undefined &&
item[col.key] !== null ? (
item[col.key].length > 80 ? (
<>
{item[col.key].slice(0, 80)}...
</>
<>{item[col.key].slice(0, 80)}...</>
) : (
item[col.key]
)
) : (
" --- "
)
) : item[col.key] !== undefined &&
item[col.key] !== null ? (
item[col.key]
) : (
item[col.key] !== undefined && item[col.key] !== null ? item[col.key] : " --- "
" --- "
)}
</td>
))}
<td className={`${!hasMasterPermission && 'd-none'}`} >
<td className={`${!hasMasterPermission && "d-none"}`}>
<button
aria-label="Modify"
type="button"
data-bs-toggle="modal"
data-bs-target="#master-modal"
className="btn p-0 dropdown-toggle hide-arrow"
onClick={() => handleModalData(`Edit-${selectedMaster}`, item)}
onClick={() =>
handleModalData(`Edit-${selectedMaster}`, item)
}
>
<i className="bx bxs-edit me-2 text-primary"></i>
</button>
@ -114,7 +128,6 @@ const MasterTable = ( {data, columns, loading, handleModalData} ) =>
data-bs-target="#master-modal"
onClick={() => handleModalData("delete", item)}
>
<i className="bx bx-trash me-1 text-danger"></i>
</button>
</td>
@ -134,19 +147,37 @@ const MasterTable = ( {data, columns, loading, handleModalData} ) =>
<nav aria-label="Page ">
<ul className="pagination pagination-sm justify-content-end py-1">
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
<button className="page-link btn-xs" onClick={() => paginate(currentPage - 1)}>
<button
className="page-link btn-xs"
onClick={() => paginate(currentPage - 1)}
>
&laquo;
</button>
</li>
{[...Array(totalPages)].map((_, index) => (
<li key={index} className={`page-item ${currentPage === index + 1 ? "active" : ""}`}>
<button className="page-link" onClick={() => paginate(index + 1)}>
<li
key={index}
className={`page-item ${
currentPage === index + 1 ? "active" : ""
}`}
>
<button
className="page-link"
onClick={() => paginate(index + 1)}
>
{index + 1}
</button>
</li>
))}
<li className={`page-item ${currentPage === totalPages ? "disabled" : ""}`}>
<button className="page-link" onClick={() => paginate(currentPage + 1)}>
<li
className={`page-item ${
currentPage === totalPages ? "disabled" : ""
}`}
>
<button
className="page-link"
onClick={() => paginate(currentPage + 1)}
>
&raquo;
</button>
</li>