Project_Branch_Management : New Feature Service Project - Branch Management #519
@ -4,7 +4,7 @@ import {
|
||||
getJobStatusBadge,
|
||||
getNextBadgeColor,
|
||||
} from "../../utils/appUtils";
|
||||
import { useServiceProjectJobs } from "../../hooks/useServiceProject";
|
||||
import { useServiceProjectJobs, useUpdateServiceProjectJob } from "../../hooks/useServiceProject";
|
||||
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
||||
import EmployeeAvatarGroup from "../common/EmployeeAvatarGroup";
|
||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
@ -12,9 +12,12 @@ import { SpinnerLoader } from "../common/Loader";
|
||||
import { useParams } from "react-router-dom";
|
||||
import ProjectPage from "../../pages/project/ProjectPage";
|
||||
import { useServiceProjectJobContext } from "./Jobs";
|
||||
import ConfirmModal from "../common/ConfirmModal";
|
||||
|
||||
const JobList = () => {
|
||||
const { setSelectedJob, setManageJob } = useServiceProjectJobContext();
|
||||
const { mutate: UpdateJob } = useUpdateServiceProjectJob(() => {
|
||||
});
|
||||
const { projectId } = useParams();
|
||||
const { data, isLoading, isError, error } = useServiceProjectJobs(
|
||||
ITEMS_PER_PAGE,
|
||||
@ -22,6 +25,29 @@ const JobList = () => {
|
||||
true,
|
||||
projectId
|
||||
);
|
||||
const [isArchiveModalOpen, setIsArchiveModalOpen] = useState(false);
|
||||
const [archiveJobId, setArchiveJobId] = useState(null);
|
||||
|
||||
|
||||
const handleArchive = () => {
|
||||
const payload = [
|
||||
{
|
||||
op: "replace",
|
||||
path: "/isArchive",
|
||||
value: true,
|
||||
},
|
||||
];
|
||||
|
||||
UpdateJob({
|
||||
id: archiveJobId,
|
||||
payload,
|
||||
isArchiveAction: true,
|
||||
});
|
||||
|
||||
setIsArchiveModalOpen(false);
|
||||
setArchiveJobId(null);
|
||||
};
|
||||
|
||||
|
||||
const jobGrid = [
|
||||
{
|
||||
@ -87,64 +113,75 @@ const JobList = () => {
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="dataTables_wrapper dt-bootstrap5 no-footer table-responsive">
|
||||
<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.align || "text-center"} ${
|
||||
col.className || ""
|
||||
}`}
|
||||
scope="col"
|
||||
>
|
||||
<div className={col.className}>{col.label}</div>
|
||||
<>
|
||||
|
||||
{isArchiveModalOpen && (
|
||||
<ConfirmModal
|
||||
isOpen={isArchiveModalOpen}
|
||||
type="success"
|
||||
header="Archive Job"
|
||||
message="Are you sure you want to archive this job?"
|
||||
onSubmit={handleArchive}
|
||||
onClose={() => setIsArchiveModalOpen(false)}
|
||||
loading={false}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="dataTables_wrapper dt-bootstrap5 no-footer table-responsive">
|
||||
<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.align || "text-center"} ${col.className || ""
|
||||
}`}
|
||||
scope="col"
|
||||
>
|
||||
<div className={col.className}>{col.label}</div>
|
||||
</th>
|
||||
))}
|
||||
<th className="sorting_disabled text-center" aria-label="Actions">
|
||||
Actions
|
||||
</th>
|
||||
))}
|
||||
<th className="sorting_disabled text-center" aria-label="Actions">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{Array.isArray(data?.data) && data.data.length > 0 ? (
|
||||
data.data.map((row, i) => (
|
||||
<tr key={i} className="text-start">
|
||||
{jobGrid.map((col) => (
|
||||
<td
|
||||
key={col.key}
|
||||
className={col.className}
|
||||
onClick={() =>
|
||||
setSelectedJob({ showCanvas: true, job: row?.id })
|
||||
}
|
||||
>
|
||||
{col.getValue(row)}
|
||||
</td>
|
||||
))}
|
||||
<td>
|
||||
<div className="dropdown text-center">
|
||||
<button
|
||||
className="btn btn-icon dropdown-toggle hide-arrow"
|
||||
data-bs-toggle="dropdown"
|
||||
<tbody>
|
||||
{Array.isArray(data?.data) && data.data.length > 0 ? (
|
||||
data.data.map((row, i) => (
|
||||
<tr key={i} className="text-start">
|
||||
{jobGrid.map((col) => (
|
||||
<td
|
||||
key={col.key}
|
||||
className={col.className}
|
||||
onClick={() =>
|
||||
setSelectedJob({ showCanvas: true, job: row?.id })
|
||||
}
|
||||
>
|
||||
<i className="bx bx-dots-vertical-rounded bx-md"></i>
|
||||
</button>
|
||||
<div className="dropdown-menu dropdown-menu-end">
|
||||
{col.getValue(row)}
|
||||
</td>
|
||||
))}
|
||||
<td>
|
||||
<div className="dropdown text-center">
|
||||
<button
|
||||
className="dropdown-item py-1"
|
||||
onClick={() =>
|
||||
setSelectedJob({ showCanvas: true, job: row?.id })
|
||||
}
|
||||
className="btn btn-icon dropdown-toggle hide-arrow"
|
||||
data-bs-toggle="dropdown"
|
||||
>
|
||||
<i className="bx bx-detail bx-sm"></i> View
|
||||
<i className="bx bx-dots-vertical-rounded bx-md"></i>
|
||||
</button>
|
||||
|
||||
<>
|
||||
<div className="dropdown-menu dropdown-menu-end">
|
||||
<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"
|
||||
onClick={() =>
|
||||
@ -153,25 +190,35 @@ const JobList = () => {
|
||||
>
|
||||
<i className="bx bx-edit bx-sm"></i> Edit
|
||||
</button>
|
||||
</>
|
||||
|
||||
<button
|
||||
className="dropdown-item py-1"
|
||||
onClick={() => {
|
||||
setArchiveJobId(row.id);
|
||||
setIsArchiveModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<i className="bx bx-archive bx-sm"></i> Archive
|
||||
</button>
|
||||
</div>
|
||||
</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>
|
||||
))
|
||||
) : (
|
||||
<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>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@ const ConfirmModal = ({
|
||||
case "delete":
|
||||
return <i className="bx bx-x-circle text-danger" style={{ fontSize: "60px" }}></i>;
|
||||
case "success":
|
||||
return <i className="bx bx-check-circle text-success" style={{ fontSize: "60px" }}></i>;
|
||||
return <i className="bx bx-archive-in text-warning" style={{ fontSize: "60px" }}></i>;
|
||||
case "warning":
|
||||
return <i className="bx bx-error-circle text-warning" style={{ fontSize: "60px" }}></i>;
|
||||
default:
|
||||
|
||||
@ -255,21 +255,26 @@ export const useCreateServiceProjectJob = (onSuccessCallback) => {
|
||||
});
|
||||
};
|
||||
|
||||
export const useUpdateServiceProjectJob = (onSuccessCallback) => {
|
||||
export const useUpdateServiceProjectJob = () => {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: async ({ id, payload }) => {
|
||||
// Call the repository patch
|
||||
const resp = await ServiceProjectRepository.UpdateJob(id, payload);
|
||||
|
||||
return resp;
|
||||
return useMutation({
|
||||
mutationFn: async ({ id, payload, isArchiveAction = false }) => {
|
||||
const resp = await ServiceProjectRepository.UpdateJob(id, payload);
|
||||
return { resp, isArchiveAction };
|
||||
},
|
||||
onSuccess: () => {
|
||||
|
||||
onSuccess: ({ isArchiveAction }, variables) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["serviceProjectJobs"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["service-job"] });
|
||||
if (onSuccessCallback) onSuccessCallback();
|
||||
showToast("Job Updated successfully", "success");
|
||||
|
||||
if (isArchiveAction) {
|
||||
showToast("Job archived successfully", "success");
|
||||
} else {
|
||||
showToast("Job updated successfully", "success");
|
||||
}
|
||||
},
|
||||
|
||||
onError: (error) => {
|
||||
showToast(
|
||||
error?.response?.data?.message ||
|
||||
@ -374,7 +379,7 @@ export const useDeleteBranch = () => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async ({ id, isActive}) =>
|
||||
mutationFn: async ({ id, isActive }) =>
|
||||
await ServiceProjectRepository.DeleteBranch(id, isActive),
|
||||
|
||||
onSuccess: () => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user