Merge pull request 'pramod_Feature#51ProjectLisFilter' (#50) from pramod_Feature#51ProjectLisFilter into Issues_April_4W
Reviewed-on: #50
This commit is contained in:
commit
b30f3b8d98
@ -1,6 +1,6 @@
|
||||
import React, { useState } from "react";
|
||||
import moment from "moment";
|
||||
import { ProjectStatus } from "../../utils/projectStatus";
|
||||
import { getProjectStatusName } from "../../utils/projectStatus";
|
||||
const AboutProject = ({ data }) => {
|
||||
const [CurrentProject, setCurrentProject] = useState(data);
|
||||
|
||||
@ -34,7 +34,7 @@ const AboutProject = ({ data }) => {
|
||||
<li className="d-flex align-items-center mb-2">
|
||||
<i className="bx bx-trophy"></i>
|
||||
<span className="fw-medium mx-2">Status:</span>{" "}
|
||||
<span>{ProjectStatus(data.projectStatusId)}</span>
|
||||
<span>{getProjectStatusName(data.projectStatusId)}</span>
|
||||
</li>
|
||||
<li className="d-flex align-items-center mb-4">
|
||||
<i className="bx bx-user"></i>
|
||||
|
||||
@ -8,9 +8,8 @@ import ProjectRepository from "../../repositories/ProjectRepository";
|
||||
import { cacheData, getCachedData } from "../../slices/apiDataManager";
|
||||
import showToast from "../../services/toastService";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { MANAGE_PROJECT } from "../../utils/constants";
|
||||
|
||||
|
||||
import {MANAGE_PROJECT} from "../../utils/constants";
|
||||
import { getProjectStatusColor,getProjectStatusName } from "../../utils/projectStatus";
|
||||
|
||||
const ProjectCard = ({ projectData }) => {
|
||||
const [projectInfo, setProjectInfo] = useState(projectData);
|
||||
@ -21,7 +20,9 @@ const ProjectCard = ({ projectData }) => {
|
||||
|
||||
const handleShow = async () => {
|
||||
try {
|
||||
const response = await ProjectRepository.getProjectByprojectId(projectInfo.id);
|
||||
const response = await ProjectRepository.getProjectByprojectId(
|
||||
projectInfo.id
|
||||
);
|
||||
setProjectDetails(response.data);
|
||||
setShowModal(true);
|
||||
} catch (error) {
|
||||
@ -38,41 +39,11 @@ const ProjectCard = ({ projectData }) => {
|
||||
|
||||
const handleClose = () => setShowModal(false);
|
||||
|
||||
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 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";
|
||||
}
|
||||
};
|
||||
|
||||
const handleViewProject = () => {
|
||||
navigate(`/projects/${projectData.id}`);
|
||||
};
|
||||
|
||||
|
||||
const handleFormSubmit = (updatedProject) => {
|
||||
if (projectInfo?.id) {
|
||||
ProjectRepository.updateProject(projectInfo.id, updatedProject)
|
||||
@ -160,14 +131,20 @@ const ProjectCard = ({ projectData }) => {
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i className="bx bx-dots-vertical-rounded bx-sm text-muted" data-bs-toggle="tooltip" data-bs-offset="0,8" data-bs-placement="top" data-bs-custom-class="tooltip-dark" title="More Action"></i>
|
||||
<i
|
||||
className="bx bx-dots-vertical-rounded bx-sm text-muted"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-offset="0,8"
|
||||
data-bs-placement="top"
|
||||
data-bs-custom-class="tooltip-dark"
|
||||
title="More Action"
|
||||
></i>
|
||||
</button>
|
||||
<ul className="dropdown-menu dropdown-menu-end">
|
||||
<li>
|
||||
<a
|
||||
aria-label="click to View details"
|
||||
className="dropdown-item"
|
||||
|
||||
onClick={handleViewProject}
|
||||
>
|
||||
<i className="bx bx-detail me-2"></i>
|
||||
@ -181,10 +158,16 @@ const ProjectCard = ({ projectData }) => {
|
||||
<span className="align-left">Modify</span>
|
||||
</a>
|
||||
</li>
|
||||
<li onClick={()=>navigate(`/activities/records?project=${projectInfo.id}`)}>
|
||||
<li
|
||||
onClick={() =>
|
||||
navigate(
|
||||
`/activities/records?project=${projectInfo.id}`
|
||||
)
|
||||
}
|
||||
>
|
||||
<a className="dropdown-item">
|
||||
<i className="bx bx-task me-2"></i>
|
||||
<span className="align-left" >Activities</span>
|
||||
<span className="align-left">Activities</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@ -209,9 +192,7 @@ const ProjectCard = ({ projectData }) => {
|
||||
: "NA"}
|
||||
</p>
|
||||
<p className="mb-0">{projectInfo.projectAddress}</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body border-top">
|
||||
@ -226,29 +207,45 @@ const ProjectCard = ({ projectData }) => {
|
||||
{getProjectStatusName(projectInfo.projectStatusId)}
|
||||
</span>
|
||||
</p>{" "}
|
||||
{getDateDifferenceInDays(projectInfo.endDate, Date()) >= 0 &&
|
||||
( <span className="badge bg-label-success ms-auto">
|
||||
{getDateDifferenceInDays(projectInfo.endDate, Date()) >= 0 && (
|
||||
<span className="badge bg-label-success ms-auto">
|
||||
{projectInfo.endDate &&
|
||||
getDateDifferenceInDays(projectInfo.endDate, Date())}{" "}
|
||||
Days left
|
||||
</span>) }
|
||||
{getDateDifferenceInDays(projectInfo.endDate, Date()) < 0 &&
|
||||
( <span className="badge bg-label-danger ms-auto">
|
||||
</span>
|
||||
)}
|
||||
{getDateDifferenceInDays(projectInfo.endDate, Date()) < 0 && (
|
||||
<span className="badge bg-label-danger ms-auto">
|
||||
{projectInfo.endDate &&
|
||||
getDateDifferenceInDays(projectInfo.endDate, Date())}{" "}
|
||||
Days overdue
|
||||
</span>)}
|
||||
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="d-flex justify-content-between align-items-center mb-2">
|
||||
<small className="text-body">Task: {projectInfo.completedWork} / {projectInfo.plannedWork}</small>
|
||||
<small className="text-body">{Math.floor(getProgressInNumber(projectInfo.plannedWork, projectInfo.completedWork)) || 0} % Completed</small>
|
||||
<small className="text-body">
|
||||
Task: {projectInfo.completedWork} / {projectInfo.plannedWork}
|
||||
</small>
|
||||
<small className="text-body">
|
||||
{Math.floor(
|
||||
getProgressInNumber(
|
||||
projectInfo.plannedWork,
|
||||
projectInfo.completedWork
|
||||
)
|
||||
) || 0}{" "}
|
||||
% Completed
|
||||
</small>
|
||||
</div>
|
||||
<div className="progress mb-4 rounded" style={{ height: "8px" }}>
|
||||
<div
|
||||
className="progress-bar rounded"
|
||||
role="progressbar"
|
||||
style={{ width: getProgress(projectInfo.plannedWork, projectInfo.completedWork) }}
|
||||
style={{
|
||||
width: getProgress(
|
||||
projectInfo.plannedWork,
|
||||
projectInfo.completedWork
|
||||
),
|
||||
}}
|
||||
aria-valuenow={projectInfo.completedWork}
|
||||
aria-valuemin="0"
|
||||
aria-valuemax={projectInfo.plannedWork}
|
||||
@ -257,22 +254,17 @@ const ProjectCard = ({ projectData }) => {
|
||||
<div className="d-flex align-items-center justify-content-between">
|
||||
{/* <div className="d-flex align-items-center ">
|
||||
</div> */}
|
||||
<div >
|
||||
<a
|
||||
|
||||
className="text-muted d-flex " alt="Active team size"
|
||||
>
|
||||
<i className="bx bx-group bx-sm me-1_5"></i>{projectInfo?.teamSize} Members
|
||||
<div>
|
||||
<a className="text-muted d-flex " alt="Active team size">
|
||||
<i className="bx bx-group bx-sm me-1_5"></i>
|
||||
{projectInfo?.teamSize} Members
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<div >
|
||||
<a
|
||||
className="text-muted d-flex align-items-center"
|
||||
>
|
||||
<i className="bx bx-chat me-1 "></i> <span className="text-decoration-line-through">15</span>
|
||||
<div>
|
||||
<a className="text-muted d-flex align-items-center">
|
||||
<i className="bx bx-chat me-1 "></i>{" "}
|
||||
<span className="text-decoration-line-through">15</span>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,30 +1,37 @@
|
||||
import React from "react";
|
||||
|
||||
const ProgressBar = ( {completeValue, totalValue} ) =>
|
||||
{
|
||||
|
||||
|
||||
const getProgress = (complete, total) => {
|
||||
return (total * 100) / complete + "%";
|
||||
const ProgressBar = ({
|
||||
plannedWork = 100,
|
||||
completedWork = 0,
|
||||
height = "8px",
|
||||
className = "mb-4",
|
||||
rounded = true,
|
||||
}) => {
|
||||
const getProgress = (planned, completed) => {
|
||||
if (!planned || planned === 0) return "0%";
|
||||
return `${Math.min((completed / planned) * 100, 100).toFixed(2)}%`;
|
||||
};
|
||||
|
||||
const progressStyle = {
|
||||
width: getProgress(plannedWork, completedWork),
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="progress mb-4 rounded" style={{height: "8px"}}>
|
||||
<div className="progress p-0">
|
||||
<div
|
||||
className="progress-bar"
|
||||
className={`progress ${className} ${rounded ? "rounded" : ""}`}
|
||||
style={{ height }}
|
||||
>
|
||||
<div
|
||||
className={`progress-bar ${rounded ? "rounded" : ""}`}
|
||||
role="progressbar"
|
||||
style={{
|
||||
width: `${getProgress( totalValue,completeValue)}`,
|
||||
height: "10px",
|
||||
}}
|
||||
aria-valuenow={completeValue}
|
||||
style={progressStyle}
|
||||
aria-valuenow={completedWork}
|
||||
aria-valuemin="0"
|
||||
aria-valuemax={totalValue}
|
||||
aria-valuemax={plannedWork}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
export default ProgressBar;
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect,useRef } from "react";
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import moment from "moment";
|
||||
import { Link, NavLink, useNavigate } from "react-router-dom";
|
||||
import Avatar from "../../components/common/Avatar";
|
||||
@ -11,7 +11,12 @@ import { hasUserPermission } from "../../utils/authUtils";
|
||||
import { MANAGE_EMPLOYEES } from "../../utils/constants";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import SuspendEmp from "../../components/Employee/SuspendEmp";
|
||||
import {exportToCSV,exportToExcel,printTable,exportToPDF} from "../../utils/tableExportUtils";
|
||||
import {
|
||||
exportToCSV,
|
||||
exportToExcel,
|
||||
printTable,
|
||||
exportToPDF,
|
||||
} from "../../utils/tableExportUtils";
|
||||
|
||||
const EmployeeList = () => {
|
||||
const { profile: loginUser } = useProfile();
|
||||
@ -124,7 +129,6 @@ const EmployeeList = () => {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{isCreateModalOpen && (
|
||||
@ -179,7 +183,11 @@ const EmployeeList = () => {
|
||||
<option value="">All Employees</option>
|
||||
{Array.isArray(projects) &&
|
||||
projects
|
||||
.filter((item) => loginUser?.projects?.includes(String(item.id)))
|
||||
.filter((item) =>
|
||||
loginUser?.projects?.includes(
|
||||
String(item.id)
|
||||
)
|
||||
)
|
||||
.map((item) => (
|
||||
<option key={item.id} value={item.id}>
|
||||
{item.name}
|
||||
@ -188,7 +196,7 @@ const EmployeeList = () => {
|
||||
</>
|
||||
)}
|
||||
</select>
|
||||
</label>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -223,22 +231,39 @@ const EmployeeList = () => {
|
||||
</button>
|
||||
<ul className="dropdown-menu">
|
||||
<li>
|
||||
<a className="dropdown-item" href="#" onClick={() => handleExport("print")}>
|
||||
<a
|
||||
className="dropdown-item"
|
||||
href="#"
|
||||
onClick={() => handleExport("print")}
|
||||
>
|
||||
<i className="bx bx-printer me-1"></i> Print
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className="dropdown-item" href="#" onClick={() => handleExport("csv")}>
|
||||
<a
|
||||
className="dropdown-item"
|
||||
href="#"
|
||||
onClick={() => handleExport("csv")}
|
||||
>
|
||||
<i className="bx bx-file me-1"></i> CSV
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className="dropdown-item" href="#" onClick={() => handleExport("excel")}>
|
||||
<i className="bx bxs-file-export me-1"></i> Excel
|
||||
<a
|
||||
className="dropdown-item"
|
||||
href="#"
|
||||
onClick={() => handleExport("excel")}
|
||||
>
|
||||
<i className="bx bxs-file-export me-1"></i>{" "}
|
||||
Excel
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className="dropdown-item" href="#" onClick={() => handleExport("pdf")}>
|
||||
<a
|
||||
className="dropdown-item"
|
||||
href="#"
|
||||
onClick={() => handleExport("pdf")}
|
||||
>
|
||||
<i className="bx bxs-file-pdf me-1"></i> PDF
|
||||
</a>
|
||||
</li>
|
||||
@ -468,13 +493,13 @@ const EmployeeList = () => {
|
||||
to={`/employee/manage/${item.id}`}
|
||||
className="dropdown-item py-1"
|
||||
>
|
||||
<i class='bx bx-edit bx-sm'></i> Edit
|
||||
<i class="bx bx-edit bx-sm"></i> Edit
|
||||
</Link>
|
||||
<button
|
||||
className="dropdown-item py-1"
|
||||
onClick={handleShow}
|
||||
>
|
||||
<i class='bx bx-task-x bx-sm'></i> Suspend
|
||||
<i class="bx bx-task-x bx-sm"></i> Suspend
|
||||
</button>
|
||||
<button
|
||||
className="dropdown-item py-1"
|
||||
@ -483,7 +508,7 @@ const EmployeeList = () => {
|
||||
data-bs-target="#managerole-modal"
|
||||
onClick={() => handleConfigData(item.id)}
|
||||
>
|
||||
<i class='bx bx-cog bx-sm'></i> Manage Role
|
||||
<i class="bx bx-cog bx-sm"></i> Manage Role
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -6,86 +6,74 @@ import ProjectRepository from "../../repositories/ProjectRepository";
|
||||
import { useProjects } from "../../hooks/useProjects";
|
||||
import { useDispatch } from "react-redux";
|
||||
import showToast from "../../services/toastService";
|
||||
import { getCachedData, cacheData} from "../../slices/apiDataManager";
|
||||
import {useHasUserPermission} from "../../hooks/useHasUserPermission"
|
||||
import { getCachedData, cacheData } from "../../slices/apiDataManager";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { useProfile } from "../../hooks/useProfile";
|
||||
import {MANAGE_PROJECT} from "../../utils/constants";
|
||||
import { MANAGE_PROJECT } from "../../utils/constants";
|
||||
import ProjectListView from "./ProjectListView";
|
||||
|
||||
const ProjectList = () =>
|
||||
{
|
||||
|
||||
|
||||
const {profile: loginUser} = useProfile();
|
||||
const ProjectList = () => {
|
||||
const { profile: loginUser } = useProfile();
|
||||
const [listView, setListView] = useState(true);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const {projects, loading, error, refetch} = useProjects();
|
||||
const [refresh, setRefresh] = useState(false);
|
||||
const [ projectList, setProjectList ] = useState( [] );
|
||||
const HasManageProjectPermission = useHasUserPermission( MANAGE_PROJECT )
|
||||
const[HasManageProject,setHasManageProject] = useState(HasManageProjectPermission)
|
||||
const { projects, loading, error, refetch } = useProjects();
|
||||
const [projectList, setProjectList] = useState([]);
|
||||
const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
|
||||
const [HasManageProject, setHasManageProject] = useState(
|
||||
HasManageProjectPermission
|
||||
);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemsPerPage] = useState(6);
|
||||
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [selectedStatuses, setSelectedStatuses] = useState([1, 2, 3, 4]);
|
||||
|
||||
const handleShow = () => setShowModal(true);
|
||||
const handleClose = () => setShowModal( false );
|
||||
|
||||
|
||||
const handleClose = () => setShowModal(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!loading && Array.isArray(projects)) {
|
||||
// Step 1: Group projects by statusId
|
||||
const grouped = {};
|
||||
|
||||
projects.forEach((project) => {
|
||||
const statusId = project.projectStatusId;
|
||||
if (!grouped[statusId]) {
|
||||
grouped[statusId] = [];
|
||||
}
|
||||
if (!grouped[statusId]) grouped[statusId] = [];
|
||||
grouped[statusId].push(project);
|
||||
});
|
||||
|
||||
// Step 2: Sort each group by name
|
||||
const sortedGrouped = Object.keys(grouped)
|
||||
.sort() // sort group keys (status IDs)
|
||||
.sort()
|
||||
.flatMap((statusId) =>
|
||||
grouped[statusId].sort((a, b) =>
|
||||
a.name.toLowerCase().localeCompare(b.name.toLowerCase())
|
||||
)
|
||||
);
|
||||
|
||||
setProjectList(sortedGrouped); // final sorted flat list
|
||||
setProjectList(sortedGrouped);
|
||||
}
|
||||
|
||||
}, [ projects, loginUser?.projects, loading ] );
|
||||
}, [projects, loginUser?.projects, loading]);
|
||||
|
||||
useEffect(() => {
|
||||
if (loginUser) {
|
||||
setHasManageProject(HasManageProjectPermission);
|
||||
} else {
|
||||
setHasManageProject(false); }
|
||||
setHasManageProject(false);
|
||||
}
|
||||
}, [loginUser, HasManageProjectPermission]);
|
||||
|
||||
|
||||
|
||||
const handleSubmitForm = (newProject) => {
|
||||
ProjectRepository.manageProject(newProject)
|
||||
.then( ( response ) =>
|
||||
{
|
||||
|
||||
const cachedProjects_list = getCachedData( "projectslist" ) || [];
|
||||
|
||||
const updated_Projects_list = [ ...cachedProjects_list, response.data ];
|
||||
|
||||
cacheData("projectslist", updated_Projects_list);
|
||||
setProjectList((prevProjectList) => [...prevProjectList, response.data]);
|
||||
|
||||
.then((response) => {
|
||||
const cachedProjects = getCachedData("projectslist") || [];
|
||||
const updatedProjects = [...cachedProjects, response.data];
|
||||
cacheData("projectslist", updatedProjects);
|
||||
setProjectList((prev) => [...prev, response.data]);
|
||||
showToast("Project Created successfully.", "success");
|
||||
setShowModal(false)
|
||||
setShowModal(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
closeModal();
|
||||
showToast(error.message, "error");
|
||||
setShowModal(false);
|
||||
});
|
||||
};
|
||||
|
||||
@ -93,36 +81,58 @@ const ProjectList = () =>
|
||||
if (!projects || projects.length === 0) {
|
||||
refetch();
|
||||
}
|
||||
setRefresh((prev) => !prev);
|
||||
};
|
||||
|
||||
const handleStatusChange = (statusId) => {
|
||||
setCurrentPage(1);
|
||||
setSelectedStatuses((prev) =>
|
||||
prev.includes(statusId)
|
||||
? prev.filter((id) => id !== statusId)
|
||||
: [...prev, statusId]
|
||||
);
|
||||
};
|
||||
|
||||
const handleStatusFilterFromChild = (statusesFromChild) => {
|
||||
setSelectedStatuses(statusesFromChild);
|
||||
};
|
||||
|
||||
const filteredProjects = projectList.filter((project) => {
|
||||
const matchesStatus = selectedStatuses.includes(project.projectStatusId);
|
||||
const matchesSearch = project.name
|
||||
.toLowerCase()
|
||||
.includes(searchTerm.toLowerCase());
|
||||
return matchesStatus && matchesSearch;
|
||||
});
|
||||
|
||||
const indexOfLastItem = currentPage * itemsPerPage;
|
||||
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
|
||||
const currentItems = Array.isArray(projectList)
|
||||
? projectList.slice(indexOfFirstItem, indexOfLastItem)
|
||||
: [];
|
||||
|
||||
const paginate = (pageNumber) => setCurrentPage(pageNumber);
|
||||
const totalPages = Array.isArray(projectList)
|
||||
? Math.ceil(projectList.length / itemsPerPage)
|
||||
: 0;
|
||||
|
||||
const currentItems = filteredProjects.slice(
|
||||
indexOfFirstItem,
|
||||
indexOfLastItem
|
||||
);
|
||||
const totalPages = Math.ceil(filteredProjects.length / itemsPerPage);
|
||||
|
||||
useEffect(() => {
|
||||
const tooltipTriggerList = Array.from(
|
||||
document.querySelectorAll('[data-bs-toggle="tooltip"]')
|
||||
);
|
||||
tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={`modal fade ${showModal ? 'show' : ''}`}
|
||||
className={`modal fade ${showModal ? "show" : ""}`}
|
||||
tabIndex="-1"
|
||||
role="dialog"
|
||||
style={{ display: showModal ? 'block' : 'none' }}
|
||||
style={{ display: showModal ? "block" : "none" }}
|
||||
aria-hidden={!showModal}
|
||||
>
|
||||
<ManageProjectInfo
|
||||
project={null}
|
||||
handleSubmitForm={handleSubmitForm}
|
||||
onClose={handleClose}
|
||||
></ManageProjectInfo>
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="container-xxl flex-grow-1 container-p-y">
|
||||
@ -131,20 +141,62 @@ const ProjectList = () =>
|
||||
{ label: "Home", link: "/dashboard" },
|
||||
{ label: "Projects", link: null },
|
||||
]}
|
||||
></Breadcrumb>
|
||||
/>
|
||||
|
||||
<div className="row">
|
||||
<div
|
||||
className={`col-md-12 col-lg-12 col-xl-12 order-0 mb-4 ${
|
||||
!error && !projects ? "text-center" : "text-end"
|
||||
}`}
|
||||
>
|
||||
{" "}
|
||||
<div className="d-flex flex-wrap justify-content-between align-items-start mb-4">
|
||||
<div className="d-flex flex-wrap align-items-start">
|
||||
<div className="flex-grow-1 me-2 mb-2">
|
||||
<input
|
||||
type="search"
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Search projects..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => {
|
||||
setSearchTerm(e.target.value);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="d-flex gap-2 mb-2">
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-xs btn-primary ${!HasManageProject && 'd-none' }`}
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#create-project-model"
|
||||
className={`btn btn-sm ${
|
||||
listView ? "btn-primary" : "btn-outline-primary"
|
||||
}`}
|
||||
onClick={() => setListView(true)}
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-offset="0,8"
|
||||
data-bs-placement="top"
|
||||
data-bs-custom-class="tooltip"
|
||||
title="List View"
|
||||
>
|
||||
<i className="bx bx-list-ul"></i>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-sm ${
|
||||
!listView ? "btn-primary" : "btn-outline-primary"
|
||||
}`}
|
||||
onClick={() => setListView(false)}
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-offset="0,8"
|
||||
data-bs-placement="top"
|
||||
data-bs-custom-class="tooltip"
|
||||
title="Card View"
|
||||
>
|
||||
<i className="bx bx-grid-alt"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-sm btn-primary ${
|
||||
!HasManageProject && "d-none"
|
||||
}`}
|
||||
onClick={handleShow}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
@ -153,76 +205,123 @@ const ProjectList = () =>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{((error && !loading) || !projects) && (
|
||||
<p className="text-center text-body-secondary">
|
||||
There was an error loading the projects. Please try again.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{(!projects || projects.length === 0 || projectList.length == 0) &&
|
||||
!loading &&
|
||||
error && (
|
||||
<div className="text-center">
|
||||
<button
|
||||
className="btn btn-xs btn-label-secondary"
|
||||
onClick={handleReFresh}
|
||||
>
|
||||
Retry Fetching Projects
|
||||
</button>
|
||||
</div>
|
||||
{loading && <p className="text-center">Loading...</p>}
|
||||
{!loading && filteredProjects.length === 0 && !listView && (
|
||||
<p className="text-center text-muted">No projects found.</p>
|
||||
)}
|
||||
|
||||
<div className="row">
|
||||
{loading && <p className="text-center">Loading...</p>}
|
||||
|
||||
|
||||
{Array.isArray(currentItems) && loginUser?.projects && (
|
||||
currentItems
|
||||
.filter((item) => loginUser.projects.includes(String(item.id)))
|
||||
.map((item) => (
|
||||
<ProjectCard projectData={item} key={item.id} />
|
||||
))
|
||||
)}
|
||||
{listView ? (
|
||||
<div className="table-responsive text-nowrap py-2 ">
|
||||
<table className="table px-2">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="text-start" colSpan={5}>
|
||||
Project Name
|
||||
</th>
|
||||
<th className="mx-2">Project Manger</th>
|
||||
<th className="mx-2">START DATE</th>
|
||||
<th className="mx-2">DEADLINE</th>
|
||||
<th className="mx-2">Task</th>
|
||||
<th className="mx-2">Progress</th>
|
||||
<th className="mx-2">
|
||||
<div className="dropdown">
|
||||
<a
|
||||
className="dropdown-toggle hide-arrow cursor-pointer"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
Status <i className="bx bx-filter"></i>
|
||||
</a>
|
||||
<ul className="dropdown-menu p-2 text-capitalize">
|
||||
{[
|
||||
{ id: 1, label: "Active" },
|
||||
{ id: 2, label: "On Hold" },
|
||||
{ id: 3, label: "Inactive" },
|
||||
{ id: 4, label: "Completed" },
|
||||
].map(({ id, label }) => (
|
||||
<li key={id}>
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input "
|
||||
type="checkbox"
|
||||
checked={selectedStatuses.includes(id)}
|
||||
onChange={() => handleStatusChange(id)}
|
||||
/>
|
||||
<label className="form-check-label">
|
||||
{label}
|
||||
</label>
|
||||
</div>
|
||||
{/* Pagination */}
|
||||
{!loading && (
|
||||
<nav aria-label="Page ">
|
||||
<ul className="pagination pagination-sm justify-content-end py-1">
|
||||
<li
|
||||
className={`page-item ${
|
||||
currentPage === 1 ? "disabled" : ""
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
className={`mx-2 ${
|
||||
HasManageProject ? "d-sm-table-cell" : "d-none"
|
||||
}`}
|
||||
>
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="table-border-bottom-0 overflow-auto ">
|
||||
{currentItems.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan="12" className="text-center py-4">
|
||||
No projects found
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
currentItems.map((project) => (
|
||||
<ProjectListView key={project.id} projectData={project} />
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
currentItems.map((project) => (
|
||||
<ProjectCard key={project.id} projectData={project} />
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!loading && totalPages > 1 && (
|
||||
<nav>
|
||||
<ul className="pagination pagination-sm justify-content-end py-2">
|
||||
<li className={`page-item ${currentPage === 1 && "disabled"}`}>
|
||||
<button
|
||||
className="page-link btn-xs"
|
||||
onClick={() => paginate(currentPage - 1)}
|
||||
className="page-link"
|
||||
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
||||
>
|
||||
«
|
||||
</button>
|
||||
</li>
|
||||
{[...Array(totalPages)]?.map((_, index) => (
|
||||
{[...Array(totalPages)].map((_, i) => (
|
||||
<li
|
||||
key={index}
|
||||
className={`page-item ${
|
||||
currentPage === index + 1 ? "active" : ""
|
||||
}`}
|
||||
key={i}
|
||||
className={`page-item ${currentPage === i + 1 && "active"}`}
|
||||
>
|
||||
<button
|
||||
className="page-link "
|
||||
onClick={() => paginate(index + 1)}
|
||||
className="page-link"
|
||||
onClick={() => setCurrentPage(i + 1)}
|
||||
>
|
||||
{index + 1}
|
||||
{i + 1}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
<li
|
||||
className={`page-item ${
|
||||
currentPage === totalPages ? "disabled" : ""
|
||||
currentPage === totalPages && "disabled"
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link "
|
||||
onClick={() => paginate(currentPage + 1)}
|
||||
className="page-link"
|
||||
onClick={() =>
|
||||
setCurrentPage((p) => Math.min(totalPages, p + 1))
|
||||
}
|
||||
>
|
||||
»
|
||||
</button>
|
||||
|
||||
199
src/pages/project/ProjectListView.jsx
Normal file
199
src/pages/project/ProjectListView.jsx
Normal file
@ -0,0 +1,199 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import moment from "moment";
|
||||
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 = ({ projectData }) => {
|
||||
const [projectInfo, setProjectInfo] = useState(projectData);
|
||||
const [projectDetails, setProjectDetails] = useState(null);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const ManageProject = useHasUserPermission(MANAGE_PROJECT);
|
||||
|
||||
const handleShow = async () => {
|
||||
try {
|
||||
const response = await ProjectRepository.getProjectByprojectId(
|
||||
projectInfo.id
|
||||
);
|
||||
setProjectDetails(response.data);
|
||||
setShowModal(true);
|
||||
} catch (error) {
|
||||
showToast("Failed to load project details", "error");
|
||||
}
|
||||
};
|
||||
|
||||
const getProgress = (planned, completed) => {
|
||||
return (completed * 100) / planned + "%";
|
||||
};
|
||||
const getProgressInNumber = (planned, completed) => {
|
||||
return (completed * 100) / planned;
|
||||
};
|
||||
|
||||
const handleClose = () => setShowModal(false);
|
||||
|
||||
|
||||
const handleViewProject = () => {
|
||||
navigate(`/projects/${projectData.id}`);
|
||||
};
|
||||
|
||||
const handleFormSubmit = (updatedProject) => {
|
||||
if (projectInfo?.id) {
|
||||
ProjectRepository.updateProject(projectInfo.id, updatedProject)
|
||||
.then((response) => {
|
||||
const updatedProjectData = {
|
||||
...projectInfo,
|
||||
...response.data,
|
||||
building: projectDetails?.building,
|
||||
};
|
||||
|
||||
setProjectInfo( updatedProjectData );
|
||||
|
||||
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");
|
||||
});
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
{showModal && projectDetails && (
|
||||
<div
|
||||
className="modal fade show"
|
||||
tabIndex="-1"
|
||||
role="dialog"
|
||||
style={{ display: "block" }}
|
||||
aria-hidden="false"
|
||||
>
|
||||
<ManageProjectInfo
|
||||
project={projectDetails}
|
||||
handleSubmitForm={handleFormSubmit}
|
||||
onClose={handleClose}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<tr className="py-8">
|
||||
<td className="text-start" colSpan={5}>
|
||||
<strong
|
||||
className="text-primary cursor-pointer"
|
||||
onClick={() => navigate(`/projects/${projectInfo.id}`)}
|
||||
>
|
||||
{projectInfo.name}
|
||||
</strong>
|
||||
</td>
|
||||
<td className="text-start small">{projectInfo.contactPerson}</td>
|
||||
<td className="small text-start">
|
||||
<small>
|
||||
{projectInfo.startDate
|
||||
? moment(projectInfo.startDate).format("DD-MMM-YYYY")
|
||||
: "NA"}
|
||||
</small>
|
||||
</td>
|
||||
<td className="mx-2 text-start small">
|
||||
{projectInfo.endDate
|
||||
? moment(projectInfo.endDate).format("DD-MMM-YYYY")
|
||||
: "NA"}
|
||||
</td>
|
||||
<td className="mx-2 text-start small">{projectInfo.plannedWork}</td>
|
||||
<td className="py-6 mx-2 text-start small align-items-center">
|
||||
<ProgressBar
|
||||
plannedWork={projectInfo.plannedWork}
|
||||
completedWork={projectInfo.completedWork}
|
||||
className="mb-0"
|
||||
height="4px"
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td className="mx-6">
|
||||
<p className="mb-0">
|
||||
<span
|
||||
className={`badge ${getProjectStatusColor(
|
||||
projectInfo.projectStatusId
|
||||
)}`}
|
||||
>
|
||||
{getProjectStatusName(projectInfo.projectStatusId)}
|
||||
</span>
|
||||
</p>
|
||||
</td>
|
||||
|
||||
<td className={`mx-2 ${ManageProject ? "d-sm-table-cell":"d-none"}`}>
|
||||
<div className="dropdown z-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i
|
||||
className="bx bx-dots-vertical-rounded bx-sm text-muted"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-offset="0,8"
|
||||
data-bs-placement="top"
|
||||
data-bs-custom-class="tooltip-dark"
|
||||
title="More Action"
|
||||
></i>
|
||||
</button>
|
||||
<ul className="dropdown-menu dropdown-menu-end">
|
||||
<li>
|
||||
<a
|
||||
aria-label="click to View details"
|
||||
className="dropdown-item"
|
||||
onClick={() => navigate(`/projects/${projectInfo.id}`)}
|
||||
>
|
||||
<i className="bx bx-detail me-2"></i>
|
||||
<span className="align-left">View details</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li onClick={handleShow}>
|
||||
<a className="dropdown-item">
|
||||
<i className="bx bx-pencil me-2"></i>
|
||||
<span className="align-left">Modify</span>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
onClick={() =>
|
||||
navigate(`/activities/records?project=${projectInfo.id}`)
|
||||
}
|
||||
>
|
||||
<a className="dropdown-item">
|
||||
<i className="bx bx-task me-2"></i>
|
||||
<span className="align-left">Activities</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectListView;
|
||||
@ -1,25 +1,32 @@
|
||||
export const ProjectStatus =(statusId)=>{
|
||||
export const getProjectStatusName = (statusId) => {
|
||||
switch (statusId) {
|
||||
case 1:
|
||||
return "Active"
|
||||
break;
|
||||
return "Active";
|
||||
case 2:
|
||||
return "On Hold"
|
||||
break;
|
||||
return "On Hold";
|
||||
// case 3:
|
||||
// return "Suspended"
|
||||
// break;
|
||||
// return "Suspended";
|
||||
case 3:
|
||||
return "Inactive"
|
||||
break;
|
||||
return "Inactive";
|
||||
case 4:
|
||||
return "Completed"
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
return "Completed";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export 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";
|
||||
}
|
||||
};
|
||||
|
||||
// for different color for each user
|
||||
export function hashString(str) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user