Let a day removed from a period stay removed
Taking one day out of a period the planner placed did nothing that lasted: the period still asked for a full week, so the next sync put the day straight back. The option was disabled rather than lying about it. A removed day is now recorded as its own thing — no leave for this parent, this child, this date — and the planner honours it on every later sync. It is kept apart from the working-day overrides, which answer a different question about the calendar rather than about the plan. The day belongs to the parent whose band was clicked, so removing one parent's day leaves their partner's alone; where both parents were to be off on one funding arrangement, the partner is simply funded on their own instead. A removed day shortens what the period is asking for rather than counting as a day the plan failed to find, so the advice about closing a shortfall does not start arguing for a day nobody wants. Nothing is removed without a way back: the toast undoes it, and the day itself is marked in the calendar and offers to restore. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Ei7gCZzdd751uZtPzb1Pep
This commit is contained in:
@@ -270,4 +270,36 @@ describe('CalendarDay', () => {
|
||||
expect(day.getAttribute('aria-label')).toContain('arbetsdag')
|
||||
})
|
||||
})
|
||||
|
||||
describe('user-removed days (PlannedDayExclusion)', () => {
|
||||
it('marks a removed day with its own class, badge and aria descriptor', () => {
|
||||
const { getByTestId } = render(<CalendarDay date="2026-06-15" isExcluded={true} />)
|
||||
const day = getByTestId('calendar-day')
|
||||
expect(day).toHaveClass('calendar-day--excluded')
|
||||
expect(getByTestId('calendar-day-excluded-badge')).toBeInTheDocument()
|
||||
expect(day.getAttribute('aria-label')).toContain('borttagen dag')
|
||||
})
|
||||
|
||||
it('leaves an ordinary day unmarked', () => {
|
||||
const { getByTestId, queryByTestId } = render(<CalendarDay date="2026-06-15" />)
|
||||
expect(getByTestId('calendar-day')).not.toHaveClass('calendar-day--excluded')
|
||||
expect(queryByTestId('calendar-day-excluded-badge')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('can carry both an override and a removal on the same date', () => {
|
||||
const { getByTestId } = render(
|
||||
<CalendarDay
|
||||
date="2026-06-15"
|
||||
isOverride={true}
|
||||
overrideIsWorkingDay={false}
|
||||
isExcluded={true}
|
||||
/>,
|
||||
)
|
||||
const day = getByTestId('calendar-day')
|
||||
expect(day).toHaveClass('calendar-day--override')
|
||||
expect(day).toHaveClass('calendar-day--excluded')
|
||||
expect(getByTestId('calendar-day-override-badge')).toBeInTheDocument()
|
||||
expect(getByTestId('calendar-day-excluded-badge')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@@ -21,6 +21,11 @@ export interface CalendarDayProps {
|
||||
isOverride?: boolean | undefined
|
||||
/** The override's value when `isOverride` is true (true = marked as a working day). */
|
||||
overrideIsWorkingDay?: boolean | null | undefined
|
||||
/** True iff the user removed this date from the plan by hand (see
|
||||
* `PlannedDayExclusion`). Without a mark, a day the planner deliberately
|
||||
* skipped inside an otherwise-funded period just looks like a hole in the
|
||||
* week. */
|
||||
isExcluded?: boolean | undefined
|
||||
}
|
||||
|
||||
export function CalendarDay({
|
||||
@@ -37,6 +42,7 @@ export function CalendarDay({
|
||||
holidayName,
|
||||
isOverride = false,
|
||||
overrideIsWorkingDay = null,
|
||||
isExcluded = false,
|
||||
}: CalendarDayProps): ReactNode {
|
||||
const { t } = useTranslation()
|
||||
const dateObj = new Date(date + 'T00:00:00Z')
|
||||
@@ -82,6 +88,9 @@ export function CalendarDay({
|
||||
overrideIsWorkingDay ? t('calendarDay.overrideWorkingAria') : t('calendarDay.overrideFreeAria'),
|
||||
)
|
||||
}
|
||||
if (isExcluded) {
|
||||
descriptors.push(t('calendarDay.excludedAria'))
|
||||
}
|
||||
|
||||
const baseLabel = events.length > 0 ? t('calendarDay.ariaWithEvents', { date, count: events.length }) : date
|
||||
const ariaLabel = descriptors.length > 0 ? `${baseLabel}, ${descriptors.join(', ')}` : baseLabel
|
||||
@@ -97,6 +106,7 @@ export function CalendarDay({
|
||||
dayType === 'klamdag' ? 'calendar-day--klamdag' : '',
|
||||
isPlainSaturday ? 'calendar-day--weekend' : '',
|
||||
isOverride ? 'calendar-day--override' : '',
|
||||
isExcluded ? 'calendar-day--excluded' : '',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')
|
||||
@@ -143,6 +153,15 @@ export function CalendarDay({
|
||||
{overrideIsWorkingDay ? '⚒' : '✓'}
|
||||
</span>
|
||||
)}
|
||||
{isExcluded && (
|
||||
<span
|
||||
className="calendar-day__excluded-badge"
|
||||
data-testid="calendar-day-excluded-badge"
|
||||
aria-hidden="true"
|
||||
>
|
||||
⊘
|
||||
</span>
|
||||
)}
|
||||
{events.length > 0 && (
|
||||
<div className="calendar-day__events" data-testid="calendar-day-events">
|
||||
{events.map((event, idx) => (
|
||||
|
||||
@@ -34,6 +34,7 @@ vi.mock('./CalendarDay', () => ({
|
||||
holidayName,
|
||||
isOverride,
|
||||
overrideIsWorkingDay,
|
||||
isExcluded,
|
||||
}: CalendarDayProps) => (
|
||||
<div
|
||||
data-testid={`calendar-day-${date}`}
|
||||
@@ -42,6 +43,7 @@ vi.mock('./CalendarDay', () => ({
|
||||
data-holiday-name={holidayName ?? ''}
|
||||
data-is-override={isOverride ? 'true' : 'false'}
|
||||
data-override-is-working-day={overrideIsWorkingDay === null || overrideIsWorkingDay === undefined ? '' : String(overrideIsWorkingDay)}
|
||||
data-is-excluded={isExcluded ? 'true' : 'false'}
|
||||
onClick={onClick}
|
||||
onPointerDown={() => onPointerDown?.(date)}
|
||||
onPointerEnter={() => onPointerEnter?.(date)}
|
||||
@@ -481,9 +483,41 @@ describe('CalendarWeek', () => {
|
||||
parentPersonalDataUuid: 'parent-1',
|
||||
startDate: '2026-01-05',
|
||||
endDate: '2026-01-05',
|
||||
// Clicking the band itself (not one of its day slots) reports the
|
||||
// band's first date, which is what "this day" then removes.
|
||||
clickedDate: '2026-01-05',
|
||||
})
|
||||
})
|
||||
|
||||
it('reports the clicked day slot as clickedDate, not the band start', () => {
|
||||
const onBandClick: (info: BandClickInfo) => void = vi.fn()
|
||||
const plannedDays = [
|
||||
pd({ id: '1', date: '2026-01-05', wishId: 'wish-1', parentPersonalDataUuid: 'parent-1' }),
|
||||
pd({ id: '2', date: '2026-01-06', wishId: 'wish-1', parentPersonalDataUuid: 'parent-1' }),
|
||||
pd({ id: '3', date: '2026-01-07', wishId: 'wish-1', parentPersonalDataUuid: 'parent-1' }),
|
||||
]
|
||||
const { container } = render(
|
||||
<CalendarWeek {...defaultProps} plannedDays={plannedDays} onBandClick={onBandClick} />,
|
||||
)
|
||||
const daySlots = container.querySelectorAll('.calendar-band__day')
|
||||
fireEvent.click(daySlots[1]!)
|
||||
expect(onBandClick).toHaveBeenCalledWith(
|
||||
expect.objectContaining({ clickedDate: '2026-01-06', startDate: '2026-01-05' }),
|
||||
)
|
||||
})
|
||||
|
||||
it('marks a user-removed date in the grid so the hole is explained', () => {
|
||||
render(<CalendarWeek {...defaultProps} excludedDates={new Set(['2026-01-06'])} />)
|
||||
expect(screen.getByTestId('calendar-day-2026-01-06')).toHaveAttribute(
|
||||
'data-is-excluded',
|
||||
'true',
|
||||
)
|
||||
expect(screen.getByTestId('calendar-day-2026-01-05')).toHaveAttribute(
|
||||
'data-is-excluded',
|
||||
'false',
|
||||
)
|
||||
})
|
||||
|
||||
it('calls onBandClick with a null wishId for an ad-hoc (non-wish) band', () => {
|
||||
const onBandClick: (info: BandClickInfo) => void = vi.fn()
|
||||
const plannedDays = [pd({ id: '1', date: '2026-01-05', wishId: null })]
|
||||
@@ -708,6 +742,7 @@ describe('CalendarWeek', () => {
|
||||
parentPersonalDataUuid: 'parent-1',
|
||||
startDate: '2026-01-05',
|
||||
endDate: '2026-01-05',
|
||||
clickedDate: '2026-01-05',
|
||||
})
|
||||
// Clicking the band must not also trigger the day cell's own click.
|
||||
expect(onDayClick).not.toHaveBeenCalled()
|
||||
|
||||
@@ -14,6 +14,11 @@ export interface BandClickInfo {
|
||||
parentPersonalDataUuid: string
|
||||
startDate: string
|
||||
endDate: string
|
||||
/** The single date the user actually clicked inside the band, which is what
|
||||
* the popover's "this day" removes. Clicking the band anywhere else (or
|
||||
* activating it from the keyboard) reports the band's own start date, so
|
||||
* this is never empty. */
|
||||
clickedDate: string
|
||||
}
|
||||
|
||||
export interface CalendarWeekProps {
|
||||
@@ -42,6 +47,11 @@ export interface CalendarWeekProps {
|
||||
onPointerEnter: (date: string) => void
|
||||
/** §3.4/§3.6 — calendar metadata (röda dagar/klämdagar/overrides) keyed by ISO date. */
|
||||
calendarDaysByDate?: Map<string, CalendarDayEntry> | undefined
|
||||
/** Dates the user has removed from the plan by hand (see
|
||||
* `PlannedDayExclusion`). A date the planner deliberately skipped inside an
|
||||
* otherwise-funded period is invisible otherwise, and the hole in the week
|
||||
* looks like a bug. */
|
||||
excludedDates?: Set<string> | undefined
|
||||
/** Opens the period editor for the clicked band's underlying period. */
|
||||
onBandClick?: ((info: BandClickInfo) => void) | undefined
|
||||
/** §Task7 — the wishId of a just-created/just-edited period to briefly
|
||||
@@ -283,6 +293,7 @@ export function CalendarWeek({
|
||||
onPointerDown,
|
||||
onPointerEnter,
|
||||
calendarDaysByDate,
|
||||
excludedDates,
|
||||
onBandClick,
|
||||
flashWishId,
|
||||
monthMaxLaneCount,
|
||||
@@ -352,6 +363,7 @@ export function CalendarWeek({
|
||||
holidayName={calendarInfo?.name ?? null}
|
||||
isOverride={calendarInfo?.isOverride ?? false}
|
||||
overrideIsWorkingDay={calendarInfo?.overrideIsWorkingDay ?? null}
|
||||
isExcluded={excludedDates?.has(date) ?? false}
|
||||
// Every cell is clickable/drag-selectable regardless of which
|
||||
// month it visually belongs to — `dayIsCurrentMonth` only
|
||||
// controls the dimmed `calendar-day--disabled` styling above.
|
||||
@@ -394,12 +406,15 @@ export function CalendarWeek({
|
||||
.filter(Boolean)
|
||||
.join(' ')
|
||||
|
||||
const fireClick = () =>
|
||||
const fireClick = (clickedDate?: string) =>
|
||||
onBandClick?.({
|
||||
wishId: segment.wishId,
|
||||
parentPersonalDataUuid: segment.parentUuid,
|
||||
startDate: segment.overallStart,
|
||||
endDate: segment.overallEnd,
|
||||
// Falls back to the band's first date when the click didn't land
|
||||
// on a specific day slot (the band's padding, or the keyboard).
|
||||
clickedDate: clickedDate ?? segment.overallStart,
|
||||
})
|
||||
|
||||
return (
|
||||
@@ -417,7 +432,7 @@ export function CalendarWeek({
|
||||
aria-label={`${label} · ${typeLabel}, ${segment.overallStart} – ${segment.overallEnd}`}
|
||||
role={onBandClick ? 'button' : undefined}
|
||||
tabIndex={onBandClick ? 0 : undefined}
|
||||
onClick={onBandClick ? fireClick : undefined}
|
||||
onClick={onBandClick ? () => fireClick() : undefined}
|
||||
onKeyDown={
|
||||
onBandClick
|
||||
? (e) => {
|
||||
@@ -443,6 +458,18 @@ export function CalendarWeek({
|
||||
style={info.isGap ? undefined : { backgroundColor: getColorForType(info.dayType ?? 'vacation') }}
|
||||
title={info.isPinned ? t('calendarDay.pinnedAria') : undefined}
|
||||
data-testid={info.isPinned ? 'calendar-band-day-pinned' : undefined}
|
||||
// Clicking one day slot opens the same popover as clicking
|
||||
// the band, but tells it WHICH date was clicked — "this
|
||||
// day" must be able to remove a day in the middle of a
|
||||
// period, not only its first.
|
||||
onClick={
|
||||
onBandClick
|
||||
? (e) => {
|
||||
e.stopPropagation()
|
||||
fireClick(info.date)
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user