mirror of
https://github.com/umami-software/umami.git
synced 2026-02-19 03:55:37 +01:00
Compare commits
2 commits
e610de383a
...
9ccafc390a
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
9ccafc390a | ||
|
|
433ce98719 |
13 changed files with 110 additions and 89 deletions
|
|
@ -1,24 +1,10 @@
|
||||||
{
|
{
|
||||||
"name": "@umami/components",
|
"name": "@umami/components",
|
||||||
"version": "0.116.0",
|
"version": "0.121.0",
|
||||||
"description": "Umami React components.",
|
"description": "Umami React components.",
|
||||||
"author": "Mike Cao <mike@mikecao.com>",
|
"author": "Mike Cao <mike@mikecao.com>",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"main": "./index.js",
|
"main": "./index.js",
|
||||||
"types": "./index.d.ts",
|
"types": "./index.d.ts"
|
||||||
"dependencies": {
|
|
||||||
"chart.js": "^4.5.0",
|
|
||||||
"chartjs-adapter-date-fns": "^3.0.0",
|
|
||||||
"colord": "^2.9.2",
|
|
||||||
"jsonwebtoken": "^9.0.2",
|
|
||||||
"lucide-react": "^0.542.0",
|
|
||||||
"pure-rand": "^7.0.1",
|
|
||||||
"react-simple-maps": "^2.3.0",
|
|
||||||
"react-use-measure": "^2.0.4",
|
|
||||||
"react-window": "^1.8.6",
|
|
||||||
"serialize-error": "^12.0.0",
|
|
||||||
"thenby": "^1.3.4",
|
|
||||||
"uuid": "^11.1.0"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
17
src/app/(main)/dashboard/DashboardPage.tsx
Normal file
17
src/app/(main)/dashboard/DashboardPage.tsx
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
'use client';
|
||||||
|
import { Column } from '@umami/react-zen';
|
||||||
|
import { PageHeader } from '@/components/common/PageHeader';
|
||||||
|
import { useMessages } from '@/components/hooks';
|
||||||
|
import { PageBody } from '@/components/common/PageBody';
|
||||||
|
|
||||||
|
export function DashboardPage() {
|
||||||
|
const { formatMessage, labels } = useMessages();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageBody>
|
||||||
|
<Column margin="2">
|
||||||
|
<PageHeader title={formatMessage(labels.dashboard)}></PageHeader>
|
||||||
|
</Column>
|
||||||
|
</PageBody>
|
||||||
|
);
|
||||||
|
}
|
||||||
10
src/app/(main)/dashboard/page.tsx
Normal file
10
src/app/(main)/dashboard/page.tsx
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { Metadata } from 'next';
|
||||||
|
import { DashboardPage } from './DashboardPage';
|
||||||
|
|
||||||
|
export default async function () {
|
||||||
|
return <DashboardPage />;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: 'Dashboard',
|
||||||
|
};
|
||||||
|
|
@ -1,20 +1,23 @@
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { WebsitesTable } from './WebsitesTable';
|
import { WebsitesTable } from './WebsitesTable';
|
||||||
import { DataGrid } from '@/components/common/DataGrid';
|
import { DataGrid } from '@/components/common/DataGrid';
|
||||||
import { useNavigation, useUserWebsitesQuery } from '@/components/hooks';
|
import { useLoginQuery, useNavigation, useUserWebsitesQuery } from '@/components/hooks';
|
||||||
|
|
||||||
export function WebsitesDataTable({
|
export function WebsitesDataTable({
|
||||||
|
userId,
|
||||||
teamId,
|
teamId,
|
||||||
allowEdit = true,
|
allowEdit = true,
|
||||||
allowView = true,
|
allowView = true,
|
||||||
showActions = true,
|
showActions = true,
|
||||||
}: {
|
}: {
|
||||||
|
userId?: string;
|
||||||
teamId?: string;
|
teamId?: string;
|
||||||
allowEdit?: boolean;
|
allowEdit?: boolean;
|
||||||
allowView?: boolean;
|
allowView?: boolean;
|
||||||
showActions?: boolean;
|
showActions?: boolean;
|
||||||
}) {
|
}) {
|
||||||
const queryResult = useUserWebsitesQuery({ teamId });
|
const { user } = useLoginQuery();
|
||||||
|
const queryResult = useUserWebsitesQuery({ userId: userId || user?.id, teamId });
|
||||||
const { renderUrl } = useNavigation();
|
const { renderUrl } = useNavigation();
|
||||||
|
|
||||||
const renderLink = (row: any) => (
|
const renderLink = (row: any) => (
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@ import { Row, Text, Icon, DataTable, DataColumn, MenuItem } from '@umami/react-z
|
||||||
import { useMessages, useNavigation } from '@/components/hooks';
|
import { useMessages, useNavigation } from '@/components/hooks';
|
||||||
import { MenuButton } from '@/components/input/MenuButton';
|
import { MenuButton } from '@/components/input/MenuButton';
|
||||||
import { Eye, SquarePen } from '@/components/icons';
|
import { Eye, SquarePen } from '@/components/icons';
|
||||||
|
import { Empty } from '@/components/common/Empty';
|
||||||
|
|
||||||
export function WebsitesTable({
|
export function WebsitesTable({
|
||||||
data = [],
|
data = [],
|
||||||
|
|
@ -10,20 +11,18 @@ export function WebsitesTable({
|
||||||
allowEdit,
|
allowEdit,
|
||||||
allowView,
|
allowView,
|
||||||
renderLink,
|
renderLink,
|
||||||
children,
|
|
||||||
}: {
|
}: {
|
||||||
data: Record<string, any>[];
|
data: Record<string, any>[];
|
||||||
showActions?: boolean;
|
showActions?: boolean;
|
||||||
allowEdit?: boolean;
|
allowEdit?: boolean;
|
||||||
allowView?: boolean;
|
allowView?: boolean;
|
||||||
renderLink?: (row: any) => ReactNode;
|
renderLink?: (row: any) => ReactNode;
|
||||||
children?: ReactNode;
|
|
||||||
}) {
|
}) {
|
||||||
const { formatMessage, labels } = useMessages();
|
const { formatMessage, labels } = useMessages();
|
||||||
const { renderUrl } = useNavigation();
|
const { renderUrl } = useNavigation();
|
||||||
|
|
||||||
if (!data?.length) {
|
if (data.length === 0) {
|
||||||
return children;
|
return <Empty />;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
|
|
@ -18,10 +18,11 @@ import {
|
||||||
import { useMessages, useNavigation } from '@/components/hooks';
|
import { useMessages, useNavigation } from '@/components/hooks';
|
||||||
import { SideMenu } from '@/components/common/SideMenu';
|
import { SideMenu } from '@/components/common/SideMenu';
|
||||||
import { WebsiteSelect } from '@/components/input/WebsiteSelect';
|
import { WebsiteSelect } from '@/components/input/WebsiteSelect';
|
||||||
|
import { Text } from '@umami/react-zen';
|
||||||
|
|
||||||
export function WebsiteNav({ websiteId }: { websiteId: string }) {
|
export function WebsiteNav({ websiteId }: { websiteId: string }) {
|
||||||
const { formatMessage, labels } = useMessages();
|
const { formatMessage, labels } = useMessages();
|
||||||
const { pathname, renderUrl, teamId } = useNavigation();
|
const { pathname, renderUrl, teamId, router } = useNavigation();
|
||||||
|
|
||||||
const renderPath = (path: string) =>
|
const renderPath = (path: string) =>
|
||||||
renderUrl(`/websites/${websiteId}${path}`, {
|
renderUrl(`/websites/${websiteId}${path}`, {
|
||||||
|
|
@ -143,13 +144,31 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
const handleChange = (value: string) => {
|
||||||
|
router.push(renderUrl(`/websites/${value}`));
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderValue = (value: any) => {
|
||||||
|
return (
|
||||||
|
<Text truncate style={{ maxWidth: 160, lineHeight: 1 }}>
|
||||||
|
{value?.selectedItem?.name}
|
||||||
|
</Text>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const selectedKey = items
|
const selectedKey = items
|
||||||
.flatMap(e => e.items)
|
.flatMap(e => e.items)
|
||||||
.find(({ path }) => path && pathname.endsWith(path.split('?')[0]))?.id;
|
.find(({ path }) => path && pathname.endsWith(path.split('?')[0]))?.id;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SideMenu items={items} selectedKey={selectedKey} allowMinimize={false} muteItems={false}>
|
<SideMenu items={items} selectedKey={selectedKey} allowMinimize={false} muteItems={false}>
|
||||||
<WebsiteSelect websiteId={websiteId} teamId={teamId} />
|
<WebsiteSelect
|
||||||
|
websiteId={websiteId}
|
||||||
|
teamId={teamId}
|
||||||
|
onChange={handleChange}
|
||||||
|
renderValue={renderValue}
|
||||||
|
buttonProps={{ style: { outline: 'none' } }}
|
||||||
|
/>
|
||||||
</SideMenu>
|
</SideMenu>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,13 @@
|
||||||
import { z } from 'zod';
|
import { z } from 'zod';
|
||||||
import { pagingParams } from '@/lib/schema';
|
import { pagingParams } from '@/lib/schema';
|
||||||
import { getUserWebsites } from '@/queries';
|
import { getAllUserWebsitesIncludingTeamOwner, getUserWebsites } from '@/queries';
|
||||||
import { json } from '@/lib/response';
|
import { json } from '@/lib/response';
|
||||||
import { parseRequest, getQueryFilters } from '@/lib/request';
|
import { parseRequest, getQueryFilters } from '@/lib/request';
|
||||||
|
|
||||||
export async function GET(request: Request) {
|
export async function GET(request: Request) {
|
||||||
const schema = z.object({
|
const schema = z.object({
|
||||||
...pagingParams,
|
...pagingParams,
|
||||||
|
includeTeams: z.string().optional(),
|
||||||
});
|
});
|
||||||
|
|
||||||
const { auth, query, error } = await parseRequest(request, schema);
|
const { auth, query, error } = await parseRequest(request, schema);
|
||||||
|
|
@ -17,7 +18,9 @@ export async function GET(request: Request) {
|
||||||
|
|
||||||
const filters = await getQueryFilters(query);
|
const filters = await getQueryFilters(query);
|
||||||
|
|
||||||
const websites = await getUserWebsites(auth.user.id, filters);
|
if (query.includeTeams) {
|
||||||
|
return json(await getAllUserWebsitesIncludingTeamOwner(auth.user.id, filters));
|
||||||
|
}
|
||||||
|
|
||||||
return json(websites);
|
return json(await getUserWebsites(auth.user.id, filters));
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import { z } from 'zod';
|
import { z } from 'zod';
|
||||||
import { unauthorized, json } from '@/lib/response';
|
import { unauthorized, json } from '@/lib/response';
|
||||||
import { getUserWebsites } from '@/queries/prisma/website';
|
import { getAllUserWebsitesIncludingTeamOwner, getUserWebsites } from '@/queries/prisma/website';
|
||||||
import { pagingParams, searchParams } from '@/lib/schema';
|
import { pagingParams, searchParams } from '@/lib/schema';
|
||||||
import { getQueryFilters, parseRequest } from '@/lib/request';
|
import { getQueryFilters, parseRequest } from '@/lib/request';
|
||||||
|
|
||||||
|
|
@ -8,6 +8,7 @@ export async function GET(request: Request, { params }: { params: Promise<{ user
|
||||||
const schema = z.object({
|
const schema = z.object({
|
||||||
...pagingParams,
|
...pagingParams,
|
||||||
...searchParams,
|
...searchParams,
|
||||||
|
includeTeams: z.string().optional(),
|
||||||
});
|
});
|
||||||
|
|
||||||
const { auth, query, error } = await parseRequest(request, schema);
|
const { auth, query, error } = await parseRequest(request, schema);
|
||||||
|
|
@ -24,7 +25,9 @@ export async function GET(request: Request, { params }: { params: Promise<{ user
|
||||||
|
|
||||||
const filters = await getQueryFilters(query);
|
const filters = await getQueryFilters(query);
|
||||||
|
|
||||||
const websites = await getUserWebsites(userId, filters);
|
if (query.includeTeams) {
|
||||||
|
return json(await getAllUserWebsitesIncludingTeamOwner(auth.user.id, filters));
|
||||||
|
}
|
||||||
|
|
||||||
return json(websites);
|
return json(await getUserWebsites(userId, filters));
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -40,5 +40,5 @@ export async function GET(
|
||||||
endDate,
|
endDate,
|
||||||
});
|
});
|
||||||
|
|
||||||
return json({ ...data[0], comparison });
|
return json({ ...data, comparison });
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,30 +1,26 @@
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { Select, SelectProps, ListItem, Text } from '@umami/react-zen';
|
import { Select, SelectProps, ListItem } from '@umami/react-zen';
|
||||||
import {
|
import { useUserWebsitesQuery, useMessages, useLoginQuery } from '@/components/hooks';
|
||||||
useUserWebsitesQuery,
|
|
||||||
useWebsiteQuery,
|
|
||||||
useNavigation,
|
|
||||||
useMessages,
|
|
||||||
} from '@/components/hooks';
|
|
||||||
import { Empty } from '@/components/common/Empty';
|
import { Empty } from '@/components/common/Empty';
|
||||||
|
|
||||||
export function WebsiteSelect({
|
export function WebsiteSelect({
|
||||||
websiteId,
|
websiteId,
|
||||||
teamId,
|
teamId,
|
||||||
|
onChange,
|
||||||
|
includeTeams,
|
||||||
...props
|
...props
|
||||||
}: {
|
}: {
|
||||||
websiteId?: string;
|
websiteId?: string;
|
||||||
teamId?: string;
|
teamId?: string;
|
||||||
|
includeTeams?: boolean;
|
||||||
} & SelectProps) {
|
} & SelectProps) {
|
||||||
const { formatMessage, messages } = useMessages();
|
const { formatMessage, messages } = useMessages();
|
||||||
const { router, renderUrl } = useNavigation();
|
|
||||||
const [search, setSearch] = useState('');
|
const [search, setSearch] = useState('');
|
||||||
const { data: website } = useWebsiteQuery(websiteId);
|
const { user } = useLoginQuery();
|
||||||
const { data, isLoading } = useUserWebsitesQuery({ teamId }, { search, pageSize: 5 });
|
const { data, isLoading } = useUserWebsitesQuery(
|
||||||
|
{ userId: user?.id, teamId },
|
||||||
const handleSelect = (value: any) => {
|
{ search, pageSize: 5, includeTeams },
|
||||||
router.push(renderUrl(`/websites/${value}`));
|
);
|
||||||
};
|
|
||||||
|
|
||||||
const handleSearch = (value: string) => {
|
const handleSearch = (value: string) => {
|
||||||
setSearch(value);
|
setSearch(value);
|
||||||
|
|
@ -37,24 +33,17 @@ export function WebsiteSelect({
|
||||||
return (
|
return (
|
||||||
<Select
|
<Select
|
||||||
{...props}
|
{...props}
|
||||||
placeholder=""
|
|
||||||
items={data?.['data'] || []}
|
items={data?.['data'] || []}
|
||||||
value={websiteId}
|
value={websiteId}
|
||||||
isLoading={isLoading}
|
isLoading={isLoading}
|
||||||
buttonProps={{ variant: 'outline' }}
|
|
||||||
allowSearch={true}
|
allowSearch={true}
|
||||||
searchValue={search}
|
searchValue={search}
|
||||||
onSearch={handleSearch}
|
onSearch={handleSearch}
|
||||||
onChange={handleSelect}
|
onChange={onChange}
|
||||||
onOpenChange={handleOpenChange}
|
onOpenChange={handleOpenChange}
|
||||||
listProps={{
|
listProps={{
|
||||||
renderEmptyState: () => <Empty message={formatMessage(messages.noResultsFound)} />,
|
renderEmptyState: () => <Empty message={formatMessage(messages.noResultsFound)} />,
|
||||||
}}
|
}}
|
||||||
renderValue={() => (
|
|
||||||
<Text truncate weight="bold" style={{ maxWidth: 160, lineHeight: 1 }}>
|
|
||||||
{website?.name}
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
>
|
>
|
||||||
{({ id, name }: any) => <ListItem key={id}>{name}</ListItem>}
|
{({ id, name }: any) => <ListItem key={id}>{name}</ListItem>}
|
||||||
</Select>
|
</Select>
|
||||||
|
|
|
||||||
|
|
@ -64,6 +64,10 @@ export * from '@/components/common/SectionHeader';
|
||||||
export * from '@/components/common/SideMenu';
|
export * from '@/components/common/SideMenu';
|
||||||
export * from '@/components/common/TypeConfirmationForm';
|
export * from '@/components/common/TypeConfirmationForm';
|
||||||
|
|
||||||
|
export * from '@/components/input/ActionButton';
|
||||||
|
export * from '@/components/input/DateFilter';
|
||||||
|
export * from '@/components/input/DownloadButton';
|
||||||
|
export * from '@/components/input/ExportButton';
|
||||||
export * from '@/components/input/FilterButtons';
|
export * from '@/components/input/FilterButtons';
|
||||||
export * from '@/components/input/TeamsButton';
|
export * from '@/components/input/TeamsButton';
|
||||||
export * from '@/components/input/ProfileButton';
|
export * from '@/components/input/ProfileButton';
|
||||||
|
|
|
||||||
|
|
@ -46,46 +46,34 @@ export async function getWebsites(
|
||||||
return pagedQuery('website', { ...criteria, where }, filters);
|
return pagedQuery('website', { ...criteria, where }, filters);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function getAllWebsites(userId: string) {
|
export async function getAllUserWebsitesIncludingTeamOwner(
|
||||||
return prisma.client.website.findMany({
|
userId: string,
|
||||||
where: {
|
filters?: QueryFilters,
|
||||||
OR: [
|
): Promise<PageResult<Website[]>> {
|
||||||
{ userId },
|
return getWebsites(
|
||||||
{
|
{
|
||||||
team: {
|
where: {
|
||||||
deletedAt: null,
|
OR: [
|
||||||
teamUser: {
|
{ userId },
|
||||||
some: {
|
{
|
||||||
userId,
|
team: {
|
||||||
|
deletedAt: null,
|
||||||
|
members: {
|
||||||
|
some: {
|
||||||
|
role: ROLES.teamOwner,
|
||||||
|
userId,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
],
|
||||||
],
|
},
|
||||||
deletedAt: null,
|
|
||||||
},
|
},
|
||||||
});
|
{
|
||||||
}
|
orderBy: 'name',
|
||||||
|
...filters,
|
||||||
export async function getAllUserWebsitesIncludingTeamOwner(userId: string) {
|
|
||||||
return prisma.client.website.findMany({
|
|
||||||
where: {
|
|
||||||
OR: [
|
|
||||||
{ userId },
|
|
||||||
{
|
|
||||||
team: {
|
|
||||||
deletedAt: null,
|
|
||||||
teamUser: {
|
|
||||||
some: {
|
|
||||||
role: ROLES.teamOwner,
|
|
||||||
userId,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
});
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function getUserWebsites(
|
export async function getUserWebsites(
|
||||||
|
|
|
||||||
|
|
@ -58,7 +58,7 @@ async function relationalQuery(
|
||||||
) as t
|
) as t
|
||||||
`,
|
`,
|
||||||
queryParams,
|
queryParams,
|
||||||
);
|
).then(result => result?.[0]);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function clickhouseQuery(
|
async function clickhouseQuery(
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue