2023-04-02 21:24:50 +02:00
|
|
|
import useMessages from 'hooks/useMessages';
|
|
|
|
import useUser from 'hooks/useUser';
|
2023-03-09 21:42:12 +01:00
|
|
|
import Link from 'next/link';
|
|
|
|
import {
|
2023-04-02 21:24:50 +02:00
|
|
|
Button,
|
|
|
|
Flexbox,
|
|
|
|
Icon,
|
|
|
|
Icons,
|
2023-03-09 21:42:12 +01:00
|
|
|
Table,
|
|
|
|
TableBody,
|
|
|
|
TableCell,
|
|
|
|
TableColumn,
|
2023-04-02 21:24:50 +02:00
|
|
|
TableHeader,
|
|
|
|
TableRow,
|
2023-03-09 21:42:12 +01:00
|
|
|
Text,
|
|
|
|
} from 'react-basics';
|
2023-04-02 21:24:50 +02:00
|
|
|
import TeamWebsiteRemoveButton from './TeamWebsiteRemoveButton';
|
2023-03-09 21:42:12 +01:00
|
|
|
|
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();
|
2023-03-09 21:42:12 +01:00
|
|
|
const { user } = useUser();
|
|
|
|
const columns = [
|
2023-03-11 02:49:19 +01:00
|
|
|
{ name: 'name', label: formatMessage(labels.name) },
|
2023-03-09 21:42:12 +01:00
|
|
|
{ name: 'domain', label: formatMessage(labels.domain) },
|
|
|
|
{ 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 { 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 && (
|
2023-04-02 21:24:50 +02:00
|
|
|
<TeamWebsiteRemoveButton
|
|
|
|
teamWebsiteId={teamWebsiteId}
|
|
|
|
onSave={onSave}
|
|
|
|
></TeamWebsiteRemoveButton>
|
2023-03-09 21:42:12 +01:00
|
|
|
)}
|
|
|
|
</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>
|
|
|
|
);
|
|
|
|
}
|