mirror of
https://github.com/umami-software/umami.git
synced 2026-02-11 16:17:13 +01:00
Teams context settings.
This commit is contained in:
parent
4429198397
commit
8f853ddb97
77 changed files with 317 additions and 272 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -12,5 +12,5 @@ export default function () {
|
|||
}
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Profile Settings | umami',
|
||||
title: 'Profile Settings | Umami',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
'use client';
|
||||
import { ActionForm, Button, Modal, ModalTrigger } from 'react-basics';
|
||||
import { useMessages } from 'components/hooks';
|
||||
import TeamDeleteForm from '../TeamDeleteForm';
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
'use client';
|
||||
import {
|
||||
SubmitButton,
|
||||
Form,
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
'use client';
|
||||
import DataTable from 'components/common/DataTable';
|
||||
import TeamMembersTable from './TeamMembersTable';
|
||||
import useTeamMembers from 'components/hooks/queries/useTeamMembers';
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
'use client';
|
||||
import { GridColumn, GridTable, useBreakpoint } from 'react-basics';
|
||||
import { useMessages, useLogin } from 'components/hooks';
|
||||
import { ROLES } from 'lib/constants';
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
'use client';
|
||||
import { useApi, useMessages } from 'components/hooks';
|
||||
import { Icon, Icons, LoadingButton, Text } from 'react-basics';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
'use client';
|
||||
import WebsitesDataTable from 'app/(main)/settings/websites/WebsitesDataTable';
|
||||
|
||||
export function TeamWebsites({ teamId, allowEdit }: { teamId: string; allowEdit: boolean }) {
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -1,9 +1,5 @@
|
|||
import TeamSettings from './TeamSettings';
|
||||
|
||||
export default function ({ params: { teamId } }) {
|
||||
if (process.env.cloudMode) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <TeamSettings teamId={teamId} />;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,10 +3,6 @@ import TeamsDataTable from './TeamsDataTable';
|
|||
import TeamsHeader from './TeamsHeader';
|
||||
|
||||
export default function () {
|
||||
if (process.env.cloudMode) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<TeamsHeader />
|
||||
|
|
|
|||
|
|
@ -1,9 +1,5 @@
|
|||
import UserSettings from './UserSettings';
|
||||
|
||||
export default function ({ params: { userId } }) {
|
||||
if (process.env.cloudMode) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <UserSettings userId={userId} />;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,5 +11,5 @@ export default function () {
|
|||
);
|
||||
}
|
||||
export const metadata: Metadata = {
|
||||
title: 'Users | umami',
|
||||
title: 'Users | Umami',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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} />;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue