diff --git a/src/pages/project/ProjectListView.jsx b/src/pages/project/ProjectListView.jsx index 69b7d0f8..6de16f01 100644 --- a/src/pages/project/ProjectListView.jsx +++ b/src/pages/project/ProjectListView.jsx @@ -1,9 +1,38 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; import moment from "moment"; -import { useProjects } from "../../hooks/useProjects"; +import {useProjects} from "../../hooks/useProjects"; +import { getProjectStatusName,getProjectStatusColor } from "../../utils/projectStatus"; +import ProgressBar from "../../components/common/ProgressBar"; +import {useNavigate} from "react-router-dom"; +import ManageProject from "../../components/Project/ManageProject"; +import ProjectRepository from "../../repositories/ProjectRepository"; +import {MANAGE_PROJECT} from "../../utils/constants"; +import { useHasUserPermission } from "../../hooks/useHasUserPermission"; +import ManageProjectInfo from "../../components/Project/ManageProjectInfo"; +import showToast from "../../services/toastService"; +import { getCachedData,cacheData } from "../../slices/apiDataManager"; -const ProjectListView = () => { - const { projects } = useProjects(); +const ProjectListView = ( {projectsData, onStatusFilterChange} ) =>{ + const [ projectDetails, setProjectDetails ] = useState( null ); + const[projectInfo,setProjectInfo] = useState(null) + const [showModal, setShowModal] = useState(false); + const projects = Array.isArray(projectsData) ? projectsData : []; + + const [ selectedStatuses, setSelectedStatuses ] = useState( [ 1, 2, 3, 4 ] ); + const navigate = useNavigate() + + const handleStatusChange = (statusId) => { + const updated = selectedStatuses.includes(statusId) + ? selectedStatuses.filter((id) => id !== statusId) + : [...selectedStatuses, statusId]; + + setSelectedStatuses(updated); + onStatusFilterChange(updated); + }; + + useEffect(() => { + onStatusFilterChange(selectedStatuses); + }, []); const getProgress = (planned, completed) => { return (completed * 100) / planned + "%"; @@ -11,39 +40,77 @@ const ProjectListView = () => { const getProgressInNumber = (planned, completed) => { return (completed * 100) / planned; }; + const filteredProjects = projects.filter((project) => + selectedStatuses.includes(project.projectStatusId) + ); - const getProjectStatusName = (statusId) => { - switch (statusId) { - case 1: - return "Active"; - case 2: - return "On Hold"; - // case 3: - // return "Suspended"; - case 3: - return "Inactive"; - case 4: - return "Completed"; + const handleShow = async ( project) => + { + setProjectInfo(project) + try { + const response = await ProjectRepository.getProjectByprojectId( + project.id + ); + setProjectDetails(response.data); + setShowModal(true); + } catch (error) { + showToast("Failed to load project details", "error"); + } + }; + const handleClose = () => setShowModal(false); + const handleFormSubmit = (updatedProject,projectInfo) => { + if (projectInfo?.id) { + ProjectRepository.updateProject(projectInfo.id, updatedProject) + .then((response) => { + const updatedProjectData = { + ...projectInfo, + ...response.data, + building: projectDetails?.building, + }; + + setProjectInfo(updatedProject); + + if (getCachedData(`projectinfo-${projectInfo.id}`)) { + cacheData(`projectinfo-${projectInfo.id}`, updatedProjectData); + } + + const projects_list = getCachedData("projectslist"); + if (projects_list) { + const updatedProjectsList = projects_list.map((project) => + project.id === projectInfo.id + ? { ...project, ...response.data, tenant: project.tenant } + : project + ); + cacheData("projectslist", updatedProjectsList); + } + showToast("Project updated successfully.", "success"); + + setShowModal(false); + }) + .catch((error) => { + showToast(error.message, "error"); + }); } }; - const getProjectStatusColor = (statusId) => { - switch (statusId) { - case 1: - return "bg-label-success"; - case 2: - return "bg-label-warning"; - case 3: - return "bg-label-info"; - case 4: - return "bg-label-secondary"; - case 5: - return "bg-label-dark"; - } - }; - - return ( -
+ return (<> + + {showModal && projectDetails && ( +
+ +
+ )} +
@@ -56,140 +123,144 @@ const ProjectListView = () => { - - {projects.map((project) => ( - - - - - - - - - - - + {filteredProjects.length === 0 ? ( + + - ))} + ) : ( + filteredProjects.map((project) => ( + + + + + + + + + + + + + )) + )}
Task Progress -
+
-
    -
  • -
    - - -
    -
    • -
  • -
    - - -
    -
    • -
  • -
    - - -
    -
    • -
  • -
    - - -
    -
    • +
      + {[ + { id: 1, label: "Active" }, + { id: 2, label: "On Hold" }, + { id: 3, label: "Inactive" }, + { id: 4, label: "Completed" }, + ].map(({ id, label }) => ( +
    • +
      + handleStatusChange( id )} + + /> + +
      +
      • + ))}
Action
- {project.name} - {project.contactPerson} - - {" "} - {project.startDate - ? moment(project.startDate).format("DD-MMM-YYYY") - : "NA"} - - - {project.endDate - ? moment(project.endDate).format("DD-MMM-YYYY") - : "NA"} - {project.plannedWork} -
-
-
- 		-

- - {getProjectStatusName(project.projectStatusId)} - -

{" "} - 		- {" "} - +
+ No projects found
+ navigate(`/projects/${project.id}`)}>{project.name} + {project.contactPerson} + + {project.startDate + ? moment(project.startDate).format("DD-MMM-YYYY") + : "NA"} + + + {project.endDate + ? moment(project.endDate).format("DD-MMM-YYYY") + : "NA"} + {project.plannedWork} + + +

+ + {getProjectStatusName(project.projectStatusId)} + +

+ 		+
+ + +
+
+ + ); };