mirror of
https://github.com/umami-software/umami.git
synced 2026-02-14 01:25:37 +01:00
Settings refactor.
This commit is contained in:
Mike Cao
parent
1b81074752
commit
c98f324c22
56 changed files with 706 additions and 348 deletions
|
|
@ -1,25 +1,18 @@
|
|||
'use client';
|
||||
import { createContext, ReactNode, useEffect } from 'react';
|
||||
import { useTeamQuery, useModified } from '@/components/hooks';
|
||||
import { createContext, ReactNode } from 'react';
|
||||
import { useTeamQuery } from '@/components/hooks';
|
||||
import { Loading } from '@umami/react-zen';
|
||||
|
||||
export const TeamContext = createContext(null);
|
||||
|
||||
export function TeamProvider({ teamId, children }: { teamId?: string; children: ReactNode }) {
|
||||
const { modified } = useModified(`teams`);
|
||||
const { data: team, isLoading, isFetching, refetch } = useTeamQuery(teamId);
|
||||
|
||||
useEffect(() => {
|
||||
if (teamId && modified) {
|
||||
refetch();
|
||||
}
|
||||
}, [teamId, modified]);
|
||||
const { data: team, isLoading, isFetching } = useTeamQuery(teamId);
|
||||
|
||||
if (isFetching && isLoading) {
|
||||
return <Loading position="page" />;
|
||||
}
|
||||
|
||||
if (teamId && !team) {
|
||||
if (!team) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import { TeamProvider } from './TeamProvider';
|
||||
import { Metadata } from 'next';
|
||||
import { TeamSettingsLayout } from './settings/TeamSettingsLayout';
|
||||
|
||||
export default async function ({
|
||||
children,
|
||||
|
|
@ -11,11 +10,7 @@ export default async function ({
|
|||
}) {
|
||||
const { teamId } = await params;
|
||||
|
||||
return (
|
||||
<TeamProvider teamId={teamId}>
|
||||
<TeamSettingsLayout>{children}</TeamSettingsLayout>
|
||||
</TeamProvider>
|
||||
);
|
||||
return <TeamProvider teamId={teamId}>{children}</TeamProvider>;
|
||||
}
|
||||
|
||||
export const metadata: Metadata = {
|
||||
|
|
|
|||
|
|
@ -1,49 +0,0 @@
|
|||
'use client';
|
||||
import { ReactNode } from 'react';
|
||||
import { useMessages, useNavigation } from '@/components/hooks';
|
||||
import { Grid, Column } from '@umami/react-zen';
|
||||
import { SideMenu } from '@/components/common/SideMenu';
|
||||
import { Panel } from '@/components/common/Panel';
|
||||
import { PageHeader } from '@/components/common/PageHeader';
|
||||
import { PageBody } from '@/components/common/PageBody';
|
||||
|
||||
export function TeamSettingsLayout({ children }: { children: ReactNode }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { pathname, teamId } = useNavigation();
|
||||
|
||||
const items = [
|
||||
{
|
||||
id: 'team',
|
||||
label: formatMessage(labels.team),
|
||||
url: `/teams/${teamId}/settings/team`,
|
||||
},
|
||||
{
|
||||
id: 'websites',
|
||||
label: formatMessage(labels.websites),
|
||||
url: `/teams/${teamId}/settings/websites`,
|
||||
},
|
||||
{
|
||||
id: 'members',
|
||||
label: formatMessage(labels.members),
|
||||
url: `/teams/${teamId}/settings/members`,
|
||||
},
|
||||
].filter(n => n);
|
||||
|
||||
const value = items.find(({ url }) => pathname.includes(url))?.id;
|
||||
|
||||
return (
|
||||
<PageBody>
|
||||
<Column gap="6">
|
||||
<PageHeader title={formatMessage(labels.teamSettings)} />
|
||||
<Grid columns="200px 1fr" gap>
|
||||
<Column>
|
||||
<SideMenu items={items} selectedKey={value} />
|
||||
</Column>
|
||||
<Column>
|
||||
<Panel>{children}</Panel>
|
||||
</Column>
|
||||
</Grid>
|
||||
</Column>
|
||||
</PageBody>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
import { useMessages, useModified } from '@/components/hooks';
|
||||
import {
|
||||
Row,
|
||||
Pressable,
|
||||
Icon,
|
||||
Modal,
|
||||
DialogTrigger,
|
||||
Dialog,
|
||||
Text,
|
||||
useToast,
|
||||
} from '@umami/react-zen';
|
||||
import { TeamMemberEditForm } from './TeamMemberEditForm';
|
||||
import { Edit } from '@/components/icons';
|
||||
|
||||
export function TeamMemberEditButton({
|
||||
teamId,
|
||||
userId,
|
||||
role,
|
||||
onSave,
|
||||
}: {
|
||||
teamId: string;
|
||||
userId: string;
|
||||
role: string;
|
||||
onSave?: () => void;
|
||||
}) {
|
||||
const { formatMessage, labels, messages } = useMessages();
|
||||
const { toast } = useToast();
|
||||
const { touch } = useModified();
|
||||
|
||||
const handleSave = () => {
|
||||
toast(formatMessage(messages.saved));
|
||||
touch('teams:members');
|
||||
onSave?.();
|
||||
};
|
||||
|
||||
return (
|
||||
<DialogTrigger>
|
||||
<Pressable>
|
||||
<Row alignItems="center" gap>
|
||||
<Icon>
|
||||
<Edit />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.edit)}</Text>
|
||||
</Row>
|
||||
</Pressable>
|
||||
<Modal>
|
||||
<Dialog title={formatMessage(labels.editMember)}>
|
||||
{({ close }) => (
|
||||
<TeamMemberEditForm
|
||||
teamId={teamId}
|
||||
userId={userId}
|
||||
role={role}
|
||||
onSave={handleSave}
|
||||
onClose={close}
|
||||
/>
|
||||
)}
|
||||
</Dialog>
|
||||
</Modal>
|
||||
</DialogTrigger>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
import { useApi, useMessages } from '@/components/hooks';
|
||||
import { ROLES } from '@/lib/constants';
|
||||
import {
|
||||
Button,
|
||||
Select,
|
||||
Form,
|
||||
FormButtons,
|
||||
FormField,
|
||||
ListItem,
|
||||
FormSubmitButton,
|
||||
} from '@umami/react-zen';
|
||||
|
||||
export function TeamMemberEditForm({
|
||||
teamId,
|
||||
userId,
|
||||
role,
|
||||
onSave,
|
||||
onClose,
|
||||
}: {
|
||||
teamId: string;
|
||||
userId: string;
|
||||
role: string;
|
||||
onSave?: () => void;
|
||||
onClose?: () => void;
|
||||
}) {
|
||||
const { post, useMutation } = useApi();
|
||||
const { mutate, error, isPending } = useMutation({
|
||||
mutationFn: (data: any) => post(`/teams/${teamId}/users/${userId}`, data),
|
||||
});
|
||||
const { formatMessage, labels } = useMessages();
|
||||
|
||||
const handleSubmit = async (data: any) => {
|
||||
mutate(data, {
|
||||
onSuccess: async () => {
|
||||
onSave();
|
||||
onClose();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={handleSubmit} error={error} values={{ role }}>
|
||||
<FormField
|
||||
name="role"
|
||||
rules={{ required: formatMessage(labels.required) }}
|
||||
label={formatMessage(labels.role)}
|
||||
>
|
||||
<Select>
|
||||
<ListItem id={ROLES.teamManager}>{formatMessage(labels.manager)}</ListItem>
|
||||
<ListItem id={ROLES.teamMember}>{formatMessage(labels.member)}</ListItem>
|
||||
<ListItem id={ROLES.teamViewOnly}>{formatMessage(labels.viewOnly)}</ListItem>
|
||||
</Select>
|
||||
</FormField>
|
||||
|
||||
<FormButtons>
|
||||
<FormSubmitButton variant="primary" isDisabled={false}>
|
||||
{formatMessage(labels.save)}
|
||||
</FormSubmitButton>
|
||||
<Button isDisabled={isPending} onPress={onClose}>
|
||||
{formatMessage(labels.cancel)}
|
||||
</Button>
|
||||
</FormButtons>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
import { ConfirmationForm } from '@/components/common/ConfirmationForm';
|
||||
import { useApi, useMessages, useModified } from '@/components/hooks';
|
||||
import { messages } from '@/components/messages';
|
||||
import { Close } from '@/components/icons';
|
||||
import { Button, Icon, Modal, DialogTrigger, Dialog, Text } from '@umami/react-zen';
|
||||
|
||||
export function TeamMemberRemoveButton({
|
||||
teamId,
|
||||
userId,
|
||||
userName,
|
||||
onSave,
|
||||
}: {
|
||||
teamId: string;
|
||||
userId: string;
|
||||
userName: string;
|
||||
disabled?: boolean;
|
||||
onSave?: () => void;
|
||||
}) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { del, useMutation } = useApi();
|
||||
const { mutate, isPending, error } = useMutation({
|
||||
mutationFn: () => del(`/teams/${teamId}/users/${userId}`),
|
||||
});
|
||||
const { touch } = useModified();
|
||||
|
||||
const handleConfirm = (close: () => void) => {
|
||||
mutate(null, {
|
||||
onSuccess: () => {
|
||||
touch('teams:members');
|
||||
onSave?.();
|
||||
close();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<DialogTrigger>
|
||||
<Button>
|
||||
<Icon>
|
||||
<Close />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.remove)}</Text>
|
||||
</Button>
|
||||
<Modal>
|
||||
<Dialog title={formatMessage(labels.removeMember)}>
|
||||
{({ close }) => (
|
||||
<ConfirmationForm
|
||||
message={formatMessage(messages.confirmRemove, {
|
||||
target: <b key={messages.confirmRemove.id}>{userName}</b>,
|
||||
})}
|
||||
isLoading={isPending}
|
||||
error={error}
|
||||
onConfirm={handleConfirm.bind(null, close)}
|
||||
onClose={close}
|
||||
buttonLabel={formatMessage(labels.remove)}
|
||||
/>
|
||||
)}
|
||||
</Dialog>
|
||||
</Modal>
|
||||
</DialogTrigger>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import { DataGrid } from '@/components/common/DataGrid';
|
||||
import { TeamMembersTable } from './TeamMembersTable';
|
||||
import { useTeamMembersQuery } from '@/components/hooks';
|
||||
|
||||
export function TeamMembersDataTable({
|
||||
teamId,
|
||||
allowEdit = false,
|
||||
}: {
|
||||
teamId: string;
|
||||
allowEdit?: boolean;
|
||||
}) {
|
||||
const queryResult = useTeamMembersQuery(teamId);
|
||||
|
||||
return (
|
||||
<DataGrid query={queryResult}>
|
||||
{({ data }) => <TeamMembersTable data={data} teamId={teamId} allowEdit={allowEdit} />}
|
||||
</DataGrid>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
'use client';
|
||||
import { TeamContext } from '@/app/(main)/teams/[teamId]/TeamProvider';
|
||||
import { TeamMembersDataTable } from './TeamMembersDataTable';
|
||||
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);
|
||||
const { user } = useLoginQuery();
|
||||
const { formatMessage, labels } = useMessages();
|
||||
|
||||
const canEdit =
|
||||
team?.teamUser?.find(
|
||||
({ userId, role }) =>
|
||||
(role === ROLES.teamOwner || role === ROLES.teamManager) && userId === user.id,
|
||||
) && user.role !== ROLES.viewOnly;
|
||||
|
||||
return (
|
||||
<Column gap>
|
||||
<SectionHeader title={formatMessage(labels.members)} />
|
||||
<TeamMembersDataTable teamId={teamId} allowEdit={canEdit} />
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
import { DataColumn, DataTable, MenuItem } from '@umami/react-zen';
|
||||
import { useMessages, useLoginQuery } from '@/components/hooks';
|
||||
import { ROLES } from '@/lib/constants';
|
||||
import { TeamMemberRemoveButton } from './TeamMemberRemoveButton';
|
||||
import { TeamMemberEditButton } from './TeamMemberEditButton';
|
||||
import { MenuButton } from '@/components/input/MenuButton';
|
||||
|
||||
export function TeamMembersTable({
|
||||
data = [],
|
||||
teamId,
|
||||
allowEdit = false,
|
||||
}: {
|
||||
data: any[];
|
||||
teamId: string;
|
||||
allowEdit: boolean;
|
||||
}) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { user } = useLoginQuery();
|
||||
|
||||
const roles = {
|
||||
[ROLES.teamOwner]: formatMessage(labels.teamOwner),
|
||||
[ROLES.teamManager]: formatMessage(labels.teamManager),
|
||||
[ROLES.teamMember]: formatMessage(labels.teamMember),
|
||||
[ROLES.teamViewOnly]: formatMessage(labels.viewOnly),
|
||||
};
|
||||
|
||||
return (
|
||||
<DataTable data={data}>
|
||||
<DataColumn id="username" label={formatMessage(labels.username)}>
|
||||
{(row: any) => row?.user?.username}
|
||||
</DataColumn>
|
||||
<DataColumn id="role" label={formatMessage(labels.role)}>
|
||||
{(row: any) => roles[row?.role]}
|
||||
</DataColumn>
|
||||
<DataColumn id="action" align="end">
|
||||
{(row: any) => {
|
||||
return (
|
||||
allowEdit &&
|
||||
row?.role !== ROLES.teamOwner &&
|
||||
user?.id !== row?.user?.id && (
|
||||
<MenuButton>
|
||||
<MenuItem>
|
||||
<TeamMemberEditButton teamId={teamId} userId={row?.user?.id} role={row?.role} />
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<TeamMemberRemoveButton
|
||||
teamId={teamId}
|
||||
userId={row?.user?.id}
|
||||
userName={row?.user?.username}
|
||||
/>
|
||||
</MenuItem>
|
||||
</MenuButton>
|
||||
)
|
||||
);
|
||||
}}
|
||||
</DataColumn>
|
||||
</DataTable>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import { Metadata } from 'next';
|
||||
import { TeamMembersPage } from './TeamMembersPage';
|
||||
|
||||
export default async function ({ params }: { params: Promise<{ teamId: string }> }) {
|
||||
const { teamId } = await params;
|
||||
|
||||
return <TeamMembersPage teamId={teamId} />;
|
||||
}
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Team Members',
|
||||
};
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
import { TypeConfirmationForm } from '@/components/common/TypeConfirmationForm';
|
||||
import { useApi, useMessages } from '@/components/hooks';
|
||||
|
||||
const CONFIRM_VALUE = 'DELETE';
|
||||
|
||||
export function TeamDeleteForm({
|
||||
teamId,
|
||||
onSave,
|
||||
onClose,
|
||||
}: {
|
||||
teamId: string;
|
||||
onSave?: () => void;
|
||||
onClose?: () => void;
|
||||
}) {
|
||||
const { labels, formatMessage } = useMessages();
|
||||
const { del, useMutation } = useApi();
|
||||
const { mutate, error, isPending } = useMutation({
|
||||
mutationFn: () => del(`/teams/${teamId}`),
|
||||
});
|
||||
|
||||
const handleConfirm = async () => {
|
||||
mutate(null, {
|
||||
onSuccess: async () => {
|
||||
onSave?.();
|
||||
onClose?.();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<TypeConfirmationForm
|
||||
confirmationValue={CONFIRM_VALUE}
|
||||
onConfirm={handleConfirm}
|
||||
onClose={onClose}
|
||||
isLoading={isPending}
|
||||
error={error}
|
||||
buttonLabel={formatMessage(labels.delete)}
|
||||
buttonVariant="danger"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
import { useContext, useState } from 'react';
|
||||
import { Column, Tabs, TabList, Tab, TabPanel } from '@umami/react-zen';
|
||||
import { TeamContext } from '@/app/(main)/teams/[teamId]/TeamProvider';
|
||||
import { useLoginQuery, useMessages } from '@/components/hooks';
|
||||
import { SectionHeader } from '@/components/common/SectionHeader';
|
||||
import { ROLES } from '@/lib/constants';
|
||||
import { Users } from '@/components/icons';
|
||||
import { TeamLeaveButton } from '@/app/(main)/settings/teams/TeamLeaveButton';
|
||||
import { TeamManage } from './TeamManage';
|
||||
import { TeamEditForm } from './TeamEditForm';
|
||||
import { TeamWebsitesDataTable } from '@/app/(main)/teams/[teamId]/settings/websites/TeamWebsitesDataTable';
|
||||
import { TeamMembersDataTable } from '@/app/(main)/teams/[teamId]/settings/members/TeamMembersDataTable';
|
||||
|
||||
export function TeamDetails({ teamId }: { teamId: string }) {
|
||||
const team = useContext(TeamContext);
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { user } = useLoginQuery();
|
||||
const [tab, setTab] = useState('details');
|
||||
|
||||
const isTeamOwner =
|
||||
!!team?.teamUser?.find(({ userId, role }) => role === ROLES.teamOwner && userId === user.id) &&
|
||||
user.role !== ROLES.viewOnly;
|
||||
|
||||
const canEdit =
|
||||
!!team?.teamUser?.find(
|
||||
({ userId, role }) =>
|
||||
(role === ROLES.teamOwner || role === ROLES.teamManager) && userId === user.id,
|
||||
) && user.role !== ROLES.viewOnly;
|
||||
|
||||
return (
|
||||
<Column gap>
|
||||
<SectionHeader title={team?.name} icon={<Users />}>
|
||||
{!isTeamOwner && <TeamLeaveButton teamId={team.id} teamName={team.name} />}
|
||||
</SectionHeader>
|
||||
<Tabs selectedKey={tab} onSelectionChange={(value: any) => setTab(value)}>
|
||||
<TabList>
|
||||
<Tab id="details">{formatMessage(labels.details)}</Tab>
|
||||
<Tab id="members">{formatMessage(labels.members)}</Tab>
|
||||
<Tab id="websites">{formatMessage(labels.websites)}</Tab>
|
||||
{isTeamOwner && <Tab id="manage">{formatMessage(labels.manage)}</Tab>}
|
||||
</TabList>
|
||||
<TabPanel id="details">
|
||||
<TeamEditForm teamId={teamId} allowEdit={canEdit} />
|
||||
</TabPanel>
|
||||
<TabPanel id="members">
|
||||
<TeamMembersDataTable teamId={teamId} allowEdit />
|
||||
</TabPanel>
|
||||
<TabPanel id="websites">
|
||||
<TeamWebsitesDataTable teamId={teamId} allowEdit />
|
||||
</TabPanel>
|
||||
<TabPanel id="manage">
|
||||
<TeamManage teamId={teamId} />
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
import {
|
||||
Form,
|
||||
FormField,
|
||||
FormButtons,
|
||||
FormSubmitButton,
|
||||
TextField,
|
||||
Button,
|
||||
useToast,
|
||||
Text,
|
||||
} from '@umami/react-zen';
|
||||
import { getRandomChars } from '@/lib/crypto';
|
||||
import { useContext } from 'react';
|
||||
import { useApi, useMessages, useModified } from '@/components/hooks';
|
||||
import { TeamContext } from '@/app/(main)/teams/[teamId]/TeamProvider';
|
||||
|
||||
const generateId = () => `team_${getRandomChars(16)}`;
|
||||
|
||||
export function TeamEditForm({ teamId, allowEdit }: { teamId: string; allowEdit?: boolean }) {
|
||||
const team = useContext(TeamContext);
|
||||
const { formatMessage, labels, messages } = useMessages();
|
||||
const { post, useMutation } = useApi();
|
||||
const { mutate, error } = useMutation({
|
||||
mutationFn: (data: any) => post(`/teams/${teamId}`, data),
|
||||
});
|
||||
const { toast } = useToast();
|
||||
const { touch } = useModified();
|
||||
const cloudMode = !!process.env.cloudMode;
|
||||
|
||||
const handleSubmit = async (data: any) => {
|
||||
mutate(data, {
|
||||
onSuccess: async () => {
|
||||
touch('teams');
|
||||
toast(formatMessage(messages.saved));
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={handleSubmit} error={error} defaultValues={{ ...team }}>
|
||||
{({ setValue }) => {
|
||||
return (
|
||||
<>
|
||||
<FormField name="id" label={formatMessage(labels.teamId)}>
|
||||
<TextField isReadOnly allowCopy />
|
||||
</FormField>
|
||||
<FormField
|
||||
name="name"
|
||||
label={formatMessage(labels.name)}
|
||||
rules={{ required: formatMessage(labels.required) }}
|
||||
>
|
||||
{allowEdit ? <TextField /> : <Text>{team?.name}</Text>}
|
||||
</FormField>
|
||||
{!cloudMode && allowEdit && (
|
||||
<FormField name="accessCode" label={formatMessage(labels.accessCode)}>
|
||||
<TextField isReadOnly allowCopy />
|
||||
</FormField>
|
||||
)}
|
||||
{allowEdit && (
|
||||
<FormButtons justifyContent="space-between">
|
||||
{allowEdit && (
|
||||
<Button
|
||||
onPress={() => setValue('accessCode', generateId(), { shouldDirty: true })}
|
||||
>
|
||||
{formatMessage(labels.regenerate)}
|
||||
</Button>
|
||||
)}
|
||||
<FormSubmitButton variant="primary">{formatMessage(labels.save)}</FormSubmitButton>
|
||||
</FormButtons>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
import { useMessages, useModified } from '@/components/hooks';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Button, Modal, DialogTrigger, Dialog } from '@umami/react-zen';
|
||||
import { ActionForm } from '@/components/common/ActionForm';
|
||||
import { TeamDeleteForm } from './TeamDeleteForm';
|
||||
|
||||
export function TeamManage({ teamId }: { teamId: string }) {
|
||||
const { formatMessage, labels, messages } = useMessages();
|
||||
const router = useRouter();
|
||||
const { touch } = useModified();
|
||||
|
||||
const handleLeave = async () => {
|
||||
touch('teams');
|
||||
router.push('/settings/teams');
|
||||
};
|
||||
|
||||
return (
|
||||
<ActionForm
|
||||
label={formatMessage(labels.deleteTeam)}
|
||||
description={formatMessage(messages.deleteTeamWarning)}
|
||||
>
|
||||
<DialogTrigger>
|
||||
<Button variant="danger">{formatMessage(labels.delete)}</Button>
|
||||
<Modal>
|
||||
<Dialog title={formatMessage(labels.deleteTeam)}>
|
||||
{({ close }) => <TeamDeleteForm teamId={teamId} onSave={handleLeave} onClose={close} />}
|
||||
</Dialog>
|
||||
</Modal>
|
||||
</DialogTrigger>
|
||||
</ActionForm>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
'use client';
|
||||
import { TeamDetails } from './TeamDetails';
|
||||
|
||||
export function TeamPage({ teamId }: { teamId: string }) {
|
||||
return <TeamDetails teamId={teamId} />;
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import { Metadata } from 'next';
|
||||
import { TeamPage } from './TeamPage';
|
||||
|
||||
export default async function ({ params }: { params: Promise<{ teamId: string }> }) {
|
||||
const { teamId } = await params;
|
||||
|
||||
return <TeamPage teamId={teamId} />;
|
||||
}
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Teams Details',
|
||||
};
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
import { useApi, useMessages } from '@/components/hooks';
|
||||
import { Icon, LoadingButton, Text } from '@umami/react-zen';
|
||||
import { Close } from '@/components/icons';
|
||||
|
||||
export function TeamWebsiteRemoveButton({ teamId, websiteId, onSave }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { del, useMutation } = useApi();
|
||||
const { mutate, isPending } = useMutation({
|
||||
mutationFn: () => del(`/teams/${teamId}/websites/${websiteId}`),
|
||||
});
|
||||
|
||||
const handleRemoveTeamMember = async () => {
|
||||
mutate(null, {
|
||||
onSuccess: () => {
|
||||
onSave();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<LoadingButton variant="quiet" onClick={() => handleRemoveTeamMember()} isLoading={isPending}>
|
||||
<Icon>
|
||||
<Close />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.remove)}</Text>
|
||||
</LoadingButton>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import { DataGrid } from '@/components/common/DataGrid';
|
||||
import { useTeamWebsitesQuery } from '@/components/hooks';
|
||||
import { TeamWebsitesTable } from './TeamWebsitesTable';
|
||||
|
||||
export function TeamWebsitesDataTable({
|
||||
teamId,
|
||||
allowEdit = false,
|
||||
}: {
|
||||
teamId: string;
|
||||
allowEdit?: boolean;
|
||||
}) {
|
||||
const queryResult = useTeamWebsitesQuery(teamId);
|
||||
|
||||
return (
|
||||
<DataGrid query={queryResult}>
|
||||
{({ data }) => <TeamWebsitesTable data={data} teamId={teamId} allowEdit={allowEdit} />}
|
||||
</DataGrid>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
'use client';
|
||||
import { TeamContext } from '@/app/(main)/teams/[teamId]/TeamProvider';
|
||||
import { WebsiteAddButton } from '@/app/(main)/settings/websites/WebsiteAddButton';
|
||||
import { useLoginQuery, useMessages } from '@/components/hooks';
|
||||
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);
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { user } = useLoginQuery();
|
||||
|
||||
const canEdit =
|
||||
!!team?.teamUser?.find(
|
||||
({ userId, role }) => userId === user.id && role !== ROLES.teamViewOnly,
|
||||
) && user.role !== ROLES.viewOnly;
|
||||
|
||||
return (
|
||||
<Column gap>
|
||||
<SectionHeader title={formatMessage(labels.websites)}>
|
||||
{canEdit && <WebsiteAddButton teamId={teamId} />}
|
||||
</SectionHeader>
|
||||
<TeamWebsitesDataTable teamId={teamId} allowEdit={canEdit} />
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
import { DataColumn, DataTable, Icon, MenuItem, Text, Row } from '@umami/react-zen';
|
||||
import { useLoginQuery, useMessages } from '@/components/hooks';
|
||||
import { Arrow, Edit } from '@/components/icons';
|
||||
import { MenuButton } from '@/components/input/MenuButton';
|
||||
|
||||
export function TeamWebsitesTable({
|
||||
teamId,
|
||||
data = [],
|
||||
allowEdit = false,
|
||||
}: {
|
||||
teamId: string;
|
||||
data: any[];
|
||||
allowEdit?: boolean;
|
||||
}) {
|
||||
const { user } = useLoginQuery();
|
||||
const { formatMessage, labels } = useMessages();
|
||||
|
||||
return (
|
||||
<DataTable data={data}>
|
||||
<DataColumn id="name" label={formatMessage(labels.name)} />
|
||||
<DataColumn id="domain" label={formatMessage(labels.domain)} />
|
||||
<DataColumn id="createdBy" label={formatMessage(labels.createdBy)}>
|
||||
{(row: any) => row?.createUser?.username}
|
||||
</DataColumn>
|
||||
<DataColumn id="action" label=" " align="end">
|
||||
{(row: any) => {
|
||||
const { id: websiteId } = row;
|
||||
|
||||
return (
|
||||
<MenuButton>
|
||||
<MenuItem href={`/teams/${teamId}/websites/${websiteId}`}>
|
||||
<Row alignItems="center" gap>
|
||||
<Icon>
|
||||
<Arrow />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.view)}</Text>
|
||||
</Row>
|
||||
</MenuItem>
|
||||
{allowEdit && (teamId || user?.isAdmin) && (
|
||||
<MenuItem href={`/teams/${teamId}/settings/websites/${websiteId}`}>
|
||||
<Row alignItems="center" gap>
|
||||
<Icon>
|
||||
<Edit />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.edit)}</Text>
|
||||
</Row>
|
||||
</MenuItem>
|
||||
)}
|
||||
</MenuButton>
|
||||
);
|
||||
}}
|
||||
</DataColumn>
|
||||
</DataTable>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import Page from '@/app/(main)/settings/websites/[websiteId]/page';
|
||||
|
||||
export default function ({ params }) {
|
||||
return <Page params={params} />;
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import { TeamWebsitesPage } from './TeamWebsitesPage';
|
||||
import { Metadata } from 'next';
|
||||
|
||||
export default async function ({ params }: { params: Promise<{ teamId: string }> }) {
|
||||
const { teamId } = await params;
|
||||
|
||||
return <TeamWebsitesPage teamId={teamId} />;
|
||||
}
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Teams Websites',
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue