marco.pms.web/src/components/Project/AboutProject.jsx

152 lines
6.3 KiB
JavaScript

import React, { useEffect, useState } from "react";
import moment from "moment";
import { getProjectStatusName } from "../../utils/projectStatus";
import {useProjectDetails, useUpdateProject} from "../../hooks/useProjects";
import { useSelector } from "react-redux"; // Import useSelector
import {useHasUserPermission} from "../../hooks/useHasUserPermission";
import {MANAGE_PROJECT} from "../../utils/constants";
import GlobalModel from "../common/GlobalModel";
import ManageProjectInfo from "./ManageProjectInfo";
import {useQueryClient} from "@tanstack/react-query";
const AboutProject = () => {
const [IsOpenModal, setIsOpenModal] = useState(false);
const {mutate: UpdateProjectDetails, isPending} = useUpdateProject({
onSuccessCallback: () => {
setIsOpenModal(false);
}
});
const ClientQuery = useQueryClient();
// *** MODIFIED LINE: Get projectId from Redux store using useSelector ***
const projectId = useSelector((store) => store.localVariables.projectId);
const manageProject = useHasUserPermission(MANAGE_PROJECT);
const {projects_Details, isLoading, error,refetch} = useProjectDetails( projectId ); // Pass projectId from useSelector
const handleFormSubmit = ( updatedProject ) => {
if ( projects_Details?.id ) {
UpdateProjectDetails({ projectId: projects_Details?.id,updatedData: updatedProject });
// The refetch here might be redundant or could be handled by react-query's invalidateQueries
// if UpdateProjectDetails properly invalidates the 'projectDetails' query key.
// If refetch is still needed, consider adding a delay or using onSuccess of UpdateProjectDetails.
// For now, keeping it as is based on your original code.
refetch();
}
};
return (
<>
{IsOpenModal && (
<GlobalModel isOpen={IsOpenModal} closeModal={()=>setIsOpenModal(false)}>
<ManageProjectInfo
project={projects_Details}
handleSubmitForm={handleFormSubmit}
onClose={() => setIsOpenModal( false )}
isPending={isPending}
/>
</GlobalModel>
)}
{projects_Details && (
<>
<div className="card mb-6">
<div className="card-header text-start">
<h6 className="card-action-title mb-0">
{" "}
<i className="fa fa-building rounded-circle text-primary"></i>
<span className="ms-2">Project Profile</span>
</h6>
</div>
<div className="card-body">
<ul className="list-unstyled my-3 ps-2">
<li className="d-flex mb-3">
<div className="d-flex align-items-center" style={{ width: '120px' }}> {/* Adjust width as needed for alignment */}
<i className="bx bx-cog"></i>
<span className="fw-medium mx-2">Name:</span>
</div>
<span>{projects_Details.name}</span>
</li>
<li className="d-flex mb-3">
<div className="d-flex align-items-center" style={{ width: '120px' }}>
<i className="bx bx-fingerprint"></i>
<span className="fw-medium mx-2">Nick Name:</span>
</div>
<span>{projects_Details.shortName}</span>
</li>
<li className="d-flex mb-3">
<div className="d-flex align-items-center" style={{ width: '120px' }}>
<i className="bx bx-check"></i>
<span className="fw-medium mx-2">Start Date:</span>
</div>
<span>
{projects_Details.startDate
? moment(projects_Details.startDate).format("DD-MMM-YYYY")
: "N/A"}
</span>
</li>
<li className="d-flex mb-3">
<div className="d-flex align-items-center" style={{ width: '120px' }}>
<i className="bx bx-stop-circle"></i>
<span className="fw-medium mx-2">End Date:</span>
</div>
<span>
{projects_Details.endDate
? moment(projects_Details.endDate).format("DD-MMM-YYYY")
: "N/A"}
</span>
</li>
<li className="d-flex mb-3">
<div className="d-flex align-items-center" style={{ width: '120px' }}>
<i className="bx bx-trophy"></i>
<span className="fw-medium mx-2">Status:</span>
</div>
<span>{projects_Details?.projectStatus?.status}</span>
</li>
<li className="d-flex mb-3">
<div className="d-flex align-items-center" style={{ width: '120px' }}>
<i className="bx bx-user"></i>
<span className="fw-medium mx-2">Contact:</span>
</div>
<span>{projects_Details.contactPerson}</span>
</li>
<li className="d-flex mb-3">
{/* Label section with icon */}
<div className="d-flex align-items-start" style={{ minWidth: "120px" }}>
<i className="bx bx-flag mt-1"></i>
<span className="fw-medium mx-2 text-nowrap">Address:</span>
</div>
{/* Content section that wraps nicely */}
<div className="flex-grow-1 text-start text-wrap">
{projects_Details.projectAddress}
</div>
</li>
<li className="d-flex justify-content-center mt-4"> {/* Added mt-4 for some top margin */}
{manageProject && (
<button
type="button"
className={`btn btn-sm btn-primary ${!manageProject && "d-none"
}`}
data-bs-toggle="modal"
data-bs-target="#edit-project-modal"
onClick={() => setIsOpenModal(true)}
>
Modify Details
</button>
)}
</li>
</ul>
</div>
</div>
</>
)}
{isLoading && <span>loading...</span>}
</>
);
};
export default AboutProject;