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 [employeeList, setEmployeeList] = useState([]);
|
||||||
const [modelConfig, setModelConfig] = useState();
|
const [modelConfig, setModelConfig] = useState();
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
const [itemsPerPage] = useState(10);
|
const [itemsPerPage] = useState(15);
|
||||||
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
||||||
const [searchText, setSearchText] = useState("");
|
const [searchText, setSearchText] = useState("");
|
||||||
const [filteredData, setFilteredData] = useState([]);
|
const [filteredData, setFilteredData] = useState([]);
|
||||||
|
|||||||
@ -1,25 +1,31 @@
|
|||||||
import React, { useEffect,useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
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 safeData = Array.isArray(data) ? data : [];
|
||||||
|
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
const [itemsPerPage] = useState(10);
|
const [itemsPerPage] = useState(20);
|
||||||
|
|
||||||
const sortKeys = {
|
const sortKeys = {
|
||||||
"Application Role": "role",
|
"Application Role": "role",
|
||||||
Activity: "activityName",
|
Activity: "activityName",
|
||||||
"Job Role": "name",
|
"Job Role": "name",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
const sortKey = sortKeys[selectedMaster];
|
const sortKey = sortKeys[selectedMaster];
|
||||||
const sortedData = [...safeData].sort((a, b) => {
|
const sortedData = [...safeData].sort((a, b) => {
|
||||||
@ -53,107 +59,132 @@ const MasterTable = ( {data, columns, loading, handleModalData} ) =>
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="table-responsive">
|
<div className="table-responsive">
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<p>Loading...</p>
|
<p>Loading...</p>
|
||||||
) : (
|
) : (
|
||||||
<table
|
<table
|
||||||
className="datatables-users table border-top dataTable no-footer dtr-column"
|
className="datatables-users table border-top dataTable no-footer dtr-column"
|
||||||
id="DataTables_Table_0"
|
id="DataTables_Table_0"
|
||||||
aria-describedby="DataTables_Table_0_info"
|
aria-describedby="DataTables_Table_0_info"
|
||||||
style={{ width: "100%" }}
|
style={{ width: "100%" }}
|
||||||
>
|
>
|
||||||
<thead>
|
<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>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<tr>
|
<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>
|
</tr>
|
||||||
)}
|
</thead>
|
||||||
</tbody>
|
<tbody>
|
||||||
</table>
|
{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 */}
|
<button
|
||||||
{!loading && (
|
aria-label="Delete"
|
||||||
<nav aria-label="Page ">
|
type="button"
|
||||||
<ul className="pagination pagination-sm justify-content-end py-1">
|
className="btn p-0 dropdown-toggle hide-arrow"
|
||||||
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
|
data-bs-toggle="modal"
|
||||||
<button className="page-link btn-xs" onClick={() => paginate(currentPage - 1)}>
|
data-bs-target="#master-modal"
|
||||||
«
|
onClick={() => handleModalData("delete", item)}
|
||||||
</button>
|
>
|
||||||
</li>
|
<i className="bx bx-trash me-1 text-danger"></i>
|
||||||
{[...Array(totalPages)].map((_, index) => (
|
</button>
|
||||||
<li key={index} className={`page-item ${currentPage === index + 1 ? "active" : ""}`}>
|
</td>
|
||||||
<button className="page-link" onClick={() => paginate(index + 1)}>
|
</tr>
|
||||||
{index + 1}
|
))
|
||||||
|
) : (
|
||||||
|
<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>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
))}
|
{[...Array(totalPages)].map((_, index) => (
|
||||||
<li className={`page-item ${currentPage === totalPages ? "disabled" : ""}`}>
|
<li
|
||||||
<button className="page-link" onClick={() => paginate(currentPage + 1)}>
|
key={index}
|
||||||
»
|
className={`page-item ${
|
||||||
</button>
|
currentPage === index + 1 ? "active" : ""
|
||||||
</li>
|
}`}
|
||||||
</ul>
|
>
|
||||||
</nav>
|
<button
|
||||||
)}
|
className="page-link"
|
||||||
</div>
|
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