110 lines
2.9 KiB
JavaScript
110 lines
2.9 KiB
JavaScript
import React from "react";
|
|
import { useProjectAssignedOrganizations } from "../../../hooks/useProjects";
|
|
import { useSelectedProject } from "../../../slices/apiDataManager";
|
|
|
|
const ProjectAssignedOrgs = () => {
|
|
const selectedProject = useSelectedProject();
|
|
const { data, isLoading, isError, error } =
|
|
useProjectAssignedOrganizations(selectedProject);
|
|
|
|
const orgList = [
|
|
{
|
|
key: "name",
|
|
label: "Organization Name",
|
|
getValue: (org) => (
|
|
<div className="d-flex gap-2 py-1 ">
|
|
<i class="bx bx-buildings"></i>
|
|
<span
|
|
className="text-truncate d-inline-block "
|
|
style={{ maxWidth: "150px" }}
|
|
>
|
|
{org?.name || "N/A"}
|
|
</span>
|
|
</div>
|
|
),
|
|
align: "text-start",
|
|
},
|
|
{
|
|
key: "service",
|
|
label: "Service Name",
|
|
getValue: (org) => (
|
|
<div className="d-flex gap-2 py-1 ">
|
|
{org?.service?.name}
|
|
</div>
|
|
),
|
|
align: "text-start",
|
|
},
|
|
{
|
|
key: "sprid",
|
|
label: "Service Provider Id",
|
|
getValue: (org) => (
|
|
<span
|
|
className="text-truncate d-inline-block"
|
|
style={{ maxWidth: "200px" }}
|
|
>
|
|
{org?.sprid || "N/A"}
|
|
</span>
|
|
),
|
|
align: "text-center",
|
|
},
|
|
{
|
|
key: "isActive",
|
|
label: "Status",
|
|
getValue: (org) => (
|
|
<span
|
|
className={`text-truncate d-inline-block badge bg-label-${org.isActive ? "primary" :"secondary"}`}
|
|
style={{ maxWidth: "80px" }}
|
|
>
|
|
{org?.isActive ? "Active" : "Inactive"}
|
|
</span>
|
|
),
|
|
align: "text-start",
|
|
},
|
|
];
|
|
|
|
if (isLoading) return <div>Loading...</div>;
|
|
if (isError) return <div>{error.message}</div>;
|
|
|
|
return (
|
|
<div>
|
|
<div className="dataTables_wrapper no-footer mx-5 pb-2 page">
|
|
<table className="table dataTable text-nowrap">
|
|
<thead>
|
|
<tr className="table_header_border">
|
|
{orgList.map((col) => (
|
|
<th key={col.key} className={col.align}>
|
|
{col.label}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{Array.isArray(data) && data.length > 0 ? (
|
|
data.map((row, i) => (
|
|
<tr key={i}>
|
|
{orgList.map((col) => (
|
|
<td key={col.key} className={col.align}>
|
|
{col.getValue(row)}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))
|
|
) : (
|
|
<tr style={{ height: "200px" }}>
|
|
<td
|
|
colSpan={orgList.length}
|
|
className="text-center align-middle"
|
|
>
|
|
Not Assigned yet
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProjectAssignedOrgs;
|