watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-11 16:17:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Reworked settings screens.

Browse source
This commit is contained in:
Mike Cao 2025-05-03 00:31:37 -07:00
parent c1d301ffdc
commit 0a16ab38e4
58 changed files with 362 additions and 365 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/app/(main)/teams/[teamId]/settings/TeamSettingsLayout.tsx
View file

@ -2,34 +2,48 @@
import { ReactNode } from 'react';
import { useMessages, useNavigation } from '@/components/hooks';
import { Grid, Column } from '@umami/react-zen';
import { SideBar } from '@/components/common/SideBar';
import { SideMenu } from '@/components/common/SideMenu';
import { Panel } from '@/components/common/Panel';
import { PageHeader } from '@/components/common/PageHeader';
export function TeamSettingsLayout({ children }: { children: ReactNode }) {
const { formatMessage, labels } = useMessages();
const { teamId } = useNavigation();
const { pathname, teamId } = useNavigation();
const items = [
{
key: 'team',
id: 'team',
label: formatMessage(labels.team),
url: `/teams/${teamId}/settings/team`,
},
{
key: 'websites',
id: 'websites',
label: formatMessage(labels.websites),
url: `/teams/${teamId}/settings/websites`,
},
{
key: 'members',
id: 'members',
label: formatMessage(labels.members),
url: `/teams/${teamId}/settings/members`,
},
].filter(n => n);
const value = items.find(({ url }) => pathname.endsWith(url))?.id;
return (
<Grid>
<SideBar items={items} />
<Column>{children}</Column>
</Grid>
<Column gap="6">
<PageHeader title={formatMessage(labels.teamSettings)} />
<Column gap="6">
<Grid columns="200px 1fr">
<Column marginTop="6">
<SideMenu items={items} selectedKey={value} />
</Column>
<Column>
<Panel>{children}</Panel>
</Column>
</Grid>
</Column>
</Column>
);
}

9
src/app/(main)/teams/[teamId]/settings/members/TeamMembersPage.tsx
View file

@ -1,10 +1,11 @@
'use client';
import { TeamContext } from '@/app/(main)/teams/[teamId]/TeamProvider';
import { TeamMembersDataTable } from './TeamMembersDataTable';
import { PageHeader } from '@/components/common/PageHeader';
import { SectionHeader } from '@/components/common/SectionHeader';
import { useLoginQuery, useMessages } from '@/components/hooks';
import { ROLES } from '@/lib/constants';
import { useContext } from 'react';
import { Column } from '@umami/react-zen';
export function TeamMembersPage({ teamId }: { teamId: string }) {
const team = useContext(TeamContext);
@ -18,9 +19,9 @@ export function TeamMembersPage({ teamId }: { teamId: string }) {
) && user.role !== ROLES.viewOnly;
return (
<>
<PageHeader title={formatMessage(labels.members)} />
<Column gap>
<SectionHeader title={formatMessage(labels.members)} />
<TeamMembersDataTable teamId={teamId} allowEdit={canEdit} />
</>
</Column>
);
}

36
src/app/(main)/teams/[teamId]/settings/team/TeamDetails.tsx
View file

@ -1,14 +1,12 @@
import { TeamContext } from '@/app/(main)/teams/[teamId]/TeamProvider';
import { useLoginQuery, useMessages } from '@/components/hooks';
import { Icons } from '@/components/icons';
import { PageHeader } from '@/components/common/PageHeader';
import { SectionHeader } from '@/components/common/SectionHeader';
import { ROLES } from '@/lib/constants';
import { useContext, useState } from 'react';
import { Column, Tabs, TabList, Tab, TabPanel } from '@umami/react-zen';
import { TeamLeaveButton } from '@/app/(main)/settings/teams/TeamLeaveButton';
import { TeamManage } from './TeamManage';
import { TeamEditForm } from './TeamEditForm';
import { Panel } from '@/components/common/Panel';
export function TeamDetails({ teamId }: { teamId: string }) {
const team = useContext(TeamContext);
@ -27,24 +25,22 @@ export function TeamDetails({ teamId }: { teamId: string }) {
) && user.role !== ROLES.viewOnly;
return (
<Column>
<PageHeader title={team?.name} icon={<Icons.Users />}>
<Column gap>
<SectionHeader title={team?.name}>
{!isTeamOwner && <TeamLeaveButton teamId={team.id} teamName={team.name} />}
</PageHeader>
<Panel>
<Tabs selectedKey={tab} onSelectionChange={(value: any) => setTab(value)}>
<TabList>
<Tab id="details">{formatMessage(labels.details)}</Tab>
{isTeamOwner && <Tab id="manage">{formatMessage(labels.manage)}</Tab>}
</TabList>
<TabPanel id="details">
<TeamEditForm teamId={teamId} allowEdit={canEdit} />
</TabPanel>
<TabPanel id="manage">
<TeamManage teamId={teamId} />
</TabPanel>
</Tabs>
</Panel>
</SectionHeader>
<Tabs selectedKey={tab} onSelectionChange={(value: any) => setTab(value)}>
<TabList>
<Tab id="details">{formatMessage(labels.details)}</Tab>
{isTeamOwner && <Tab id="manage">{formatMessage(labels.manage)}</Tab>}
</TabList>
<TabPanel id="details">
<TeamEditForm teamId={teamId} allowEdit={canEdit} />
</TabPanel>
<TabPanel id="manage">
<TeamManage teamId={teamId} />
</TabPanel>
</Tabs>
</Column>
);
}

11
src/app/(main)/teams/[teamId]/settings/websites/TeamWebsitesPage.tsx
View file

@ -2,10 +2,11 @@
import { TeamContext } from '@/app/(main)/teams/[teamId]/TeamProvider';
import { WebsiteAddButton } from '@/app/(main)/settings/websites/WebsiteAddButton';
import { useLoginQuery, useMessages } from '@/components/hooks';
import { PageHeader } from '@/components/common/PageHeader';
import { SectionHeader } from '@/components/common/SectionHeader';
import { TeamWebsitesDataTable } from './TeamWebsitesDataTable';
import { ROLES } from '@/lib/constants';
import { useContext } from 'react';
import { Column } from '@umami/react-zen';
export function TeamWebsitesPage({ teamId }: { teamId: string }) {
const team = useContext(TeamContext);
@ -18,11 +19,11 @@ export function TeamWebsitesPage({ teamId }: { teamId: string }) {
) && user.role !== ROLES.viewOnly;
return (
<>
<PageHeader title={formatMessage(labels.websites)}>
<Column gap>
<SectionHeader title={formatMessage(labels.websites)}>
{canEdit && <WebsiteAddButton teamId={teamId} />}
</PageHeader>
</SectionHeader>
<TeamWebsitesDataTable teamId={teamId} allowEdit={canEdit} />
</>
</Column>
);
}