Change Page size for master and employees
This commit is contained in:
parent
a14e5c88b4
commit
028f717ae2
@ -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([]);
|
||||
|
||||
@ -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;
|
||||
@ -53,107 +59,132 @@ const MasterTable = ( {data, columns, loading, handleModalData} ) =>
|
||||
|
||||
return (
|
||||
<div className="table-responsive">
|
||||
{loading ? (
|
||||
<p>Loading...</p>
|
||||
) : (
|
||||
<table
|
||||
className="datatables-users table border-top dataTable no-footer dtr-column"
|
||||
id="DataTables_Table_0"
|
||||
aria-describedby="DataTables_Table_0_info"
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></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 className="text-start mx-2" key={col.key}>
|
||||
{col.key === "description" ? (
|
||||
item[col.key] !== undefined && item[col.key] !== null ? (
|
||||
item[col.key].length > 80 ? (
|
||||
<>
|
||||
{item[col.key].slice(0, 80)}...
|
||||
</>
|
||||
) : (
|
||||
item[col.key]
|
||||
)
|
||||
) : (
|
||||
" --- "
|
||||
)
|
||||
) : (
|
||||
item[col.key] !== undefined && item[col.key] !== null ? item[col.key] : " --- "
|
||||
)}
|
||||
</td>
|
||||
))}
|
||||
<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)}
|
||||
>
|
||||
<i className="bx bxs-edit me-2 text-primary"></i>
|
||||
</button>
|
||||
|
||||
<button
|
||||
aria-label="Delete"
|
||||
type="button"
|
||||
className="btn p-0 dropdown-toggle hide-arrow"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#master-modal"
|
||||
onClick={() => handleModalData("delete", item)}
|
||||
>
|
||||
|
||||
<i className="bx bx-trash me-1 text-danger"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
{loading ? (
|
||||
<p>Loading...</p>
|
||||
) : (
|
||||
<table
|
||||
className="datatables-users table border-top dataTable no-footer dtr-column"
|
||||
id="DataTables_Table_0"
|
||||
aria-describedby="DataTables_Table_0_info"
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<td colSpan={updatedColumns.length + 4}>No results found.</td>
|
||||
<th></th>
|
||||
<th> {selectedMaster === "Activity" ? "Activity" : "Name"}</th>
|
||||
<th> {selectedMaster === "Activity" ? "Unit" : "Description"}</th>
|
||||
<th className={` ${!hasMasterPermission && "d-none"}`}>
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</thead>
|
||||
<tbody>
|
||||
{currentItems.length > 0 ? (
|
||||
currentItems.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<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].length > 80 ? (
|
||||
<>{item[col.key].slice(0, 80)}...</>
|
||||
) : (
|
||||
item[col.key]
|
||||
)
|
||||
) : (
|
||||
" --- "
|
||||
)
|
||||
) : item[col.key] !== undefined &&
|
||||
item[col.key] !== null ? (
|
||||
item[col.key]
|
||||
) : (
|
||||
" --- "
|
||||
)}
|
||||
</td>
|
||||
))}
|
||||
<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)
|
||||
}
|
||||
>
|
||||
<i className="bx bxs-edit me-2 text-primary"></i>
|
||||
</button>
|
||||
|
||||
{/* Pagination */}
|
||||
{!loading && (
|
||||
<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>
|
||||
</li>
|
||||
{[...Array(totalPages)].map((_, index) => (
|
||||
<li key={index} className={`page-item ${currentPage === index + 1 ? "active" : ""}`}>
|
||||
<button className="page-link" onClick={() => paginate(index + 1)}>
|
||||
{index + 1}
|
||||
<button
|
||||
aria-label="Delete"
|
||||
type="button"
|
||||
className="btn p-0 dropdown-toggle hide-arrow"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#master-modal"
|
||||
onClick={() => handleModalData("delete", item)}
|
||||
>
|
||||
<i className="bx bx-trash me-1 text-danger"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={updatedColumns.length + 4}>No results found.</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{!loading && (
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
<li className={`page-item ${currentPage === totalPages ? "disabled" : ""}`}>
|
||||
<button className="page-link" onClick={() => paginate(currentPage + 1)}>
|
||||
»
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
{[...Array(totalPages)].map((_, index) => (
|
||||
<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)}
|
||||
>
|
||||
»
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user