umami/components/pages/settings/users/UsersTable.js

75 lines
2.3 KiB
JavaScript
Raw Normal View History

2023-04-12 22:40:19 +02:00
import { Button, Text, Icon, Icons, ModalTrigger, Modal } from 'react-basics';
2023-01-21 02:12:53 +01:00
import { formatDistance } from 'date-fns';
import Link from 'next/link';
2023-01-25 16:42:46 +01:00
import useUser from 'hooks/useUser';
import UserDeleteForm from './UserDeleteForm';
import { ROLES } from 'lib/constants';
2023-03-22 22:05:55 +01:00
import useMessages from 'hooks/useMessages';
2023-04-12 22:40:19 +02:00
import SettingsTable from 'components/common/SettingsTable';
2023-04-18 16:35:45 +02:00
import useLocale from 'hooks/useLocale';
2023-01-25 16:42:46 +01:00
export default function UsersTable({ data = [], onDelete }) {
2023-03-22 22:05:55 +01:00
const { formatMessage, labels } = useMessages();
2023-01-25 16:42:46 +01:00
const { user } = useUser();
2023-04-18 16:35:45 +02:00
const { dateLocale } = useLocale();
2023-01-25 16:42:46 +01:00
const columns = [
2023-04-12 22:40:19 +02:00
{ 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: ' ' },
2023-01-25 16:42:46 +01:00
];
2023-04-12 22:40:19 +02:00
const cellRender = (row, data, key) => {
if (key === 'created') {
return formatDistance(new Date(row.createdAt), new Date(), {
addSuffix: true,
2023-04-18 16:35:45 +02:00
locale: dateLocale,
2023-04-12 22:40:19 +02:00
});
}
if (key === 'role') {
return formatMessage(
labels[Object.keys(ROLES).find(key => ROLES[key] === row.role)] || labels.unknown,
);
}
return data[key];
};
2023-04-12 22:40:19 +02:00
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>
2023-04-14 02:20:42 +02:00
<Modal title={formatMessage(labels.deleteUser)}>
2023-04-12 22:40:19 +02:00
{close => (
<UserDeleteForm
userId={row.id}
username={row.username}
onSave={onDelete}
onClose={close}
/>
)}
</Modal>
</ModalTrigger>
</>
);
}}
</SettingsTable>
);
}