ThatGuyJack/nginx-proxy-manager
1
0
Fork 0
mirror of https://github.com/NginxProxyManager/nginx-proxy-manager.git synced 2025-11-01 16:23:33 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

More react

Browse Source 
- consolidated lang items
- proxy host paths work
This commit is contained in:
Jamie Curnow
2025-10-16 18:59:19 +10:00
parent 7af01d0fc7
commit f2b5b19a83
56 changed files with 946 additions and 928 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/src/pages/Access/Empty.tsx
View File

@@ -1,36 +0,0 @@
import type { Table as ReactTable } from "@tanstack/react-table";
import { Button } from "src/components";
import { T } from "src/locale";
interface Props {
tableInstance: ReactTable<any>;
onNew?: () => void;
isFiltered?: boolean;
}
export default function Empty({ tableInstance, onNew, isFiltered }: Props) {
return (
<tr>
<td colSpan={tableInstance.getVisibleFlatColumns().length}>
<div className="text-center my-4">
{isFiltered ? (
<h2>
<T id="empty-search" />
</h2>
) : (
<>
<h2>
<T id="access.empty" />
</h2>
<p className="text-muted">
<T id="empty-subtitle" />
</p>
<Button className="btn-cyan my-3" onClick={onNew}>
<T id="access.add" />
</Button>
</>
)}
</div>
</td>
</tr>
);
}

26
frontend/src/pages/Access/Table.tsx
View File

@@ -2,10 +2,9 @@ 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 { EmptyData, GravatarFormatter, ValueWithDateFormatter } from "src/components";
import { TableLayout } from "src/components/Table/TableLayout";
import { intl, T } from "src/locale";
import Empty from "./Empty";
interface Props {
data: AccessList[];
@@ -36,12 +35,12 @@ export default function Table({ data, isFetching, isFiltered, onEdit, onDelete,
columnHelper.accessor((row: any) => row.items, {
id: "items",
header: intl.formatMessage({ id: "column.authorization" }),
cell: (info: any) => <T id="access.auth-count" data={{ count: info.getValue().length }} />,
cell: (info: any) => <T id="access-list.auth-count" data={{ count: info.getValue().length }} />,
}),
columnHelper.accessor((row: any) => row.clients, {
id: "clients",
header: intl.formatMessage({ id: "column.access" }),
cell: (info: any) => <T id="access.access-count" data={{ count: info.getValue().length }} />,
cell: (info: any) => <T id="access-list.access-count" data={{ count: info.getValue().length }} />,
}),
columnHelper.accessor((row: any) => row.satisfyAny, {
id: "satisfyAny",
@@ -50,7 +49,7 @@ export default function Table({ data, isFetching, isFiltered, onEdit, onDelete,
}),
columnHelper.accessor((row: any) => row.proxyHostCount, {
id: "proxyHostCount",
header: intl.formatMessage({ id: "proxy-hosts.title" }),
header: intl.formatMessage({ id: "proxy-hosts" }),
cell: (info: any) => <T id="proxy-hosts.count" data={{ count: info.getValue() }} />,
}),
columnHelper.display({
@@ -68,7 +67,11 @@ export default function Table({ data, isFetching, isFiltered, onEdit, onDelete,
</button>
<div className="dropdown-menu dropdown-menu-end">
<span className="dropdown-header">
<T id="access.actions-title" data={{ id: info.row.original.id }} />
<T
id="object.actions-title"
tData={{ object: "access-list" }}
data={{ id: info.row.original.id }}
/>
</span>
<a
className="dropdown-item"
@@ -119,7 +122,16 @@ export default function Table({ data, isFetching, isFiltered, onEdit, onDelete,
return (
<TableLayout
tableInstance={tableInstance}
emptyState={<Empty tableInstance={tableInstance} onNew={onNew} isFiltered={isFiltered} />}
emptyState={
<EmptyData
object="access-list"
objects="access-lists"
tableInstance={tableInstance}
onNew={onNew}
isFiltered={isFiltered}
color="cyan"
/>
}
/>
);
}

12
frontend/src/pages/Access/TableWrapper.tsx
View File

@@ -4,9 +4,9 @@ import Alert from "react-bootstrap/Alert";
import { deleteAccessList } from "src/api/backend";
import { Button, LoadingPage } from "src/components";
import { useAccessLists } from "src/hooks";
import { intl, T } from "src/locale";
import { T } from "src/locale";
import { showAccessListModal, showDeleteConfirmModal } from "src/modals";
import { showSuccess } from "src/notifications";
import { showObjectSuccess } from "src/notifications";
import Table from "./Table";
export default function TableWrapper() {
@@ -23,7 +23,7 @@ export default function TableWrapper() {
const handleDelete = async (id: number) => {
await deleteAccessList(id);
showSuccess(intl.formatMessage({ id: "notification.access-deleted" }));
showObjectSuccess("access-list", "deleted");
};
let filtered = null;
@@ -44,7 +44,7 @@ export default function TableWrapper() {
<div className="row w-full">
<div className="col">
<h2 className="mt-1 mb-0">
<T id="access.title" />
<T id="access-lists" />
</h2>
</div>
{data?.length ? (
@@ -63,7 +63,7 @@ export default function TableWrapper() {
/>
</div>
<Button size="sm" className="btn-cyan" onClick={() => showAccessListModal("new")}>
<T id="access.add" />
<T id="object.add" tData={{ object: "access-list" }} />
</Button>
</div>
</div>
@@ -80,7 +80,7 @@ export default function TableWrapper() {
title: "access.delete.title",
onConfirm: () => handleDelete(id),
invalidations: [["access-lists"], ["access-list", id]],
children: <T id="access.delete.content" />,
children: <T id="object.delete.content" tData={{ object: "access-list" }} />,
})
}
onNew={() => showAccessListModal("new")}

2
frontend/src/pages/AuditLog/TableWrapper.tsx
View File

@@ -24,7 +24,7 @@ export default function TableWrapper() {
<div className="row w-full">
<div className="col">
<h2 className="mt-1 mb-0">
<T id="auditlog.title" />
<T id="auditlogs" />
</h2>
</div>
</div>

64
frontend/src/pages/Certificates/Empty.tsx
View File

@@ -1,64 +0,0 @@
import type { Table as ReactTable } from "@tanstack/react-table";
import { T } from "src/locale";
interface Props {
tableInstance: ReactTable<any>;
onNew?: () => void;
onNewCustom?: () => void;
isFiltered?: boolean;
}
export default function Empty({ tableInstance, onNew, onNewCustom, isFiltered }: Props) {
return (
<tr>
<td colSpan={tableInstance.getVisibleFlatColumns().length}>
<div className="text-center my-4">
{isFiltered ? (
<h2>
<T id="empty-search" />
</h2>
) : (
<>
<h2>
<T id="certificates.empty" />
</h2>
<p className="text-muted">
<T id="empty-subtitle" />
</p>
<div className="dropdown">
<button
type="button"
className="btn dropdown-toggle btn-pink my-3"
data-bs-toggle="dropdown"
>
<T id="certificates.add" />
</button>
<div className="dropdown-menu">
<a
className="dropdown-item"
href="#"
onClick={(e) => {
e.preventDefault();
onNew?.();
}}
>
<T id="lets-encrypt" />
</a>
<a
className="dropdown-item"
href="#"
onClick={(e) => {
e.preventDefault();
onNewCustom?.();
}}
>
<T id="certificates.custom" />
</a>
</div>
</div>
</>
)}
</div>
</td>
</tr>
);
}

56
frontend/src/pages/Certificates/Table.tsx
View File

@@ -2,10 +2,9 @@ import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-
import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
import { useMemo } from "react";
import type { Certificate } from "src/api/backend";
import { DomainsFormatter, GravatarFormatter } from "src/components";
import { DomainsFormatter, EmptyData, GravatarFormatter } from "src/components";
import { TableLayout } from "src/components/Table/TableLayout";
import { intl, T } from "src/locale";
import Empty from "./Empty";
interface Props {
data: Certificate[];
@@ -69,7 +68,11 @@ export default function Table({ data, isFetching }: Props) {
</button>
<div className="dropdown-menu dropdown-menu-end">
<span className="dropdown-header">
<T id="certificates.actions-title" data={{ id: info.row.original.id }} />
<T
id="object.actions-title"
tData={{ object: "certificate" }}
data={{ id: info.row.original.id }}
/>
</span>
<a className="dropdown-item" href="#">
<IconEdit size={16} />
@@ -107,5 +110,50 @@ export default function Table({ data, isFetching }: Props) {
enableSortingRemoval: false,
});
return <TableLayout tableInstance={tableInstance} emptyState={<Empty tableInstance={tableInstance} />} />;
const customAddBtn = (
<div className="dropdown">
<button type="button" className="btn dropdown-toggle btn-pink my-3" data-bs-toggle="dropdown">
<T id="object.add" tData={{ object: "certificate" }} />
</button>
<div className="dropdown-menu">
<a
className="dropdown-item"
href="#"
onClick={(e) => {
e.preventDefault();
// onNew();
}}
>
<T id="lets-encrypt" />
</a>
<a
className="dropdown-item"
href="#"
onClick={(e) => {
e.preventDefault();
// onNewCustom();
}}
>
<T id="certificates.custom" />
</a>
</div>
</div>
);
return (
<TableLayout
tableInstance={tableInstance}
emptyState={
<EmptyData
object="certificate"
objects="certificates"
tableInstance={tableInstance}
// onNew={onNew}
// isFiltered={isFiltered}
color="pink"
customAddBtn={customAddBtn}
/>
}
/>
);
}

4
frontend/src/pages/Certificates/TableWrapper.tsx
View File

@@ -29,7 +29,7 @@ export default function TableWrapper() {
<div className="row w-full">
<div className="col">
<h2 className="mt-1 mb-0">
<T id="certificates.title" />
<T id="certificates" />
</h2>
</div>
<div className="col-md-auto col-sm-12">
@@ -51,7 +51,7 @@ export default function TableWrapper() {
className="btn btn-sm dropdown-toggle btn-pink mt-1"
data-bs-toggle="dropdown"
>
<T id="certificates.add" />
<T id="object.add" tData={{ object: "certificate" }} />
</button>
<div className="dropdown-menu">
<a className="dropdown-item" href="#">

3
frontend/src/pages/Dashboard/index.tsx
View File

@@ -10,7 +10,7 @@ const Dashboard = () => {
return (
<div>
<h2>
<T id="dashboard.title" />
<T id="dashboard" />
</h2>
<div className="row row-deck row-cards">
<div className="col-12 my-4">
@@ -127,6 +127,7 @@ const Dashboard = () => {
- use syntax highligting for audit logs json output
- double check output of access field selection on proxy host dialog, after access lists are completed
- proxy host custom locations dialog
- check permissions in all places
More for api, then implement here:
- Properly implement refresh tokens

36
frontend/src/pages/Nginx/DeadHosts/Empty.tsx
View File

@@ -1,36 +0,0 @@
import type { Table as ReactTable } from "@tanstack/react-table";
import { Button } from "src/components";
import { T } from "src/locale";
interface Props {
tableInstance: ReactTable<any>;
onNew?: () => void;
isFiltered?: boolean;
}
export default function Empty({ tableInstance, onNew, isFiltered }: Props) {
return (
<tr>
<td colSpan={tableInstance.getVisibleFlatColumns().length}>
<div className="text-center my-4">
{isFiltered ? (
<h2>
<T id="empty-search" />
</h2>
) : (
<>
<h2>
<T id="dead-hosts.empty" />
</h2>
<p className="text-muted">
<T id="empty-subtitle" />
</p>
<Button className="btn-red my-3" onClick={onNew}>
<T id="dead-hosts.add" />
</Button>
</>
)}
</div>
</td>
</tr>
);
}

20
frontend/src/pages/Nginx/DeadHosts/Table.tsx
View File

@@ -2,10 +2,9 @@ import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-
import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
import { useMemo } from "react";
import type { DeadHost } from "src/api/backend";
import { CertificateFormatter, DomainsFormatter, GravatarFormatter, StatusFormatter } from "src/components";
import { CertificateFormatter, DomainsFormatter, EmptyData, GravatarFormatter, StatusFormatter } from "src/components";
import { TableLayout } from "src/components/Table/TableLayout";
import { intl, T } from "src/locale";
import Empty from "./Empty";
interface Props {
data: DeadHost[];
@@ -67,7 +66,11 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
</button>
<div className="dropdown-menu dropdown-menu-end">
<span className="dropdown-header">
<T id="dead-hosts.actions-title" data={{ id: info.row.original.id }} />
<T
id="object.actions-title"
tData={{ object: "dead-host" }}
data={{ id: info.row.original.id }}
/>
</span>
<a
className="dropdown-item"
@@ -129,7 +132,16 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
return (
<TableLayout
tableInstance={tableInstance}
emptyState={<Empty tableInstance={tableInstance} onNew={onNew} isFiltered={isFiltered} />}
emptyState={
<EmptyData
object="dead-host"
objects="dead-hosts"
tableInstance={tableInstance}
onNew={onNew}
isFiltered={isFiltered}
color="red"
/>
}
/>
);
}

16
frontend/src/pages/Nginx/DeadHosts/TableWrapper.tsx
View File

@@ -5,9 +5,9 @@ import Alert from "react-bootstrap/Alert";
import { deleteDeadHost, toggleDeadHost } from "src/api/backend";
import { Button, LoadingPage } from "src/components";
import { useDeadHosts } from "src/hooks";
import { intl, T } from "src/locale";
import { T } from "src/locale";
import { showDeadHostModal, showDeleteConfirmModal } from "src/modals";
import { showSuccess } from "src/notifications";
import { showObjectSuccess } from "src/notifications";
import Table from "./Table";
export default function TableWrapper() {
@@ -25,14 +25,14 @@ export default function TableWrapper() {
const handleDelete = async (id: number) => {
await deleteDeadHost(id);
showSuccess(intl.formatMessage({ id: "notification.host-deleted" }));
showObjectSuccess("dead-host", "deleted");
};
const handleDisableToggle = async (id: number, enabled: boolean) => {
await toggleDeadHost(id, enabled);
queryClient.invalidateQueries({ queryKey: ["dead-hosts"] });
queryClient.invalidateQueries({ queryKey: ["dead-host", id] });
showSuccess(intl.formatMessage({ id: enabled ? "notification.host-enabled" : "notification.host-disabled" }));
showObjectSuccess("dead-host", enabled ? "enabled" : "disabled");
};
let filtered = null;
@@ -53,7 +53,7 @@ export default function TableWrapper() {
<div className="row w-full">
<div className="col">
<h2 className="mt-1 mb-0">
<T id="dead-hosts.title" />
<T id="dead-hosts" />
</h2>
</div>
{data?.length ? (
@@ -72,7 +72,7 @@ export default function TableWrapper() {
/>
</div>
<Button size="sm" className="btn-red" onClick={() => showDeadHostModal("new")}>
<T id="dead-hosts.add" />
<T id="object.add" tData={{ object: "dead-host" }} />
</Button>
</div>
</div>
@@ -86,10 +86,10 @@ export default function TableWrapper() {
onEdit={(id: number) => showDeadHostModal(id)}
onDelete={(id: number) =>
showDeleteConfirmModal({
title: "dead-host.delete.title",
title: <T id="object.delete" tData={{ object: "dead-host" }} />,
onConfirm: () => handleDelete(id),
invalidations: [["dead-hosts"], ["dead-host", id]],
children: <T id="dead-host.delete.content" />,
children: <T id="object.delete.content" tData={{ object: "dead-host" }} />,
})
}
onDisableToggle={handleDisableToggle}

36
frontend/src/pages/Nginx/ProxyHosts/Empty.tsx
View File

@@ -1,36 +0,0 @@
import type { Table as ReactTable } from "@tanstack/react-table";
import { Button } from "src/components";
import { T } from "src/locale";
interface Props {
tableInstance: ReactTable<any>;
onNew?: () => void;
isFiltered?: boolean;
}
export default function Empty({ tableInstance, onNew, isFiltered }: Props) {
return (
<tr>
<td colSpan={tableInstance.getVisibleFlatColumns().length}>
<div className="text-center my-4">
{isFiltered ? (
<h2>
<T id="empty-search" />
</h2>
) : (
<>
<h2>
<T id="proxy-hosts.empty" />
</h2>
<p className="text-muted">
<T id="empty-subtitle" />
</p>
<Button className="btn-lime my-3" onClick={onNew}>
<T id="proxy-hosts.add" />
</Button>
</>
)}
</div>
</td>
</tr>
);
}

32
frontend/src/pages/Nginx/ProxyHosts/Table.tsx
View File

@@ -2,10 +2,16 @@ import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-
import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
import { useMemo } from "react";
import type { ProxyHost } from "src/api/backend";
import { CertificateFormatter, DomainsFormatter, GravatarFormatter, StatusFormatter } from "src/components";
import {
AccessListFormatter,
CertificateFormatter,
DomainsFormatter,
EmptyData,
GravatarFormatter,
StatusFormatter,
} from "src/components";
import { TableLayout } from "src/components/Table/TableLayout";
import { intl, T } from "src/locale";
import Empty from "./Empty";
interface Props {
data: ProxyHost[];
@@ -53,12 +59,11 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
return <CertificateFormatter certificate={info.getValue()} />;
},
}),
// TODO: formatter for access list
columnHelper.accessor((row: any) => row.access, {
columnHelper.accessor((row: any) => row.accessList, {
id: "accessList",
header: intl.formatMessage({ id: "column.access" }),
cell: (info: any) => {
return info.getValue();
return <AccessListFormatter access={info.getValue()} />;
},
}),
columnHelper.accessor((row: any) => row.enabled, {
@@ -83,7 +88,11 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
</button>
<div className="dropdown-menu dropdown-menu-end">
<span className="dropdown-header">
<T id="proxy-hosts.actions-title" data={{ id: info.row.original.id }} />
<T
id="object.actions-title"
tData={{ object: "proxy-host" }}
data={{ id: info.row.original.id }}
/>
</span>
<a
className="dropdown-item"
@@ -145,7 +154,16 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
return (
<TableLayout
tableInstance={tableInstance}
emptyState={<Empty tableInstance={tableInstance} onNew={onNew} isFiltered={isFiltered} />}
emptyState={
<EmptyData
object="proxy-host"
objects="proxy-hosts"
tableInstance={tableInstance}
onNew={onNew}
isFiltered={isFiltered}
color="lime"
/>
}
/>
);
}

12
frontend/src/pages/Nginx/ProxyHosts/TableWrapper.tsx
View File

@@ -5,9 +5,9 @@ import Alert from "react-bootstrap/Alert";
import { deleteProxyHost, toggleProxyHost } from "src/api/backend";
import { Button, LoadingPage } from "src/components";
import { useProxyHosts } from "src/hooks";
import { intl, T } from "src/locale";
import { T } from "src/locale";
import { showDeleteConfirmModal, showProxyHostModal } from "src/modals";
import { showSuccess } from "src/notifications";
import { showObjectSuccess } from "src/notifications";
import Table from "./Table";
export default function TableWrapper() {
@@ -25,14 +25,14 @@ export default function TableWrapper() {
const handleDelete = async (id: number) => {
await deleteProxyHost(id);
showSuccess(intl.formatMessage({ id: "notification.host-deleted" }));
showObjectSuccess("proxy-host", "deleted");
};
const handleDisableToggle = async (id: number, enabled: boolean) => {
await toggleProxyHost(id, enabled);
queryClient.invalidateQueries({ queryKey: ["proxy-hosts"] });
queryClient.invalidateQueries({ queryKey: ["proxy-host", id] });
showSuccess(intl.formatMessage({ id: enabled ? "notification.host-enabled" : "notification.host-disabled" }));
showObjectSuccess("proxy-host", enabled ? "enabled" : "disabled");
};
let filtered = null;
@@ -57,7 +57,7 @@ export default function TableWrapper() {
<div className="row w-full">
<div className="col">
<h2 className="mt-1 mb-0">
<T id="proxy-hosts.title" />
<T id="proxy-hosts" />
</h2>
</div>
{data?.length ? (
@@ -76,7 +76,7 @@ export default function TableWrapper() {
/>
</div>
<Button size="sm" className="btn-lime" onClick={() => showProxyHostModal("new")}>
<T id="proxy-hosts.add" />
<T id="object.add" tData={{ object: "proxy-host" }} />
</Button>
</div>
</div>

36
frontend/src/pages/Nginx/RedirectionHosts/Empty.tsx
View File

@@ -1,36 +0,0 @@
import type { Table as ReactTable } from "@tanstack/react-table";
import { Button } from "src/components";
import { T } from "src/locale";
interface Props {
tableInstance: ReactTable<any>;
onNew?: () => void;
isFiltered?: boolean;
}
export default function Empty({ tableInstance, onNew, isFiltered }: Props) {
return (
<tr>
<td colSpan={tableInstance.getVisibleFlatColumns().length}>
<div className="text-center my-4">
{isFiltered ? (
<h2>
<T id="empty-search" />
</h2>
) : (
<>
<h2>
<T id="redirection-hosts.empty" />
</h2>
<p className="text-muted">
<T id="empty-subtitle" />
</p>
<Button className="btn-yellow my-3" onClick={onNew}>
<T id="redirection-hosts.add" />
</Button>
</>
)}
</div>
</td>
</tr>
);
}

20
frontend/src/pages/Nginx/RedirectionHosts/Table.tsx
View File

@@ -2,10 +2,9 @@ import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-
import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
import { useMemo } from "react";
import type { RedirectionHost } from "src/api/backend";
import { CertificateFormatter, DomainsFormatter, GravatarFormatter, StatusFormatter } from "src/components";
import { CertificateFormatter, DomainsFormatter, EmptyData, GravatarFormatter, StatusFormatter } from "src/components";
import { TableLayout } from "src/components/Table/TableLayout";
import { intl, T } from "src/locale";
import Empty from "./Empty";
interface Props {
data: RedirectionHost[];
@@ -88,7 +87,11 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
</button>
<div className="dropdown-menu dropdown-menu-end">
<span className="dropdown-header">
<T id="redirection-hosts.actions-title" data={{ id: info.row.original.id }} />
<T
id="object.actions-title"
tData={{ object: "redirection-host" }}
data={{ id: info.row.original.id }}
/>
</span>
<a
className="dropdown-item"
@@ -150,7 +153,16 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
return (
<TableLayout
tableInstance={tableInstance}
emptyState={<Empty tableInstance={tableInstance} onNew={onNew} isFiltered={isFiltered} />}
emptyState={
<EmptyData
object="redirection-host"
objects="redirection-hosts"
tableInstance={tableInstance}
onNew={onNew}
isFiltered={isFiltered}
color="yellow"
/>
}
/>
);
}

16
frontend/src/pages/Nginx/RedirectionHosts/TableWrapper.tsx
View File

@@ -5,9 +5,9 @@ import Alert from "react-bootstrap/Alert";
import { deleteRedirectionHost, toggleRedirectionHost } from "src/api/backend";
import { Button, LoadingPage } from "src/components";
import { useRedirectionHosts } from "src/hooks";
import { intl, T } from "src/locale";
import { T } from "src/locale";
import { showDeleteConfirmModal, showRedirectionHostModal } from "src/modals";
import { showSuccess } from "src/notifications";
import { showObjectSuccess } from "src/notifications";
import Table from "./Table";
export default function TableWrapper() {
@@ -25,14 +25,14 @@ export default function TableWrapper() {
const handleDelete = async (id: number) => {
await deleteRedirectionHost(id);
showSuccess(intl.formatMessage({ id: "notification.host-deleted" }));
showObjectSuccess("redirection-host", "deleted");
};
const handleDisableToggle = async (id: number, enabled: boolean) => {
await toggleRedirectionHost(id, enabled);
queryClient.invalidateQueries({ queryKey: ["redirection-hosts"] });
queryClient.invalidateQueries({ queryKey: ["redirection-host", id] });
showSuccess(intl.formatMessage({ id: enabled ? "notification.host-enabled" : "notification.host-disabled" }));
showObjectSuccess("redirection-host", enabled ? "enabled" : "disabled");
};
let filtered = null;
@@ -56,7 +56,7 @@ export default function TableWrapper() {
<div className="row w-full">
<div className="col">
<h2 className="mt-1 mb-0">
<T id="redirection-hosts.title" />
<T id="redirection-hosts" />
</h2>
</div>
{data?.length ? (
@@ -79,7 +79,7 @@ export default function TableWrapper() {
className="btn-yellow"
onClick={() => showRedirectionHostModal("new")}
>
<T id="redirection-hosts.add" />
<T id="object.add" tData={{ object: "redirection-host" }} />
</Button>
</div>
</div>
@@ -93,10 +93,10 @@ export default function TableWrapper() {
onEdit={(id: number) => showRedirectionHostModal(id)}
onDelete={(id: number) =>
showDeleteConfirmModal({
title: "redirection-host.delete.title",
title: <T id="object.delete" tData={{ object: "redirection-host" }} />,
onConfirm: () => handleDelete(id),
invalidations: [["redirection-hosts"], ["redirection-host", id]],
children: <T id="redirection-host.delete.content" />,
children: <T id="object.delete.content" tData={{ object: "redirection-host" }} />,
})
}
onDisableToggle={handleDisableToggle}

36
frontend/src/pages/Nginx/Streams/Empty.tsx
View File

@@ -1,36 +0,0 @@
import type { Table as ReactTable } from "@tanstack/react-table";
import { Button } from "src/components";
import { T } from "src/locale";
interface Props {
tableInstance: ReactTable<any>;
onNew?: () => void;
isFiltered?: boolean;
}
export default function Empty({ tableInstance, onNew, isFiltered }: Props) {
return (
<tr>
<td colSpan={tableInstance.getVisibleFlatColumns().length}>
<div className="text-center my-4">
{isFiltered ? (
<h2>
<T id="empty-search" />
</h2>
) : (
<>
<h2>
<T id="streams.empty" />
</h2>
<p className="text-muted">
<T id="empty-subtitle" />
</p>
<Button className="btn-blue my-3" onClick={onNew}>
<T id="streams.add" />
</Button>
</>
)}
</div>
</td>
</tr>
);
}

26
frontend/src/pages/Nginx/Streams/Table.tsx
View File

@@ -2,10 +2,15 @@ import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-
import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
import { useMemo } from "react";
import type { Stream } from "src/api/backend";
import { CertificateFormatter, GravatarFormatter, StatusFormatter, ValueWithDateFormatter } from "src/components";
import {
CertificateFormatter,
EmptyData,
GravatarFormatter,
StatusFormatter,
ValueWithDateFormatter,
} from "src/components";
import { TableLayout } from "src/components/Table/TableLayout";
import { intl, T } from "src/locale";
import Empty from "./Empty";
interface Props {
data: Stream[];
@@ -96,7 +101,11 @@ export default function Table({ data, isFetching, isFiltered, onEdit, onDelete,
</button>
<div className="dropdown-menu dropdown-menu-end">
<span className="dropdown-header">
<T id="streams.actions-title" data={{ id: info.row.original.id }} />
<T
id="object.actions-title"
tData={{ object: "stream" }}
data={{ id: info.row.original.id }}
/>
</span>
<a
className="dropdown-item"
@@ -158,7 +167,16 @@ export default function Table({ data, isFetching, isFiltered, onEdit, onDelete,
return (
<TableLayout
tableInstance={tableInstance}
emptyState={<Empty tableInstance={tableInstance} onNew={onNew} isFiltered={isFiltered} />}
emptyState={
<EmptyData
object="stream"
objects="streams"
tableInstance={tableInstance}
onNew={onNew}
isFiltered={isFiltered}
color="blue"
/>
}
/>
);
}

18
frontend/src/pages/Nginx/Streams/TableWrapper.tsx
View File

@@ -5,9 +5,9 @@ import Alert from "react-bootstrap/Alert";
import { deleteStream, toggleStream } from "src/api/backend";
import { Button, LoadingPage } from "src/components";
import { useStreams } from "src/hooks";
import { intl, T } from "src/locale";
import { T } from "src/locale";
import { showDeleteConfirmModal, showStreamModal } from "src/modals";
import { showSuccess } from "src/notifications";
import { showObjectSuccess } from "src/notifications";
import Table from "./Table";
export default function TableWrapper() {
@@ -26,16 +26,14 @@ export default function TableWrapper() {
const handleDelete = async (id: number) => {
await deleteStream(id);
showSuccess(intl.formatMessage({ id: "notification.stream-deleted" }));
showObjectSuccess("stream", "deleted");
};
const handleDisableToggle = async (id: number, enabled: boolean) => {
await toggleStream(id, enabled);
queryClient.invalidateQueries({ queryKey: ["streams"] });
queryClient.invalidateQueries({ queryKey: ["stream", id] });
showSuccess(
intl.formatMessage({ id: enabled ? "notification.stream-enabled" : "notification.stream-disabled" }),
);
showObjectSuccess("stream", enabled ? "enabled" : "disabled");
};
let filtered = null;
@@ -60,7 +58,7 @@ export default function TableWrapper() {
<div className="row w-full">
<div className="col">
<h2 className="mt-1 mb-0">
<T id="streams.title" />
<T id="streams" />
</h2>
</div>
{data?.length ? (
@@ -79,7 +77,7 @@ export default function TableWrapper() {
/>
</div>
<Button size="sm" className="btn-blue" onClick={() => showStreamModal("new")}>
<T id="streams.add" />
<T id="object.add" tData={{ object: "stream" }} />
</Button>
</div>
</div>
@@ -93,10 +91,10 @@ export default function TableWrapper() {
onEdit={(id: number) => showStreamModal(id)}
onDelete={(id: number) =>
showDeleteConfirmModal({
title: "stream.delete.title",
title: <T id="object.delete" tData={{ object: "stream" }} />,
onConfirm: () => handleDelete(id),
invalidations: [["streams"], ["stream", id]],
children: <T id="stream.delete.content" />,
children: <T id="object.delete.content" tData={{ object: "stream" }} />,
})
}
onDisableToggle={handleDisableToggle}

2
frontend/src/pages/Settings/SettingTable.tsx
View File

@@ -9,7 +9,7 @@ export default function SettingTable() {
<div className="card-header">
<div className="row w-full">
<h2 className="mt-1 mb-0">
<T id="settings.title" />
<T id="settings" />
</h2>
</div>
</div>

36
frontend/src/pages/Users/Empty.tsx
View File

@@ -1,36 +0,0 @@
import type { Table as ReactTable } from "@tanstack/react-table";
import { Button } from "src/components";
import { T } from "src/locale";
interface Props {
tableInstance: ReactTable<any>;
onNewUser?: () => void;
isFiltered?: boolean;
}
export default function Empty({ tableInstance, onNewUser, isFiltered }: Props) {
return (
<tr>
<td colSpan={tableInstance.getVisibleFlatColumns().length}>
<div className="text-center my-4">
{isFiltered ? (
<h2>
<T id="empty-search" />
</h2>
) : (
<>
<h2>
<T id="users.empty" />
</h2>
<p className="text-muted">
<T id="empty-subtitle" />
</p>
<Button className="btn-orange my-3" onClick={onNewUser}>
<T id="users.add" />
</Button>
</>
)}
</div>
</td>
</tr>
);
}

21
frontend/src/pages/Users/Table.tsx
View File

@@ -4,6 +4,7 @@ import { useMemo } from "react";
import type { User } from "src/api/backend";
import {
EmailFormatter,
EmptyData,
EnabledFormatter,
GravatarFormatter,
RolesFormatter,
@@ -11,7 +12,6 @@ import {
} from "src/components";
import { TableLayout } from "src/components/Table/TableLayout";
import { intl, T } from "src/locale";
import Empty from "./Empty";
interface Props {
data: User[];
@@ -101,7 +101,11 @@ export default function Table({
</button>
<div className="dropdown-menu dropdown-menu-end">
<span className="dropdown-header">
<T id="users.actions-title" data={{ id: info.row.original.id }} />
<T
id="object.actions-title"
tData={{ object: "user" }}
data={{ id: info.row.original.id }}
/>
</span>
<a
className="dropdown-item"
@@ -112,7 +116,7 @@ export default function Table({
}}
>
<IconEdit size={16} />
<T id="user.edit" />
<T id="action.edit" />
</a>
{currentUserId !== info.row.original.id ? (
<>
@@ -189,7 +193,16 @@ export default function Table({
return (
<TableLayout
tableInstance={tableInstance}
emptyState={<Empty tableInstance={tableInstance} onNewUser={onNewUser} isFiltered={isFiltered} />}
emptyState={
<EmptyData
object="user"
objects="users"
tableInstance={tableInstance}
onNew={onNewUser}
isFiltered={isFiltered}
color="orange"
/>
}
/>
);
}

16
frontend/src/pages/Users/TableWrapper.tsx
View File

@@ -5,9 +5,9 @@ import Alert from "react-bootstrap/Alert";
import { deleteUser, toggleUser } from "src/api/backend";
import { Button, LoadingPage } from "src/components";
import { useUser, useUsers } from "src/hooks";
import { intl, T } from "src/locale";
import { T } from "src/locale";
import { showDeleteConfirmModal, showPermissionsModal, showSetPasswordModal, showUserModal } from "src/modals";
import { showSuccess } from "src/notifications";
import { showObjectSuccess } from "src/notifications";
import Table from "./Table";
export default function TableWrapper() {
@@ -26,14 +26,14 @@ export default function TableWrapper() {
const handleDelete = async (id: number) => {
await deleteUser(id);
showSuccess(intl.formatMessage({ id: "notification.user-deleted" }));
showObjectSuccess("user", "deleted");
};
const handleDisableToggle = async (id: number, enabled: boolean) => {
await toggleUser(id, enabled);
queryClient.invalidateQueries({ queryKey: ["users"] });
queryClient.invalidateQueries({ queryKey: ["user", id] });
showSuccess(intl.formatMessage({ id: enabled ? "notification.user-enabled" : "notification.user-disabled" }));
showObjectSuccess("user", enabled ? "enabled" : "disabled");
};
let filtered = null;
@@ -58,7 +58,7 @@ export default function TableWrapper() {
<div className="row w-full">
<div className="col">
<h2 className="mt-1 mb-0">
<T id="users.title" />
<T id="users" />
</h2>
</div>
{data?.length ? (
@@ -78,7 +78,7 @@ export default function TableWrapper() {
</div>
<Button size="sm" className="btn-orange" onClick={() => showUserModal("new")}>
<T id="users.add" />
<T id="object.add" tData={{ object: "user" }} />
</Button>
</div>
</div>
@@ -95,10 +95,10 @@ export default function TableWrapper() {
onSetPassword={(id: number) => showSetPasswordModal(id)}
onDeleteUser={(id: number) =>
showDeleteConfirmModal({
title: "user.delete.title",
title: <T id="object.delete" tData={{ object: "user" }} />,
onConfirm: () => handleDelete(id),
invalidations: [["users"], ["user", id]],
children: <T id="user.delete.content" />,
children: <T id="object.delete.content" tData={{ object: "user" }} />,
})
}
onDisableToggle={handleDisableToggle}