watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-11 16:17:13 +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

3
src/app/(main)/settings/users/UserAddForm.tsx
View file

@ -10,9 +10,8 @@ import {
SubmitButton,
Button,
} from 'react-basics';
import { useApi } from 'components/hooks';
import { useApi, useMessages } from 'components/hooks';
import { ROLES } from 'lib/constants';
import { useMessages } from 'components/hooks';
export function UserAddForm({ onSave, onClose }) {
const { post, useMutation } = useApi();

7
src/app/(main)/settings/users/UserDeleteButton.tsx
View file

@ -1,6 +1,5 @@
import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
import { useMessages } from 'components/hooks';
import { useUser } from 'components/hooks';
import { useMessages, useLogin } from 'components/hooks';
import UserDeleteForm from './UserDeleteForm';
export function UserDeleteButton({
@ -13,11 +12,11 @@ export function UserDeleteButton({
onDelete?: () => void;
}) {
const { formatMessage, labels } = useMessages();
const { user } = useUser();
const { user } = useLogin();
return (
<ModalTrigger disabled={userId === user?.id}>
<Button disabled={userId === user?.id}>
<Button disabled={userId === user?.id} variant="quiet">
<Icon>
<Icons.Trash />
</Icon>

38
src/app/(main)/settings/users/UserDeleteForm.tsx
View file

@ -1,35 +1,33 @@
import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
import { useApi } from 'components/hooks';
import { useMessages } from 'components/hooks';
import { useApi, useMessages } from 'components/hooks';
import ConfirmationForm from 'components/common/ConfirmationForm';
import { touch } from 'store/cache';
export function UserDeleteForm({ userId, username, onSave, onClose }) {
const { formatMessage, FormattedMessage, labels, messages } = useMessages();
const { FormattedMessage, messages, labels, formatMessage } = useMessages();
const { del, useMutation } = useApi();
const { mutate, error, isPending } = useMutation({ mutationFn: () => del(`/users/${userId}`) });
const handleSubmit = async (data: any) => {
mutate(data, {
const handleConfirm = async () => {
mutate(null, {
onSuccess: async () => {
onSave();
onClose();
touch('users');
onSave?.();
onClose?.();
},
});
};
return (
<Form onSubmit={handleSubmit} error={error}>
<p>
<ConfirmationForm
message={
<FormattedMessage {...messages.confirmDelete} values={{ target: <b>{username}</b> }} />
</p>
<FormButtons flex>
<SubmitButton variant="danger" disabled={isPending}>
{formatMessage(labels.delete)}
</SubmitButton>
<Button disabled={isPending} onClick={onClose}>
{formatMessage(labels.cancel)}
</Button>
</FormButtons>
</Form>
}
onConfirm={handleConfirm}
onClose={onClose}
buttonLabel={formatMessage(labels.delete)}
isLoading={isPending}
error={error}
/>
);
}

9
src/app/(main)/settings/users/UserEditForm.tsx
View file

@ -9,9 +9,8 @@ import {
SubmitButton,
PasswordField,
} from 'react-basics';
import { useApi } from 'components/hooks';
import { useApi, useMessages } from 'components/hooks';
import { ROLES } from 'lib/constants';
import { useMessages } from 'components/hooks';
export function UserEditForm({
userId,
@ -19,8 +18,8 @@ export function UserEditForm({
onSave,
}: {
userId: string;
data: any[];
onSave: (data: any) => void;
data: object;
onSave?: (data: any) => void;
}) {
const { formatMessage, labels, messages } = useMessages();
const { post, useMutation } = useApi();
@ -44,7 +43,7 @@ export function UserEditForm({
});
};
const renderValue = value => {
const renderValue = (value: string) => {
if (value === ROLES.user) {
return formatMessage(labels.user);
}

28
src/app/(main)/settings/users/UserWebsites.tsx
View file

@ -1,28 +0,0 @@
import Page from 'components/layout/Page';
import { useApi } from 'components/hooks';
import WebsitesTable from 'app/(main)/settings/websites/WebsitesTable';
import { useFilterQuery } from 'components/hooks';
import DataTable from 'components/common/DataTable';
export function UserWebsites({ userId }) {
const { get } = useApi();
const queryResult = useFilterQuery({
queryKey: ['user:websites', userId],
queryFn: (params: any) => get(`/users/${userId}/websites`, params),
});
const hasData = queryResult.result && queryResult.result.data.length !== 0;
return (
<Page isLoading={queryResult.query.isLoading} error={queryResult.query.error}>
{hasData && (
<DataTable queryResult={queryResult}>
{({ data }) => (
<WebsitesTable data={data} showActions={true} allowEdit={true} allowView={true} />
)}
</DataTable>
)}
</Page>
);
}
export default UserWebsites;

13
src/app/(main)/settings/users/UsersDataTable.tsx
View file

@ -1,17 +1,10 @@
'use client';
import { useApi } from 'components/hooks';
import { useFilterQuery } from 'components/hooks';
import DataTable from 'components/common/DataTable';
import UsersTable from './UsersTable';
import useCache from 'store/cache';
import useUsers from 'components/hooks/queries/useUsers';
export function UsersDataTable({ showActions }: { showActions: boolean }) {
const { get } = useApi();
const modified = useCache((state: any) => state?.users);
const queryResult = useFilterQuery({
queryKey: ['users', { modified }],
queryFn: (params: { [key: string]: any }) => get(`/admin/users`, params),
});
export function UsersDataTable({ showActions }: { showActions?: boolean }) {
const queryResult = useUsers();
return (
<DataTable queryResult={queryResult}>

8
src/app/(main)/settings/users/UsersTable.tsx
View file

@ -2,8 +2,7 @@ import { Button, Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from
import { formatDistance } from 'date-fns';
import Link from 'next/link';
import { ROLES } from 'lib/constants';
import { useMessages } from 'components/hooks';
import { useLocale } from 'components/hooks';
import { useMessages, useLocale } from 'components/hooks';
import UserDeleteButton from './UserDeleteButton';
export function UsersTable({
@ -35,12 +34,16 @@ export function UsersTable({
})
}
</GridColumn>
<GridColumn name="websites" label={formatMessage(labels.websites)} width={'120px'}>
{row => row._count.website}
</GridColumn>
{showActions && (
<GridColumn name="action" label=" " alignment="end">
{row => {
const { id, username } = row;
return (
<>
<UserDeleteButton userId={id} username={username} />
<Link href={`/settings/users/${id}`}>
<Button>
<Icon>
@ -49,7 +52,6 @@ export function UsersTable({
<Text>{formatMessage(labels.edit)}</Text>
</Button>
</Link>
<UserDeleteButton userId={id} username={username} />
</>
);
}}

50
src/app/(main)/settings/users/[id]/UserSettings.tsx
View file

@ -1,58 +1,28 @@
'use client';
import { Key, useEffect, useState } from 'react';
import { Item, Loading, Tabs, useToasts } from 'react-basics';
import { Key, useState } from 'react';
import { Item, Loading, Tabs } from 'react-basics';
import UserEditForm from '../UserEditForm';
import PageHeader from 'components/layout/PageHeader';
import { useApi } from 'components/hooks';
import { useMessages } from 'components/hooks';
import UserWebsites from '../UserWebsites';
import { useMessages, useUser } from 'components/hooks';
import UserWebsites from './UserWebsites';
export function UserSettings({ userId }) {
const { formatMessage, labels, messages } = useMessages();
const [edit, setEdit] = useState(false);
const [values, setValues] = useState(null);
export function UserSettings({ userId }: { userId: string }) {
const { formatMessage, labels } = useMessages();
const [tab, setTab] = useState<Key>('details');
const { get, useQuery } = useApi();
const { showToast } = useToasts();
const { data, isLoading } = useQuery({
queryKey: ['user', userId],
queryFn: () => {
if (userId) {
return get(`/users/${userId}`);
}
},
gcTime: 0,
});
const { data: user, isLoading } = useUser(userId, { gcTime: 0 });
const handleSave = (data: any) => {
showToast({ message: formatMessage(messages.saved), variant: 'success' });
if (data) {
setValues(state => ({ ...state, ...data }));
}
if (edit) {
setEdit(false);
}
};
useEffect(() => {
if (data) {
setValues(data);
}
}, [data]);
if (isLoading || !values) {
if (isLoading) {
return <Loading />;
}
return (
<>
<PageHeader title={values?.username} />
<PageHeader title={user?.username} />
<Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
<Item key="details">{formatMessage(labels.details)}</Item>
<Item key="websites">{formatMessage(labels.websites)}</Item>
</Tabs>
{tab === 'details' && <UserEditForm userId={userId} data={values} onSave={handleSave} />}
{tab === 'details' && <UserEditForm userId={userId} data={user} />}
{tab === 'websites' && <UserWebsites userId={userId} />}
</>
);

18
src/app/(main)/settings/users/[id]/UserWebsites.tsx Normal file
View file

@ -0,0 +1,18 @@
'use client';
import WebsitesTable from 'app/(main)/settings/websites/WebsitesTable';
import DataTable from 'components/common/DataTable';
import { useWebsites } from 'components/hooks';
export function UserWebsites({ userId }) {
const queryResult = useWebsites({ userId });
return (
<DataTable queryResult={queryResult}>
{({ data }) => (
<WebsitesTable data={data} showActions={true} allowEdit={true} allowView={true} />
)}
</DataTable>
);
}
export default UserWebsites;