mirror of
https://github.com/NginxProxyManager/nginx-proxy-manager.git
synced 2025-12-23 20:39:10 +00:00
React
This commit is contained in:
Jamie Curnow
20
frontend/src/pages/Access/Empty.tsx
Normal file
20
frontend/src/pages/Access/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: "access.empty" })}</h2>
|
||||
<p className="text-muted">{intl.formatMessage({ id: "empty-subtitle" })}</p>
|
||||
<Button className="btn-cyan my-3">{intl.formatMessage({ id: "access.add" })}</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
123
frontend/src/pages/Access/Table.tsx
Normal file
123
frontend/src/pages/Access/Table.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
import { IconDotsVertical, IconEdit, IconTrash } from "@tabler/icons-react";
|
||||
import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
|
||||
import { useMemo } from "react";
|
||||
import type { AccessList } 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: AccessList[];
|
||||
isFetching?: boolean;
|
||||
}
|
||||
export default function Table({ data, isFetching }: Props) {
|
||||
const columnHelper = createColumnHelper<AccessList>();
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
columnHelper.accessor((row: any) => row.owner, {
|
||||
id: "owner",
|
||||
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();
|
||||
// Bit of a hack to reuse the DomainsFormatter component
|
||||
return <ValueWithDateFormatter value={value.name} createdOn={value.createdOn} />;
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor((row: any) => row.items, {
|
||||
id: "items",
|
||||
header: intl.formatMessage({ id: "column.authorization" }),
|
||||
cell: (info: any) => {
|
||||
const value = info.getValue();
|
||||
return intl.formatMessage({ id: "access.auth-count" }, { count: value.length });
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor((row: any) => row.clients, {
|
||||
id: "clients",
|
||||
header: intl.formatMessage({ id: "column.access" }),
|
||||
cell: (info: any) => {
|
||||
const value = info.getValue();
|
||||
return intl.formatMessage({ id: "access.access-count" }, { count: value.length });
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor((row: any) => row.satisfyAny, {
|
||||
id: "satisfyAny",
|
||||
header: intl.formatMessage({ id: "column.satisfy" }),
|
||||
cell: (info: any) => {
|
||||
const t = info.getValue() ? "access.satisfy-any" : "access.satisfy-all";
|
||||
return intl.formatMessage({ id: t });
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor((row: any) => row.proxyHostCount, {
|
||||
id: "proxyHostCount",
|
||||
header: intl.formatMessage({ id: "proxy-hosts.title" }),
|
||||
cell: (info: any) => {
|
||||
return intl.formatMessage({ id: "proxy-hosts.count" }, { count: 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: "access.actions-title",
|
||||
},
|
||||
{ id: info.row.original.id },
|
||||
)}
|
||||
</span>
|
||||
<a className="dropdown-item" href="#">
|
||||
<IconEdit size={16} />
|
||||
{intl.formatMessage({ id: "action.edit" })}
|
||||
</a>
|
||||
<div className="dropdown-divider" />
|
||||
<a className="dropdown-item" href="#">
|
||||
<IconTrash size={16} />
|
||||
{intl.formatMessage({ id: "action.delete" })}
|
||||
</a>
|
||||
</div>
|
||||
</span>
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
className: "text-end w-1",
|
||||
},
|
||||
}),
|
||||
],
|
||||
[columnHelper],
|
||||
);
|
||||
|
||||
const tableInstance = useReactTable<AccessList>({
|
||||
columns,
|
||||
data,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
rowCount: data.length,
|
||||
meta: {
|
||||
isFetching,
|
||||
},
|
||||
enableSortingRemoval: false,
|
||||
});
|
||||
|
||||
return <TableLayout tableInstance={tableInstance} emptyState={<Empty tableInstance={tableInstance} />} />;
|
||||
}
|
||||
52
frontend/src/pages/Access/TableWrapper.tsx
Normal file
52
frontend/src/pages/Access/TableWrapper.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
import { IconSearch } from "@tabler/icons-react";
|
||||
import Alert from "react-bootstrap/Alert";
|
||||
import { Button, LoadingPage } from "src/components";
|
||||
import { useAccessLists } from "src/hooks";
|
||||
import { intl } from "src/locale";
|
||||
import Table from "./Table";
|
||||
|
||||
export default function TableWrapper() {
|
||||
const { isFetching, isLoading, isError, error, data } = useAccessLists(["owner", "items", "clients"]);
|
||||
|
||||
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-cyan" />
|
||||
<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: "access.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-cyan">
|
||||
{intl.formatMessage({ id: "access.add" })}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Table data={data ?? []} isFetching={isFetching} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
12
frontend/src/pages/Access/index.tsx
Normal file
12
frontend/src/pages/Access/index.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import { HasPermission } from "src/components";
|
||||
import TableWrapper from "./TableWrapper";
|
||||
|
||||
const Access = () => {
|
||||
return (
|
||||
<HasPermission permission="accessLists" type="view">
|
||||
<TableWrapper />
|
||||
</HasPermission>
|
||||
);
|
||||
};
|
||||
|
||||
export default Access;
|
||||
Reference in New Issue
Block a user