Table improvements, add modals
This commit is contained in:
Jamie Curnow
@ -1,15 +1,33 @@
|
||||
import { Heading } from "@chakra-ui/react";
|
||||
import { useState } from "react";
|
||||
|
||||
import { Heading, HStack } from "@chakra-ui/react";
|
||||
import { HelpDrawer, PrettyButton } from "components";
|
||||
import { intl } from "locale";
|
||||
import { AccessListCreateModal } from "modals";
|
||||
|
||||
import TableWrapper from "./TableWrapper";
|
||||
|
||||
function AccessLists() {
|
||||
const [createShown, setCreateShown] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Heading mb={2}>
|
||||
{intl.formatMessage({ id: "access-lists.title" })}
|
||||
</Heading>
|
||||
<TableWrapper />
|
||||
<HStack mx={6} my={4} justifyContent="space-between">
|
||||
<Heading mb={2}>
|
||||
{intl.formatMessage({ id: "access-lists.title" })}
|
||||
</Heading>
|
||||
<HStack>
|
||||
<HelpDrawer section="Access-Lists" />
|
||||
<PrettyButton size="sm" onClick={() => setCreateShown(true)}>
|
||||
{intl.formatMessage({ id: "access-list.create" })}
|
||||
</PrettyButton>
|
||||
</HStack>
|
||||
</HStack>
|
||||
<TableWrapper onCreateClick={() => setCreateShown(true)} />
|
||||
<AccessListCreateModal
|
||||
isOpen={createShown}
|
||||
onClose={() => setCreateShown(false)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,48 +1,40 @@
|
||||
import { useEffect, useMemo } from "react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
|
||||
import {
|
||||
tableEvents,
|
||||
ActionsFormatter,
|
||||
GravatarFormatter,
|
||||
UpstreamStatusFormatter,
|
||||
IDFormatter,
|
||||
TableFilter,
|
||||
TableLayout,
|
||||
TablePagination,
|
||||
TableSortBy,
|
||||
TextFilter,
|
||||
UpstreamStatusFormatter,
|
||||
} from "components";
|
||||
import { intl } from "locale";
|
||||
import { FiEdit } from "react-icons/fi";
|
||||
import { UpstreamEditModal, UpstreamNginxConfigModal } from "modals";
|
||||
import { FiEdit, FiHardDrive } from "react-icons/fi";
|
||||
import { useSortBy, useFilters, useTable, usePagination } from "react-table";
|
||||
|
||||
const rowActions = [
|
||||
{
|
||||
title: intl.formatMessage({ id: "action.edit" }),
|
||||
onClick: (e: any, data: any) => {
|
||||
alert(JSON.stringify(data, null, 2));
|
||||
},
|
||||
icon: <FiEdit />,
|
||||
show: (data: any) => !data.isSystem,
|
||||
},
|
||||
];
|
||||
|
||||
export interface UpstreamsTableProps {
|
||||
export interface TableProps {
|
||||
data: any;
|
||||
pagination: TablePagination;
|
||||
sortBy: TableSortBy[];
|
||||
filters: TableFilter[];
|
||||
onTableEvent: any;
|
||||
}
|
||||
function UpstreamsTable({
|
||||
function Table({
|
||||
data,
|
||||
pagination,
|
||||
onTableEvent,
|
||||
sortBy,
|
||||
filters,
|
||||
}: UpstreamsTableProps) {
|
||||
}: TableProps) {
|
||||
const [editId, setEditId] = useState(0);
|
||||
const [configId, setConfigId] = useState(0);
|
||||
const [columns, tableData] = useMemo(() => {
|
||||
const columns: any[] = [
|
||||
const columns: any = [
|
||||
{
|
||||
accessor: "user.gravatarUrl",
|
||||
Cell: GravatarFormatter(),
|
||||
@ -73,8 +65,19 @@ function UpstreamsTable({
|
||||
{
|
||||
id: "actions",
|
||||
accessor: "id",
|
||||
Cell: ActionsFormatter(rowActions),
|
||||
className: "w-80",
|
||||
Cell: ActionsFormatter([
|
||||
{
|
||||
title: intl.formatMessage({ id: "action.edit" }),
|
||||
onClick: (e: any, { id }: any) => setEditId(id),
|
||||
icon: <FiEdit />,
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: "action.nginx-config" }),
|
||||
onClick: (e: any, { id }: any) => setConfigId(id),
|
||||
icon: <FiHardDrive />,
|
||||
},
|
||||
]),
|
||||
},
|
||||
];
|
||||
return [columns, data];
|
||||
@ -150,7 +153,25 @@ function UpstreamsTable({
|
||||
});
|
||||
}, [onTableEvent, tableInstance.state.filters]);
|
||||
|
||||
return <TableLayout pagination={pagination} {...tableInstance} />;
|
||||
return (
|
||||
<>
|
||||
<TableLayout pagination={pagination} {...tableInstance} />
|
||||
{editId ? (
|
||||
<UpstreamEditModal
|
||||
isOpen
|
||||
editId={editId}
|
||||
onClose={() => setEditId(0)}
|
||||
/>
|
||||
) : null}
|
||||
{configId ? (
|
||||
<UpstreamNginxConfigModal
|
||||
isOpen
|
||||
upstreamId={configId}
|
||||
onClose={() => setConfigId(0)}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export { UpstreamsTable };
|
||||
export default Table;
|
||||
87
frontend/src/pages/Upstreams/TableWrapper.tsx
Normal file
87
frontend/src/pages/Upstreams/TableWrapper.tsx
Normal file
@ -0,0 +1,87 @@
|
||||
import { useEffect, useReducer, useState } from "react";
|
||||
|
||||
import { Alert, AlertIcon } from "@chakra-ui/react";
|
||||
import { EmptyList, SpinnerPage, tableEventReducer } from "components";
|
||||
import { useUpstreams } from "hooks";
|
||||
import { intl } from "locale";
|
||||
|
||||
import Table from "./Table";
|
||||
|
||||
const initialState = {
|
||||
offset: 0,
|
||||
limit: 10,
|
||||
sortBy: [
|
||||
{
|
||||
id: "name",
|
||||
desc: false,
|
||||
},
|
||||
],
|
||||
filters: [],
|
||||
};
|
||||
|
||||
interface TableWrapperProps {
|
||||
onCreateClick: () => void;
|
||||
}
|
||||
function TableWrapper({ onCreateClick }: TableWrapperProps) {
|
||||
const [{ offset, limit, sortBy, filters }, dispatch] = useReducer(
|
||||
tableEventReducer,
|
||||
initialState,
|
||||
);
|
||||
|
||||
const [tableData, setTableData] = useState(null);
|
||||
const { isFetching, isLoading, isError, error, data } = useUpstreams(
|
||||
offset,
|
||||
limit,
|
||||
sortBy,
|
||||
filters,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setTableData(data as any);
|
||||
}, [data]);
|
||||
|
||||
if (isFetching || isLoading || !tableData) {
|
||||
return <SpinnerPage />;
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<Alert status="error">
|
||||
<AlertIcon />
|
||||
{error?.message || "Unknown error"}
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
|
||||
if (isFetching || isLoading || !tableData) {
|
||||
return <SpinnerPage />;
|
||||
}
|
||||
|
||||
// When there are no items and no filters active, show the nicer empty view
|
||||
if (data?.total === 0 && filters?.length === 0) {
|
||||
return (
|
||||
<EmptyList
|
||||
title={intl.formatMessage({ id: "create-upstream-title" })}
|
||||
summary={intl.formatMessage({ id: "create-hint" })}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const pagination = {
|
||||
offset: data?.offset || initialState.offset,
|
||||
limit: data?.limit || initialState.limit,
|
||||
total: data?.total || 0,
|
||||
};
|
||||
|
||||
return (
|
||||
<Table
|
||||
data={data?.items || []}
|
||||
pagination={pagination}
|
||||
sortBy={sortBy}
|
||||
filters={filters}
|
||||
onTableEvent={dispatch}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default TableWrapper;
|
||||
@ -1,80 +1,14 @@
|
||||
import { useEffect, useReducer, useState } from "react";
|
||||
import { useState } from "react";
|
||||
|
||||
import { Alert, AlertIcon, Heading, HStack } from "@chakra-ui/react";
|
||||
import {
|
||||
EmptyList,
|
||||
PrettyButton,
|
||||
SpinnerPage,
|
||||
tableEventReducer,
|
||||
} from "components";
|
||||
import { useUpstreams } from "hooks";
|
||||
import { Heading, HStack } from "@chakra-ui/react";
|
||||
import { HelpDrawer, PrettyButton } from "components";
|
||||
import { intl } from "locale";
|
||||
import { UpstreamCreateModal } from "modals";
|
||||
|
||||
import { UpstreamsTable } from "./UpstreamsTable";
|
||||
|
||||
const initialState = {
|
||||
offset: 0,
|
||||
limit: 10,
|
||||
sortBy: [
|
||||
{
|
||||
id: "name",
|
||||
desc: false,
|
||||
},
|
||||
],
|
||||
filters: [],
|
||||
};
|
||||
import TableWrapper from "./TableWrapper";
|
||||
|
||||
function Upstreams() {
|
||||
const [{ offset, limit, sortBy, filters }, dispatch] = useReducer(
|
||||
tableEventReducer,
|
||||
initialState,
|
||||
);
|
||||
|
||||
const [tableData, setTableData] = useState(null);
|
||||
const { isFetching, isLoading, error, data } = useUpstreams(
|
||||
offset,
|
||||
limit,
|
||||
sortBy,
|
||||
filters,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setTableData(data as any);
|
||||
}, [data]);
|
||||
|
||||
if (error || (!tableData && !isFetching && !isLoading)) {
|
||||
return (
|
||||
<Alert status="error">
|
||||
<AlertIcon />
|
||||
{error?.message || "Unknown error"}
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
|
||||
if (isFetching || isLoading || !tableData) {
|
||||
return <SpinnerPage />;
|
||||
}
|
||||
|
||||
// When there are no items and no filters active, show the nicer empty view
|
||||
if (data?.total === 0 && filters?.length === 0) {
|
||||
return (
|
||||
<EmptyList
|
||||
title={intl.formatMessage({ id: "create-upstream-title" })}
|
||||
summary={intl.formatMessage({ id: "create-hint" })}
|
||||
createButton={
|
||||
<PrettyButton mt={5}>
|
||||
{intl.formatMessage({ id: "lets-go" })}
|
||||
</PrettyButton>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const pagination = {
|
||||
offset: data?.offset || initialState.offset,
|
||||
limit: data?.limit || initialState.limit,
|
||||
total: data?.total || 0,
|
||||
};
|
||||
const [createShown, setCreateShown] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -82,16 +16,17 @@ function Upstreams() {
|
||||
<Heading mb={2}>
|
||||
{intl.formatMessage({ id: "upstreams.title" })}
|
||||
</Heading>
|
||||
<PrettyButton size="sm">
|
||||
{intl.formatMessage({ id: "create-upstream" })}
|
||||
</PrettyButton>
|
||||
<HStack>
|
||||
<HelpDrawer section="Upstreams" />
|
||||
<PrettyButton size="sm" onClick={() => setCreateShown(true)}>
|
||||
{intl.formatMessage({ id: "upstream.create" })}
|
||||
</PrettyButton>
|
||||
</HStack>
|
||||
</HStack>
|
||||
<UpstreamsTable
|
||||
data={data?.items || []}
|
||||
pagination={pagination}
|
||||
sortBy={sortBy}
|
||||
filters={filters}
|
||||
onTableEvent={dispatch}
|
||||
<TableWrapper onCreateClick={() => setCreateShown(true)} />
|
||||
<UpstreamCreateModal
|
||||
isOpen={createShown}
|
||||
onClose={() => setCreateShown(false)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user