umami/components/pages/settings/teams/TeamWebsitesTable.js

103 lines
2.8 KiB
JavaScript
Raw Normal View History

import Link from 'next/link';
import {
Table,
TableHeader,
TableBody,
TableRow,
TableCell,
TableColumn,
Button,
Text,
Icon,
Icons,
Flexbox,
} from 'react-basics';
import useUser from 'hooks/useUser';
import useApi from 'hooks/useApi';
2023-03-22 22:05:55 +01:00
import useMessages from 'hooks/useMessages';
2023-03-11 02:49:19 +01:00
export default function TeamWebsitesTable({ data = [], onSave }) {
2023-03-22 22:05:55 +01:00
const { formatMessage, labels } = useMessages();
const { user } = useUser();
const { del, useMutation } = useApi();
2023-03-11 02:49:19 +01:00
const { mutate } = useMutation(({ teamWebsiteId }) => del(`/teamWebsites/${teamWebsiteId}`));
const columns = [
2023-03-11 02:49:19 +01:00
{ name: 'name', label: formatMessage(labels.name) },
{ name: 'domain', label: formatMessage(labels.domain) },
{ name: 'action', label: ' ' },
];
const handleRemoveWebsite = teamWebsiteId => {
mutate(
{ teamWebsiteId },
{
onSuccess: async () => {
onSave();
},
},
);
};
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 { id: teamWebsiteId } = row;
const { id: websiteId, name, domain, userId } = row.website;
const { teamUser } = row.team;
const owner = teamUser[0];
const canRemove = user.id === userId || user.id === owner.userId;
row.name = name;
row.domain = domain;
row.action = (
<Flexbox flex={1} justifyContent="end" gap={10}>
<Link href={`/websites/${websiteId}`} target="_blank">
<Button>
<Icon>
<Icons.External />
</Icon>
<Text>{formatMessage(labels.view)}</Text>
</Button>
</Link>
{canRemove && (
<Button onClick={() => handleRemoveWebsite(teamWebsiteId)}>
<Icon>
<Icons.Trash />
</Icon>
<Text>{formatMessage(labels.remove)}</Text>
</Button>
)}
</Flexbox>
);
return (
<TableRow key={rowIndex} data={row} keys={keys}>
{(data, key, colIndex) => {
return (
<TableCell key={colIndex} style={{ ...columns[colIndex]?.style }}>
<Flexbox flex={1} alignItems="center">
{data[key]}
</Flexbox>
</TableCell>
);
}}
</TableRow>
);
}}
</TableBody>
</Table>
);
}