70 lines
1.8 KiB
TypeScript
70 lines
1.8 KiB
TypeScript
import { ActionIcon, Button, Group, TextInput, Tooltip } from '@pikku/mantine/core'
|
||
import { m } from '@/i18n/messages'
|
||
import { useLocale } from '@/i18n/config'
|
||
|
||
export const todayIso = () => new Date().toISOString().slice(0, 10)
|
||
|
||
export const shiftDate = (iso: string, days: number) => {
|
||
const d = new Date(iso + 'T00:00:00Z')
|
||
d.setUTCDate(d.getUTCDate() + days)
|
||
return d.toISOString().slice(0, 10)
|
||
}
|
||
|
||
export function DateBar({
|
||
date,
|
||
onChange,
|
||
}: {
|
||
date: string
|
||
onChange: (next: string) => void
|
||
}) {
|
||
useLocale()
|
||
const isToday = date === todayIso()
|
||
return (
|
||
<Group gap="xs" wrap="nowrap" align="center" data-testid="date-bar">
|
||
<Tooltip label={m.common_pages_staff_prev_day()}>
|
||
<ActionIcon
|
||
variant="default"
|
||
size="lg"
|
||
onClick={() => onChange(shiftDate(date, -1))}
|
||
aria-label={m.common_pages_staff_prev_day()}
|
||
data-testid="date-bar-prev"
|
||
>
|
||
‹
|
||
</ActionIcon>
|
||
</Tooltip>
|
||
<TextInput
|
||
type="date"
|
||
size="sm"
|
||
value={date}
|
||
onChange={(e) => {
|
||
const v = e.currentTarget.value
|
||
if (v) onChange(v)
|
||
}}
|
||
data-testid="date-bar-input"
|
||
styles={{ input: { minWidth: 160 } }}
|
||
/>
|
||
<Tooltip label={m.common_pages_staff_next_day()}>
|
||
<ActionIcon
|
||
variant="default"
|
||
size="lg"
|
||
onClick={() => onChange(shiftDate(date, 1))}
|
||
aria-label={m.common_pages_staff_next_day()}
|
||
data-testid="date-bar-next"
|
||
>
|
||
›
|
||
</ActionIcon>
|
||
</Tooltip>
|
||
<Button
|
||
size="xs"
|
||
variant={isToday ? 'filled' : 'light'}
|
||
color="plum"
|
||
onClick={() => onChange(todayIso())}
|
||
disabled={isToday}
|
||
data-testid="date-bar-today"
|
||
>
|
||
{m.common_pages_staff_today()}
|
||
</Button>
|
||
</Group>
|
||
)
|
||
}
|