112 lines
3.2 KiB
JavaScript
112 lines
3.2 KiB
JavaScript
import { useState } from "react";
|
|
import {
|
|
useBucketList,
|
|
useBuckets,
|
|
useCreateBucket,
|
|
useUpdateBucket,
|
|
} from "../../hooks/useDirectory";
|
|
import { useAllEmployees } from "../../hooks/useEmployees";
|
|
import BucketList from "./BucketList";
|
|
import BucketForm from "./BucketForm";
|
|
import AssignEmployees from "./AssignedBucket";
|
|
import AssignedBucket from "./AssignedBucket";
|
|
import { useDirectoryContext } from "../../pages/Directory/DirectoryPage";
|
|
|
|
const ManageBucket1 = () => {
|
|
const { data, isError, isLoading, error } = useBucketList();
|
|
const { employeesList } = useAllEmployees(false);
|
|
const [action, setAction] = useState(null); // "create" | "edit" | null
|
|
const [selectedBucket, setSelectedBucket] = useState(null);
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const { setContactOpen, setDeleteBucket } = useDirectoryContext();
|
|
|
|
const handleClose = () => {
|
|
setAction(null);
|
|
setSelectedBucket(null);
|
|
};
|
|
const { mutate: createBucket, isPending: creating } = useCreateBucket(() => {
|
|
handleClose();
|
|
});
|
|
const { mutate: updateBucket, isPending: updating } = useUpdateBucket(() => {
|
|
handleClose();
|
|
});
|
|
|
|
|
|
const handleSubmit = (BucketPayload) => {
|
|
if (selectedBucket) {
|
|
updateBucket({
|
|
bucketId: selectedBucket.id,
|
|
BucketPayload: { ...BucketPayload, id: selectedBucket.id },
|
|
});
|
|
} else createBucket(BucketPayload);
|
|
};
|
|
|
|
|
|
return (
|
|
<div className="container m-0 p-0" style={{ minHeight: "00px" }}>
|
|
<div className="d-flex justify-content-center">
|
|
<p className="fs-5 fw-semibold m-0">Manage Buckets</p>
|
|
</div>
|
|
|
|
{action ? (
|
|
<>
|
|
{action && (
|
|
<div>
|
|
<BucketForm
|
|
selectedBucket={selectedBucket}
|
|
mode={action} // pass create | edit
|
|
onSubmit={handleSubmit}
|
|
onCancel={() => {
|
|
setAction(null);
|
|
setSelectedBucket(null);
|
|
}}
|
|
isPending={creating || updating}
|
|
/>
|
|
{action === "edit" && (
|
|
<AssignedBucket
|
|
selectedBucket={selectedBucket}
|
|
handleClose={handleClose}
|
|
/>)}
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="d-flex justify-content-between align-items-center gap-2 my-2">
|
|
<input
|
|
type="search"
|
|
className="form-control form-control-sm w-25"
|
|
placeholder="Search..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
/>
|
|
<button
|
|
className="btn btn-sm btn-primary"
|
|
onClick={() => setAction("create")}
|
|
>
|
|
<i className="bx bx-plus-circle me-2"></i>
|
|
Add Bucket
|
|
</button>
|
|
</div>
|
|
|
|
<BucketList
|
|
buckets={data}
|
|
loading={isLoading}
|
|
searchTerm={searchTerm}
|
|
onDelete={(id) => setDeleteBucket({ isOpen: true, bucketId: id })}
|
|
onEdit={(b) => {
|
|
setAction("edit")
|
|
setSelectedBucket(b)
|
|
}}
|
|
/>
|
|
</>
|
|
)}
|
|
|
|
</div>
|
|
);
|
|
};
|
|
export default ManageBucket1;
|
|
|
|
|
|
|