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 Pagination from "../../common/Pagination";
|
||||||
import ConfirmModal from "../../common/ConfirmModal";
|
import ConfirmModal from "../../common/ConfirmModal";
|
||||||
import { SpinnerLoader } from "../../common/Loader";
|
import { SpinnerLoader } from "../../common/Loader";
|
||||||
|
import ViewBranchDetails from "./ViewBranchDetails";
|
||||||
|
|
||||||
const ServiceBranch = () => {
|
const ServiceBranch = () => {
|
||||||
const { projectId } = useParams();
|
const { projectId } = useParams();
|
||||||
@ -19,6 +20,7 @@ const ServiceBranch = () => {
|
|||||||
});
|
});
|
||||||
const { mutate: DeleteBranch, isPending } = useDeleteBranch();
|
const { mutate: DeleteBranch, isPending } = useDeleteBranch();
|
||||||
const [deletingId, setDeletingId] = useState(null);
|
const [deletingId, setDeletingId] = useState(null);
|
||||||
|
const [ViewRequest, setViewRequest] = useState({ requestId: null, view: false });
|
||||||
|
|
||||||
const [search, setSearch] = useState("");
|
const [search, setSearch] = useState("");
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
@ -84,7 +86,7 @@ const ServiceBranch = () => {
|
|||||||
<div className="col-md-4 col-sm-12 ms-n3 text-start ">
|
<div className="col-md-4 col-sm-12 ms-n3 text-start ">
|
||||||
<h5 className="mb-0">
|
<h5 className="mb-0">
|
||||||
<i className="bx bx-buildings text-primary"></i>
|
<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>
|
</h5>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -171,37 +173,67 @@ const ServiceBranch = () => {
|
|||||||
!isError &&
|
!isError &&
|
||||||
data?.data?.length > 0 &&
|
data?.data?.length > 0 &&
|
||||||
data.data.map((branch) => (
|
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) => (
|
{columns.map((col) => (
|
||||||
<td key={col.key} className={`${col.align} py-3`}>
|
<td key={col.key} className={`${col.align} py-3`}>
|
||||||
{col.getValue(branch)}
|
{col.getValue(branch)}
|
||||||
</td>
|
</td>
|
||||||
))}
|
))}
|
||||||
<td className="text-center">
|
<td className="text-center">
|
||||||
<div className="dropdown z-2">
|
<div className="d-flex justify-content-center align-items-center gap-2">
|
||||||
<button
|
{/* View Icon */}
|
||||||
type="button"
|
<i
|
||||||
className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
|
className="bx bx-show text-primary cursor-pointer"
|
||||||
data-bs-toggle="dropdown"
|
onClick={() =>
|
||||||
>
|
setViewRequest({ branchId: branch.id, view: true })
|
||||||
<i className="bx bx-dots-vertical-rounded text-muted p-0"></i>
|
}
|
||||||
</button>
|
></i>
|
||||||
<ul className="dropdown-menu dropdown-menu-end w-auto">
|
|
||||||
{!showInactive ? (
|
<div className="dropdown z-2">
|
||||||
<>
|
<button
|
||||||
<li
|
type="button"
|
||||||
onClick={() =>
|
className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
|
||||||
setManageState({
|
data-bs-toggle="dropdown"
|
||||||
IsOpen: true,
|
>
|
||||||
branchId: branch.id,
|
<i className="bx bx-dots-vertical-rounded text-muted p-0"></i>
|
||||||
})
|
</button>
|
||||||
}
|
<ul className="dropdown-menu dropdown-menu-end w-auto">
|
||||||
>
|
{!showInactive ? (
|
||||||
<a className="dropdown-item px-2 cursor-pointer py-1">
|
<>
|
||||||
<i className="bx bx-edit text-primary bx-xs me-2"></i>
|
<li
|
||||||
Modify
|
onClick={() =>
|
||||||
</a>
|
setManageState({
|
||||||
</li>
|
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
|
<li
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setIsDeleteModalOpen(true);
|
setIsDeleteModalOpen(true);
|
||||||
@ -209,25 +241,13 @@ const ServiceBranch = () => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<a className="dropdown-item px-2 cursor-pointer py-1">
|
<a className="dropdown-item px-2 cursor-pointer py-1">
|
||||||
<i className="bx bx-trash text-danger bx-xs me-2"></i>
|
<i className="bx bx-undo text-danger me-2"></i>
|
||||||
Delete
|
Restore
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</>
|
)}
|
||||||
) : (
|
</ul>
|
||||||
<li
|
</div>
|
||||||
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>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -277,6 +297,17 @@ const ServiceBranch = () => {
|
|||||||
/>
|
/>
|
||||||
</GlobalModel>
|
</GlobalModel>
|
||||||
)}
|
)}
|
||||||
|
{ViewRequest.view && (
|
||||||
|
<GlobalModel
|
||||||
|
isOpen
|
||||||
|
size="md"
|
||||||
|
modalType="top"
|
||||||
|
closeModal={() => setViewRequest({ branchId: null, view: false })}
|
||||||
|
>
|
||||||
|
<ViewBranchDetails BranchToEdit={ViewRequest.branchId} />
|
||||||
|
</GlobalModel>
|
||||||
|
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</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