287 lines
10 KiB
JavaScript
287 lines
10 KiB
JavaScript
import React, { useState } from "react";
|
|
import GlobalModel from "../../common/GlobalModel";
|
|
import ManageBranch from "./ManageBranch";
|
|
import { useBranches, useDeleteBranch } from "../../../hooks/useServiceProject";
|
|
import { ITEMS_PER_PAGE } from "../../../utils/constants";
|
|
import { useDebounce } from "../../../utils/appUtils";
|
|
import { useParams } from "react-router-dom";
|
|
import Pagination from "../../common/Pagination";
|
|
import ConfirmModal from "../../common/ConfirmModal";
|
|
import { SpinnerLoader } from "../../common/Loader";
|
|
|
|
const ServiceBranch = () => {
|
|
const { projectId } = useParams();
|
|
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
|
const [showInactive, setShowInactive] = useState(false);
|
|
const [manageState, setManageState] = useState({
|
|
IsOpen: false,
|
|
branchId: null,
|
|
});
|
|
const { mutate: DeleteBranch, isPending } = useDeleteBranch();
|
|
const [deletingId, setDeletingId] = useState(null);
|
|
|
|
const [search, setSearch] = useState("");
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const debouncedSearch = useDebounce(search, 500);
|
|
|
|
const { data, isLoading, isError, error } = useBranches(
|
|
projectId,
|
|
!showInactive,
|
|
ITEMS_PER_PAGE - 12,
|
|
currentPage,
|
|
debouncedSearch
|
|
);
|
|
|
|
const paginate = (page) => {
|
|
if (page >= 1 && page <= (data?.totalPages ?? 1)) {
|
|
setCurrentPage(page);
|
|
}
|
|
};
|
|
|
|
const columns = [
|
|
{
|
|
key: "branchName",
|
|
label: "Name",
|
|
align: "text-start",
|
|
getValue: (e) => e?.branchName || "N/A",
|
|
},
|
|
];
|
|
|
|
const handleDelete = (id) => {
|
|
setDeletingId(id);
|
|
DeleteBranch(
|
|
{ id, isActive: showInactive },
|
|
{
|
|
onSettled: () => {
|
|
setDeletingId(null);
|
|
setIsDeleteModalOpen(false);
|
|
},
|
|
}
|
|
);
|
|
};
|
|
return (
|
|
<>
|
|
{IsDeleteModalOpen && (
|
|
<ConfirmModal
|
|
isOpen={IsDeleteModalOpen}
|
|
type={!showInactive ? "delete" : "undo"}
|
|
header={!showInactive ? "Delete Branch" : "Restore Branch"}
|
|
message={
|
|
!showInactive
|
|
? "Are you sure you want delete?"
|
|
: "Are you sure you want restore?"
|
|
}
|
|
onSubmit={handleDelete}
|
|
onClose={() => setIsDeleteModalOpen(false)}
|
|
loading={isPending}
|
|
paramData={deletingId}
|
|
/>
|
|
)}
|
|
<div className="card h-100 table-responsive px-sm-4">
|
|
<div className="card-datatable" id="payment-request-table">
|
|
{/* Header Section */}
|
|
<div className="row align-items-center justify-content-between mt-3 mx-1">
|
|
<div className="col-md-4 col-sm-12 ms-n3 text-start ">
|
|
<h5 className="mb-0">
|
|
<i className="bx bx-buildings text-primary"></i>
|
|
<span className="ms-2 fw-bold">Branchs</span>
|
|
</h5>
|
|
</div>
|
|
|
|
{/* Flex container for toggle + button */}
|
|
<div className="col-md-8 col-sm-12 text-end">
|
|
<div className="d-flex justify-content-end gap-2">
|
|
<div className="form-check form-switch d-inline-flex align-items-center">
|
|
<input
|
|
type="checkbox"
|
|
className="form-check-input mt-1"
|
|
id="inactiveEmployeesCheckbox"
|
|
checked={showInactive}
|
|
onChange={() => setShowInactive(!showInactive)}
|
|
/>
|
|
<label
|
|
htmlFor="inactiveEmployeesCheckbox"
|
|
className="ms-2 text-xs"
|
|
>
|
|
{!showInactive ? "Show Deleted" : "Hide Deleted"}
|
|
</label>
|
|
</div>
|
|
<div className="d-flex justify-content-end">
|
|
<button
|
|
className="btn btn-sm btn-primary"
|
|
type="button"
|
|
onClick={() =>
|
|
setManageState({
|
|
IsOpen: true,
|
|
branchId: null,
|
|
})
|
|
}
|
|
>
|
|
<i className="bx bx-sm bx-plus-circle me-2"></i>
|
|
Add Branch
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mx-2 mt-3">
|
|
<table className="table border-top text-nowrap align-middle table-borderless">
|
|
<thead>
|
|
<tr>
|
|
{columns.map((col) => (
|
|
<th key={col.key} className={col.align}>
|
|
{col.label}
|
|
</th>
|
|
))}
|
|
<th className="text-center">Action</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
{isLoading && (
|
|
<tr>
|
|
<td
|
|
colSpan={columns.length + 1}
|
|
className="text-center py-5"
|
|
style={{
|
|
height: "200px",
|
|
verticalAlign: "middle",
|
|
}}
|
|
>
|
|
<div className="d-flex justify-content-center align-items-center w-100 h-100">
|
|
<SpinnerLoader />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
|
|
{isError && (
|
|
<tr>
|
|
<td
|
|
colSpan={columns.length + 1}
|
|
className="text-center text-danger py-5"
|
|
>
|
|
{error?.message || "Error loading branches"}
|
|
</td>
|
|
</tr>
|
|
)}
|
|
|
|
{!isLoading &&
|
|
!isError &&
|
|
data?.data?.length > 0 &&
|
|
data.data.map((branch) => (
|
|
<tr key={branch.id} style={{ height: "35px" }}>
|
|
{columns.map((col) => (
|
|
<td key={col.key} className={`${col.align} py-3`}>
|
|
{col.getValue(branch)}
|
|
</td>
|
|
))}
|
|
<td className="text-center">
|
|
<div className="dropdown z-2">
|
|
<button
|
|
type="button"
|
|
className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
|
|
data-bs-toggle="dropdown"
|
|
>
|
|
<i className="bx bx-dots-vertical-rounded text-muted p-0"></i>
|
|
</button>
|
|
<ul className="dropdown-menu dropdown-menu-end w-auto">
|
|
{!showInactive ? (
|
|
<>
|
|
<li
|
|
onClick={() =>
|
|
setManageState({
|
|
IsOpen: true,
|
|
branchId: branch.id,
|
|
})
|
|
}
|
|
>
|
|
<a className="dropdown-item px-2 cursor-pointer py-1">
|
|
<i className="bx bx-edit text-primary bx-xs me-2"></i>
|
|
Modify
|
|
</a>
|
|
</li>
|
|
<li
|
|
onClick={() => {
|
|
setIsDeleteModalOpen(true);
|
|
setDeletingId(branch.id);
|
|
}}
|
|
>
|
|
<a className="dropdown-item px-2 cursor-pointer py-1">
|
|
<i className="bx bx-trash text-danger bx-xs me-2"></i>
|
|
Delete
|
|
</a>
|
|
</li>
|
|
</>
|
|
) : (
|
|
<li
|
|
onClick={() => {
|
|
setIsDeleteModalOpen(true);
|
|
setDeletingId(branch.id);
|
|
}}
|
|
>
|
|
<a className="dropdown-item px-2 cursor-pointer py-1">
|
|
<i className="bx bx-undo text-danger me-2"></i>
|
|
Restore
|
|
</a>
|
|
</li>
|
|
)}
|
|
</ul>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
|
|
{!isLoading &&
|
|
!isError &&
|
|
(!data?.data || data.data.length === 0) && (
|
|
<tr>
|
|
<td colSpan={columns.length + 1}>
|
|
<div
|
|
className="d-flex justify-content-center align-items-center"
|
|
style={{ height: "150px" }}
|
|
>
|
|
No Branch Found
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
{data?.data?.length > 0 && (
|
|
<Pagination
|
|
currentPage={currentPage}
|
|
totalPages={data.totalPages}
|
|
onPageChange={paginate}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{manageState.IsOpen && (
|
|
<GlobalModel
|
|
isOpen
|
|
size="md"
|
|
closeModal={() =>
|
|
setManageState({ IsOpen: false, branchId: null })
|
|
}
|
|
>
|
|
<ManageBranch
|
|
key={manageState.branchId ?? "new"}
|
|
BranchToEdit={manageState.branchId}
|
|
closeModal={() =>
|
|
setManageState({ IsOpen: false, branchId: null })
|
|
}
|
|
/>
|
|
</GlobalModel>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ServiceBranch;
|