mirror of
https://github.com/umami-software/umami.git
synced 2026-02-12 00:27:11 +01:00
Fixed teams settings.
This commit is contained in:
Mike Cao
parent
9104332623
commit
b0c9197f2d
21 changed files with 40 additions and 2 deletions
|
|
@ -1,49 +0,0 @@
|
|||
import { useMessages, useModified } from 'components/hooks';
|
||||
import { Button, Icon, Icons, Modal, ModalTrigger, Text, useToasts } from 'react-basics';
|
||||
import TeamMemberEditForm from './TeamMemberEditForm';
|
||||
|
||||
export function TeamMemberEditButton({
|
||||
teamId,
|
||||
userId,
|
||||
role,
|
||||
onSave,
|
||||
}: {
|
||||
teamId: string;
|
||||
userId: string;
|
||||
role: string;
|
||||
onSave?: () => void;
|
||||
}) {
|
||||
const { formatMessage, labels, messages } = useMessages();
|
||||
const { showToast } = useToasts();
|
||||
const { touch } = useModified();
|
||||
|
||||
const handleSave = () => {
|
||||
showToast({ message: formatMessage(messages.saved), variant: 'success' });
|
||||
touch('teams:members');
|
||||
onSave?.();
|
||||
};
|
||||
|
||||
return (
|
||||
<ModalTrigger>
|
||||
<Button>
|
||||
<Icon>
|
||||
<Icons.Edit />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.edit)}</Text>
|
||||
</Button>
|
||||
<Modal title={formatMessage(labels.editMember)}>
|
||||
{(close: () => void) => (
|
||||
<TeamMemberEditForm
|
||||
teamId={teamId}
|
||||
userId={userId}
|
||||
role={role}
|
||||
onSave={handleSave}
|
||||
onClose={close}
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
</ModalTrigger>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamMemberEditButton;
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
import { useApi, useMessages } from 'components/hooks';
|
||||
import { ROLES } from 'lib/constants';
|
||||
import {
|
||||
Button,
|
||||
Dropdown,
|
||||
Form,
|
||||
FormButtons,
|
||||
FormInput,
|
||||
FormRow,
|
||||
Item,
|
||||
SubmitButton,
|
||||
} from 'react-basics';
|
||||
|
||||
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();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const renderValue = (value: string) => {
|
||||
if (value === ROLES.teamManager) {
|
||||
return formatMessage(labels.manager);
|
||||
}
|
||||
if (value === ROLES.teamMember) {
|
||||
return formatMessage(labels.member);
|
||||
}
|
||||
if (value === ROLES.teamViewOnly) {
|
||||
return formatMessage(labels.viewOnly);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={handleSubmit} error={error} values={{ role }}>
|
||||
<FormRow label={formatMessage(labels.role)}>
|
||||
<FormInput name="role" rules={{ required: formatMessage(labels.required) }}>
|
||||
<Dropdown
|
||||
renderValue={renderValue}
|
||||
style={{
|
||||
minWidth: '250px',
|
||||
}}
|
||||
>
|
||||
<Item key={ROLES.teamManager}>{formatMessage(labels.manager)}</Item>
|
||||
<Item key={ROLES.teamMember}>{formatMessage(labels.member)}</Item>
|
||||
<Item key={ROLES.teamViewOnly}>{formatMessage(labels.viewOnly)}</Item>
|
||||
</Dropdown>
|
||||
</FormInput>
|
||||
</FormRow>
|
||||
<FormButtons flex>
|
||||
<SubmitButton variant="primary" disabled={false}>
|
||||
{formatMessage(labels.save)}
|
||||
</SubmitButton>
|
||||
<Button disabled={isPending} onClick={onClose}>
|
||||
{formatMessage(labels.cancel)}
|
||||
</Button>
|
||||
</FormButtons>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamMemberEditForm;
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
import ConfirmationForm from 'components/common/ConfirmationForm';
|
||||
import { useApi, useMessages, useModified } from 'components/hooks';
|
||||
import { messages } from 'components/messages';
|
||||
import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
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 (
|
||||
<ModalTrigger>
|
||||
<Button>
|
||||
<Icon>
|
||||
<Icons.Close />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.remove)}</Text>
|
||||
</Button>
|
||||
<Modal title={formatMessage(labels.removeMember)}>
|
||||
{(close: () => void) => (
|
||||
<ConfirmationForm
|
||||
message={
|
||||
<FormattedMessage
|
||||
{...messages.confirmRemove}
|
||||
values={{ target: <b>{userName}</b> }}
|
||||
/>
|
||||
}
|
||||
isLoading={isPending}
|
||||
error={error}
|
||||
onConfirm={handleConfirm.bind(null, close)}
|
||||
onClose={close}
|
||||
buttonLabel={formatMessage(labels.remove)}
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
</ModalTrigger>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamMemberRemoveButton;
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
import DataTable from 'components/common/DataTable';
|
||||
import TeamMembersTable from './TeamMembersTable';
|
||||
import { useTeamMembers } from 'components/hooks';
|
||||
|
||||
export function TeamMembersDataTable({
|
||||
teamId,
|
||||
allowEdit = false,
|
||||
}: {
|
||||
teamId: string;
|
||||
allowEdit?: boolean;
|
||||
}) {
|
||||
const queryResult = useTeamMembers(teamId);
|
||||
|
||||
return (
|
||||
<DataTable queryResult={queryResult}>
|
||||
{({ data }) => <TeamMembersTable data={data} teamId={teamId} allowEdit={allowEdit} />}
|
||||
</DataTable>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamMembersDataTable;
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
'use client';
|
||||
import { TeamContext } from 'app/(main)/teams/[teamId]/TeamProvider';
|
||||
import TeamMembersDataTable from './TeamMembersDataTable';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import { useLogin, useMessages } from 'components/hooks';
|
||||
import { ROLES } from 'lib/constants';
|
||||
import { useContext } from 'react';
|
||||
|
||||
export function TeamMembersPage({ teamId }: { teamId: string }) {
|
||||
const team = useContext(TeamContext);
|
||||
const { user } = useLogin();
|
||||
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 (
|
||||
<>
|
||||
<PageHeader title={formatMessage(labels.members)} />
|
||||
<TeamMembersDataTable teamId={teamId} allowEdit={canEdit} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamMembersPage;
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
import { GridColumn, GridTable, useBreakpoint } from 'react-basics';
|
||||
import { useMessages, useLogin } 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 { user } = useLogin();
|
||||
const breakpoint = useBreakpoint();
|
||||
|
||||
const roles = {
|
||||
[ROLES.teamOwner]: formatMessage(labels.teamOwner),
|
||||
[ROLES.teamManager]: formatMessage(labels.teamManager),
|
||||
[ROLES.teamMember]: formatMessage(labels.teamMember),
|
||||
[ROLES.teamViewOnly]: formatMessage(labels.viewOnly),
|
||||
};
|
||||
|
||||
return (
|
||||
<GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
|
||||
<GridColumn name="username" label={formatMessage(labels.username)}>
|
||||
{row => row?.user?.username}
|
||||
</GridColumn>
|
||||
<GridColumn name="role" label={formatMessage(labels.role)}>
|
||||
{row => roles[row?.role]}
|
||||
</GridColumn>
|
||||
<GridColumn name="action" label=" " alignment="end">
|
||||
{row => {
|
||||
return (
|
||||
allowEdit &&
|
||||
row?.role !== ROLES.teamOwner &&
|
||||
user?.id !== row?.user?.id && (
|
||||
<>
|
||||
<TeamMemberEditButton teamId={teamId} userId={row?.user?.id} role={row?.role} />
|
||||
<TeamMemberRemoveButton
|
||||
teamId={teamId}
|
||||
userId={row?.user?.id}
|
||||
userName={row?.user?.username}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}}
|
||||
</GridColumn>
|
||||
</GridTable>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamMembersTable;
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import TeamMembersPage from './TeamMembersPage';
|
||||
import { Metadata } from 'next';
|
||||
|
||||
export default function ({ params: { teamId } }) {
|
||||
return <TeamMembersPage teamId={teamId} />;
|
||||
}
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Team Members',
|
||||
};
|
||||
|
|
@ -1,43 +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"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamDeleteForm;
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
import { TeamContext } from 'app/(main)/teams/[teamId]/TeamProvider';
|
||||
import { useLogin, useMessages } from 'components/hooks';
|
||||
import Icons from 'components/icons';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import { ROLES } from 'lib/constants';
|
||||
import { useContext, useState } from 'react';
|
||||
import { Flexbox, Item, Tabs } from 'react-basics';
|
||||
import TeamLeaveButton from '../../TeamLeaveButton';
|
||||
import TeamManage from './TeamManage';
|
||||
import TeamEditForm from './TeamEditForm';
|
||||
|
||||
export function TeamDetails({ teamId }: { teamId: string }) {
|
||||
const team = useContext(TeamContext);
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { user } = useLogin();
|
||||
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 (
|
||||
<Flexbox direction="column">
|
||||
<PageHeader title={team?.name} icon={<Icons.Users />}>
|
||||
{!isTeamOwner && <TeamLeaveButton teamId={team.id} teamName={team.name} />}
|
||||
</PageHeader>
|
||||
<Tabs selectedKey={tab} onSelect={(value: any) => setTab(value)} style={{ marginBottom: 30 }}>
|
||||
<Item key="details">{formatMessage(labels.details)}</Item>
|
||||
{isTeamOwner && <Item key="manage">{formatMessage(labels.manage)}</Item>}
|
||||
</Tabs>
|
||||
{tab === 'details' && <TeamEditForm teamId={teamId} allowEdit={canEdit} />}
|
||||
{tab === 'manage' && <TeamManage teamId={teamId} />}
|
||||
</Flexbox>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamDetails;
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
import {
|
||||
SubmitButton,
|
||||
Form,
|
||||
FormInput,
|
||||
FormRow,
|
||||
FormButtons,
|
||||
TextField,
|
||||
Button,
|
||||
Flexbox,
|
||||
useToasts,
|
||||
} from 'react-basics';
|
||||
import { getRandomChars } from 'next-basics';
|
||||
import { useContext, useRef, useState } from 'react';
|
||||
import { useApi, useMessages } from 'components/hooks';
|
||||
import { TeamContext } from 'app/(main)/teams/[teamId]/TeamProvider';
|
||||
|
||||
const generateId = () => 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 ref = useRef(null);
|
||||
const [accessCode, setAccessCode] = useState(team.accessCode);
|
||||
const { showToast } = useToasts();
|
||||
const cloudMode = !!process.env.cloudMode;
|
||||
|
||||
const handleSubmit = async (data: any) => {
|
||||
mutate(data, {
|
||||
onSuccess: async () => {
|
||||
ref.current.reset(data);
|
||||
showToast({ message: formatMessage(messages.saved), variant: 'success' });
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleRegenerate = () => {
|
||||
const code = generateId();
|
||||
ref.current.setValue('accessCode', code, {
|
||||
shouldValidate: true,
|
||||
shouldDirty: true,
|
||||
});
|
||||
setAccessCode(code);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form ref={ref} onSubmit={handleSubmit} error={error} values={team}>
|
||||
<FormRow label={formatMessage(labels.teamId)}>
|
||||
<TextField value={teamId} readOnly allowCopy />
|
||||
</FormRow>
|
||||
<FormRow label={formatMessage(labels.name)}>
|
||||
{allowEdit && (
|
||||
<FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
|
||||
<TextField />
|
||||
</FormInput>
|
||||
)}
|
||||
{!allowEdit && team.name}
|
||||
</FormRow>
|
||||
{!cloudMode && allowEdit && (
|
||||
<FormRow label={formatMessage(labels.accessCode)}>
|
||||
<Flexbox gap={10}>
|
||||
<TextField value={accessCode} readOnly allowCopy />
|
||||
{allowEdit && (
|
||||
<Button onClick={handleRegenerate}>{formatMessage(labels.regenerate)}</Button>
|
||||
)}
|
||||
</Flexbox>
|
||||
</FormRow>
|
||||
)}
|
||||
{allowEdit && (
|
||||
<FormButtons>
|
||||
<SubmitButton variant="primary">{formatMessage(labels.save)}</SubmitButton>
|
||||
</FormButtons>
|
||||
)}
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamEditForm;
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import { useMessages, useModified } from 'components/hooks';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { ActionForm, Button, Modal, ModalTrigger } from 'react-basics';
|
||||
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)}
|
||||
>
|
||||
<ModalTrigger>
|
||||
<Button variant="danger">{formatMessage(labels.delete)}</Button>
|
||||
<Modal title={formatMessage(labels.deleteTeam)}>
|
||||
{(close: () => void) => (
|
||||
<TeamDeleteForm teamId={teamId} onSave={handleLeave} onClose={close} />
|
||||
)}
|
||||
</Modal>
|
||||
</ModalTrigger>
|
||||
</ActionForm>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamManage;
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
'use client';
|
||||
import TeamDetails from './TeamDetails';
|
||||
|
||||
export function TeamPage({ teamId }: { teamId: string }) {
|
||||
return <TeamDetails teamId={teamId} />;
|
||||
}
|
||||
|
||||
export default TeamPage;
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { Metadata } from 'next';
|
||||
import TeamPage from './TeamPage';
|
||||
|
||||
export default function ({ params: { teamId } }) {
|
||||
return <TeamPage teamId={teamId} />;
|
||||
}
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Teams Details',
|
||||
};
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import { useApi, useMessages } from 'components/hooks';
|
||||
import { Icon, Icons, LoadingButton, Text } from 'react-basics';
|
||||
|
||||
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>
|
||||
<Icons.Close />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.remove)}</Text>
|
||||
</LoadingButton>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamWebsiteRemoveButton;
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
import DataTable from 'components/common/DataTable';
|
||||
import { useTeamWebsites } from 'components/hooks';
|
||||
import TeamWebsitesTable from './TeamWebsitesTable';
|
||||
|
||||
export function TeamWebsitesDataTable({
|
||||
teamId,
|
||||
allowEdit = false,
|
||||
}: {
|
||||
teamId: string;
|
||||
allowEdit?: boolean;
|
||||
}) {
|
||||
const queryResult = useTeamWebsites(teamId);
|
||||
|
||||
return (
|
||||
<DataTable queryResult={queryResult}>
|
||||
{({ data }) => <TeamWebsitesTable data={data} teamId={teamId} allowEdit={allowEdit} />}
|
||||
</DataTable>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamWebsitesDataTable;
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
'use client';
|
||||
import { TeamContext } from 'app/(main)/teams/[teamId]/TeamProvider';
|
||||
import WebsiteAddButton from 'app/(main)/settings/websites/WebsiteAddButton';
|
||||
import { useLogin, useMessages } from 'components/hooks';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import TeamWebsitesDataTable from './TeamWebsitesDataTable';
|
||||
import { ROLES } from 'lib/constants';
|
||||
import { useContext } from 'react';
|
||||
|
||||
export function TeamWebsitesPage({ teamId }: { teamId: string }) {
|
||||
const team = useContext(TeamContext);
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { user } = useLogin();
|
||||
|
||||
const canEdit =
|
||||
!!team?.teamUser?.find(
|
||||
({ userId, role }) => userId === user.id && role !== ROLES.teamViewOnly,
|
||||
) && user.role !== ROLES.viewOnly;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader title={formatMessage(labels.websites)}>
|
||||
{canEdit && <WebsiteAddButton teamId={teamId} />}
|
||||
</PageHeader>
|
||||
<TeamWebsitesDataTable teamId={teamId} allowEdit={canEdit} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamWebsitesPage;
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
import { GridColumn, GridTable, Icon, Text, useBreakpoint } from 'react-basics';
|
||||
import { useLogin, useMessages } from 'components/hooks';
|
||||
import Icons from 'components/icons';
|
||||
import LinkButton from 'components/common/LinkButton';
|
||||
|
||||
export function TeamWebsitesTable({
|
||||
teamId,
|
||||
data = [],
|
||||
allowEdit = false,
|
||||
}: {
|
||||
teamId: string;
|
||||
data: any[];
|
||||
allowEdit?: boolean;
|
||||
}) {
|
||||
const { user } = useLogin();
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const breakpoint = useBreakpoint();
|
||||
|
||||
return (
|
||||
<GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
|
||||
<GridColumn name="name" label={formatMessage(labels.name)} />
|
||||
<GridColumn name="domain" label={formatMessage(labels.domain)} />
|
||||
<GridColumn name="createdBy" label={formatMessage(labels.createdBy)}>
|
||||
{row => row?.createUser?.username}
|
||||
</GridColumn>
|
||||
<GridColumn name="action" label=" " alignment="end">
|
||||
{row => {
|
||||
const { id: websiteId } = row;
|
||||
return (
|
||||
<>
|
||||
{allowEdit && (teamId || user?.isAdmin) && (
|
||||
<LinkButton href={`/teams/${teamId}/settings/websites/${websiteId}`}>
|
||||
<Icon>
|
||||
<Icons.Edit />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.edit)}</Text>
|
||||
</LinkButton>
|
||||
)}
|
||||
<LinkButton href={`/teams/${teamId}/websites/${websiteId}`}>
|
||||
<Icon>
|
||||
<Icons.ArrowRight />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.view)}</Text>
|
||||
</LinkButton>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</GridColumn>
|
||||
</GridTable>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamWebsitesTable;
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import TeamWebsitesPage from './TeamWebsitesPage';
|
||||
import { Metadata } from 'next';
|
||||
|
||||
export default function ({ params: { teamId } }) {
|
||||
return <TeamWebsitesPage teamId={teamId} />;
|
||||
}
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Teams Websites',
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue