Creating a ServiceCard view.
This commit is contained in:
parent
4dfc0fa7ca
commit
72052a4708
@ -0,0 +1,217 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import moment from "moment";
|
||||
import { formatNumber, formatUTCToLocalTime, getDateDifferenceInDays } from "../../../utils/dateUtils";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import ManageProjectInfo from "../../Project/ManageProjectInfo";
|
||||
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 GlobalModel from "../../common/GlobalModel";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { setProjectId } from "../../../slices/localVariablesSlice";
|
||||
import { useProjectContext } from "../../../pages/project/ProjectPage";
|
||||
import { useActiveInActiveServiceProject } from "../../../hooks/useServiceProject";
|
||||
import ConfirmModal from "../../common/ConfirmModal";
|
||||
import { getProjectStatusColor, getProjectStatusName } from "../../../utils/projectStatus";
|
||||
|
||||
const ServiceProjectCard = ({ project, isCore = true }) => {
|
||||
const [deleteProject, setDeleteProject] = useState({
|
||||
project: null,
|
||||
isOpen: false,
|
||||
});
|
||||
const dispatch = useDispatch();
|
||||
const navigate = useNavigate();
|
||||
const ManageProject = useHasUserPermission(MANAGE_PROJECT);
|
||||
const { setMangeProject, setManageServiceProject } = useProjectContext();
|
||||
|
||||
const getProgress = (planned, completed) => {
|
||||
return (completed * 100) / planned + "%";
|
||||
};
|
||||
const getProgressInNumber = (planned, completed) => {
|
||||
return (completed * 100) / planned;
|
||||
};
|
||||
|
||||
const handleClose = () => setShowModal(false);
|
||||
|
||||
const handleViewProject = () => {
|
||||
if (isCore) {
|
||||
dispatch(setProjectId(project.id));
|
||||
navigate(`/projects/details`);
|
||||
} else {
|
||||
navigate(`/service-projects/${project.id}`);
|
||||
}
|
||||
};
|
||||
const handleViewActivities = () => {
|
||||
dispatch(setProjectId(project.id));
|
||||
navigate(`/activities/records?project=${project.id}`);
|
||||
};
|
||||
const handleManage = () => {
|
||||
if (isCore) {
|
||||
setMangeProject({
|
||||
isOpen: true,
|
||||
Project: project.id,
|
||||
});
|
||||
} else {
|
||||
setManageServiceProject({
|
||||
isOpen: true,
|
||||
project: project.id,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const { mutate: DeleteProject, isPending } = useActiveInActiveServiceProject(
|
||||
() => setDeleteProject({ project: null, isOpen: false })
|
||||
);
|
||||
const handleActiveInactive = (projectId) => {
|
||||
DeleteProject(projectId, false);
|
||||
};
|
||||
|
||||
console.log("Kartik", project)
|
||||
return (
|
||||
<>
|
||||
<ConfirmModal
|
||||
type="delete"
|
||||
header="Delete Project"
|
||||
message="Are you sure you want delete?"
|
||||
onSubmit={handleActiveInactive}
|
||||
onClose={() => setDeleteProject({ project: null, isOpen: false })}
|
||||
loading={isPending}
|
||||
paramData={project.id}
|
||||
isOpen={deleteProject.isOpen}
|
||||
/>
|
||||
<div className="col-md-6 col-lg-4 col-xl-4 order-0 mb-4">
|
||||
<div className={`card cursor-pointer`}>
|
||||
<div className="card-header pb-4">
|
||||
<div className="d-flex align-items-start">
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="avatar me-4">
|
||||
<i
|
||||
className="rounded-circle bx bx-building-house"
|
||||
style={{ fontSize: "xx-large" }}
|
||||
></i>
|
||||
</div>
|
||||
<div className="me-2">
|
||||
<h5
|
||||
className="mb-0 stretched-link text-heading text-start"
|
||||
onClick={handleViewProject}
|
||||
>
|
||||
{project?.shortName ? project?.shortName : project?.name}
|
||||
</h5>
|
||||
<div className="client-info text-body">
|
||||
<span>{project?.shortName ? project?.name : ""}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`ms-auto ${!ManageProject && "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={handleViewProject}
|
||||
>
|
||||
<i className="bx bx-detail me-2"></i>
|
||||
<span className="align-left">View details</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a className="dropdown-item" onClick={handleManage}>
|
||||
<i className="bx bx-pencil me-2"></i>
|
||||
<span className="align-left">Modify</span>
|
||||
</a>
|
||||
</li>
|
||||
{isCore && (
|
||||
<li onClick={handleViewActivities}>
|
||||
<a className="dropdown-item">
|
||||
<i className="bx bx-task me-2"></i>
|
||||
<span className="align-left">Activities</span>
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
{!isCore && (
|
||||
<li
|
||||
onClick={() =>
|
||||
setDeleteProject({ project: project, isOpen: true })
|
||||
}
|
||||
>
|
||||
<a className="dropdown-item">
|
||||
<i className="bx bx-trash me-2"></i>
|
||||
<span className="align-left">Delete</span>
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card View */}
|
||||
|
||||
<div className="card-body pb-1">
|
||||
<div className="d-flex align-items-center flex-wrap">
|
||||
<div className="text-start mb-4 ms-2">
|
||||
<div className="ms-11 mb-3">
|
||||
<p className="mb-0">
|
||||
<span
|
||||
className={
|
||||
"badge rounded-pill " +
|
||||
getProjectStatusColor(project?.status?.id)
|
||||
}
|
||||
>
|
||||
{getProjectStatusName(project?.status?.id)}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="mb-1">
|
||||
<span className="text-heading fw-medium">Contact Person: </span>
|
||||
{project?.contactName || "NA"}
|
||||
</p>
|
||||
|
||||
<p className="mb-1">
|
||||
<span className="text-heading fw-medium">Assigned Date: </span>
|
||||
{formatUTCToLocalTime(project?.assignedDate)}
|
||||
</p>
|
||||
|
||||
<p className="mb-0">
|
||||
<span className="text-heading fw-medium">Address: </span>
|
||||
{project?.address || "NA"}
|
||||
</p>
|
||||
|
||||
|
||||
<p className="mb-0">{project?.projectAddress}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body border-top">
|
||||
<div className="d-flex align-items-center mb-4">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ServiceProjectCard;
|
||||
@ -10,6 +10,7 @@ import Pagination from "../../components/common/Pagination";
|
||||
import GlobalModel from "../../components/common/GlobalModel";
|
||||
import ManageServiceProject from "../../components/ServiceProject/ManageServiceProject";
|
||||
import { SpinnerLoader } from "../../components/common/Loader";
|
||||
import ServiceProjectCard from "../../components/ServiceProject/ServiceProjectTeam/ServiceProjectCard";
|
||||
|
||||
const ServiceProjectDisplay = ({ listView }) => {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
@ -48,7 +49,7 @@ const ServiceProjectDisplay = ({ listView }) => {
|
||||
<p>List</p>
|
||||
) : (
|
||||
data?.data?.map((project) => (
|
||||
<ProjectCard project={project} isCore={false} />
|
||||
<ServiceProjectCard project={project} isCore={false} />
|
||||
))
|
||||
)}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user