mirror of
https://github.com/NginxProxyManager/nginx-proxy-manager.git
synced 2025-09-14 19:02:35 +00:00
React
This commit is contained in:
Jamie Curnow
20
frontend/src/pages/Users/Empty.tsx
Normal file
20
frontend/src/pages/Users/Empty.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import type { Table as ReactTable } from "@tanstack/react-table";
|
||||
import { Button } from "src/components";
|
||||
import { intl } from "src/locale";
|
||||
|
||||
interface Props {
|
||||
tableInstance: ReactTable<any>;
|
||||
}
|
||||
export default function Empty({ tableInstance }: Props) {
|
||||
return (
|
||||
<tr>
|
||||
<td colSpan={tableInstance.getVisibleFlatColumns().length}>
|
||||
<div className="text-center my-4">
|
||||
<h2>{intl.formatMessage({ id: "proxy-hosts.empty" })}</h2>
|
||||
<p className="text-muted">{intl.formatMessage({ id: "empty-subtitle" })}</p>
|
||||
<Button className="btn-lime my-3">{intl.formatMessage({ id: "proxy-hosts.add" })}</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
128
frontend/src/pages/Users/Table.tsx
Normal file
128
frontend/src/pages/Users/Table.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
import { IconDotsVertical, IconEdit, IconLock, IconShield, IconTrash } from "@tabler/icons-react";
|
||||
import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
|
||||
import { useMemo } from "react";
|
||||
import type { User } from "src/api/backend";
|
||||
import { GravatarFormatter, ValueWithDateFormatter } from "src/components";
|
||||
import { TableLayout } from "src/components/Table/TableLayout";
|
||||
import { intl } from "src/locale";
|
||||
import Empty from "./Empty";
|
||||
|
||||
interface Props {
|
||||
data: User[];
|
||||
isFetching?: boolean;
|
||||
currentUserId?: number;
|
||||
onEditUser?: (id: number) => void;
|
||||
}
|
||||
export default function Table({ data, isFetching, currentUserId, onEditUser }: Props) {
|
||||
const columnHelper = createColumnHelper<User>();
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
columnHelper.accessor((row: any) => row, {
|
||||
id: "avatar",
|
||||
cell: (info: any) => {
|
||||
const value = info.getValue();
|
||||
return <GravatarFormatter url={value.avatar} name={value.name} />;
|
||||
},
|
||||
meta: {
|
||||
className: "w-1",
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor((row: any) => row, {
|
||||
id: "name",
|
||||
header: intl.formatMessage({ id: "column.name" }),
|
||||
cell: (info: any) => {
|
||||
const value = info.getValue();
|
||||
// Hack to reuse domains formatter
|
||||
return <ValueWithDateFormatter value={value.name} createdOn={value.createdOn} />;
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor((row: any) => row.email, {
|
||||
id: "email",
|
||||
header: intl.formatMessage({ id: "column.email" }),
|
||||
cell: (info: any) => {
|
||||
return info.getValue();
|
||||
},
|
||||
}),
|
||||
// TODO: formatter for roles
|
||||
columnHelper.accessor((row: any) => row.roles, {
|
||||
id: "roles",
|
||||
header: intl.formatMessage({ id: "column.roles" }),
|
||||
cell: (info: any) => {
|
||||
return JSON.stringify(info.getValue());
|
||||
},
|
||||
}),
|
||||
columnHelper.display({
|
||||
id: "id", // todo: not needed for a display?
|
||||
cell: (info: any) => {
|
||||
return (
|
||||
<span className="dropdown">
|
||||
<button
|
||||
type="button"
|
||||
className="btn dropdown-toggle btn-action btn-sm px-1"
|
||||
data-bs-boundary="viewport"
|
||||
data-bs-toggle="dropdown"
|
||||
>
|
||||
<IconDotsVertical />
|
||||
</button>
|
||||
<div className="dropdown-menu dropdown-menu-end">
|
||||
<span className="dropdown-header">
|
||||
{intl.formatMessage(
|
||||
{
|
||||
id: "users.actions-title",
|
||||
},
|
||||
{ id: info.row.original.id },
|
||||
)}
|
||||
</span>
|
||||
<a
|
||||
className="dropdown-item"
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
onEditUser?.(info.row.original.id);
|
||||
}}
|
||||
>
|
||||
<IconEdit size={16} />
|
||||
{intl.formatMessage({ id: "user.edit" })}
|
||||
</a>
|
||||
<a className="dropdown-item" href="#">
|
||||
<IconShield size={16} />
|
||||
{intl.formatMessage({ id: "action.permissions" })}
|
||||
</a>
|
||||
<a className="dropdown-item" href="#">
|
||||
<IconLock size={16} />
|
||||
{intl.formatMessage({ id: "user.change-password" })}
|
||||
</a>
|
||||
{currentUserId !== info.row.original.id ? (
|
||||
<>
|
||||
<div className="dropdown-divider" />
|
||||
<a className="dropdown-item" href="#">
|
||||
<IconTrash size={16} />
|
||||
{intl.formatMessage({ id: "action.delete" })}
|
||||
</a>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</span>
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
className: "text-end w-1",
|
||||
},
|
||||
}),
|
||||
],
|
||||
[columnHelper, currentUserId, onEditUser],
|
||||
);
|
||||
|
||||
const tableInstance = useReactTable<User>({
|
||||
columns,
|
||||
data,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
rowCount: data.length,
|
||||
meta: {
|
||||
isFetching,
|
||||
},
|
||||
enableSortingRemoval: false,
|
||||
});
|
||||
|
||||
return <TableLayout tableInstance={tableInstance} emptyState={<Empty tableInstance={tableInstance} />} />;
|
||||
}
|
||||
62
frontend/src/pages/Users/TableWrapper.tsx
Normal file
62
frontend/src/pages/Users/TableWrapper.tsx
Normal file
@@ -0,0 +1,62 @@
|
||||
import { IconSearch } from "@tabler/icons-react";
|
||||
import { useState } from "react";
|
||||
import Alert from "react-bootstrap/Alert";
|
||||
import { Button, LoadingPage } from "src/components";
|
||||
import { useUser, useUsers } from "src/hooks";
|
||||
import { intl } from "src/locale";
|
||||
import { UserModal } from "src/modals";
|
||||
import Table from "./Table";
|
||||
|
||||
export default function TableWrapper() {
|
||||
const [editUserId, setEditUserId] = useState(0);
|
||||
const { isFetching, isLoading, isError, error, data } = useUsers(["permissions"]);
|
||||
const { data: currentUser } = useUser("me");
|
||||
|
||||
if (isLoading) {
|
||||
return <LoadingPage />;
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
return <Alert variant="danger">{error?.message || "Unknown error"}</Alert>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="card mt-4">
|
||||
<div className="card-status-top bg-orange" />
|
||||
<div className="card-table">
|
||||
<div className="card-header">
|
||||
<div className="row w-full">
|
||||
<div className="col">
|
||||
<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "users.title" })}</h2>
|
||||
</div>
|
||||
<div className="col-md-auto col-sm-12">
|
||||
<div className="ms-auto d-flex flex-wrap btn-list">
|
||||
<div className="input-group input-group-flat w-auto">
|
||||
<span className="input-group-text input-group-text-sm">
|
||||
<IconSearch size={16} />
|
||||
</span>
|
||||
<input
|
||||
id="advanced-table-search"
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
<Button size="sm" className="btn-orange">
|
||||
{intl.formatMessage({ id: "users.add" })}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Table
|
||||
data={data ?? []}
|
||||
isFetching={isFetching}
|
||||
currentUserId={currentUser?.id}
|
||||
onEditUser={(id: number) => setEditUserId(id)}
|
||||
/>
|
||||
{editUserId ? <UserModal userId={editUserId} onClose={() => setEditUserId(0)} /> : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
12
frontend/src/pages/Users/index.tsx
Normal file
12
frontend/src/pages/Users/index.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import { HasPermission } from "src/components";
|
||||
import TableWrapper from "./TableWrapper";
|
||||
|
||||
const Users = () => {
|
||||
return (
|
||||
<HasPermission permission="admin" type="manage">
|
||||
<TableWrapper />
|
||||
</HasPermission>
|
||||
);
|
||||
};
|
||||
|
||||
export default Users;
|
||||
Reference in New Issue
Block a user