Teams context settings.

This commit is contained in:
Mike Cao 2024-02-02 17:49:17 -08:00
parent 4429198397
commit 8f853ddb97
77 changed files with 317 additions and 272 deletions

View file

@ -1,6 +1,6 @@
'use client';
import { usePathname } from 'next/navigation';
import { useLogin, useMessages } from 'components/hooks';
import { useLogin, useMessages, useTeamContext } from 'components/hooks';
import SideNav from 'components/layout/SideNav';
import styles from './layout.module.css';
@ -9,12 +9,32 @@ export default function SettingsLayout({ children }) {
const pathname = usePathname();
const { formatMessage, labels } = useMessages();
const cloudMode = !!process.env.cloudMode;
const { teamId, renderTeamUrl } = useTeamContext();
const items = [
{ key: 'websites', label: formatMessage(labels.websites), url: '/settings/websites' },
{ key: 'teams', label: formatMessage(labels.teams), url: '/settings/teams' },
user.isAdmin && { key: 'users', label: formatMessage(labels.users), url: '/settings/users' },
{ key: 'profile', label: formatMessage(labels.profile), url: '/settings/profile' },
{
key: 'team',
label: formatMessage(labels.team),
url: renderTeamUrl('/settings/team'),
},
teamId && {
key: 'members',
label: formatMessage(labels.members),
url: renderTeamUrl('/settings/members'),
},
{
key: 'websites',
label: formatMessage(labels.websites),
url: renderTeamUrl('/settings/websites'),
},
!teamId && { key: 'teams', label: formatMessage(labels.teams), url: '/settings/teams' },
!teamId &&
user.isAdmin && {
key: 'users',
label: formatMessage(labels.users),
url: renderTeamUrl('/settings/users'),
},
!teamId && { key: 'profile', label: formatMessage(labels.profile), url: '/settings/profile' },
].filter(n => n);
const getKey = () => items.find(({ url }) => pathname === url)?.key;

View file

@ -12,5 +12,5 @@ export default function () {
}
export const metadata: Metadata = {
title: 'Profile Settings | umami',
title: 'Profile Settings | Umami',
};

View file

@ -1,3 +1,4 @@
'use client';
import { ActionForm, Button, Modal, ModalTrigger } from 'react-basics';
import { useMessages } from 'components/hooks';
import TeamDeleteForm from '../TeamDeleteForm';

View file

@ -1,3 +1,4 @@
'use client';
import {
SubmitButton,
Form,

View file

@ -1,3 +1,4 @@
'use client';
import { useApi, useMessages } from 'components/hooks';
import { Icon, Icons, LoadingButton, Text } from 'react-basics';
import { touch } from 'store/cache';

View file

@ -1,3 +1,4 @@
'use client';
import DataTable from 'components/common/DataTable';
import TeamMembersTable from './TeamMembersTable';
import useTeamMembers from 'components/hooks/queries/useTeamMembers';

View file

@ -1,3 +1,4 @@
'use client';
import { GridColumn, GridTable, useBreakpoint } from 'react-basics';
import { useMessages, useLogin } from 'components/hooks';
import { ROLES } from 'lib/constants';

View file

@ -1,7 +1,6 @@
'use client';
import { useState } from 'react';
import { Item, Loading, Tabs, Flexbox, Text, Icon } from 'react-basics';
import TeamsContext from 'app/(main)/teams/TeamsContext';
import PageHeader from 'components/layout/PageHeader';
import { ROLES } from 'lib/constants';
import Icons from 'components/icons';
@ -27,32 +26,26 @@ export function TeamSettings({ teamId }: { teamId: string }) {
);
return (
<TeamsContext.Provider value={team}>
<Flexbox direction="column">
<PageHeader title={team?.name} icon={<Icons.Users />}>
<LinkButton href={`/teams/${teamId}`} variant="primary">
<Icon>
<Icons.Change />
</Icon>
<Text>{formatMessage(labels.view)}</Text>
</LinkButton>
</PageHeader>
<Tabs
selectedKey={tab}
onSelect={(value: any) => setTab(value)}
style={{ marginBottom: 30 }}
>
<Item key="details">{formatMessage(labels.details)}</Item>
<Item key="members">{formatMessage(labels.members)}</Item>
<Item key="websites">{formatMessage(labels.websites)}</Item>
<Item key="data">{formatMessage(labels.data)}</Item>
</Tabs>
{tab === 'details' && <TeamEditForm teamId={teamId} data={team} allowEdit={canEdit} />}
{tab === 'members' && <TeamMembers teamId={teamId} allowEdit={canEdit} />}
{tab === 'websites' && <TeamWebsites teamId={teamId} allowEdit={canEdit} />}
{canEdit && tab === 'data' && <TeamData teamId={teamId} />}
</Flexbox>
</TeamsContext.Provider>
<Flexbox direction="column">
<PageHeader title={team?.name} icon={<Icons.Users />}>
<LinkButton href={`/teams/${teamId}`} variant="primary">
<Icon>
<Icons.Change />
</Icon>
<Text>{formatMessage(labels.view)}</Text>
</LinkButton>
</PageHeader>
<Tabs selectedKey={tab} onSelect={(value: any) => setTab(value)} style={{ marginBottom: 30 }}>
<Item key="details">{formatMessage(labels.details)}</Item>
<Item key="members">{formatMessage(labels.members)}</Item>
<Item key="websites">{formatMessage(labels.websites)}</Item>
<Item key="data">{formatMessage(labels.data)}</Item>
</Tabs>
{tab === 'details' && <TeamEditForm teamId={teamId} data={team} allowEdit={canEdit} />}
{tab === 'members' && <TeamMembers teamId={teamId} allowEdit={canEdit} />}
{tab === 'websites' && <TeamWebsites teamId={teamId} allowEdit={canEdit} />}
{canEdit && tab === 'data' && <TeamData teamId={teamId} />}
</Flexbox>
);
}

View file

@ -1,3 +1,4 @@
'use client';
import { useApi, useMessages } from 'components/hooks';
import { Icon, Icons, LoadingButton, Text } from 'react-basics';

View file

@ -1,3 +1,4 @@
'use client';
import WebsitesDataTable from 'app/(main)/settings/websites/WebsitesDataTable';
export function TeamWebsites({ teamId, allowEdit }: { teamId: string; allowEdit: boolean }) {

View file

@ -1,3 +1,4 @@
'use client';
import Link from 'next/link';
import { Button, GridColumn, GridTable, Icon, Text } from 'react-basics';
import { useMessages } from 'components/hooks';

View file

@ -1,9 +1,5 @@
import TeamSettings from './TeamSettings';
export default function ({ params: { teamId } }) {
if (process.env.cloudMode) {
return null;
}
return <TeamSettings teamId={teamId} />;
}

View file

@ -3,10 +3,6 @@ import TeamsDataTable from './TeamsDataTable';
import TeamsHeader from './TeamsHeader';
export default function () {
if (process.env.cloudMode) {
return null;
}
return (
<>
<TeamsHeader />

View file

@ -1,9 +1,5 @@
import UserSettings from './UserSettings';
export default function ({ params: { userId } }) {
if (process.env.cloudMode) {
return null;
}
return <UserSettings userId={userId} />;
}

View file

@ -11,5 +11,5 @@ export default function () {
);
}
export const metadata: Metadata = {
title: 'Users | umami',
title: 'Users | Umami',
};

View file

@ -3,13 +3,13 @@ import { useLogin } from 'components/hooks';
import WebsitesDataTable from './WebsitesDataTable';
import WebsitesHeader from './WebsitesHeader';
export default function Websites() {
export default function Websites({ teamId }: { teamId: string }) {
const { user } = useLogin();
return (
<>
<WebsitesHeader showActions={user.role !== 'view-only'} />
<WebsitesDataTable userId={user.id} />
<WebsitesDataTable teamId={teamId} userId={user.id} allowEdit={true} />
</>
);
}

View file

@ -1,7 +1,7 @@
import { ReactNode } from 'react';
import Link from 'next/link';
import { Button, Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from 'react-basics';
import { useMessages, useLogin, useNavigation } from 'components/hooks';
import { useMessages, useLogin, useTeamContext } from 'components/hooks';
export interface WebsitesTableProps {
data: any[];
@ -23,7 +23,7 @@ export function WebsitesTable({
const { formatMessage, labels } = useMessages();
const { user } = useLogin();
const breakpoint = useBreakpoint();
const { renderTeamUrl } = useNavigation();
const { renderTeamUrl } = useTeamContext();
return (
<GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
@ -32,12 +32,12 @@ export function WebsitesTable({
{showActions && (
<GridColumn name="action" label=" " alignment="end">
{row => {
const { id, userId } = row;
const { id } = row;
return (
<>
{allowEdit && !teamId && user.id === userId && (
<Link href={`/settings/websites/${id}`}>
{allowEdit && (teamId || user.isAdmin) && (
<Link href={renderTeamUrl(`/settings/websites/${id}`)}>
<Button>
<Icon>
<Icons.Edit />
@ -47,7 +47,7 @@ export function WebsitesTable({
</Link>
)}
{allowView && (
<Link href={renderTeamUrl(`/websites/${id}`)}>
<Link href={renderTeamUrl(renderTeamUrl(`/websites/${id}`))}>
<Button>
<Icon>
<Icons.ArrowRight />

View file

@ -1,9 +1,5 @@
import WebsiteSettings from '../WebsiteSettings';
export default async function WebsiteSettingsPage({ params: { websiteId } }) {
if (process.env.cloudMode || !websiteId) {
return null;
}
return <WebsiteSettings websiteId={websiteId} />;
}

View file

@ -1,10 +1,10 @@
import { Metadata } from 'next';
import Websites from './Websites';
export default function () {
return <Websites />;
export default function ({ params: { teamId } }: { params: { teamId: string } }) {
return <Websites teamId={teamId} />;
}
export const metadata: Metadata = {
title: 'Websites Settings | umami',
title: 'Websites Settings | Umami',
};