110 lines
3.8 KiB
JavaScript
110 lines
3.8 KiB
JavaScript
import React, { createContext, useContext, useEffect, useState } from "react";
|
|
import JobList from "./JobList";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useServiceProjects } from "../../hooks/useServiceProject";
|
|
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
|
import OffcanvasComponent from "../common/OffcanvasComponent";
|
|
import showToast from "../../services/toastService";
|
|
import ManageJob from "./ServiceProjectJob/ManageJob";
|
|
import ManageJobTicket from "./ServiceProjectJob/ManageJobTicket";
|
|
import GlobalModel from "../common/GlobalModel";
|
|
import PreviewDocument from "../Expenses/PreviewDocument";
|
|
|
|
export const JonContext = createContext();
|
|
export const useServiceProjectJobContext = () => {
|
|
const context = useContext(JonContext);
|
|
if (!context) {
|
|
showToast("Something went wrong", "warning");
|
|
window.location = "/dashboard";
|
|
}
|
|
return context;
|
|
};
|
|
const Jobs = () => {
|
|
const [manageJob, setManageJob] = useState({ isOpen: false, jobId: null });
|
|
const [showArchive, setShowArchive] = useState(false);
|
|
|
|
const [showCanvas, setShowCanvas] = useState(false);
|
|
const [selectedProject, setSelectedProject] = useState(null);
|
|
const [selectJob, setSelectedJob] = useState({
|
|
showCanvas: false,
|
|
job: null,
|
|
});
|
|
const navigate = useNavigate();
|
|
const { data } = useServiceProjects(ITEMS_PER_PAGE, 1);
|
|
|
|
const contextProvider = {
|
|
setSelectedJob,
|
|
setSelectedProject,
|
|
setManageJob,
|
|
manageJob,
|
|
};
|
|
return (
|
|
<>
|
|
<JonContext.Provider value={contextProvider}>
|
|
<OffcanvasComponent
|
|
id="customCanvas"
|
|
title="Job"
|
|
placement="end"
|
|
show={selectJob.showCanvas}
|
|
onClose={() => setSelectedJob({ showCanvas: false, job: null })}
|
|
>
|
|
<ManageJobTicket Job={selectJob} />
|
|
</OffcanvasComponent>
|
|
<OffcanvasComponent
|
|
id="customCanvas1"
|
|
title={`${manageJob.jobId ? "Update a Job" : "Create a new Job"} `}
|
|
placement="end"
|
|
show={manageJob.isOpen}
|
|
onClose={() => setManageJob({ isOpen: false, jobId: null })}
|
|
>
|
|
<ManageJob Job={manageJob.jobId} />
|
|
</OffcanvasComponent>
|
|
<div className="card page-min-h my-2 px-7 pb-4">
|
|
<div className="row align-items-center py-4">
|
|
|
|
{/* LEFT — Archive / Unarchive Toggle */}
|
|
<div className="col-12 col-md-6 text-start">
|
|
<div className="d-inline-flex border rounded-pill overflow-hidden shadow-none">
|
|
<button
|
|
type="button"
|
|
className={`btn px-3 py-1 rounded-0 text-tiny ${!showArchive ? "btn-primary text-white" : ""
|
|
}`}
|
|
onClick={() => setShowArchive(false)}
|
|
>
|
|
<i className="bx bx-archive-out me-1"></i> Active Jobs
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
className={`btn px-3 py-1 rounded-0 text-tiny ${showArchive ? "btn-primary text-white" : ""
|
|
}`}
|
|
onClick={() => setShowArchive(true)}
|
|
>
|
|
<i className="bx bx-archive me-1"></i> Archived
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* RIGHT — New Job button */}
|
|
<div className="col-12 col-md-6 d-flex justify-content-md-end mt-2 mt-md-0">
|
|
<button
|
|
className="btn btn-sm btn-primary"
|
|
onClick={() => setManageJob({ isOpen: true, jobId: null })}
|
|
>
|
|
<i className="bx bx-plus-circle bx-md me-2"></i> New Job
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* Job List */}
|
|
<JobList filterByProject={selectedProject} isArchive={showArchive} />
|
|
</div>
|
|
|
|
</JonContext.Provider>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Jobs;
|