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

Added journey page. Removed dashboard.

Browse source
This commit is contained in:
Mike Cao 2025-06-06 19:44:09 -07:00
parent 3847e32f39
commit cee05d762c
24 changed files with 328 additions and 422 deletions
Download patch file Download diff file Expand all files Collapse all files

57
src/app/(main)/dashboard/DashboardEdit.module.css
View file

@ -1,57 +0,0 @@
.buttons {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
}
.item {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 20px;
border-radius: 5px;
border: 1px solid var(--base400);
background: var(--base50);
margin-bottom: 10px;
}
.text {
position: relative;
}
.name {
font-weight: 600;
font-size: 16px;
}
.domain {
font-size: 14px;
color: var(--base700);
}
.dragActive {
cursor: grab;
}
.dragActive:active {
cursor: grabbing;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
gap: 20px;
}
.search {
max-width: 360px;
}
.active {
border-color: var(--base600);
box-shadow: 4px 4px 4px var(--base100);
}

158
src/app/(main)/dashboard/DashboardEdit.tsx
View file

@ -1,158 +0,0 @@
import { useState, useMemo, useEffect } from 'react';
import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
import classNames from 'classnames';
import { Button, Loading, Toggle, SearchField } from '@umami/react-zen';
import { firstBy } from 'thenby';
import { useDashboard, saveDashboard } from '@/store/dashboard';
import { useMessages, useWebsites } from '@/components/hooks';
import styles from './DashboardEdit.module.css';
const DRAG_ID = 'dashboard-website-ordering';
export function DashboardEdit({ teamId }: { teamId: string }) {
const settings = useDashboard();
const { websiteOrder, websiteActive, isEdited } = settings;
const { formatMessage, labels } = useMessages();
const [order, setOrder] = useState(websiteOrder || []);
const [active, setActive] = useState(websiteActive || []);
const [edited, setEdited] = useState(isEdited);
const [websites, setWebsites] = useState([]);
const [search, setSearch] = useState('');
const {
result,
query: { isLoading },
setParams,
} = useWebsites({ teamId });
useEffect(() => {
if (result?.data) {
setWebsites(prevWebsites => {
const newWebsites = [...prevWebsites, ...result.data];
if (newWebsites.length < result.count) {
setParams(prevParams => ({ ...prevParams, page: prevParams.page + 1 }));
}
return newWebsites;
});
}
}, [result]);
const ordered = useMemo(() => {
if (websites) {
return websites
.map((website: { id: any; name: string; domain: string }) => ({
...website,
order: order.indexOf(website.id),
}))
.sort(firstBy('order'));
}
return [];
}, [websites, order]);
function handleWebsiteDrag({ destination, source }) {
if (!destination || destination.index === source.index) return;
const orderedWebsites = [...ordered];
const [removed] = orderedWebsites.splice(source.index, 1);
orderedWebsites.splice(destination.index, 0, removed);
setOrder(orderedWebsites.map(website => website?.id || 0));
setEdited(true);
}
function handleActiveWebsites(id: string) {
setActive(prevActive =>
prevActive.includes(id) ? prevActive.filter(a => a !== id) : [...prevActive, id],
);
setEdited(true);
}
function handleSave() {
saveDashboard({
editing: false,
isEdited: edited,
websiteOrder: order,
websiteActive: active,
});
}
function handleCancel() {
saveDashboard({ editing: false, websiteOrder, websiteActive, isEdited });
}
function handleReset() {
setOrder([]);
setActive([]);
setEdited(false);
}
if (isLoading) {
return <Loading />;
}
return (
<>
<div className={styles.header}>
<SearchField className={styles.search} value={search} onSearch={setSearch} />
<div className={styles.buttons}>
<Button onClick={handleSave} variant="primary" size="sm">
{formatMessage(labels.save)}
</Button>
<Button onClick={handleCancel} size="sm">
{formatMessage(labels.cancel)}
</Button>
<Button onClick={handleReset} size="sm">
{formatMessage(labels.reset)}
</Button>
</div>
</div>
<div className={styles.dragActive}>
<DragDropContext onDragEnd={handleWebsiteDrag}>
<Droppable droppableId={DRAG_ID}>
{(provided, snapshot) => (
<div
{...provided.droppableProps}
ref={provided.innerRef}
style={{ marginBottom: snapshot.isDraggingOver ? 260 : null }}
>
{ordered.map(({ id, name, domain }, index) => {
if (
search &&
!`${name.toLowerCase()}${domain.toLowerCase()}`.includes(search.toLowerCase())
) {
return null;
}
return (
<Draggable key={id} draggableId={`${DRAG_ID}-${id}`} index={index}>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
className={classNames(styles.item, {
[styles.active]: snapshot.isDragging,
})}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<div className={styles.text}>
<div className={styles.name}>{name}</div>
<div className={styles.domain}>{domain}</div>
</div>
<Toggle
checked={active.includes(id)}
onChange={() => handleActiveWebsites(id)}
/>
</div>
)}
</Draggable>
);
})}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
</div>
</>
);
}

69
src/app/(main)/dashboard/DashboardPage.tsx
View file

@ -1,69 +0,0 @@
'use client';
import { Icon, Loading, Text } from '@umami/react-zen';
import { SectionHeader } from '@/components/common/SectionHeader';
import { Pager } from '@/components/common/Pager';
import { WebsiteChartList } from '../websites/[websiteId]/WebsiteChartList';
import { DashboardSettingsButton } from '@/app/(main)/dashboard/DashboardSettingsButton';
import { DashboardEdit } from '@/app/(main)/dashboard/DashboardEdit';
import { EmptyPlaceholder } from '@/components/common/EmptyPlaceholder';
import { useMessages, useNavigation, useWebsites } from '@/components/hooks';
import { Arrow } from '@/components/icons';
import { useDashboard } from '@/store/dashboard';
import { LinkButton } from '@/components/common/LinkButton';
export function DashboardPage() {
const { formatMessage, labels, messages } = useMessages();
const { teamId, renderTeamUrl } = useNavigation();
const { showCharts, editing, isEdited } = useDashboard();
const pageSize = isEdited ? 200 : 10;
const { result, query, params, setParams } = useWebsites({ teamId }, { pageSize });
const { page } = params;
const hasData = !!result?.data?.length;
const handlePageChange = (page: number) => {
setParams({ ...params, page });
};
if (query.isLoading) {
return <Loading />;
}
return (
<section style={{ marginBottom: 60 }}>
<SectionHeader title={formatMessage(labels.dashboard)}>
{!editing && hasData && <DashboardSettingsButton />}
</SectionHeader>
{!hasData && (
<EmptyPlaceholder message={formatMessage(messages.noWebsitesConfigured)}>
<LinkButton href={renderTeamUrl('/settings')}>
<Icon>
<Arrow />
</Icon>
<Text>{formatMessage(messages.goToSettings)}</Text>
</LinkButton>
</EmptyPlaceholder>
)}
{hasData && (
<>
{editing && <DashboardEdit teamId={teamId} />}
{!editing && (
<>
<WebsiteChartList
websites={result?.data as any}
showCharts={showCharts}
limit={pageSize}
/>
<Pager
page={page}
pageSize={pageSize}
count={result?.count}
onPageChange={handlePageChange}
/>
</>
)}
</>
)}
</section>
);
}

5
src/app/(main)/dashboard/DashboardSettingsButton.module.css
View file

@ -1,5 +0,0 @@
.buttonGroup {
display: flex;
place-items: center;
gap: 10px;
}

35
src/app/(main)/dashboard/DashboardSettingsButton.tsx
View file

@ -1,35 +0,0 @@
import { Row, TooltipTrigger, Tooltip, Icon, Text, Button } from '@umami/react-zen';
import { BarChart, Edit } from '@/components/icons';
import { saveDashboard } from '@/store/dashboard';
import { useMessages } from '@/components/hooks';
export function DashboardSettingsButton() {
const { formatMessage, labels } = useMessages();
const handleToggleCharts = () => {
saveDashboard(state => ({ showCharts: !state.showCharts }));
};
const handleEdit = () => {
saveDashboard({ editing: true });
};
return (
<Row gap="3">
<TooltipTrigger>
<Button onPress={handleToggleCharts}>
<Icon>
<BarChart />
</Icon>
</Button>
<Tooltip placement="bottom">{formatMessage(labels.toggleCharts)}</Tooltip>
</TooltipTrigger>
<Button onPress={handleEdit}>
<Icon>
<Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</Button>
</Row>
);
}

10
src/app/(main)/dashboard/page.tsx
View file

@ -1,10 +0,0 @@
import { DashboardPage } from './DashboardPage';
import { Metadata } from 'next';
export default function () {
return <DashboardPage />;
}
export const metadata: Metadata = {
title: 'Dashboard',
};