umami/components/pages/settings/teams/TeamWebsitesTable.js
2023-08-10 13:26:33 -07:00

72 lines
2.0 KiB
JavaScript

import useMessages from 'hooks/useMessages';
import useUser from 'hooks/useUser';
import Link from 'next/link';
import { Button, Icon, Icons, Text } from 'react-basics';
import TeamWebsiteRemoveButton from './TeamWebsiteRemoveButton';
import SettingsTable from 'components/common/SettingsTable';
import useConfig from 'hooks/useConfig';
export function TeamWebsitesTable({
data = [],
onSave,
filterValue,
onFilterChange,
onPageChange,
onPageSizeChange,
}) {
const { formatMessage, labels } = useMessages();
const { openExternal } = useConfig();
const { user } = useUser();
const columns = [
{ name: 'name', label: formatMessage(labels.name) },
{ name: 'domain', label: formatMessage(labels.domain) },
{ name: 'action', label: ' ' },
];
return (
<SettingsTable
columns={columns}
data={data}
showSearch={true}
showPaging={true}
onFilterChange={onFilterChange}
onPageChange={onPageChange}
onPageSizeChange={onPageSizeChange}
filterValue={filterValue}
>
{row => {
const { id: teamId, teamUser } = row.teamWebsite[0].team;
const { id: websiteId, name, domain, userId } = row;
const owner = teamUser[0];
const canRemove = user.id === userId || user.id === owner.userId;
row.name = name;
row.domain = domain;
return (
<>
<Link href={`/websites/${websiteId}`} target={openExternal ? '_blank' : null}>
<Button>
<Icon>
<Icons.External />
</Icon>
<Text>{formatMessage(labels.view)}</Text>
</Button>
</Link>
{canRemove && (
<TeamWebsiteRemoveButton
teamId={teamId}
websiteId={websiteId}
onSave={onSave}
></TeamWebsiteRemoveButton>
)}
</>
);
}}
</SettingsTable>
);
}
export default TeamWebsitesTable;