watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-07 06:07:17 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Added SettingsTable.

Browse source
This commit is contained in:
Mike Cao 2023-04-12 13:40:19 -07:00
parent f84e41e198
commit e2fcd40c2b
19 changed files with 335 additions and 300 deletions
Download patch file Download diff file Expand all files Collapse all files

146
components/pages/settings/users/UsersTable.js
View file

@ -1,109 +1,71 @@
import {
Button,
Text,
Icon,
Table,
TableBody,
TableCell,
TableColumn,
TableHeader,
TableRow,
Flexbox,
Icons,
ModalTrigger,
Modal,
} from 'react-basics';
import { Button, Text, Icon, Icons, ModalTrigger, Modal } from 'react-basics';
import { formatDistance } from 'date-fns';
import Link from 'next/link';
import useUser from 'hooks/useUser';
import UserDeleteForm from './UserDeleteForm';
import { ROLES } from 'lib/constants';
import useMessages from 'hooks/useMessages';
import SettingsTable from 'components/common/SettingsTable';
export default function UsersTable({ data = [], onDelete }) {
const { formatMessage, labels } = useMessages();
const { user } = useUser();
const columns = [
{ name: 'username', label: formatMessage(labels.username), style: { flex: 2 } },
{ name: 'role', label: formatMessage(labels.role), style: { flex: 1 } },
{ name: 'created', label: formatMessage(labels.created), style: { flex: 1 } },
{ name: 'action', label: ' ', style: { flex: 2 } },
{ name: 'username', label: formatMessage(labels.username), style: { flex: 1.5 } },
{ name: 'role', label: formatMessage(labels.role) },
{ name: 'created', label: formatMessage(labels.created) },
{ name: 'action', label: ' ' },
];
return (
<Table columns={columns} rows={data}>
<TableHeader>
{(column, index) => {
return (
<TableColumn key={index} style={{ ...column.style }}>
{column.label}
</TableColumn>
);
}}
</TableHeader>
<TableBody>
{(row, keys, rowIndex) => {
const rowData = {
...row,
created: formatDistance(new Date(row.createdAt), new Date(), {
addSuffix: true,
}),
role: formatMessage(
labels[Object.keys(ROLES).find(key => ROLES[key] === row.role)] || labels.unknown,
),
action: (
<>
<Link href={`/settings/users/${row.id}`}>
<Button>
<Icon>
<Icons.Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</Button>
</Link>
<ModalTrigger disabled={row.id === user.id}>
<Button disabled={row.id === user.id}>
<Icon>
<Icons.Trash />
</Icon>
<Text>{formatMessage(labels.delete)}</Text>
</Button>
<Modal>
{close => (
<UserDeleteForm
userId={row.id}
username={row.username}
onSave={onDelete}
onClose={close}
/>
)}
</Modal>
</ModalTrigger>
</>
),
};
const cellRender = (row, data, key) => {
if (key === 'created') {
return formatDistance(new Date(row.createdAt), new Date(), {
addSuffix: true,
});
}
if (key === 'role') {
return formatMessage(
labels[Object.keys(ROLES).find(key => ROLES[key] === row.role)] || labels.unknown,
);
}
return data[key];
};
return (
<TableRow key={rowIndex} data={rowData} keys={keys}>
{(data, key, colIndex) => {
return (
<TableCell key={colIndex} style={{ ...columns[colIndex]?.style }}>
<Flexbox
flex={1}
gap={10}
alignItems="center"
justifyContent={key === 'action' ? 'end' : undefined}
>
{data[key]}
</Flexbox>
</TableCell>
);
}}
</TableRow>
);
}}
</TableBody>
</Table>
return (
<SettingsTable data={data} columns={columns} cellRender={cellRender}>
{(row, keys, rowIndex) => {
return (
<>
<Link href={`/settings/users/${row.id}`}>
<Button>
<Icon>
<Icons.Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</Button>
</Link>
<ModalTrigger disabled={row.id === user.id}>
<Button disabled={row.id === user.id}>
<Icon>
<Icons.Trash />
</Icon>
<Text>{formatMessage(labels.delete)}</Text>
</Button>
<Modal>
{close => (
<UserDeleteForm
userId={row.id}
username={row.username}
onSave={onDelete}
onClose={close}
/>
)}
</Modal>
</ModalTrigger>
</>
);
}}
</SettingsTable>
);
}