Showing details view in Branches.
This commit is contained in:
parent
7930876b7d
commit
da53a2fc62
@ -8,6 +8,7 @@ import { useParams } from "react-router-dom";
|
||||
import Pagination from "../../common/Pagination";
|
||||
import ConfirmModal from "../../common/ConfirmModal";
|
||||
import { SpinnerLoader } from "../../common/Loader";
|
||||
import ViewBranchDetails from "./ViewBranchDetails";
|
||||
|
||||
const ServiceBranch = () => {
|
||||
const { projectId } = useParams();
|
||||
@ -19,6 +20,7 @@ const ServiceBranch = () => {
|
||||
});
|
||||
const { mutate: DeleteBranch, isPending } = useDeleteBranch();
|
||||
const [deletingId, setDeletingId] = useState(null);
|
||||
const [ViewRequest, setViewRequest] = useState({ requestId: null, view: false });
|
||||
|
||||
const [search, setSearch] = useState("");
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
@ -84,7 +86,7 @@ const ServiceBranch = () => {
|
||||
<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>
|
||||
<span className="ms-2 fw-bold">Branches</span>
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
@ -171,37 +173,67 @@ const ServiceBranch = () => {
|
||||
!isError &&
|
||||
data?.data?.length > 0 &&
|
||||
data.data.map((branch) => (
|
||||
<tr key={branch.id} style={{ height: "35px" }}>
|
||||
<tr
|
||||
key={branch.id}
|
||||
style={{ height: "35px", cursor: "pointer" }}
|
||||
onClick={(e) => {
|
||||
if (!e.target.closest(".dropdown") && !e.target.closest(".bx-show")) {
|
||||
setViewRequest({ branchId: branch.id, view: true });
|
||||
}
|
||||
}}
|
||||
>
|
||||
{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>
|
||||
<div className="d-flex justify-content-center align-items-center gap-2">
|
||||
{/* View Icon */}
|
||||
<i
|
||||
className="bx bx-show text-primary cursor-pointer"
|
||||
onClick={() =>
|
||||
setViewRequest({ branchId: branch.id, view: true })
|
||||
}
|
||||
></i>
|
||||
|
||||
<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);
|
||||
@ -209,25 +241,13 @@ const ServiceBranch = () => {
|
||||
}}
|
||||
>
|
||||
<a className="dropdown-item px-2 cursor-pointer py-1">
|
||||
<i className="bx bx-trash text-danger bx-xs me-2"></i>
|
||||
Delete
|
||||
<i className="bx bx-undo text-danger me-2"></i>
|
||||
Restore
|
||||
</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>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@ -277,6 +297,17 @@ const ServiceBranch = () => {
|
||||
/>
|
||||
</GlobalModel>
|
||||
)}
|
||||
{ViewRequest.view && (
|
||||
<GlobalModel
|
||||
isOpen
|
||||
size="md"
|
||||
modalType="top"
|
||||
closeModal={() => setViewRequest({ branchId: null, view: false })}
|
||||
>
|
||||
<ViewBranchDetails BranchToEdit={ViewRequest.branchId} />
|
||||
</GlobalModel>
|
||||
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -0,0 +1,142 @@
|
||||
import React from "react";
|
||||
import { useBranchDetails } from "../../../hooks/useServiceProject";
|
||||
import Avatar from "../../common/Avatar";
|
||||
import { formatUTCToLocalTime } from "../../../utils/dateUtils";
|
||||
|
||||
const ViewBranchDetails = ({ BranchToEdit }) => {
|
||||
const { data, isLoading, isError, error: requestError } = useBranchDetails(BranchToEdit);
|
||||
|
||||
console.log("branch details:", data);
|
||||
|
||||
if (isLoading) return <p>Loading...</p>;
|
||||
if (isError) return <p>Error: {requestError?.message}</p>;
|
||||
|
||||
return (
|
||||
<form className="container px-3">
|
||||
<div className="col-12 mb-1">
|
||||
<h5 className="fw-semibold m-0">Branch Details</h5>
|
||||
</div>
|
||||
<div className="row mb-1 mt-5">
|
||||
<div className="col-md-12 mb-4">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Branch Name:
|
||||
</label>
|
||||
<div className="text-muted">{data?.branchName || "N/A"}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12 mb-4">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Branch Type:
|
||||
</label>
|
||||
<div className="text-muted">{data?.branchName || "N/A"}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12 mb-4">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Project:
|
||||
</label>
|
||||
<div className="text-muted text-start">{data?.project?.name || "N/A"}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-12 text-start mb-2">
|
||||
<div className="d-flex align-items-center">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ minWidth: "125px" }}
|
||||
>
|
||||
Updated By :
|
||||
</label>
|
||||
<>
|
||||
<Avatar
|
||||
size="xs"
|
||||
classAvatar="m-0 me-1"
|
||||
firstName={data.updatedBy.firstName}
|
||||
lastName={data.updatedBy.lastName}
|
||||
/>
|
||||
<span className="text-muted">
|
||||
{`${data.updatedBy.firstName ?? ""} ${data.updatedBy.lastName ?? ""
|
||||
}`.trim() || "N/A"}
|
||||
</span>
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12 text-start mb-3">
|
||||
<div className="d-flex align-items-center">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ minWidth: "125px" }}
|
||||
>
|
||||
Created By :
|
||||
</label>
|
||||
<Avatar
|
||||
size="xs"
|
||||
classAvatar="m-0 me-1"
|
||||
firstName={data?.createdBy?.firstName}
|
||||
lastName={data?.createdBy?.lastName}
|
||||
/>
|
||||
<span className="text-muted">
|
||||
{`${data?.createdBy?.firstName ?? ""} ${data?.createdBy?.lastName ?? ""
|
||||
}`.trim() || "N/A"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Created At :
|
||||
</label>
|
||||
<div className="text-muted">
|
||||
{data?.createdAt
|
||||
? formatUTCToLocalTime(data.createdAt, true)
|
||||
: "N/A"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 mb-3 text-start">
|
||||
<label className="form-label mb-2 fw-semibold">Contact Information:</label>
|
||||
<div className="text-muted">
|
||||
{data?.contactInformation ? (
|
||||
JSON.parse(data.contactInformation).map((contact, index) => (
|
||||
<div key={index} className="mb-3">
|
||||
<div className="fw-semibold mb-1">Person {index + 1}:-</div>
|
||||
<div>
|
||||
<label className="fw-semibold mb-1">Person Name:</label> {contact.contactPerson || "N/A"}
|
||||
</div>
|
||||
<div>
|
||||
<label className="fw-semibold mb-1">Designation:</label> {contact.designation || "N/A"}
|
||||
</div>
|
||||
<div>
|
||||
<label className="fw-semibold mb-1">Emails:</label> {contact.contactEmails?.join(", ") || "N/A"}
|
||||
</div>
|
||||
<div>
|
||||
<label className="fw-semibold mb-1">Numbers:</label> {contact.contactNumbers?.join(", ") || "N/A"}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
"N/A"
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default ViewBranchDetails;
|
||||
Loading…
x
Reference in New Issue
Block a user