set align for Service Project List card
This commit is contained in:
parent
03d60bf66d
commit
bb37fd7044
@ -3,7 +3,10 @@ import { MANAGE_PROJECT, PROJECT_STATUS } from "../../../utils/constants";
|
||||
import { useProjects } from "../../../hooks/useProjects";
|
||||
import { formatNumber, formatUTCToLocalTime } from "../../../utils/dateUtils";
|
||||
import ProgressBar from "../../common/ProgressBar";
|
||||
import { getProjectStatusColor, getProjectStatusName } from "../../../utils/projectStatus";
|
||||
import {
|
||||
getProjectStatusColor,
|
||||
getProjectStatusName,
|
||||
} from "../../../utils/projectStatus";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { setProjectId } from "../../../slices/localVariablesSlice";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
@ -12,185 +15,195 @@ import { useProjectContext } from "../../../pages/project/ProjectPage";
|
||||
import usePagination from "../../../hooks/usePagination";
|
||||
import Pagination from "../../common/Pagination";
|
||||
|
||||
const ServiceProjectList = ({ data, currentPage, totalPages, paginate, isCore = true }) => {
|
||||
const dispatch = useDispatch();
|
||||
const navigate = useNavigate();
|
||||
const { setMangeProject, setManageServiceProject } = useProjectContext();
|
||||
const handleClose = () => setShowModal(false);
|
||||
const ServiceProjectList = ({
|
||||
data,
|
||||
currentPage,
|
||||
totalPages,
|
||||
paginate,
|
||||
isCore = true,
|
||||
}) => {
|
||||
const dispatch = useDispatch();
|
||||
const navigate = useNavigate();
|
||||
const { setMangeProject, setManageServiceProject } = useProjectContext();
|
||||
const handleClose = () => setShowModal(false);
|
||||
|
||||
// check Permissions
|
||||
const canManageProject = useHasUserPermission(MANAGE_PROJECT);
|
||||
// check Permissions
|
||||
const canManageProject = useHasUserPermission(MANAGE_PROJECT);
|
||||
|
||||
const projectColumns = [
|
||||
{
|
||||
key: "projectName",
|
||||
label: "Project Name",
|
||||
className: "text-start py-3",
|
||||
getValue: (p) => (
|
||||
<div
|
||||
className="text-primary cursor-pointer fw-bold py-3"
|
||||
onClick={() => {
|
||||
dispatch(setProjectId(p.id));
|
||||
navigate(`/service-projects/${p.id}`);
|
||||
}}
|
||||
>
|
||||
{p.shortName ? `${p.name} (${p.shortName})` : p.name}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "client.contactPerson",
|
||||
label: "Contact Person",
|
||||
className: "text-start small",
|
||||
getValue: (p) => p.client?.contactPerson || "N/A",
|
||||
},
|
||||
{
|
||||
key: "assignedDate",
|
||||
label: "Assign Date",
|
||||
className: "text-center small",
|
||||
getValue: (p) => formatUTCToLocalTime(p.assignedDate),
|
||||
},
|
||||
{
|
||||
key: "status",
|
||||
label: "Status",
|
||||
className: "text-center small",
|
||||
getValue: (p) => (
|
||||
<span className={`badge ${getProjectStatusColor(p.status?.id)}`}>
|
||||
{p.status?.status}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const handleViewProject = (p) => {
|
||||
if (isCore) {
|
||||
const projectColumns = [
|
||||
{
|
||||
key: "projectName",
|
||||
label: "Project Name",
|
||||
className: "text-start py-3",
|
||||
getValue: (p) => (
|
||||
<div
|
||||
className="text-primary cursor-pointer fw-bold py-3"
|
||||
onClick={() => {
|
||||
dispatch(setProjectId(p.id));
|
||||
navigate(`/projects/details`);
|
||||
} else {
|
||||
navigate(`/service-projects/${p.id}`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleManage = (p) => {
|
||||
if (isCore) {
|
||||
setMangeProject({
|
||||
isOpen: true,
|
||||
Project: p.id,
|
||||
});
|
||||
} else {
|
||||
setManageServiceProject({
|
||||
isOpen: true,
|
||||
project: p.id,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div className="card page-min-h py-4 px-6 shadow-sm">
|
||||
<div className="table-responsive text-nowrap page-min-h">
|
||||
<table className="table table-hover align-middle m-0">
|
||||
<thead className="border-bottom ">
|
||||
<tr>
|
||||
{projectColumns.map((col) => (
|
||||
<th
|
||||
key={col.key}
|
||||
colSpan={col.colSpan}
|
||||
className={`${col.className} table_header_border`}
|
||||
>
|
||||
{col.label}
|
||||
</th>
|
||||
))}
|
||||
<th className="text-center py-3">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data?.length > 0 ? (
|
||||
data.map((project) => (
|
||||
<tr key={project.id}>
|
||||
{projectColumns.map((col) => (
|
||||
<td
|
||||
key={col.key}
|
||||
colSpan={col.colSpan}
|
||||
className={`${col.className} py-5`}
|
||||
style={{ paddingTop: "20px", paddingBottom: "20px" }}
|
||||
>
|
||||
{col.getValue ? col.getValue(project) : project[col.key] || "N/A"}
|
||||
</td>
|
||||
))}
|
||||
<td
|
||||
className={`mx-2 ${canManageProject ? "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={() => handleViewProject(project)}
|
||||
>
|
||||
<i className="bx bx-detail me-2"></i>
|
||||
<span className="align-left">View details</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="dropdown-item"
|
||||
onClick={() => handleManage(project)}
|
||||
>
|
||||
<i className="bx bx-pencil me-2"></i>
|
||||
<span className="align-left">Modify</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr
|
||||
className="no-hover"
|
||||
style={{
|
||||
pointerEvents: "none",
|
||||
backgroundColor: "transparent",
|
||||
}}
|
||||
>
|
||||
<td
|
||||
colSpan={projectColumns.length + 1}
|
||||
className="text-center align-middle"
|
||||
style={{ height: "300px", borderBottom: "none" }}
|
||||
>
|
||||
No Service projects available
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
paginate={paginate}
|
||||
/>
|
||||
}}
|
||||
>
|
||||
{p.shortName ? `${p.name} (${p.shortName})` : p.name}
|
||||
</div>
|
||||
);
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "client.contactPerson",
|
||||
label: "Contact Person",
|
||||
className: "text-start small",
|
||||
getValue: (p) => p.client?.contactPerson || "N/A",
|
||||
},
|
||||
{
|
||||
key: "assignedDate",
|
||||
label: "Assign Date",
|
||||
className: "text-center small",
|
||||
getValue: (p) => formatUTCToLocalTime(p.assignedDate),
|
||||
},
|
||||
{
|
||||
key: "status",
|
||||
label: "Status",
|
||||
className: "text-center small",
|
||||
getValue: (p) => (
|
||||
<span className={`badge ${getProjectStatusColor(p.status?.id)}`}>
|
||||
{p.status?.status}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const handleViewProject = (p) => {
|
||||
if (isCore) {
|
||||
dispatch(setProjectId(p.id));
|
||||
navigate(`/projects/details`);
|
||||
} else {
|
||||
navigate(`/service-projects/${p.id}`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleManage = (p) => {
|
||||
if (isCore) {
|
||||
setMangeProject({
|
||||
isOpen: true,
|
||||
Project: p.id,
|
||||
});
|
||||
} else {
|
||||
setManageServiceProject({
|
||||
isOpen: true,
|
||||
project: p.id,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="card page-min-h py-4 px-6 shadow-sm">
|
||||
<div className="table-responsive text-nowrap page-min-h">
|
||||
<table className="table table-hover align-middle m-0">
|
||||
<thead className="border-bottom ">
|
||||
<tr>
|
||||
{projectColumns.map((col) => (
|
||||
<th
|
||||
key={col.key}
|
||||
colSpan={col.colSpan}
|
||||
className={`${col.className} table_header_border`}
|
||||
>
|
||||
{col.label}
|
||||
</th>
|
||||
))}
|
||||
<th className="text-center py-3">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data?.length > 0 ? (
|
||||
data.map((project) => (
|
||||
<tr key={project.id}>
|
||||
{projectColumns.map((col) => (
|
||||
<td
|
||||
key={col.key}
|
||||
colSpan={col.colSpan}
|
||||
className={`${col.className} py-5`}
|
||||
style={{ paddingTop: "20px", paddingBottom: "20px" }}
|
||||
>
|
||||
{col.getValue
|
||||
? col.getValue(project)
|
||||
: project[col.key] || "N/A"}
|
||||
</td>
|
||||
))}
|
||||
<td
|
||||
className={`mx-2 ${
|
||||
canManageProject ? "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={() => handleViewProject(project)}
|
||||
>
|
||||
<i className="bx bx-detail me-2"></i>
|
||||
<span className="align-left">View details</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="dropdown-item"
|
||||
onClick={() => handleManage(project)}
|
||||
>
|
||||
<i className="bx bx-pencil me-2"></i>
|
||||
<span className="align-left">Modify</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr
|
||||
className="no-hover"
|
||||
style={{
|
||||
pointerEvents: "none",
|
||||
backgroundColor: "transparent",
|
||||
}}
|
||||
>
|
||||
<td
|
||||
colSpan={projectColumns.length + 1}
|
||||
className="text-center align-middle"
|
||||
style={{ height: "300px", borderBottom: "none" }}
|
||||
>
|
||||
No Service projects available
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
paginate={paginate}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ServiceProjectList;
|
||||
|
||||
@ -51,19 +51,20 @@ const ServiceProjectDisplay = ({ listView, selectedStatuses, searchTerm }) => {
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="">
|
||||
<div className="row">
|
||||
{listView ? (
|
||||
<ServiceProjectList data={filteredProjects}
|
||||
currentPage={currentPage}
|
||||
totalPages={data?.totalPages}
|
||||
paginate={paginate}
|
||||
isCore={false} />
|
||||
) : (
|
||||
) : filteredProjects?.length > 0 ? (
|
||||
filteredProjects?.map((project) => (
|
||||
<ServiceProjectCard key={project.id} project={project} isCore={false} />
|
||||
))
|
||||
|
||||
)}
|
||||
|
||||
):(<div className="d-flex justify-content-center align-items-center page-min-h "><p>No Service projects available</p></div>)}
|
||||
|
||||
<div className="col-12 d-flex justify-content-start mt-3">
|
||||
<Pagination
|
||||
@ -90,6 +91,7 @@ const ServiceProjectDisplay = ({ listView, selectedStatuses, searchTerm }) => {
|
||||
</GlobalModel>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -41,13 +41,12 @@ const ProjectPage = () => {
|
||||
const [listView, setListView] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [coreProjects, setCoreProjects] = useState(() => {
|
||||
const storedValue = sessionStorage.getItem('whichProjectDisplay');
|
||||
return storedValue === 'true';
|
||||
const storedValue = sessionStorage.getItem("whichProjectDisplay");
|
||||
return storedValue === "true";
|
||||
});
|
||||
const HasManageProject = useHasUserPermission(MANAGE_PROJECT);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
|
||||
|
||||
const [selectedStatuses, setSelectedStatuses] = useState(
|
||||
PROJECT_STATUS.map((s) => s.id)
|
||||
);
|
||||
@ -66,13 +65,11 @@ const ProjectPage = () => {
|
||||
manageServiceProject,
|
||||
};
|
||||
|
||||
|
||||
const handleToggleProject = (value) => {
|
||||
setCoreProjects(value);
|
||||
sessionStorage.setItem("whichProjectDisplay", String(value));
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<ProjectContext.Provider value={contextDispatcher}>
|
||||
<div className="container-fluid">
|
||||
@ -92,8 +89,9 @@ const ProjectPage = () => {
|
||||
{/* Service Project Button */}
|
||||
<button
|
||||
type="button"
|
||||
className={`btn px-2 py-1 rounded-0 text-tiny ${!coreProjects ? "btn-primary text-white" : ""
|
||||
}`}
|
||||
className={`btn px-2 py-1 rounded-0 text-tiny ${
|
||||
!coreProjects ? "btn-primary text-white" : ""
|
||||
}`}
|
||||
onClick={() => handleToggleProject(false)}
|
||||
>
|
||||
Service Project
|
||||
@ -101,20 +99,18 @@ const ProjectPage = () => {
|
||||
{/* Organization Project Button */}
|
||||
<button
|
||||
type="button"
|
||||
className={`btn px-2 py-1 rounded-0 text-tiny ${coreProjects ? "btn-primary text-white" : ""
|
||||
}`}
|
||||
className={`btn px-2 py-1 rounded-0 text-tiny ${
|
||||
coreProjects ? "btn-primary text-white" : ""
|
||||
}`}
|
||||
onClick={() => handleToggleProject(true)}
|
||||
>
|
||||
Infra Project
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* RIGHT SIDE — SEARCH + CARD/LIST + DROPDOWN */}
|
||||
<div className="d-flex flex-wrap align-items-center justify-content-end">
|
||||
|
||||
{/* Search */}
|
||||
<div className="me-2" style={{ minWidth: "200px" }}>
|
||||
<input
|
||||
@ -133,7 +129,9 @@ const ProjectPage = () => {
|
||||
<div className="d-flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-sm p-1 ${!listView ? "btn-primary" : "btn-outline-primary"}`}
|
||||
className={`btn btn-sm p-1 ${
|
||||
!listView ? "btn-primary" : "btn-outline-primary"
|
||||
}`}
|
||||
onClick={() => setListView(false)}
|
||||
title="Card View"
|
||||
>
|
||||
@ -142,7 +140,9 @@ const ProjectPage = () => {
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-sm p-1 ${listView ? "btn-primary" : "btn-outline-primary"}`}
|
||||
className={`btn btn-sm p-1 ${
|
||||
listView ? "btn-primary" : "btn-outline-primary"
|
||||
}`}
|
||||
onClick={() => setListView(true)}
|
||||
title="List View"
|
||||
>
|
||||
@ -182,10 +182,14 @@ const ProjectPage = () => {
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary btn-sm d-flex align-items-center my-2"
|
||||
onClick={() =>
|
||||
coreProjects
|
||||
? setMangeProject({ isOpen: true, Project: null }) // Organization Project → Infra
|
||||
: setManageServiceProject({ isOpen: true, Project: null }) // Service Project
|
||||
onClick={
|
||||
() =>
|
||||
coreProjects
|
||||
? setMangeProject({ isOpen: true, Project: null }) // Organization Project → Infra
|
||||
: setManageServiceProject({
|
||||
isOpen: true,
|
||||
Project: null,
|
||||
}) // Service Project
|
||||
}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
@ -197,12 +201,22 @@ const ProjectPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{coreProjects ? <ProjectsDisplay listView={listView}
|
||||
searchTerm={searchTerm}
|
||||
selectedStatuses={selectedStatuses}
|
||||
handleStatusChange={handleStatusChange} currentPage={currentPage}
|
||||
setCurrentPage={setCurrentPage} /> : <ServiceProjectDisplay listView={listView} searchTerm={searchTerm}
|
||||
selectedStatuses={selectedStatuses} />}
|
||||
{coreProjects ? (
|
||||
<ProjectsDisplay
|
||||
listView={listView}
|
||||
searchTerm={searchTerm}
|
||||
selectedStatuses={selectedStatuses}
|
||||
handleStatusChange={handleStatusChange}
|
||||
currentPage={currentPage}
|
||||
setCurrentPage={setCurrentPage}
|
||||
/>
|
||||
) : (
|
||||
<ServiceProjectDisplay
|
||||
listView={listView}
|
||||
searchTerm={searchTerm}
|
||||
selectedStatuses={selectedStatuses}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</ProjectContext.Provider>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user