admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

imported projectLisComponent

Browse Source
This commit is contained in:
Pramod Mahajan 2025-04-22 10:45:03 +05:30
parent 1cdfb47c39
commit b4d2fd86f7
1 changed files with 130 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

232
src/pages/project/ProjectList.jsx
View File

@ -6,37 +6,35 @@ import ProjectRepository from "../../repositories/ProjectRepository";
import { useProjects } from "../../hooks/useProjects"; import { useProjects } from "../../hooks/useProjects";
import { useDispatch } from "react-redux"; import { useDispatch } from "react-redux";
import showToast from "../../services/toastService"; import showToast from "../../services/toastService";
import { getCachedData, cacheData} from "../../slices/apiDataManager"; import { getCachedData, cacheData } from "../../slices/apiDataManager";
import {useHasUserPermission} from "../../hooks/useHasUserPermission" import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { useProfile } from "../../hooks/useProfile"; import { useProfile } from "../../hooks/useProfile";
import {MANAGE_PROJECT} from "../../utils/constants"; import { MANAGE_PROJECT } from "../../utils/constants";
import ProjectListView from "./ProjectListView";
const ProjectList = () => const ProjectList = () => {
{ const { profile: loginUser } = useProfile();
const [listView, setListView] = useState(true);
const {profile: loginUser} = useProfile();
const [showModal, setShowModal] = useState(false); const [showModal, setShowModal] = useState(false);
const {projects, loading, error, refetch} = useProjects(); const { projects, loading, error, refetch } = useProjects();
const [refresh, setRefresh] = useState(false); const [refresh, setRefresh] = useState(false);
const [ projectList, setProjectList ] = useState( [] ); const [projectList, setProjectList] = useState([]);
const HasManageProjectPermission = useHasUserPermission( MANAGE_PROJECT ) const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
const[HasManageProject,setHasManageProject] = useState(HasManageProjectPermission) const [HasManageProject, setHasManageProject] = useState(
HasManageProjectPermission
);
const dispatch = useDispatch(); const dispatch = useDispatch();
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage] = useState(6); const [itemsPerPage] = useState(6);
const handleShow = () => setShowModal(true);
const handleShow = () => setShowModal(true); const handleClose = () => setShowModal(false);
const handleClose = () => setShowModal( false );
useEffect(() => { useEffect(() => {
if (!loading && Array.isArray(projects)) { if (!loading && Array.isArray(projects)) {
// Step 1: Group projects by statusId // Step 1: Group projects by statusId
const grouped = {}; const grouped = {};
projects.forEach((project) => { projects.forEach((project) => {
const statusId = project.projectStatusId; const statusId = project.projectStatusId;
if (!grouped[statusId]) { if (!grouped[statusId]) {
@ -44,7 +42,7 @@ const ProjectList = () =>
} }
grouped[statusId].push(project); grouped[statusId].push(project);
}); });
// Step 2: Sort each group by name // Step 2: Sort each group by name
const sortedGrouped = Object.keys(grouped) const sortedGrouped = Object.keys(grouped)
.sort() // sort group keys (status IDs) .sort() // sort group keys (status IDs)
@ -53,35 +51,34 @@ const ProjectList = () =>
a.name.toLowerCase().localeCompare(b.name.toLowerCase()) a.name.toLowerCase().localeCompare(b.name.toLowerCase())
) )
); );
setProjectList(sortedGrouped); // final sorted flat list setProjectList(sortedGrouped); // final sorted flat list
} }
}, [projects, loginUser?.projects, loading]);
}, [ projects, loginUser?.projects, loading ] );
useEffect(() => { useEffect(() => {
if (loginUser) { if (loginUser) {
setHasManageProject(HasManageProjectPermission); setHasManageProject(HasManageProjectPermission);
} else { } else {
setHasManageProject(false); } setHasManageProject(false);
}
}, [loginUser, HasManageProjectPermission]); }, [loginUser, HasManageProjectPermission]);
const handleSubmitForm = (newProject) => { const handleSubmitForm = (newProject) => {
ProjectRepository.manageProject(newProject) ProjectRepository.manageProject(newProject)
.then( ( response ) => .then((response) => {
{ const cachedProjects_list = getCachedData("projectslist") || [];
const cachedProjects_list = getCachedData( "projectslist" ) || []; const updated_Projects_list = [...cachedProjects_list, response.data];
const updated_Projects_list = [ ...cachedProjects_list, response.data ];
cacheData("projectslist", updated_Projects_list); cacheData("projectslist", updated_Projects_list);
setProjectList((prevProjectList) => [...prevProjectList, response.data]); setProjectList((prevProjectList) => [
...prevProjectList,
response.data,
]);
showToast("Project Created successfully.", "success"); showToast("Project Created successfully.", "success");
setShowModal(false) setShowModal(false);
}) })
.catch((error) => { .catch((error) => {
closeModal(); closeModal();
@ -98,33 +95,31 @@ const ProjectList = () =>
const indexOfLastItem = currentPage * itemsPerPage; const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage; const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = Array.isArray(projectList) const currentItems = Array.isArray(projectList)
? projectList.slice(indexOfFirstItem, indexOfLastItem) ? projectList.slice(indexOfFirstItem, indexOfLastItem)
: []; : [];
const paginate = (pageNumber) => setCurrentPage(pageNumber); const paginate = (pageNumber) => setCurrentPage(pageNumber);
const totalPages = Array.isArray(projectList) const totalPages = Array.isArray(projectList)
? Math.ceil(projectList.length / itemsPerPage) ? Math.ceil(projectList.length / itemsPerPage)
: 0; : 0;
return ( return (
<> <>
<div <div
className={`modal fade ${showModal ? 'show' : ''}`} className={`modal fade ${showModal ? "show" : ""}`}
tabIndex="-1" tabIndex="-1"
role="dialog" role="dialog"
style={{ display: showModal ? 'block' : 'none' }} style={{ display: showModal ? "block" : "none" }}
aria-hidden={!showModal} aria-hidden={!showModal}
> >
<ManageProjectInfo <ManageProjectInfo
project={null} project={null}
handleSubmitForm={handleSubmitForm} handleSubmitForm={handleSubmitForm}
onClose={handleClose} onClose={handleClose}
></ManageProjectInfo> ></ManageProjectInfo>
</div> </div>
<div className="container-xxl flex-grow-1 container-p-y"> <div className="container-xxl flex-grow-1 container-p-y">
<Breadcrumb <Breadcrumb
data={[ data={[
@ -133,16 +128,51 @@ const ProjectList = () =>
]} ]}
></Breadcrumb> ></Breadcrumb>
<div className="row"> <div className="d-flex justify-content-between mb-4">
<div {/* <div
className={`col-md-12 col-lg-12 col-xl-12 order-0 mb-4 ${ className={`col-md-12 col-lg-12 col-xl-12 order-0 mb-4 ${
!error && !projects ? "text-center" : "text-end" !error && !projects ? "text-center" : "text-end"
}`} }`}
> >
{" "}
</div> */}
<div>
<div
id="DataTables_Table_0_filter"
className="dataTables_filter d-flex justify-content-start"
>
<label>
<input
type="search"
className="form-control form-control-sm"
placeholder="Search"
aria-controls="DataTables_Table_0"
></input>
</label>
<button
type="button"
className={`btn btn-icon btn-sm ms-2 p-0 ${ listView ? "btn-secondary" : "btn-label-secondary" }`}
onClick={()=>setListView(!listView)}
>
<span class="bx bx-list-ul"></span>
</button>
<button
type="button"
className={`btn btn-icon btn-sm ms-2 p-0 ${ listView ? "btn-label-secondary" : "btn-secondary" }`}
onClick={()=>setListView(!listView)}
>
<span class="bx bx-grid-alt"></span>
</button>
</div>
</div>
<div>
<button <button
type="button" type="button"
className={`btn btn-xs btn-primary ${!HasManageProject && 'd-none' }`} className={`btn btn-xs btn-primary ${
!HasManageProject && "d-none"
}`}
data-bs-toggle="modal" data-bs-toggle="modal"
data-bs-target="#create-project-model" data-bs-target="#create-project-model"
onClick={handleShow} onClick={handleShow}
@ -174,59 +204,57 @@ const ProjectList = () =>
<div className="row"> <div className="row">
{loading && <p className="text-center">Loading...</p>} {loading && <p className="text-center">Loading...</p>}
{listView ? <ProjectListView/> :
{currentItems && currentItems &&
currentItems.map((item) => ( currentItems.map((item) => (
<ProjectCard projectData={item} key={item.id}></ProjectCard> <ProjectCard projectData={item} key={item.id}></ProjectCard>
))} ))}
</div> </div>
{/* Pagination */} {/* Pagination */}
{!loading && ( {!loading && (
<nav aria-label="Page "> <nav aria-label="Page ">
<ul className="pagination pagination-sm justify-content-end py-1"> <ul className="pagination pagination-sm justify-content-end py-1">
<li <li
className={`page-item ${ className={`page-item ${currentPage === 1 ? "disabled" : ""}`}
currentPage === 1 ? "disabled" : "" >
}`} <button
> className="page-link btn-xs"
<button onClick={() => paginate(currentPage - 1)}
className="page-link btn-xs" >
onClick={() => paginate(currentPage - 1)} &laquo;
> </button>
&laquo; </li>
</button> {[...Array(totalPages)]?.map((_, index) => (
</li> <li
{[...Array(totalPages)]?.map((_, index) => ( key={index}
<li className={`page-item ${
key={index} currentPage === index + 1 ? "active" : ""
className={`page-item ${ }`}
currentPage === index + 1 ? "active" : "" >
}`} <button
> className="page-link "
<button onClick={() => paginate(index + 1)}
className="page-link " >
onClick={() => paginate(index + 1)} {index + 1}
> </button>
{index + 1} </li>
</button> ))}
</li> <li
))} className={`page-item ${
<li currentPage === totalPages ? "disabled" : ""
className={`page-item ${ }`}
currentPage === totalPages ? "disabled" : "" >
}`} <button
> className="page-link "
<button onClick={() => paginate(currentPage + 1)}
className="page-link " >
onClick={() => paginate(currentPage + 1)} &raquo;
> </button>
&raquo; </li>
</button> </ul>
</li> </nav>
</ul> )}
</nav>
)}
</div> </div>
</> </>
); );