Notes

import React, { useState, useEffect } from 'react';
import { Button } from "@qbe/ui-core";
import { useNavigate } from 'react-router-dom';
import { PolicyStatusBtn } from "../../../Components/PolicyStatusButton/PolicyStatusBtn";
import { showSuccess } from "../../../Components/AlertBox/AlertBox";
import "./DataTable.css";

export const DataTable = (props) => {
const { rows, columns, approveRequest } = props;
const navigate = useNavigate();

// Track the dropdown open state for each row
const [dropdownOpenRow, setDropdownOpenRow] = useState(null);

const toggleDropdown = (rowId) => {
if (dropdownOpenRow === rowId) {
setDropdownOpenRow(null); // Close if the same row is clicked again
} else {
setDropdownOpenRow(rowId); // Open the dropdown for the clicked row
}
};

const handleClickOutside = (e) => {
if (!e.target.closest('.dropdown-menu')) {
setDropdownOpenRow(null); // Close the dropdown if clicked outside
}
};

useEffect(() => {
document.addEventListener('click', handleClickOutside);
return () => {
document.removeEventListener('click', handleClickOutside);
};
}, []);

const renderPolicyStatusBtn = (row) => (
<td style={{ width: `${100 / columns.length}%` }} className="custom-td">
<div>
<PolicyStatusBtn policyStatus={row.status} />
</div>
</td>
);

const renderAccountName = (row) => (
<td style={{ width: `${100 / columns.length}%` }} className="custom-td">
<a className="account-name-link" href="#">{row.account_name}</a>
</td>
);

const renderViewAccountBtn = () => (
<td style={{ width: `${100 / columns.length}%` }}>
<Button
label="View account"
size="small"
variant="secondary-on-light"
onClick={() => navigate("/policydashboard")}
/>
</td>
);

const renderThreeDots = (rowId) => (
<td style={{ width: `${100 / columns.length}%` }} className="custom-td">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
className="bi bi-three-dots"
viewBox="0 0 16 16"
onClick={() => toggleDropdown(rowId)} // Toggle dropdown for this row
style={{ cursor: "pointer" }}
>
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3" />
</svg>

{/* Dropdown menu */}
{dropdownOpenRow === rowId && (
<div className="dropdown-menu">
<ul>
<li onClick={() => navigate("/policydashboard")}>View Details</li>
<li onClick={() => showSuccess("Saved for later!")}>Save for Later</li>
</ul>
</div>
)}
</td>
);

const renderApproveBtn = (row) => {
const onClickApprove = () => {
approveRequest(row.id);
showSuccess("Account request has been approved");
};

return (
<td style={{ width: `${100 / columns.length}%` }}>
<Button label="Approve" size="small" onClick={() => onClickApprove()} />
</td>
);
};

const renderDenyBtn = (row) => {
const onClickDeny = () => {
approveRequest(row.id);
showSuccess("Account request has been denied");
};

return (
<td
onClick={() => onClickDeny()}
style={{ width: `${100 / columns.length}%` }}
className="custom-td deny-btn"
>
Deny
</td>
);
};

return (
<>
<div className="table-container">
<table className="table table-hover">
<thead className="thead">
<tr>
{columns.map((column) => (
<th
key={column.id}
style={{ width: `${100 / columns.length}%` }}
className="custom-thead"
>
<span>{column.name}</span>
</th>
))}
</tr>
</thead>
<tbody>
{rows.map((row) => (
<tr key={row.id}>
{columns.map((column) => {
switch (column.id) {
case "status":
return renderPolicyStatusBtn(row);
case "account_name":
return renderAccountName(row);
case "view_account":
return renderViewAccountBtn();
case "three_dot":
return renderThreeDots(row.id); // Render the "three dots" for each row
case "approve":
return renderApproveBtn(row);
case "deny":
return renderDenyBtn(row);
default:
return (
<td
key={column.id}
style={{ width: `${100 / columns.length}%` }}
className="custom-td"
>
{row[column.id]}
</td>
);
}
})}
</tr>
))}
</tbody>
</table>
</div>

{/* Pagination */}
<div className="datatable-pagination">
<div className="total-pages">
<p className="pagination-font-style">1-8 of 8</p>
<p className="ml-4 pagination-font-style">Rows per page</p>
<Dropdown label="10" />
</div>
<ul className="pagination custom-paginate-container">
<li className="page-item">
<a className="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span className="sr-only">Previous</span>
</a>
</li>
<li className="page-item"><a className="page-link" href="#">1</a></li>
<li className="page-item"><a className="page-link" href="#">2</a></li>
<li className="page-item"><a className="page-link" href="#">3</a></li>
<li className="page-item">
<a className="page-link" href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<span className="sr-only">Next</span>
</a>
</li>
</ul>
</div>
</>
);
};