Updated tables. Added MenuButton.

This commit is contained in:
Mike Cao 2025-05-07 04:10:27 -07:00
parent 92b283486e
commit a15c7cd596
27 changed files with 334 additions and 207 deletions

View file

@ -1,6 +1,7 @@
import { useMessages, useModified } from '@/components/hooks';
import {
Button,
Row,
Pressable,
Icon,
Icons,
Modal,
@ -34,12 +35,14 @@ export function TeamMemberEditButton({
return (
<DialogTrigger>
<Button>
<Icon>
<Icons.Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</Button>
<Pressable>
<Row alignItems="center" gap>
<Icon>
<Icons.Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</Row>
</Pressable>
<Modal>
<Dialog title={formatMessage(labels.editMember)}>
{({ close }) => (

View file

@ -1,8 +1,9 @@
import { DataColumn, DataTable } from '@umami/react-zen';
import { DataColumn, DataTable, MenuItem } from '@umami/react-zen';
import { useMessages, useLoginQuery } from '@/components/hooks';
import { ROLES } from '@/lib/constants';
import { TeamMemberRemoveButton } from './TeamMemberRemoveButton';
import { TeamMemberEditButton } from './TeamMemberEditButton';
import { MenuButton } from '@/components/input/MenuButton';
export function TeamMembersTable({
data = [],
@ -37,14 +38,18 @@ export function TeamMembersTable({
allowEdit &&
row?.role !== ROLES.teamOwner &&
user?.id !== row?.user?.id && (
<>
<TeamMemberEditButton teamId={teamId} userId={row?.user?.id} role={row?.role} />
<TeamMemberRemoveButton
teamId={teamId}
userId={row?.user?.id}
userName={row?.user?.username}
/>
</>
<MenuButton>
<MenuItem>
<TeamMemberEditButton teamId={teamId} userId={row?.user?.id} role={row?.role} />
</MenuItem>
<MenuItem>
<TeamMemberRemoveButton
teamId={teamId}
userId={row?.user?.id}
userName={row?.user?.username}
/>
</MenuItem>
</MenuButton>
)
);
}}

View file

@ -1,7 +1,7 @@
import { DataColumn, DataTable, Icon, Text } from '@umami/react-zen';
import { DataColumn, DataTable, Icon, MenuItem, Text, Row } from '@umami/react-zen';
import { useLoginQuery, useMessages } from '@/components/hooks';
import { Icons } from '@/components/icons';
import { LinkButton } from '@/components/common/LinkButton';
import { MenuButton } from '@/components/input/MenuButton';
export function TeamWebsitesTable({
teamId,
@ -25,23 +25,28 @@ export function TeamWebsitesTable({
<DataColumn id="action" label=" " align="end">
{(row: any) => {
const { id: websiteId } = row;
return (
<>
{allowEdit && (teamId || user?.isAdmin) && (
<LinkButton href={`/teams/${teamId}/settings/websites/${websiteId}`}>
<MenuButton>
<MenuItem href={`/teams/${teamId}/websites/${websiteId}`}>
<Row alignItems="center" gap>
<Icon>
<Icons.Edit />
<Icons.Arrow />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</LinkButton>
<Text>{formatMessage(labels.view)}</Text>
</Row>
</MenuItem>
{allowEdit && (teamId || user?.isAdmin) && (
<MenuItem href={`/teams/${teamId}/settings/websites/${websiteId}`}>
<Row alignItems="center" gap>
<Icon>
<Icons.Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</Row>
</MenuItem>
)}
<LinkButton href={`/teams/${teamId}/websites/${websiteId}`}>
<Icon>
<Icons.Arrow />
</Icon>
<Text>{formatMessage(labels.view)}</Text>
</LinkButton>
</>
</MenuButton>
);
}}
</DataColumn>