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

Implemented expanded view in dialog.

Browse source
This commit is contained in:
Mike Cao 2025-08-07 22:10:02 -07:00
parent 0b4851125d
commit 4e25c07160
9 changed files with 136 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/app/(main)/websites/[websiteId]/WebsiteDetailsPage.tsx
View file

@ -1,18 +1,29 @@
'use client';
import { Column } from '@umami/react-zen';
import { Column, Modal, Dialog } from '@umami/react-zen';
import { useNavigation } from '@/components/hooks';
import { Panel } from '@/components/common/Panel';
import { WebsiteChart } from './WebsiteChart';
import { WebsiteExpandedView } from './WebsiteExpandedView';
import { WebsiteMetricsBar } from './WebsiteMetricsBar';
import { WebsiteTableView } from './WebsiteTableView';
import { WebsiteCompareTables } from './WebsiteCompareTables';
import { WebsiteControls } from './WebsiteControls';
export function WebsiteDetailsPage({ websiteId }: { websiteId: string }) {
const {
router,
query: { view, compare },
updateParams,
} = useNavigation();
const handleClose = (close: () => void) => {
router.push(updateParams({ view: undefined }));
close();
};
const handleOpenChange = (isOpen: boolean) => {
if (!isOpen) {
router.push(updateParams({ view: undefined }));
}
};
return (
<Column gap>
@ -21,9 +32,14 @@ export function WebsiteDetailsPage({ websiteId }: { websiteId: string }) {
<Panel>
<WebsiteChart websiteId={websiteId} compareMode={compare} />
</Panel>
{!view && !compare && <WebsiteTableView websiteId={websiteId} />}
{view && !compare && <WebsiteExpandedView websiteId={websiteId} />}
{compare && <WebsiteCompareTables websiteId={websiteId} />}
<WebsiteTableView websiteId={websiteId} />
<Modal isOpen={!!view} onOpenChange={handleOpenChange} isDismissable>
<Dialog style={{ width: '90vw', height: '90vh' }}>
{({ close }) => {
return <WebsiteExpandedView websiteId={websiteId} onClose={() => handleClose(close)} />;
}}
</Dialog>
</Modal>
</Column>
);
}