Updates to team components.

This commit is contained in:
Mike Cao 2024-02-04 18:03:26 -08:00
parent 102f5b78b1
commit dbb3801e66
28 changed files with 173 additions and 159 deletions

View file

@ -1,20 +1,10 @@
'use client';
import DataTable from 'components/common/DataTable';
import TeamsTable from 'app/(main)/settings/teams/TeamsTable';
import { useApi, useFilterQuery } from 'components/hooks';
import useCache from 'store/cache';
import { useTeams } from 'components/hooks';
export function TeamsDataTable() {
const { get } = useApi();
const modified = useCache((state: any) => state?.teams);
const queryResult = useFilterQuery({
queryKey: ['teams', { modified }],
queryFn: (params: any) => {
return get(`/teams`, {
...params,
});
},
});
const queryResult = useTeams();
return (
<DataTable queryResult={queryResult}>

View file

@ -1,9 +1,9 @@
'use client';
import { Button, GridColumn, GridTable, Icon, Text, useBreakpoint } from 'react-basics';
import Link from 'next/link';
import { GridColumn, GridTable, Icon, Text, useBreakpoint } from 'react-basics';
import { useMessages, useLogin } from 'components/hooks';
import Icons from 'components/icons';
import { ROLES } from 'lib/constants';
import LinkButton from 'components/common/LinkButton';
export function TeamsTable({ data = [] }: { data: any[] }) {
const { formatMessage, labels } = useMessages();
@ -31,23 +31,19 @@ export function TeamsTable({ data = [] }: { data: any[] }) {
return (
<>
{isOwner && (
<Link href={`/settings/teams/${id}`}>
<Button>
<Icon>
<Icons.Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</Button>
</Link>
)}
<Link href={`/teams/${id}`}>
<Button>
<LinkButton href={`/settings/teams/${id}`}>
<Icon>
<Icons.Change />
<Icons.Edit />
</Icon>
<Text>{formatMessage(labels.switch)}</Text>
</Button>
</Link>
<Text>{formatMessage(labels.edit)}</Text>
</LinkButton>
)}
<LinkButton href={`/teams/${id}`}>
<Icon>
<Icons.Change />
</Icon>
<Text>{formatMessage(labels.switch)}</Text>
</LinkButton>
</>
);
}}

View file

@ -1,7 +1,7 @@
'use client';
import DataTable from 'components/common/DataTable';
import TeamMembersTable from './TeamMembersTable';
import useTeamMembers from 'components/hooks/queries/useTeamMembers';
import { useTeamMembers } from 'components/hooks';
export function TeamMembers({ teamId, allowEdit }: { teamId: string; allowEdit: boolean }) {
const queryResult = useTeamMembers(teamId);

View file

@ -1,8 +1,16 @@
'use client';
import WebsitesDataTable from 'app/(main)/settings/websites/WebsitesDataTable';
import DataTable from 'components/common/DataTable';
import { useTeamWebsites } from 'components/hooks';
import TeamWebsitesTable from './TeamWebsitesTable';
export function TeamWebsites({ teamId, allowEdit }: { teamId: string; allowEdit: boolean }) {
return <WebsitesDataTable teamId={teamId} allowEdit={allowEdit} />;
const queryResult = useTeamWebsites(teamId);
return (
<DataTable queryResult={queryResult}>
{({ data }) => <TeamWebsitesTable data={data} teamId={teamId} allowEdit={allowEdit} />}
</DataTable>
);
}
export default TeamWebsites;

View file

@ -1,16 +1,20 @@
'use client';
import Link from 'next/link';
import { Button, GridColumn, GridTable, Icon, Text } from 'react-basics';
import { useMessages } from 'components/hooks';
import { GridColumn, GridTable, Icon, Text } from 'react-basics';
import { useLogin, useMessages } from 'components/hooks';
import Icons from 'components/icons';
import LinkButton from 'components/common/LinkButton';
export function TeamWebsitesTable({
teamId,
data = [],
allowEdit,
}: {
teamId: string;
data: any[];
readOnly: boolean;
onRemove: () => void;
allowEdit?: boolean;
}) {
const { user } = useLogin();
const { formatMessage, labels } = useMessages();
return (
<GridTable data={data}>
@ -20,14 +24,22 @@ export function TeamWebsitesTable({
{row => {
const { websiteId } = row;
return (
<Link href={`/websites/${websiteId}`}>
<Button>
<>
{allowEdit && (teamId || user?.isAdmin) && (
<LinkButton href={`/team/${teamId}/settings/websites/${websiteId}`}>
<Icon>
<Icons.Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</LinkButton>
)}
<LinkButton href={`/teams/${teamId}/websites/${websiteId}`}>
<Icon>
<Icons.Change />
</Icon>
<Text>{formatMessage(labels.view)}</Text>
</Button>
</Link>
</LinkButton>
</>
);
}}
</GridColumn>