mirror of
https://github.com/umami-software/umami.git
synced 2026-02-15 01:55:36 +01:00
Fixed imports.
This commit is contained in:
Mike Cao
parent
5f4b83b09c
commit
7838204186
41 changed files with 49 additions and 15298 deletions
|
|
@ -1,42 +0,0 @@
|
|||
import { useApi, useMessages } from '@/components/hooks';
|
||||
import {
|
||||
Button,
|
||||
Form,
|
||||
FormButtons,
|
||||
FormField,
|
||||
FormSubmitButton,
|
||||
TextField,
|
||||
} from '@umami/react-zen';
|
||||
|
||||
export function TeamAddForm({ onSave, onClose }: { onSave: () => void; onClose: () => void }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { post, useMutation } = useApi();
|
||||
const { mutate, error, isPending } = useMutation({
|
||||
mutationFn: (data: any) => post('/teams', data),
|
||||
});
|
||||
|
||||
const handleSubmit = async (data: any) => {
|
||||
mutate(data, {
|
||||
onSuccess: async () => {
|
||||
onSave?.();
|
||||
onClose?.();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={handleSubmit} error={error}>
|
||||
<FormField name="name" label={formatMessage(labels.name)}>
|
||||
<TextField autoComplete="off" />
|
||||
</FormField>
|
||||
<FormButtons>
|
||||
<Button isDisabled={isPending} onPress={onClose}>
|
||||
{formatMessage(labels.cancel)}
|
||||
</Button>
|
||||
<FormSubmitButton variant="primary" isDisabled={isPending}>
|
||||
{formatMessage(labels.save)}
|
||||
</FormSubmitButton>
|
||||
</FormButtons>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
import {
|
||||
Form,
|
||||
FormField,
|
||||
FormButtons,
|
||||
TextField,
|
||||
Button,
|
||||
FormSubmitButton,
|
||||
} from '@umami/react-zen';
|
||||
import { useApi, useMessages, useModified } from '@/components/hooks';
|
||||
|
||||
export function TeamJoinForm({ onSave, onClose }: { onSave: () => void; onClose: () => void }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { post, useMutation } = useApi();
|
||||
const { mutate, error } = useMutation({ mutationFn: (data: any) => post('/teams/join', data) });
|
||||
const { touch } = useModified();
|
||||
|
||||
const handleSubmit = async (data: any) => {
|
||||
mutate(data, {
|
||||
onSuccess: async () => {
|
||||
touch('teams:members');
|
||||
onSave?.();
|
||||
onClose?.();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={handleSubmit} error={error}>
|
||||
<FormField
|
||||
label={formatMessage(labels.accessCode)}
|
||||
name="accessCode"
|
||||
rules={{ required: formatMessage(labels.required) }}
|
||||
>
|
||||
<TextField autoComplete="off" />
|
||||
</FormField>
|
||||
<FormButtons>
|
||||
<Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>
|
||||
<FormSubmitButton variant="primary">{formatMessage(labels.join)}</FormSubmitButton>
|
||||
</FormButtons>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
import { useLoginQuery, useMessages, useModified } from '@/components/hooks';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Button, Icon, Modal, DialogTrigger, Dialog, Text } from '@umami/react-zen';
|
||||
import { LogOut } from '@/components/icons';
|
||||
import { TeamLeaveForm } from './TeamLeaveForm';
|
||||
|
||||
export function TeamLeaveButton({ teamId, teamName }: { teamId: string; teamName: string }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const router = useRouter();
|
||||
const { user } = useLoginQuery();
|
||||
const { touch } = useModified();
|
||||
|
||||
const handleLeave = async () => {
|
||||
touch('teams');
|
||||
router.push('/settings/teams');
|
||||
};
|
||||
|
||||
return (
|
||||
<DialogTrigger>
|
||||
<Button>
|
||||
<Icon>
|
||||
<LogOut />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.leave)}</Text>
|
||||
</Button>
|
||||
<Modal>
|
||||
<Dialog title={formatMessage(labels.leaveTeam)} style={{ width: 400 }}>
|
||||
{({ close }) => (
|
||||
<TeamLeaveForm
|
||||
teamId={teamId}
|
||||
userId={user.id}
|
||||
teamName={teamName}
|
||||
onSave={handleLeave}
|
||||
onClose={close}
|
||||
/>
|
||||
)}
|
||||
</Dialog>
|
||||
</Modal>
|
||||
</DialogTrigger>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
import { useApi, useMessages, useModified } from '@/components/hooks';
|
||||
import { ConfirmationForm } from '@/components/common/ConfirmationForm';
|
||||
|
||||
export function TeamLeaveForm({
|
||||
teamId,
|
||||
userId,
|
||||
teamName,
|
||||
onSave,
|
||||
onClose,
|
||||
}: {
|
||||
teamId: string;
|
||||
userId: string;
|
||||
teamName: string;
|
||||
onSave: () => void;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const { formatMessage, labels, messages } = useMessages();
|
||||
const { del, useMutation } = useApi();
|
||||
const { mutate, error, isPending } = useMutation({
|
||||
mutationFn: () => del(`/teams/${teamId}/users/${userId}`),
|
||||
});
|
||||
const { touch } = useModified();
|
||||
|
||||
const handleConfirm = async () => {
|
||||
mutate(null, {
|
||||
onSuccess: async () => {
|
||||
touch('teams:members');
|
||||
onSave();
|
||||
onClose();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<ConfirmationForm
|
||||
buttonLabel={formatMessage(labels.leave)}
|
||||
message={formatMessage(messages.confirmLeave, {
|
||||
target: <b key={messages.confirmLeave.id}>{teamName}</b>,
|
||||
})}
|
||||
onConfirm={handleConfirm}
|
||||
onClose={onClose}
|
||||
isLoading={isPending}
|
||||
error={error}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import { Button, Icon, Modal, DialogTrigger, Dialog, Text, useToast } from '@umami/react-zen';
|
||||
import { Plus } from '@/components/icons';
|
||||
import { useMessages, useModified } from '@/components/hooks';
|
||||
import { TeamAddForm } from './TeamAddForm';
|
||||
import { messages } from '@/components/messages';
|
||||
|
||||
export function TeamsAddButton({ onSave }: { onSave?: () => void }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { toast } = useToast();
|
||||
const { touch } = useModified();
|
||||
|
||||
const handleSave = async () => {
|
||||
toast(formatMessage(messages.saved));
|
||||
touch('teams');
|
||||
onSave?.();
|
||||
};
|
||||
|
||||
return (
|
||||
<DialogTrigger>
|
||||
<Button variant="primary">
|
||||
<Icon>
|
||||
<Plus />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.createTeam)}</Text>
|
||||
</Button>
|
||||
<Modal>
|
||||
<Dialog title={formatMessage(labels.createTeam)} style={{ width: 400 }}>
|
||||
{({ close }) => <TeamAddForm onSave={handleSave} onClose={close} />}
|
||||
</Dialog>
|
||||
</Modal>
|
||||
</DialogTrigger>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
import { Row } from '@umami/react-zen';
|
||||
import { PageHeader } from '@/components/common/PageHeader';
|
||||
import { ROLES } from '@/lib/constants';
|
||||
import { useLoginQuery, useMessages } from '@/components/hooks';
|
||||
import { TeamsJoinButton } from './TeamsJoinButton';
|
||||
import { TeamsAddButton } from './TeamsAddButton';
|
||||
|
||||
export function TeamsHeader({ allowCreate = true }: { allowCreate?: boolean }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { user } = useLoginQuery();
|
||||
const cloudMode = !!process.env.cloudMode;
|
||||
|
||||
return (
|
||||
<PageHeader title={formatMessage(labels.teams)}>
|
||||
<Row gap="3">
|
||||
{!cloudMode && <TeamsJoinButton />}
|
||||
{allowCreate && user.role !== ROLES.viewOnly && <TeamsAddButton />}
|
||||
</Row>
|
||||
</PageHeader>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
import { Button, Icon, Modal, DialogTrigger, Dialog, Text, useToast } from '@umami/react-zen';
|
||||
import { AddUser } from '@/components/icons';
|
||||
import { useMessages, useModified } from '@/components/hooks';
|
||||
import { TeamJoinForm } from './TeamJoinForm';
|
||||
|
||||
export function TeamsJoinButton() {
|
||||
const { formatMessage, labels, messages } = useMessages();
|
||||
const { toast } = useToast();
|
||||
const { touch } = useModified();
|
||||
|
||||
const handleJoin = () => {
|
||||
toast(formatMessage(messages.saved));
|
||||
touch('teams');
|
||||
};
|
||||
|
||||
return (
|
||||
<DialogTrigger>
|
||||
<Button>
|
||||
<Icon>
|
||||
<AddUser />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.joinTeam)}</Text>
|
||||
</Button>
|
||||
<Modal>
|
||||
<Dialog title={formatMessage(labels.joinTeam)} style={{ width: 400 }}>
|
||||
{({ close }) => <TeamJoinForm onSave={handleJoin} onClose={close} />}
|
||||
</Dialog>
|
||||
</Modal>
|
||||
</DialogTrigger>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
'use client';
|
||||
import { TeamsDataTable } from './TeamsDataTable';
|
||||
import { TeamsHeader } from './TeamsHeader';
|
||||
import { TeamsDataTable } from '@/app/(main)/teams/TeamsDataTable';
|
||||
import { TeamsHeader } from '@/app/(main)/teams/TeamsHeader';
|
||||
import { Column } from '@umami/react-zen';
|
||||
import { Panel } from '@/components/common/Panel';
|
||||
|
||||
|
|
|
|||
|
|
@ -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,66 +0,0 @@
|
|||
import { useContext, useState } from 'react';
|
||||
import { Column, Tabs, TabList, Tab, TabPanel } from '@umami/react-zen';
|
||||
import { TeamContext } from '@/app/(main)/settings/teams/[teamId]/TeamProvider';
|
||||
import { useLoginQuery, useMessages, useNavigation } from '@/components/hooks';
|
||||
|
||||
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 './TeamWebsitesDataTable';
|
||||
import { TeamMembersDataTable } from './TeamMembersDataTable';
|
||||
import { PageHeader } from '@/components/common/PageHeader';
|
||||
import { Panel } from '@/components/common/Panel';
|
||||
|
||||
export function TeamDetails({ teamId }: { teamId: string }) {
|
||||
const team = useContext(TeamContext);
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { user } = useLoginQuery();
|
||||
const { query, pathname } = useNavigation();
|
||||
const [tab, setTab] = useState(query?.tab || 'details');
|
||||
|
||||
const isAdmin = pathname.includes('/admin');
|
||||
|
||||
const isTeamOwner =
|
||||
!!team?.teamUser?.find(({ userId, role }) => role === ROLES.teamOwner && userId === user.id) &&
|
||||
user.role !== ROLES.viewOnly;
|
||||
|
||||
const canEdit =
|
||||
user.isAdmin ||
|
||||
(!!team?.teamUser?.find(
|
||||
({ userId, role }) =>
|
||||
(role === ROLES.teamOwner || role === ROLES.teamManager) && userId === user.id,
|
||||
) &&
|
||||
user.role !== ROLES.viewOnly);
|
||||
|
||||
return (
|
||||
<Column gap="6">
|
||||
<PageHeader title={team?.name} icon={<Users />}>
|
||||
{!isTeamOwner && !isAdmin && <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>
|
||||
<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" style={{ width: 500 }}>
|
||||
<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>
|
||||
</Panel>
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
import {
|
||||
Form,
|
||||
FormField,
|
||||
FormButtons,
|
||||
FormSubmitButton,
|
||||
TextField,
|
||||
Button,
|
||||
useToast,
|
||||
} 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)/settings/teams/[teamId]/TeamProvider';
|
||||
|
||||
const generateId = () => `team_${getRandomChars(16)}`;
|
||||
|
||||
export function TeamEditForm({
|
||||
teamId,
|
||||
allowEdit,
|
||||
onSave,
|
||||
}: {
|
||||
teamId: string;
|
||||
allowEdit?: boolean;
|
||||
onSave?: () => void;
|
||||
}) {
|
||||
const team = useContext(TeamContext);
|
||||
const { formatMessage, labels, messages } = useMessages();
|
||||
const { post, useMutation } = useApi();
|
||||
const { toast } = useToast();
|
||||
const { touch } = useModified();
|
||||
|
||||
const { mutate, error } = useMutation({
|
||||
mutationFn: (data: any) => post(`/teams/${teamId}`, data),
|
||||
});
|
||||
|
||||
const handleSubmit = async (data: any) => {
|
||||
mutate(data, {
|
||||
onSuccess: async () => {
|
||||
touch('teams');
|
||||
touch(`teams:${teamId}`);
|
||||
toast(formatMessage(messages.saved));
|
||||
onSave?.();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
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) }}
|
||||
>
|
||||
<TextField isReadOnly={!allowEdit} />
|
||||
</FormField>
|
||||
<FormField name="accessCode" label={formatMessage(labels.accessCode)}>
|
||||
<TextField isReadOnly allowCopy />
|
||||
</FormField>
|
||||
{allowEdit && (
|
||||
<FormButtons justifyContent="space-between">
|
||||
<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)} style={{ width: 400 }}>
|
||||
{({ close }) => <TeamDeleteForm teamId={teamId} onSave={handleLeave} onClose={close} />}
|
||||
</Dialog>
|
||||
</Modal>
|
||||
</DialogTrigger>
|
||||
</ActionForm>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
import { useMessages, useModified } from '@/components/hooks';
|
||||
import { Dialog, useToast } from '@umami/react-zen';
|
||||
import { TeamMemberEditForm } from './TeamMemberEditForm';
|
||||
import { ActionButton } from '@/components/input/ActionButton';
|
||||
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 = () => {
|
||||
touch('teams:members');
|
||||
toast(formatMessage(messages.saved));
|
||||
onSave?.();
|
||||
};
|
||||
|
||||
return (
|
||||
<ActionButton title={formatMessage(labels.edit)} icon={<Edit />}>
|
||||
<Dialog title={formatMessage(labels.editMember)} style={{ width: 400 }}>
|
||||
{({ close }) => (
|
||||
<TeamMemberEditForm
|
||||
teamId={teamId}
|
||||
userId={userId}
|
||||
role={role}
|
||||
onSave={handleSave}
|
||||
onClose={close}
|
||||
/>
|
||||
)}
|
||||
</Dialog>
|
||||
</ActionButton>
|
||||
);
|
||||
}
|
||||
|
|
@ -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} defaultValues={{ 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>
|
||||
<Button isDisabled={isPending} onPress={onClose}>
|
||||
{formatMessage(labels.cancel)}
|
||||
</Button>
|
||||
<FormSubmitButton variant="primary" isDisabled={false}>
|
||||
{formatMessage(labels.save)}
|
||||
</FormSubmitButton>
|
||||
</FormButtons>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
import { ConfirmationForm } from '@/components/common/ConfirmationForm';
|
||||
import { useApi, useMessages, useModified } from '@/components/hooks';
|
||||
import { messages } from '@/components/messages';
|
||||
import { Trash } from '@/components/icons';
|
||||
import { Dialog } from '@umami/react-zen';
|
||||
import { ActionButton } from '@/components/input/ActionButton';
|
||||
|
||||
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 (
|
||||
<ActionButton title={formatMessage(labels.delete)} icon={<Trash />}>
|
||||
<Dialog title={formatMessage(labels.removeMember)} style={{ width: 400 }}>
|
||||
{({ close }) => (
|
||||
<ConfirmationForm
|
||||
message={formatMessage(messages.confirmRemove, {
|
||||
target: userName,
|
||||
})}
|
||||
isLoading={isPending}
|
||||
error={error}
|
||||
onConfirm={handleConfirm.bind(null, close)}
|
||||
onClose={close}
|
||||
buttonLabel={formatMessage(labels.remove)}
|
||||
buttonVariant="danger"
|
||||
/>
|
||||
)}
|
||||
</Dialog>
|
||||
</ActionButton>
|
||||
);
|
||||
}
|
||||
|
|
@ -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} allowSearch>
|
||||
{({ data }) => <TeamMembersTable data={data} teamId={teamId} allowEdit={allowEdit} />}
|
||||
</DataGrid>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
'use client';
|
||||
import { TeamMembersDataTable } from './TeamMembersDataTable';
|
||||
import { SectionHeader } from '@/components/common/SectionHeader';
|
||||
import { useLoginQuery, useMessages, useTeam } from '@/components/hooks';
|
||||
import { ROLES } from '@/lib/constants';
|
||||
import { Column } from '@umami/react-zen';
|
||||
|
||||
export function TeamMembersPage({ teamId }: { teamId: string }) {
|
||||
const team = useTeam();
|
||||
const { user } = useLoginQuery();
|
||||
const { formatMessage, labels } = useMessages();
|
||||
|
||||
const canEdit =
|
||||
team?.members?.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,55 +0,0 @@
|
|||
import { DataColumn, DataTable, Row } from '@umami/react-zen';
|
||||
import { useMessages } from '@/components/hooks';
|
||||
import { ROLES } from '@/lib/constants';
|
||||
import { TeamMemberRemoveButton } from './TeamMemberRemoveButton';
|
||||
import { TeamMemberEditButton } from './TeamMemberEditButton';
|
||||
|
||||
export function TeamMembersTable({
|
||||
data = [],
|
||||
teamId,
|
||||
allowEdit = false,
|
||||
}: {
|
||||
data: any[];
|
||||
teamId: string;
|
||||
allowEdit: boolean;
|
||||
}) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
|
||||
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>
|
||||
{allowEdit && (
|
||||
<DataColumn id="action" align="end">
|
||||
{(row: any) => {
|
||||
if (row?.role === ROLES.teamOwner) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Row alignItems="center">
|
||||
<TeamMemberEditButton teamId={teamId} userId={row?.user?.id} role={row?.role} />
|
||||
<TeamMemberRemoveButton
|
||||
teamId={teamId}
|
||||
userId={row?.user?.id}
|
||||
userName={row?.user?.username}
|
||||
/>
|
||||
</Row>
|
||||
);
|
||||
}}
|
||||
</DataColumn>
|
||||
)}
|
||||
</DataTable>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
'use client';
|
||||
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 { data: team, isLoading, isFetching } = useTeamQuery(teamId);
|
||||
|
||||
if (isFetching && isLoading) {
|
||||
return <Loading position="page" />;
|
||||
}
|
||||
|
||||
if (!team) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <TeamContext.Provider value={team}>{children}</TeamContext.Provider>;
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
'use client';
|
||||
import { TeamProvider } from '@/app/(main)/settings/teams/[teamId]/TeamProvider';
|
||||
import { TeamDetails } from '@/app/(main)/settings/teams/[teamId]/TeamDetails';
|
||||
import { TeamProvider } from '@/app/(main)/teams/[teamId]/TeamProvider';
|
||||
import { TeamDetails } from '@/app/(main)/teams/[teamId]/TeamDetails';
|
||||
|
||||
export function TeamSettingsPage({ teamId }: { teamId: string }) {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -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} allowSearch>
|
||||
{({ data }) => <TeamWebsitesTable data={data} teamId={teamId} allowEdit={allowEdit} />}
|
||||
</DataGrid>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import { DataColumn, DataTable } from '@umami/react-zen';
|
||||
import { useMessages } from '@/components/hooks';
|
||||
import Link from 'next/link';
|
||||
|
||||
export function TeamWebsitesTable({ teamId, data = [] }: { teamId: string; data: any[] }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
|
||||
return (
|
||||
<DataTable data={data}>
|
||||
<DataColumn id="name" label={formatMessage(labels.name)}>
|
||||
{(row: any) => <Link href={`/teams/${teamId}/websites/${row.id}`}>{row.name}</Link>}
|
||||
</DataColumn>
|
||||
<DataColumn id="domain" label={formatMessage(labels.domain)} />
|
||||
<DataColumn id="createdBy" label={formatMessage(labels.createdBy)}>
|
||||
{(row: any) => row?.createUser?.username}
|
||||
</DataColumn>
|
||||
</DataTable>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
import { Button, Modal, DialogTrigger, Dialog, Column } from '@umami/react-zen';
|
||||
import {
|
||||
useLoginQuery,
|
||||
useMessages,
|
||||
useModified,
|
||||
useUserTeamsQuery,
|
||||
useNavigation,
|
||||
} from '@/components/hooks';
|
||||
import { WebsiteDeleteForm } from './WebsiteDeleteForm';
|
||||
import { WebsiteResetForm } from './WebsiteResetForm';
|
||||
import { WebsiteTransferForm } from './WebsiteTransferForm';
|
||||
import { ActionForm } from '@/components/common/ActionForm';
|
||||
import { ROLES } from '@/lib/constants';
|
||||
|
||||
export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?: () => void }) {
|
||||
const { formatMessage, labels, messages } = useMessages();
|
||||
const { user } = useLoginQuery();
|
||||
const { touch } = useModified();
|
||||
const { router, pathname, teamId, renderUrl } = useNavigation();
|
||||
const { data: teams } = useUserTeamsQuery(user.id);
|
||||
const isAdmin = pathname.startsWith('/admin');
|
||||
|
||||
const canTransferWebsite =
|
||||
(
|
||||
(!teamId &&
|
||||
teams?.data?.filter(({ members }) =>
|
||||
members.find(
|
||||
({ role, userId }) =>
|
||||
[ROLES.teamOwner, ROLES.teamManager].includes(role) && userId === user.id,
|
||||
),
|
||||
)) ||
|
||||
[]
|
||||
).length > 0 ||
|
||||
(teamId &&
|
||||
!!teams?.data
|
||||
?.find(({ id }) => id === teamId)
|
||||
?.members.find(({ role, userId }) => role === ROLES.teamOwner && userId === user.id));
|
||||
|
||||
const handleSave = () => {
|
||||
touch('websites');
|
||||
onSave?.();
|
||||
router.push(renderUrl(`/settings/websites`));
|
||||
};
|
||||
|
||||
const handleReset = async () => {
|
||||
onSave?.();
|
||||
};
|
||||
|
||||
return (
|
||||
<Column gap="6">
|
||||
{!isAdmin && (
|
||||
<ActionForm
|
||||
label={formatMessage(labels.transferWebsite)}
|
||||
description={formatMessage(messages.transferWebsite)}
|
||||
>
|
||||
<DialogTrigger>
|
||||
<Button isDisabled={!canTransferWebsite}>{formatMessage(labels.transfer)}</Button>
|
||||
<Modal>
|
||||
<Dialog title={formatMessage(labels.transferWebsite)} style={{ width: 400 }}>
|
||||
{({ close }) => (
|
||||
<WebsiteTransferForm websiteId={websiteId} onSave={handleSave} onClose={close} />
|
||||
)}
|
||||
</Dialog>
|
||||
</Modal>
|
||||
</DialogTrigger>
|
||||
</ActionForm>
|
||||
)}
|
||||
|
||||
<ActionForm
|
||||
label={formatMessage(labels.resetWebsite)}
|
||||
description={formatMessage(messages.resetWebsiteWarning)}
|
||||
>
|
||||
<DialogTrigger>
|
||||
<Button>{formatMessage(labels.reset)}</Button>
|
||||
<Modal>
|
||||
<Dialog title={formatMessage(labels.resetWebsite)} style={{ width: 400 }}>
|
||||
{({ close }) => (
|
||||
<WebsiteResetForm websiteId={websiteId} onSave={handleReset} onClose={close} />
|
||||
)}
|
||||
</Dialog>
|
||||
</Modal>
|
||||
</DialogTrigger>
|
||||
</ActionForm>
|
||||
|
||||
<ActionForm
|
||||
label={formatMessage(labels.deleteWebsite)}
|
||||
description={formatMessage(messages.deleteWebsiteWarning)}
|
||||
>
|
||||
<DialogTrigger>
|
||||
<Button data-test="button-delete" variant="danger">
|
||||
{formatMessage(labels.delete)}
|
||||
</Button>
|
||||
<Modal>
|
||||
<Dialog title={formatMessage(labels.deleteWebsite)} style={{ width: 400 }}>
|
||||
{({ close }) => (
|
||||
<WebsiteDeleteForm websiteId={websiteId} onSave={handleSave} onClose={close} />
|
||||
)}
|
||||
</Dialog>
|
||||
</Modal>
|
||||
</DialogTrigger>
|
||||
</ActionForm>
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
import { useApi, useMessages, useModified } from '@/components/hooks';
|
||||
import { TypeConfirmationForm } from '@/components/common/TypeConfirmationForm';
|
||||
|
||||
const CONFIRM_VALUE = 'DELETE';
|
||||
|
||||
export function WebsiteDeleteForm({
|
||||
websiteId,
|
||||
onSave,
|
||||
onClose,
|
||||
}: {
|
||||
websiteId: string;
|
||||
onSave?: () => void;
|
||||
onClose?: () => void;
|
||||
}) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { del, useMutation } = useApi();
|
||||
const { mutate, isPending, error } = useMutation({
|
||||
mutationFn: () => del(`/websites/${websiteId}`),
|
||||
});
|
||||
const { touch } = useModified();
|
||||
|
||||
const handleConfirm = async () => {
|
||||
mutate(null, {
|
||||
onSuccess: async () => {
|
||||
touch('websites');
|
||||
touch(`websites:${websiteId}`);
|
||||
onSave?.();
|
||||
onClose?.();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<TypeConfirmationForm
|
||||
confirmationValue={CONFIRM_VALUE}
|
||||
onConfirm={handleConfirm}
|
||||
onClose={onClose}
|
||||
isLoading={isPending}
|
||||
error={error}
|
||||
buttonLabel={formatMessage(labels.delete)}
|
||||
buttonVariant="danger"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
import { useContext } from 'react';
|
||||
import {
|
||||
FormSubmitButton,
|
||||
Form,
|
||||
FormField,
|
||||
FormButtons,
|
||||
TextField,
|
||||
useToast,
|
||||
} from '@umami/react-zen';
|
||||
import { useApi, useMessages, useModified } from '@/components/hooks';
|
||||
import { DOMAIN_REGEX } from '@/lib/constants';
|
||||
import { WebsiteContext } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
|
||||
|
||||
export function WebsiteEditForm({ websiteId, onSave }: { websiteId: string; onSave?: () => void }) {
|
||||
const website = useContext(WebsiteContext);
|
||||
const { formatMessage, labels, messages } = useMessages();
|
||||
const { post, useMutation } = useApi();
|
||||
const { toast } = useToast();
|
||||
const { touch } = useModified();
|
||||
|
||||
const { mutate, error } = useMutation({
|
||||
mutationFn: (data: any) => post(`/websites/${websiteId}`, data),
|
||||
});
|
||||
|
||||
const handleSubmit = async (data: any) => {
|
||||
mutate(data, {
|
||||
onSuccess: async () => {
|
||||
toast(formatMessage(messages.saved));
|
||||
touch(`website:${website.id}`);
|
||||
onSave?.();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={handleSubmit} error={error} values={website}>
|
||||
<FormField name="id" label={formatMessage(labels.websiteId)}>
|
||||
<TextField data-test="text-field-websiteId" value={website?.id} isReadOnly allowCopy />
|
||||
</FormField>
|
||||
<FormField
|
||||
label={formatMessage(labels.name)}
|
||||
data-test="input-name"
|
||||
name="name"
|
||||
rules={{ required: formatMessage(labels.required) }}
|
||||
>
|
||||
<TextField />
|
||||
</FormField>
|
||||
<FormField
|
||||
label={formatMessage(labels.domain)}
|
||||
data-test="input-domain"
|
||||
name="domain"
|
||||
rules={{
|
||||
required: formatMessage(labels.required),
|
||||
pattern: {
|
||||
value: DOMAIN_REGEX,
|
||||
message: formatMessage(messages.invalidDomain),
|
||||
},
|
||||
}}
|
||||
>
|
||||
<TextField />
|
||||
</FormField>
|
||||
<FormButtons>
|
||||
<FormSubmitButton data-test="button-submit" variant="primary">
|
||||
{formatMessage(labels.save)}
|
||||
</FormSubmitButton>
|
||||
</FormButtons>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
import { useApi, useMessages } from '@/components/hooks';
|
||||
import { TypeConfirmationForm } from '@/components/common/TypeConfirmationForm';
|
||||
|
||||
const CONFIRM_VALUE = 'RESET';
|
||||
|
||||
export function WebsiteResetForm({
|
||||
websiteId,
|
||||
onSave,
|
||||
onClose,
|
||||
}: {
|
||||
websiteId: string;
|
||||
onSave?: () => void;
|
||||
onClose?: () => void;
|
||||
}) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { post, useMutation } = useApi();
|
||||
const { mutate, isPending, error } = useMutation({
|
||||
mutationFn: (data: any) => post(`/websites/${websiteId}/reset`, data),
|
||||
});
|
||||
|
||||
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.reset)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
import { useContext } from 'react';
|
||||
import { Tabs, TabList, Tab, TabPanel } from '@umami/react-zen';
|
||||
import { WebsiteContext } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
|
||||
import { useMessages } from '@/components/hooks';
|
||||
import { WebsiteShareForm } from './WebsiteShareForm';
|
||||
import { WebsiteTrackingCode } from './WebsiteTrackingCode';
|
||||
import { WebsiteData } from './WebsiteData';
|
||||
import { WebsiteEditForm } from './WebsiteEditForm';
|
||||
|
||||
export function WebsiteSettings({ websiteId }: { websiteId: string; openExternal?: boolean }) {
|
||||
const website = useContext(WebsiteContext);
|
||||
const { formatMessage, labels } = useMessages();
|
||||
|
||||
return (
|
||||
<Tabs>
|
||||
<TabList>
|
||||
<Tab id="details">{formatMessage(labels.details)}</Tab>
|
||||
<Tab id="tracking">{formatMessage(labels.trackingCode)}</Tab>
|
||||
<Tab id="share"> {formatMessage(labels.shareUrl)}</Tab>
|
||||
<Tab id="manage">{formatMessage(labels.manage)}</Tab>
|
||||
</TabList>
|
||||
<TabPanel id="details" style={{ width: 500 }}>
|
||||
<WebsiteEditForm websiteId={websiteId} />
|
||||
</TabPanel>
|
||||
<TabPanel id="tracking">
|
||||
<WebsiteTrackingCode websiteId={websiteId} />
|
||||
</TabPanel>
|
||||
<TabPanel id="share" style={{ width: 500 }}>
|
||||
<WebsiteShareForm websiteId={websiteId} shareId={website.shareId} />
|
||||
</TabPanel>
|
||||
<TabPanel id="manage">
|
||||
<WebsiteData websiteId={websiteId} />
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { useContext } from 'react';
|
||||
import { WebsiteContext } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
|
||||
import { PageHeader } from '@/components/common/PageHeader';
|
||||
import { Globe } from '@/components/icons';
|
||||
|
||||
export function WebsiteSettingsHeader() {
|
||||
const website = useContext(WebsiteContext);
|
||||
|
||||
return <PageHeader title={website?.name} icon={<Globe />} />;
|
||||
}
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
'use client';
|
||||
import { Column } from '@umami/react-zen';
|
||||
import { WebsiteProvider } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
|
||||
import { WebsiteSettings } from './WebsiteSettings';
|
||||
import { WebsiteSettingsHeader } from '@/app/(main)/settings/websites/[websiteId]/WebsiteSettingsHeader';
|
||||
import { WebsiteSettings } from '@/app/(main)/websites/[websiteId]/settings/WebsiteSettings';
|
||||
import { WebsiteSettingsHeader } from '@/app/(main)/websites/[websiteId]/settings/WebsiteSettingsHeader';
|
||||
import { Panel } from '@/components/common/Panel';
|
||||
|
||||
export function WebsiteSettingsPage({ websiteId }: { websiteId: string }) {
|
||||
|
|
|
|||
|
|
@ -1,86 +0,0 @@
|
|||
import {
|
||||
Form,
|
||||
FormButtons,
|
||||
TextField,
|
||||
Button,
|
||||
Switch,
|
||||
FormSubmitButton,
|
||||
Column,
|
||||
Label,
|
||||
useToast,
|
||||
Row,
|
||||
} from '@umami/react-zen';
|
||||
import { useState } from 'react';
|
||||
import { getRandomChars } from '@/lib/crypto';
|
||||
import { useApi, useMessages, useModified } from '@/components/hooks';
|
||||
|
||||
const generateId = () => getRandomChars(16);
|
||||
|
||||
export interface WebsiteShareFormProps {
|
||||
websiteId: string;
|
||||
shareId?: string;
|
||||
onSave?: () => void;
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
export function WebsiteShareForm({ websiteId, shareId, onSave, onClose }: WebsiteShareFormProps) {
|
||||
const { formatMessage, labels, messages } = useMessages();
|
||||
const [id, setId] = useState(shareId);
|
||||
const { post, useMutation } = useApi();
|
||||
const { mutate, error, isPending } = useMutation({
|
||||
mutationFn: (data: any) => post(`/websites/${websiteId}`, data),
|
||||
});
|
||||
const { touch } = useModified();
|
||||
const { toast } = useToast();
|
||||
|
||||
const url = `${window?.location.origin || ''}${process.env.basePath || ''}/share/${id}`;
|
||||
|
||||
const handleGenerate = () => {
|
||||
setId(generateId());
|
||||
};
|
||||
|
||||
const handleSwitch = () => {
|
||||
setId(id ? null : generateId());
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
const data = {
|
||||
shareId: id,
|
||||
};
|
||||
mutate(data, {
|
||||
onSuccess: async () => {
|
||||
toast(formatMessage(messages.saved));
|
||||
touch(`website:${websiteId}`);
|
||||
onSave?.();
|
||||
onClose?.();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={handleSave} error={error} values={{ url }}>
|
||||
<Column gap>
|
||||
<Switch isSelected={!!id} onChange={handleSwitch}>
|
||||
{formatMessage(labels.enableShareUrl)}
|
||||
</Switch>
|
||||
{id && (
|
||||
<Column>
|
||||
<Label>{formatMessage(labels.shareUrl)}</Label>
|
||||
<TextField value={url} isReadOnly allowCopy />
|
||||
</Column>
|
||||
)}
|
||||
<FormButtons justifyContent="space-between">
|
||||
<Row>
|
||||
{id && <Button onPress={handleGenerate}>{formatMessage(labels.regenerate)}</Button>}
|
||||
</Row>
|
||||
<Row alignItems="center" gap>
|
||||
{onClose && <Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>}
|
||||
<FormSubmitButton isDisabled={false} isLoading={isPending}>
|
||||
{formatMessage(labels.save)}
|
||||
</FormSubmitButton>
|
||||
</Row>
|
||||
</FormButtons>
|
||||
</Column>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import { TextField, Text, Column } from '@umami/react-zen';
|
||||
import { useMessages, useConfig } from '@/components/hooks';
|
||||
|
||||
const SCRIPT_NAME = 'script.js';
|
||||
|
||||
export function WebsiteTrackingCode({
|
||||
websiteId,
|
||||
hostUrl,
|
||||
}: {
|
||||
websiteId: string;
|
||||
hostUrl?: string;
|
||||
}) {
|
||||
const { formatMessage, messages } = useMessages();
|
||||
const config = useConfig();
|
||||
|
||||
const trackerScriptName =
|
||||
config?.trackerScriptName?.split(',')?.map((n: string) => n.trim())?.[0] || SCRIPT_NAME;
|
||||
|
||||
const url = trackerScriptName?.startsWith('http')
|
||||
? trackerScriptName
|
||||
: `${hostUrl || window?.location.origin || ''}${
|
||||
process.env.basePath || ''
|
||||
}/${trackerScriptName}`;
|
||||
|
||||
const code = `<script defer src="${url}" data-website-id="${websiteId}"></script>`;
|
||||
|
||||
return (
|
||||
<Column gap>
|
||||
<Text>{formatMessage(messages.trackingCode)}</Text>
|
||||
<TextField value={code} isReadOnly allowCopy asTextArea resize="none" />
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
import { Key, useContext, useState } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Form,
|
||||
FormButtons,
|
||||
FormField,
|
||||
FormSubmitButton,
|
||||
Loading,
|
||||
Select,
|
||||
ListItem,
|
||||
Text,
|
||||
} from '@umami/react-zen';
|
||||
import { useApi, useLoginQuery, useMessages, useUserTeamsQuery } from '@/components/hooks';
|
||||
import { WebsiteContext } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
|
||||
import { ROLES } from '@/lib/constants';
|
||||
|
||||
export function WebsiteTransferForm({
|
||||
websiteId,
|
||||
onSave,
|
||||
onClose,
|
||||
}: {
|
||||
websiteId: string;
|
||||
onSave?: () => void;
|
||||
onClose?: () => void;
|
||||
}) {
|
||||
const { user } = useLoginQuery();
|
||||
const website = useContext(WebsiteContext);
|
||||
const [teamId, setTeamId] = useState<string>(null);
|
||||
const { formatMessage, labels, messages } = useMessages();
|
||||
const { post, useMutation } = useApi();
|
||||
const { mutate, error } = useMutation({
|
||||
mutationFn: (data: any) => post(`/websites/${websiteId}/transfer`, data),
|
||||
});
|
||||
const { data: teams, isLoading } = useUserTeamsQuery(user.id);
|
||||
const isTeamWebsite = !!website?.teamId;
|
||||
|
||||
const items =
|
||||
teams?.data?.filter(({ teamUser }) =>
|
||||
teamUser.find(
|
||||
({ role, userId }) =>
|
||||
[ROLES.teamOwner, ROLES.teamManager].includes(role) && userId === user.id,
|
||||
),
|
||||
) || [];
|
||||
|
||||
const handleSubmit = async () => {
|
||||
mutate(
|
||||
{
|
||||
userId: website.teamId ? user.id : undefined,
|
||||
teamId: website.userId ? teamId : undefined,
|
||||
},
|
||||
{
|
||||
onSuccess: async () => {
|
||||
onSave?.();
|
||||
onClose?.();
|
||||
},
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
const handleChange = (key: Key) => {
|
||||
setTeamId(key as string);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return <Loading icon="dots" position="center" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Form onSubmit={handleSubmit} error={error} values={{ teamId }}>
|
||||
<Text>
|
||||
{formatMessage(
|
||||
isTeamWebsite ? messages.transferTeamWebsiteToUser : messages.transferUserWebsiteToTeam,
|
||||
)}
|
||||
</Text>
|
||||
<FormField name="teamId">
|
||||
{!isTeamWebsite && (
|
||||
<Select onSelectionChange={handleChange} selectedKey={teamId}>
|
||||
{items.map(({ id, name }) => {
|
||||
return (
|
||||
<ListItem key={`${id}!!!!`} id={`${id}????`}>
|
||||
{name}
|
||||
</ListItem>
|
||||
);
|
||||
})}
|
||||
</Select>
|
||||
)}
|
||||
</FormField>
|
||||
<FormButtons>
|
||||
<Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>
|
||||
<FormSubmitButton variant="primary" isDisabled={!isTeamWebsite && !teamId}>
|
||||
{formatMessage(labels.transfer)}
|
||||
</FormSubmitButton>
|
||||
</FormButtons>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue