diff --git a/src/app/(main)/links/LinksDataTable.tsx b/src/app/(main)/links/LinksDataTable.tsx index 0b3d660b..87da5984 100644 --- a/src/app/(main)/links/LinksDataTable.tsx +++ b/src/app/(main)/links/LinksDataTable.tsx @@ -2,13 +2,13 @@ import { DataGrid } from '@/components/common/DataGrid'; import { useLinksQuery, useNavigation } from '@/components/hooks'; import { LinksTable } from './LinksTable'; -export function LinksDataTable() { +export function LinksDataTable({ showActions = false }: { showActions?: boolean }) { const { teamId } = useNavigation(); const query = useLinksQuery({ teamId }); return ( - {({ data }) => } + {({ data }) => } ); } diff --git a/src/app/(main)/links/LinksPage.tsx b/src/app/(main)/links/LinksPage.tsx index a6e4c7c4..cdaf8fce 100644 --- a/src/app/(main)/links/LinksPage.tsx +++ b/src/app/(main)/links/LinksPage.tsx @@ -4,21 +4,30 @@ import { LinksDataTable } from '@/app/(main)/links/LinksDataTable'; import { PageBody } from '@/components/common/PageBody'; import { PageHeader } from '@/components/common/PageHeader'; import { Panel } from '@/components/common/Panel'; -import { useMessages, useNavigation } from '@/components/hooks'; +import { useLoginQuery, useMessages, useNavigation, useTeamMembersQuery } from '@/components/hooks'; +import { ROLES } from '@/lib/constants'; import { LinkAddButton } from './LinkAddButton'; export function LinksPage() { + const { user } = useLoginQuery(); const { formatMessage, labels } = useMessages(); const { teamId } = useNavigation(); + const { data } = useTeamMembersQuery(teamId); + + const showActions = + (teamId && + data?.data.filter(team => team.userId === user.id && team.role !== ROLES.teamViewOnly) + .length > 0) || + (!teamId && user.role !== ROLES.viewOnly); return ( - + {showActions && } - + diff --git a/src/app/(main)/links/LinksTable.tsx b/src/app/(main)/links/LinksTable.tsx index a3b4a86a..62eb0fb8 100644 --- a/src/app/(main)/links/LinksTable.tsx +++ b/src/app/(main)/links/LinksTable.tsx @@ -6,7 +6,11 @@ import { useMessages, useNavigation, useSlug } from '@/components/hooks'; import { LinkDeleteButton } from './LinkDeleteButton'; import { LinkEditButton } from './LinkEditButton'; -export function LinksTable(props: DataTableProps) { +export interface LinksTableProps extends DataTableProps { + showActions?: boolean; +} + +export function LinksTable({ showActions, ...props }: LinksTableProps) { const { formatMessage, labels } = useMessages(); const { websiteId, renderUrl } = useNavigation(); const { getSlugUrl } = useSlug('link'); @@ -36,16 +40,18 @@ export function LinksTable(props: DataTableProps) { {(row: any) => } - - {({ id, name }: any) => { - return ( - - - - - ); - }} - + {showActions && ( + + {({ id, name }: any) => { + return ( + + + + + ); + }} + + )} ); } diff --git a/src/app/(main)/pixels/PixelsDataTable.tsx b/src/app/(main)/pixels/PixelsDataTable.tsx index 51b8c5a0..6a9a9162 100644 --- a/src/app/(main)/pixels/PixelsDataTable.tsx +++ b/src/app/(main)/pixels/PixelsDataTable.tsx @@ -2,13 +2,13 @@ import { DataGrid } from '@/components/common/DataGrid'; import { useNavigation, usePixelsQuery } from '@/components/hooks'; import { PixelsTable } from './PixelsTable'; -export function PixelsDataTable() { +export function PixelsDataTable({ showActions = false }: { showActions?: boolean }) { const { teamId } = useNavigation(); const query = usePixelsQuery({ teamId }); return ( - {({ data }) => } + {({ data }) => } ); } diff --git a/src/app/(main)/pixels/PixelsPage.tsx b/src/app/(main)/pixels/PixelsPage.tsx index 4f6acefe..91ddcdcd 100644 --- a/src/app/(main)/pixels/PixelsPage.tsx +++ b/src/app/(main)/pixels/PixelsPage.tsx @@ -3,22 +3,31 @@ import { Column } from '@umami/react-zen'; import { PageBody } from '@/components/common/PageBody'; import { PageHeader } from '@/components/common/PageHeader'; import { Panel } from '@/components/common/Panel'; -import { useMessages, useNavigation } from '@/components/hooks'; +import { useLoginQuery, useMessages, useNavigation, useTeamMembersQuery } from '@/components/hooks'; +import { ROLES } from '@/lib/constants'; import { PixelAddButton } from './PixelAddButton'; import { PixelsDataTable } from './PixelsDataTable'; export function PixelsPage() { + const { user } = useLoginQuery(); const { formatMessage, labels } = useMessages(); const { teamId } = useNavigation(); + const { data } = useTeamMembersQuery(teamId); + + const showActions = + (teamId && + data?.data.filter(team => team.userId === user.id && team.role !== ROLES.teamViewOnly) + .length > 0) || + (!teamId && user.role !== ROLES.viewOnly); return ( - + {showActions && } - + diff --git a/src/app/(main)/pixels/PixelsTable.tsx b/src/app/(main)/pixels/PixelsTable.tsx index 48a84589..57aff4db 100644 --- a/src/app/(main)/pixels/PixelsTable.tsx +++ b/src/app/(main)/pixels/PixelsTable.tsx @@ -6,10 +6,15 @@ import { useMessages, useNavigation, useSlug } from '@/components/hooks'; import { PixelDeleteButton } from './PixelDeleteButton'; import { PixelEditButton } from './PixelEditButton'; -export function PixelsTable(props: DataTableProps) { +export interface PixelsTableProps extends DataTableProps { + showActions?: boolean; +} + +export function PixelsTable({ showActions, ...props }: PixelsTableProps) { const { formatMessage, labels } = useMessages(); const { renderUrl } = useNavigation(); const { getSlugUrl } = useSlug('pixel'); + console.log(showActions); return ( @@ -31,18 +36,20 @@ export function PixelsTable(props: DataTableProps) { {(row: any) => } - - {(row: any) => { - const { id, name } = row; + {showActions && ( + + {(row: any) => { + const { id, name } = row; - return ( - - - - - ); - }} - + return ( + + + + + ); + }} + + )} ); } diff --git a/src/app/(main)/websites/WebsitesPage.tsx b/src/app/(main)/websites/WebsitesPage.tsx index 31de7047..6f3548a9 100644 --- a/src/app/(main)/websites/WebsitesPage.tsx +++ b/src/app/(main)/websites/WebsitesPage.tsx @@ -3,22 +3,31 @@ import { Column } from '@umami/react-zen'; import { PageBody } from '@/components/common/PageBody'; import { PageHeader } from '@/components/common/PageHeader'; import { Panel } from '@/components/common/Panel'; -import { useMessages, useNavigation } from '@/components/hooks'; +import { useLoginQuery, useMessages, useNavigation, useTeamMembersQuery } from '@/components/hooks'; +import { ROLES } from '@/lib/constants'; import { WebsiteAddButton } from './WebsiteAddButton'; import { WebsitesDataTable } from './WebsitesDataTable'; export function WebsitesPage() { + const { user } = useLoginQuery(); const { teamId } = useNavigation(); const { formatMessage, labels } = useMessages(); + const { data } = useTeamMembersQuery(teamId); + + const showActions = + (teamId && + data?.data.filter(team => team.userId === user.id && team.role !== ROLES.teamViewOnly) + .length > 0) || + (!teamId && user.role !== ROLES.viewOnly); return ( - + {showActions && } - +