146 lines
4.4 KiB
JavaScript
146 lines
4.4 KiB
JavaScript
import React, { useState } from "react";
|
|
import { getNextBadgeColor } from "../../utils/appUtils";
|
|
import { useServiceProjectJobs } from "../../hooks/useServiceProject";
|
|
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
|
import EmployeeAvatarGroup from "../common/EmployeeAvatarGroup";
|
|
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
|
import { SpinnerLoader } from "../common/Loader";
|
|
import { useParams } from "react-router-dom";
|
|
import ProjectPage from "../../pages/project/ProjectPage";
|
|
import { useServiceProjectJobContext } from "./Jobs";
|
|
|
|
|
|
const JobList = ({ filterByProject }) => {
|
|
const {setSelectedJob} = useServiceProjectJobContext()
|
|
const { id } = useParams();
|
|
const { data, isLoading, isError, error } = useServiceProjectJobs(
|
|
ITEMS_PER_PAGE,
|
|
1,
|
|
true,
|
|
filterByProject ?? id
|
|
);
|
|
|
|
const jobGrid = [
|
|
{
|
|
key: "title",
|
|
label: "Title",
|
|
getValue: (e) => (
|
|
<span
|
|
className="fw-semibold text-truncate d-inline-block"
|
|
style={{
|
|
maxWidth: "100%",
|
|
width: "210px",
|
|
}}
|
|
>
|
|
{e?.title}
|
|
</span>
|
|
),
|
|
isAlwaysVisible: true,
|
|
className: "text-start",
|
|
},
|
|
{
|
|
key: "project",
|
|
label: "Project",
|
|
getValue: (e) => <div className="text-start ">{e?.project?.name}</div>,
|
|
isAlwaysVisible: true,
|
|
className: "text-start d-none d-sm-table-cell",
|
|
},
|
|
|
|
{
|
|
key: "employee",
|
|
label: "Team",
|
|
getValue: (e) => <EmployeeAvatarGroup employees={e.assignees} />,
|
|
isAlwaysVisible: true,
|
|
className: "text-start d-none d-sm-table-cell",
|
|
},
|
|
|
|
{
|
|
key: "startDate",
|
|
label: "Start Date",
|
|
getValue: (e) => formatUTCToLocalTime(e.startDate),
|
|
isAlwaysVisible: true,
|
|
className: "text-center d-none d-sm-table-cell ",
|
|
},
|
|
{
|
|
key: "dueDate",
|
|
label: "Due To",
|
|
getValue: (e) => formatUTCToLocalTime(e.startDate),
|
|
isAlwaysVisible: true,
|
|
className: "text-center d-none d-sm-table-cell",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="dataTables_wrapper dt-bootstrap5 no-footer ">
|
|
<table
|
|
className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap table-responsive"
|
|
aria-describedby="DataTables_Table_0_info"
|
|
>
|
|
<thead>
|
|
<tr>
|
|
{jobGrid.map((col) => (
|
|
<th
|
|
key={col.key}
|
|
className={`${col.className} text-center`}
|
|
scope="col"
|
|
>
|
|
<div className={col.className}>{col.label}</div>
|
|
</th>
|
|
))}
|
|
<th className="sorting_disabled text-center" aria-label="Actions">
|
|
Actions
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
{Array.isArray(data?.data) && data.data.length > 0 ? (
|
|
data.data.map((row, i) => (
|
|
<tr key={i}>
|
|
{jobGrid.map((col) => (
|
|
<td key={col.key} className={col.className}>
|
|
{col.getValue(row)}
|
|
</td>
|
|
))}
|
|
<td>
|
|
<div className="dropdown">
|
|
<button
|
|
className="btn btn-icon dropdown-toggle hide-arrow"
|
|
data-bs-toggle="dropdown"
|
|
>
|
|
<i className="bx bx-dots-vertical-rounded bx-md"></i>
|
|
</button>
|
|
<div className="dropdown-menu dropdown-menu-end">
|
|
{/* View always visible */}
|
|
<button className="dropdown-item py-1" onClick={()=>setSelectedJob({showCanvas:true,job:row?.id})}>
|
|
<i className="bx bx-detail bx-sm"></i> View
|
|
</button>
|
|
|
|
<>
|
|
<button className="dropdown-item py-1">
|
|
<i className="bx bx-edit bx-sm"></i> Edit
|
|
</button>
|
|
</>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))
|
|
) : (
|
|
<tr style={{ height: "200px" }}>
|
|
<td
|
|
colSpan={jobGrid.length + 1}
|
|
className="text-center border-0 align-middle"
|
|
>
|
|
{isLoading ? <SpinnerLoader /> : "Not Found Jobs."}
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default JobList;
|