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

Updated query hooks for teams and websites.

Browse source
This commit is contained in:
Mike Cao 2024-01-29 01:32:05 -08:00
parent 9448aa3ab5
commit 2fa50892d8
61 changed files with 508 additions and 539 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,66 +1,49 @@
'use client';
import { useEffect, useState } from 'react';
import { Item, Loading, Tabs, useToasts, Flexbox } from 'react-basics';
import { useState } from 'react';
import { Item, Loading, Tabs, Flexbox } from 'react-basics';
import TeamsContext from 'app/(main)/teams/TeamsContext';
import PageHeader from 'components/layout/PageHeader';
import { ROLES } from 'lib/constants';
import { useUser } from 'components/hooks';
import { useApi } from 'components/hooks';
import { useMessages } from 'components/hooks';
import { useLogin, useTeam, useMessages } from 'components/hooks';
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();
const { user } = useUser();
const [values, setValues] = useState(null);
const { formatMessage, labels } = useMessages();
const { user } = useLogin();
const { data: team, isLoading } = useTeam(teamId);
const [tab, setTab] = useState('details');
const { get, useQuery } = useApi();
const { showToast } = useToasts();
const { data, isLoading } = useQuery({
queryKey: ['team', teamId],
queryFn: () => {
if (teamId) {
return get(`/teams/${teamId}`);
}
},
});
const canEdit = data?.teamUser?.find(
if (isLoading) {
return <Loading position="page" />;
}
const canEdit = team?.teamUser?.find(
({ userId, role }) => role === ROLES.teamOwner && userId === user.id,
);
const handleSave = data => {
showToast({ message: formatMessage(messages.saved), variant: 'success' });
setValues(state => ({ ...state, ...data }));
};
useEffect(() => {
if (data) {
setValues(data);
}
}, [data]);
if (isLoading || !values) {
return <Loading />;
}
return (
<Flexbox direction="column">
<PageHeader title={values?.name} />
<Tabs selectedKey={tab} onSelect={(value: any) => setTab(value)} style={{ marginBottom: 30 }}>
<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>
<TeamsContext.Provider value={team}>
<Flexbox direction="column">
<PageHeader title={team?.name} />
<Tabs
selectedKey={tab}
onSelect={(value: any) => setTab(value)}
style={{ marginBottom: 30 }}
>
<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={team} readOnly={!canEdit} />}
{tab === 'members' && <TeamMembers teamId={teamId} readOnly={!canEdit} />}
{tab === 'websites' && <TeamWebsites teamId={teamId} readOnly={!canEdit} />}
{canEdit && tab === 'data' && <TeamData teamId={teamId} />}
</Flexbox>
</TeamsContext.Provider>
);
}