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

Refactor of team websites.

Browse source
This commit is contained in:
Mike Cao 2024-01-18 16:46:40 -08:00
parent 2552e1d495
commit dc3818baaa
22 changed files with 61 additions and 208 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/app/(main)/settings/teams/TeamDeleteButton.tsx
View file

@ -1,33 +0,0 @@
import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
import useMessages from 'components/hooks/useMessages';
import TeamDeleteForm from './TeamDeleteForm';
export function TeamDeleteButton({
teamId,
teamName,
onDelete,
}: {
teamId: string;
teamName: string;
onDelete?: () => void;
}) {
const { formatMessage, labels } = useMessages();
return (
<ModalTrigger>
<Button>
<Icon>
<Icons.Trash />
</Icon>
<Text>{formatMessage(labels.delete)}</Text>
</Button>
<Modal title={formatMessage(labels.deleteTeam)}>
{(close: any) => (
<TeamDeleteForm teamId={teamId} teamName={teamName} onSave={onDelete} onClose={close} />
)}
</Modal>
</ModalTrigger>
);
}
export default TeamDeleteButton;

6
src/app/(main)/settings/teams/TeamsTable.tsx
View file

@ -4,7 +4,6 @@ import useUser from 'components/hooks/useUser';
import { ROLES } from 'lib/constants';
import Link from 'next/link';
import { Button, GridColumn, GridTable, Icon, Icons, Text, useBreakpoint } from 'react-basics';
import TeamDeleteButton from './TeamDeleteButton';
import TeamLeaveButton from './TeamLeaveButton';
export function TeamsTable({ data = [] }: { data: any[] }) {
@ -26,13 +25,10 @@ export function TeamsTable({ data = [] }: { data: any[] }) {
return (
<>
{isOwner && <TeamDeleteButton teamId={id} teamName={name} />}
{!isOwner && <TeamLeaveButton teamId={id} teamName={name} />}
<Link href={`/settings/teams/${id}`}>
<Button>
<Icon>
<Icons.Edit />
</Icon>
<Icon>{isOwner ? <Icons.Edit /> : <Icons.ArrowRight />}</Icon>
<Text>{formatMessage(isOwner ? labels.edit : labels.view)}</Text>
</Button>
</Link>

27
src/app/(main)/settings/teams/[id]/TeamData.tsx Normal file
View file

@ -0,0 +1,27 @@
import { ActionForm, Button, Modal, ModalTrigger } from 'react-basics';
import useMessages from 'components/hooks/useMessages';
import TeamDeleteForm from '../TeamDeleteForm';
export function TeamData({ teamId }: { teamId: string; onSave?: (value: string) => void }) {
const { formatMessage, labels, messages } = useMessages();
const handleSave = () => {};
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} teamName={''} onSave={handleSave} onClose={close} />
)}
</Modal>
</ModalTrigger>
</ActionForm>
);
}
export default TeamData;

3
src/app/(main)/settings/teams/[id]/TeamSettings.tsx
View file

@ -9,6 +9,7 @@ import useMessages from 'components/hooks/useMessages';
import TeamEditForm from './TeamEditForm';
import TeamMembers from './TeamMembers';
import TeamWebsites from './TeamWebsites';
import TeamData from './TeamData';
export function TeamSettings({ teamId }: { teamId: string }) {
const { formatMessage, labels, messages } = useMessages();
@ -52,12 +53,14 @@ export function TeamSettings({ teamId }: { teamId: string }) {
<Item key="details">{formatMessage(labels.details)}</Item>
<Item key="members">{formatMessage(labels.members)}</Item>
<Item key="websites">{formatMessage(labels.websites)}</Item>
<Item key="data">{formatMessage(labels.data)}</Item>
</Tabs>
{tab === 'details' && (
<TeamEditForm teamId={teamId} data={values} onSave={handleSave} readOnly={!canEdit} />
)}
{tab === 'members' && <TeamMembers teamId={teamId} readOnly={!canEdit} />}
{tab === 'websites' && <TeamWebsites teamId={teamId} readOnly={!canEdit} />}
{canEdit && tab === 'data' && <TeamData teamId={teamId} />}
</Flexbox>
);
}

27
src/app/(main)/settings/teams/[id]/TeamWebsites.tsx
View file

@ -1,15 +1,11 @@
import { ActionForm, Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
import TeamWebsitesTable from './TeamWebsitesTable';
import TeamWebsiteAddForm from './TeamWebsiteAddForm';
import useApi from 'components/hooks/useApi';
import useMessages from 'components/hooks/useMessages';
import useUser from 'components/hooks/useUser';
import useFilterQuery from 'components/hooks/useFilterQuery';
import DataTable from 'components/common/DataTable';
import useCache from 'store/cache';
export function TeamWebsites({ teamId, readOnly }: { teamId: string; readOnly: boolean }) {
const { formatMessage, labels, messages } = useMessages();
const { user } = useUser();
const { get } = useApi();
const modified = useCache(state => state?.['team:websites']);
@ -28,26 +24,9 @@ export function TeamWebsites({ teamId, readOnly }: { teamId: string; readOnly: b
};
return (
<>
<ActionForm description={formatMessage(messages.teamWebsitesInfo)}>
<ModalTrigger>
<Button variant="primary">
<Icon>
<Icons.Plus />
</Icon>
<Text>{formatMessage(labels.addWebsite)}</Text>
</Button>
<Modal title={formatMessage(labels.addWebsite)}>
{close => <TeamWebsiteAddForm teamId={teamId} onSave={handleChange} onClose={close} />}
</Modal>
</ModalTrigger>
</ActionForm>
<DataTable queryResult={queryResult}>
{({ data }) => (
<TeamWebsitesTable data={data} onRemove={handleChange} readOnly={readOnly} />
)}
</DataTable>
</>
<DataTable queryResult={queryResult}>
{({ data }) => <TeamWebsitesTable data={data} onRemove={handleChange} readOnly={readOnly} />}
</DataTable>
);
}