Add website binding to boards with filter and date controls.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Mike Cao 2026-02-05 22:04:59 -08:00
parent d3d86f43fa
commit f66a508892
5 changed files with 48 additions and 5 deletions

View file

@ -1,9 +1,19 @@
import { Button, Column, Grid, Heading, LoadingButton, Row, TextField } from '@umami/react-zen';
import {
Button,
Column,
Grid,
Heading,
LoadingButton,
Row,
Text,
TextField,
} from '@umami/react-zen';
import { IconLabel } from '@/components/common/IconLabel';
import { LinkButton } from '@/components/common/LinkButton';
import { PageHeader } from '@/components/common/PageHeader';
import { useBoard, useMessages, useNavigation } from '@/components/hooks';
import { useBoard, useMessages, useNavigation, useWebsiteQuery } from '@/components/hooks';
import { Edit } from '@/components/icons';
import { WebsiteSelect } from '@/components/input/WebsiteSelect';
export function BoardHeader() {
const { board, editing } = useBoard();
@ -19,9 +29,11 @@ function BoardViewHeader() {
const { board } = useBoard();
const { renderUrl } = useNavigation();
const { formatMessage, labels } = useMessages();
const { data: website } = useWebsiteQuery(board?.parameters?.websiteId);
return (
<PageHeader title={board?.name} description={board?.description}>
{website?.name && <Text>{website.name}</Text>}
<LinkButton href={renderUrl(`/boards/${board?.id}/edit`, false)}>
<IconLabel icon={<Edit />}>{formatMessage(labels.edit)}</IconLabel>
</LinkButton>
@ -43,6 +55,10 @@ function BoardEditHeader() {
updateBoard({ description: value });
};
const handleWebsiteChange = (websiteId: string) => {
updateBoard({ parameters: { ...board.parameters, websiteId } });
};
const handleSave = async () => {
await saveBoard();
if (board.id) {
@ -93,6 +109,10 @@ function BoardEditHeader() {
{board?.description}
</TextField>
</Row>
<Row alignItems="center" gap="3">
<Text>{formatMessage(labels.website)}</Text>
<WebsiteSelect websiteId={board?.parameters?.websiteId} onChange={handleWebsiteChange} />
</Row>
</Column>
<Column justifyContent="center" alignItems="flex-end">
<Row gap="3">