2023-08-14 07:32:25 +02:00
|
|
|
import ConfirmDeleteForm from 'components/common/ConfirmDeleteForm';
|
2023-07-30 09:11:26 +02:00
|
|
|
import LinkButton from 'components/common/LinkButton';
|
2023-08-21 11:06:09 +02:00
|
|
|
import { useMessages } from 'components/hooks';
|
|
|
|
import useUser from 'components/hooks/useUser';
|
2023-09-27 08:20:29 +02:00
|
|
|
import {
|
|
|
|
Button,
|
|
|
|
Flexbox,
|
|
|
|
GridColumn,
|
|
|
|
GridTable,
|
|
|
|
Icon,
|
|
|
|
Icons,
|
|
|
|
Modal,
|
|
|
|
ModalTrigger,
|
|
|
|
Text,
|
|
|
|
} from 'react-basics';
|
2023-09-01 14:25:13 +02:00
|
|
|
import { REPORT_TYPES } from 'lib/constants';
|
2023-06-15 12:27:41 +02:00
|
|
|
|
2023-09-27 08:20:29 +02:00
|
|
|
export function ReportsTable({ data = [], onDelete, showDomain }) {
|
2023-06-15 12:27:41 +02:00
|
|
|
const { formatMessage, labels } = useMessages();
|
2023-08-14 07:32:25 +02:00
|
|
|
const { user } = useUser();
|
2023-06-15 12:27:41 +02:00
|
|
|
|
2023-09-27 08:20:29 +02:00
|
|
|
const handleConfirm = (id, callback) => {
|
|
|
|
onDelete?.(id, callback);
|
2023-07-30 09:11:26 +02:00
|
|
|
};
|
|
|
|
|
2023-06-15 12:27:41 +02:00
|
|
|
return (
|
2023-09-27 08:20:29 +02:00
|
|
|
<GridTable data={data}>
|
|
|
|
<GridColumn name="name" label={formatMessage(labels.name)} />
|
|
|
|
<GridColumn name="description" label={formatMessage(labels.description)} />
|
|
|
|
<GridColumn name="type" label={formatMessage(labels.type)}>
|
2023-07-30 09:11:26 +02:00
|
|
|
{row => {
|
2023-09-27 08:20:29 +02:00
|
|
|
return formatMessage(
|
|
|
|
labels[Object.keys(REPORT_TYPES).find(key => REPORT_TYPES[key] === row.type)],
|
|
|
|
);
|
|
|
|
}}
|
|
|
|
</GridColumn>
|
|
|
|
{showDomain && (
|
|
|
|
<GridColumn name="domain" label={formatMessage(labels.domain)}>
|
|
|
|
{row => row.website.domain}
|
|
|
|
</GridColumn>
|
|
|
|
)}
|
|
|
|
<GridColumn name="action" label="" alignment="end">
|
|
|
|
{row => {
|
|
|
|
const { id, name, userId, website } = row;
|
2023-07-30 09:11:26 +02:00
|
|
|
return (
|
|
|
|
<Flexbox gap={10}>
|
|
|
|
<LinkButton href={`/reports/${id}`}>{formatMessage(labels.view)}</LinkButton>
|
2023-09-27 08:20:29 +02:00
|
|
|
{(user.id === userId || user.id === website?.userId) && (
|
|
|
|
<ModalTrigger>
|
|
|
|
<Button>
|
|
|
|
<Icon>
|
|
|
|
<Icons.Trash />
|
|
|
|
</Icon>
|
|
|
|
<Text>{formatMessage(labels.delete)}</Text>
|
|
|
|
</Button>
|
|
|
|
<Modal>
|
|
|
|
{close => (
|
|
|
|
<ConfirmDeleteForm
|
|
|
|
name={name}
|
|
|
|
onConfirm={handleConfirm.bind(null, id, close)}
|
|
|
|
onClose={close}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</Modal>
|
|
|
|
</ModalTrigger>
|
|
|
|
)}
|
2023-07-30 09:11:26 +02:00
|
|
|
</Flexbox>
|
|
|
|
);
|
|
|
|
}}
|
2023-09-27 08:20:29 +02:00
|
|
|
</GridColumn>
|
|
|
|
</GridTable>
|
2023-06-15 12:27:41 +02:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default ReportsTable;
|