watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-13 17:15:37 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Added useFilterQuery. Converted websites and reports pages.

Browse source
This commit is contained in:
Mike Cao 2023-09-26 23:20:29 -07:00
parent 6846355c63
commit 7e626dcd52
29 changed files with 373 additions and 499 deletions
Download patch file Download diff file Expand all files Collapse all files

176
src/components/pages/settings/websites/WebsitesTable.js
View file

@ -1,154 +1,58 @@
import Link from 'next/link';
import { Button, Text, Icon, Icons, GridTable, GridColumn } from 'react-basics';
import SettingsTable from 'components/common/SettingsTable';
import Empty from 'components/common/Empty';
import { Button, Text, Icon, Icons, GridTable, GridColumn, Flexbox } from 'react-basics';
import useMessages from 'components/hooks/useMessages';
import useUser from 'components/hooks/useUser';
import DataTable, { DataTableStyles } from 'components/common/DataTable';
export function WebsitesTable({
data = [],
showTeam,
showEditButton,
openExternal = false,
onChange,
}) {
export function WebsitesTable({ data = [], showTeam, showEditButton }) {
const { formatMessage, labels } = useMessages();
const { user } = useUser();
const showTable = data.length !== 0;
return (
<DataTable onChange={onChange}>
{showTable && (
<GridTable data={data}>
<GridColumn name="name" label={formatMessage(labels.name)} />
<GridColumn name="domain" label={formatMessage(labels.domain)} />
{showTeam && (
<GridColumn name="teamName" label={formatMessage(labels.teamName)}>
{row => row.teamWebsite[0]?.team.name}
</GridColumn>
)}
{showTeam && (
<GridColumn name="owner" label={formatMessage(labels.owner)}>
{row => row.user.username}
</GridColumn>
)}
<GridColumn name="action" label=" " className={DataTableStyles.action}>
{row => {
const {
id,
user: { id: ownerId },
} = row;
return (
<>
{showEditButton && (!showTeam || ownerId === user.id) && (
<Link href={`/settings/websites/${id}`}>
<Button>
<Icon>
<Icons.Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</Button>
</Link>
)}
<Link href={`/websites/${id}`} target={openExternal ? '_blank' : null}>
<Button>
<Icon>
<Icons.External />
</Icon>
<Text>{formatMessage(labels.view)}</Text>
</Button>
</Link>
</>
);
}}
</GridColumn>
</GridTable>
<GridTable data={data}>
<GridColumn name="name" label={formatMessage(labels.name)} />
<GridColumn name="domain" label={formatMessage(labels.domain)} />
{showTeam && (
<GridColumn name="teamName" label={formatMessage(labels.teamName)}>
{row => row.teamWebsite[0]?.team.name}
</GridColumn>
)}
</DataTable>
);
}
{showTeam && (
<GridColumn name="owner" label={formatMessage(labels.owner)}>
{row => row.user.username}
</GridColumn>
)}
<GridColumn name="action" label=" " alignment="end">
{row => {
const {
id,
user: { id: ownerId },
} = row;
export function WebsitesTable2({
data = [],
filterValue,
onFilterChange,
onPageChange,
onPageSizeChange,
showTeam,
showEditButton,
openExternal = false,
}) {
const { formatMessage, labels } = useMessages();
const { user } = useUser();
const showTable = data && (filterValue || data?.data?.length !== 0);
const teamColumns = [
{ name: 'teamName', label: formatMessage(labels.teamName) },
{ name: 'owner', label: formatMessage(labels.owner) },
];
const columns = [
{ name: 'name', label: formatMessage(labels.name) },
{ name: 'domain', label: formatMessage(labels.domain) },
...(showTeam ? teamColumns : []),
{ name: 'action', label: ' ' },
];
return (
<>
{showTable && (
<SettingsTable
columns={columns}
data={data}
showSearch={true}
showPaging={true}
onFilterChange={onFilterChange}
onPageChange={onPageChange}
onPageSizeChange={onPageSizeChange}
filterValue={filterValue}
>
{row => {
const {
id,
teamWebsite,
user: { username, id: ownerId },
} = row;
if (showTeam) {
row.teamName = teamWebsite[0]?.team.name;
row.owner = username;
}
return (
<>
{showEditButton && (!showTeam || ownerId === user.id) && (
<Link href={`/settings/websites/${id}`}>
<Button>
<Icon>
<Icons.Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</Button>
</Link>
)}
<Link href={`/websites/${id}`} target={openExternal ? '_blank' : null}>
return (
<Flexbox gap={10}>
{showEditButton && (!showTeam || ownerId === user.id) && (
<Link href={`/settings/websites/${id}`}>
<Button>
<Icon>
<Icons.External />
<Icons.Edit />
</Icon>
<Text>{formatMessage(labels.view)}</Text>
<Text>{formatMessage(labels.edit)}</Text>
</Button>
</Link>
</>
);
}}
</SettingsTable>
)}
{!showTable && <Empty />}
</>
)}
<Link href={`/websites/${id}`}>
<Button>
<Icon>
<Icons.External />
</Icon>
<Text>{formatMessage(labels.view)}</Text>
</Button>
</Link>
</Flexbox>
);
}}
</GridColumn>
</GridTable>
);
}