Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | 1x 29x 29x 29x 29x 29x 29x 28x 28x 28x 54x 65x 29x 60x 4x 29x 116x 29x 29x 1x 32x 32x 1x | import React, { useState } from "react";
import BasicLayout from "main/layouts/BasicLayout/BasicLayout";
import UsersTable from "main/components/Users/UsersTable";
import { useBackend } from "main/utils/useBackend";
const AdminUsersPage = () => {
const [page, setPage] = useState(0);
const pageSize = 10;
const { data: usersPage = {} } = useBackend(
["/api/admin/users", page, pageSize],
{
method: "GET",
url: "/api/admin/users",
params: { page, pageSize, sortDirection: "ASC" },
},
);
const totalPages = usersPage.totalPages || 1;
const users = usersPage.content || [];
const getPageNumbers = () => {
const pages = new Set([0, totalPages - 1]);
for (
let i = Math.max(0, page - 2);
i <= Math.min(totalPages - 1, page + 2);
i++
) {
pages.add(i);
}
return [...pages].sort((a, b) => a - b);
};
const pageNumbers = getPageNumbers();
const renderPageButton = (p) => (
<button style={btnStyle(p === page)} onClick={() => setPage(p)}>
{p + 1}
</button>
);
// Stryker disable all
const containerStyle = {
marginTop: "1rem",
display: "flex",
alignItems: "center",
gap: "4px",
flexWrap: "wrap",
};
const btnStyle = (active) => ({
width: "36px",
height: "36px",
border: active
? "0.5px solid var(--bs-primary, #0d6efd)"
: "1px solid #dee2e6",
borderRadius: "4px",
background: active ? "#0d6efd" : "white",
color: active ? "white" : "#212529",
fontWeight: active ? 500 : 400,
fontSize: "13px",
cursor: "pointer",
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
});
const ellipsisStyle = {
width: "36px",
textAlign: "center",
color: "#6c757d",
fontSize: "13px",
};
// Stryker restore all
return (
<BasicLayout>
<h2>Users</h2>
<UsersTable users={users} />
<div style={containerStyle}>
{/* Previous */}
<button
style={btnStyle(false)}
onClick={() => setPage((p) => Math.max(p - 1, 0))}
disabled={page === 0}
title="Previous page"
>
‹
</button>
{renderPageButton(pageNumbers[0])}
{pageNumbers.slice(1).map((p, i) => {
const prev = pageNumbers[i];
return (
<React.Fragment key={p}>
{p - prev > 1 && <span style={ellipsisStyle}>…</span>}
{renderPageButton(p)}
</React.Fragment>
);
})}
{/* Next */}
<button
style={btnStyle(false)}
onClick={() => setPage(page + 1)}
disabled={page >= totalPages - 1}
title="Next page"
>
›
</button>
</div>
</BasicLayout>
);
};
export default AdminUsersPage;
|