feat: let the quick schedule changes target any day, not just today
Opening later and closing earlier were fixed to today, which was an assumption rather than a requirement: closing next Thursday afternoon is the same decision as closing this one, and the shop knows about it in advance more often than not. The date is a single control and still defaults to today, so the two-click path for the most frequent case is unchanged. The usual hours differ from one weekday to the next, and "opens later" is late relative to them, so the whole sixty-day window is resolved on the server and handed over at once. Sixty small entries cost less than a round trip per change of date. The date control's accessible name is explicit: "du" alone collided with the "Du" field of the range form below it, which the end-to-end run caught as an ambiguous locator — and an ambiguous locator is an ambiguous label for anyone using a screen reader. The end-to-end suite ran before this was pushed, unlike last time. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012cSY9pVhZmJUKNN7wf1Myd
This commit is contained in:
Claude Opus 5
@@ -19,14 +19,20 @@ export type UpcomingDay = {
|
||||
canDelete: boolean;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
canEdit: boolean;
|
||||
today: string;
|
||||
todayLabel: string;
|
||||
/** A day the quick actions can target, with the hours it would normally have. */
|
||||
export type SelectableDay = {
|
||||
date: string;
|
||||
label: string;
|
||||
usualSlots: Slot[];
|
||||
usualText: string;
|
||||
effectiveText: string;
|
||||
todayIsException: boolean;
|
||||
isException: boolean;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
canEdit: boolean;
|
||||
today: string;
|
||||
days: SelectableDay[];
|
||||
upcoming: UpcomingDay[];
|
||||
};
|
||||
|
||||
@@ -36,16 +42,7 @@ const KIND_LABELS: Record<string, { text: string; className: string }> = {
|
||||
VACATION: { text: 'vacances', className: 'bg-[var(--surface-muted)] text-[var(--ink-muted)]' },
|
||||
};
|
||||
|
||||
export default function ExceptionsManager({
|
||||
canEdit,
|
||||
today,
|
||||
todayLabel,
|
||||
usualSlots,
|
||||
usualText,
|
||||
effectiveText,
|
||||
todayIsException,
|
||||
upcoming,
|
||||
}: Props) {
|
||||
export default function ExceptionsManager({ canEdit, today, days, upcoming }: Props) {
|
||||
const [pending, startTransition] = useTransition();
|
||||
const [message, setMessage] = useState<{ kind: 'ok' | 'error'; text: string } | null>(null);
|
||||
|
||||
@@ -72,18 +69,7 @@ export default function ExceptionsManager({
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{canEdit ? (
|
||||
<TodayPanel
|
||||
today={today}
|
||||
todayLabel={todayLabel}
|
||||
usualSlots={usualSlots}
|
||||
usualText={usualText}
|
||||
effectiveText={effectiveText}
|
||||
todayIsException={todayIsException}
|
||||
pending={pending}
|
||||
run={run}
|
||||
/>
|
||||
) : null}
|
||||
{canEdit ? <QuickPanel today={today} days={days} pending={pending} run={run} /> : null}
|
||||
|
||||
{canEdit ? <RangePanel pending={pending} run={run} /> : null}
|
||||
|
||||
@@ -138,41 +124,45 @@ export default function ExceptionsManager({
|
||||
}
|
||||
|
||||
/**
|
||||
* The two-click path. This is the gesture the shop actually makes, from a
|
||||
* phone, standing behind the counter — so it sits at the top and asks for as
|
||||
* little as possible.
|
||||
* The quick path.
|
||||
*
|
||||
* This is the gesture the shop actually makes, from a phone, standing behind
|
||||
* the counter — so it sits at the top and asks for as little as possible.
|
||||
* The date defaults to today and changing it costs one control: closing this
|
||||
* afternoon and closing next Thursday are the same decision, and neither
|
||||
* should cost more clicks than the other.
|
||||
*/
|
||||
function TodayPanel({
|
||||
function QuickPanel({
|
||||
today,
|
||||
todayLabel,
|
||||
usualSlots,
|
||||
usualText,
|
||||
effectiveText,
|
||||
todayIsException,
|
||||
days,
|
||||
pending,
|
||||
run,
|
||||
}: {
|
||||
today: string;
|
||||
todayLabel: string;
|
||||
usualSlots: Slot[];
|
||||
usualText: string;
|
||||
effectiveText: string;
|
||||
todayIsException: boolean;
|
||||
days: SelectableDay[];
|
||||
pending: boolean;
|
||||
run: (work: () => Promise<{ ok: true } | { ok: false; error: string }>, success: string) => void;
|
||||
}) {
|
||||
const [date, setDate] = useState(today);
|
||||
const [openFrom, setOpenFrom] = useState('14:00');
|
||||
const [closeAt, setCloseAt] = useState('16:00');
|
||||
|
||||
const isOpenToday = usualSlots.length > 0;
|
||||
const day = days.find((candidate) => candidate.date === date) ?? days[0];
|
||||
const isToday = day?.date === today;
|
||||
const usualSlots = day?.usualSlots ?? [];
|
||||
const isOpenThatDay = usualSlots.length > 0;
|
||||
|
||||
const lateResult = lateOpening(usualSlots, openFrom);
|
||||
const earlyResult = earlyClosing(usualSlots, closeAt);
|
||||
|
||||
function apply(slots: Slot[], note: string, success: string) {
|
||||
if (!day) {
|
||||
return;
|
||||
}
|
||||
run(
|
||||
() =>
|
||||
saveException({
|
||||
date: today,
|
||||
date: day.date,
|
||||
isClosed: slots.length === 0,
|
||||
slots,
|
||||
reason: 'TEMPORARY',
|
||||
@@ -182,25 +172,49 @@ function TodayPanel({
|
||||
);
|
||||
}
|
||||
|
||||
const when = isToday ? 'aujourd’hui' : `le ${day?.label.toLowerCase() ?? ''}`;
|
||||
|
||||
return (
|
||||
<section className="rounded-[var(--radius-md)] border-2 border-[var(--accent)] bg-[var(--surface)] p-5">
|
||||
<h2 className="text-lg">Modifier les horaires d’aujourd’hui</h2>
|
||||
<p className="mt-1 text-sm text-[var(--ink-muted)]">
|
||||
{todayLabel} — habituellement {usualText}.
|
||||
{todayIsException ? ` Actuellement : ${effectiveText}.` : ''}
|
||||
<div className="flex flex-wrap items-center gap-x-3 gap-y-2">
|
||||
<h2 className="text-lg">Modifier les horaires</h2>
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<span className="text-[var(--ink-muted)]">du</span>
|
||||
<select
|
||||
// "du" alone collides with the range form's "Du" field below;
|
||||
// the accessible name has to say which control this is.
|
||||
aria-label="Jour à modifier"
|
||||
value={date}
|
||||
onChange={(event) => setDate(event.target.value)}
|
||||
className="rounded-[var(--radius-sm)] border border-[var(--line-strong)] bg-[var(--surface)] px-2 py-1.5 text-base"
|
||||
>
|
||||
{days.map((candidate) => (
|
||||
<option key={candidate.date} value={candidate.date}>
|
||||
{candidate.date === today ? `${candidate.label} (aujourd’hui)` : candidate.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<p className="mt-2 text-sm text-[var(--ink-muted)]">
|
||||
Habituellement {day?.usualText ?? 'Fermé'}.
|
||||
{day?.isException ? ` Actuellement : ${day.effectiveText}.` : ''}
|
||||
</p>
|
||||
|
||||
<div className="mt-4 space-y-3">
|
||||
<button
|
||||
type="button"
|
||||
disabled={pending}
|
||||
onClick={() => apply([], 'Fermeture exceptionnelle', 'La boutique est fermée aujourd’hui.')}
|
||||
onClick={() =>
|
||||
apply([], 'Fermeture exceptionnelle', `La boutique sera fermée ${when}.`)
|
||||
}
|
||||
className="w-full rounded-[var(--radius-md)] bg-[var(--accent)] px-4 py-3 font-medium text-[var(--on-accent)] transition-colors hover:bg-[var(--accent-hover)] disabled:opacity-40 sm:w-auto"
|
||||
>
|
||||
Fermé aujourd’hui
|
||||
{isToday ? 'Fermé aujourd’hui' : `Fermé ${when}`}
|
||||
</button>
|
||||
|
||||
{isOpenToday ? (
|
||||
{isOpenThatDay ? (
|
||||
<>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<button
|
||||
@@ -250,8 +264,8 @@ function TodayPanel({
|
||||
</>
|
||||
) : (
|
||||
<p className="text-sm text-[var(--ink-muted)]">
|
||||
La boutique est déjà fermée aujourd’hui : pour une ouverture exceptionnelle,
|
||||
utilisez le formulaire ci-dessous.
|
||||
La boutique est déjà fermée {when} : pour une ouverture exceptionnelle, utilisez le
|
||||
formulaire ci-dessous.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -6,7 +6,7 @@ import { formatDateFr, formatHoursText } from '@/lib/schedule/format';
|
||||
import { resolveCivilDay } from '@/lib/schedule/resolver';
|
||||
import type { ScheduleContext } from '@/lib/schedule/types';
|
||||
|
||||
import ExceptionsManager, { type UpcomingDay } from './ExceptionsManager';
|
||||
import ExceptionsManager, { type SelectableDay, type UpcomingDay } from './ExceptionsManager';
|
||||
|
||||
export const metadata = { title: 'Changements ponctuels — ITA ITO' };
|
||||
|
||||
@@ -26,11 +26,7 @@ export default async function ExceptionsPage() {
|
||||
const deletable = new Set(stored.map((row) => row.date.toISOString().slice(0, 10)));
|
||||
|
||||
const upcoming = collectUpcoming(today, context, deletable);
|
||||
|
||||
// What today would normally be, ignoring any exception already recorded:
|
||||
// that is what "opening late" is late relative to.
|
||||
const usual = resolveCivilDay(today, { ...context, exceptions: [] });
|
||||
const effective = resolveCivilDay(today, context);
|
||||
const days = collectSelectableDays(today, context);
|
||||
|
||||
return (
|
||||
<main className="mx-auto max-w-3xl px-4 py-10">
|
||||
@@ -43,17 +39,41 @@ export default async function ExceptionsPage() {
|
||||
<ExceptionsManager
|
||||
canEdit={session?.user?.role === 'admin'}
|
||||
today={today}
|
||||
todayLabel={formatDateFr(today)}
|
||||
usualSlots={usual.slots}
|
||||
usualText={usual.slots.length > 0 ? formatHoursText(usual.slots) : 'Fermé'}
|
||||
effectiveText={effective.slots.length > 0 ? formatHoursText(effective.slots) : 'Fermé'}
|
||||
todayIsException={effective.isException}
|
||||
days={days}
|
||||
upcoming={upcoming}
|
||||
/>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Each day the quick actions can target, with the hours it would normally
|
||||
* have.
|
||||
*
|
||||
* "Opens later" is late relative to the day's usual hours, and those differ
|
||||
* from one weekday to the next — so the whole window is resolved here rather
|
||||
* than asking the server again every time the date changes. Sixty small
|
||||
* entries cost less than a round trip per keystroke.
|
||||
*/
|
||||
function collectSelectableDays(today: string, context: ScheduleContext): SelectableDay[] {
|
||||
const withoutExceptions: ScheduleContext = { ...context, exceptions: [] };
|
||||
|
||||
return Array.from({ length: HORIZON_DAYS + 1 }, (_, offset) => {
|
||||
const date = addCivilDays(today, offset);
|
||||
const usual = resolveCivilDay(date, withoutExceptions);
|
||||
const effective = resolveCivilDay(date, context);
|
||||
|
||||
return {
|
||||
date,
|
||||
label: formatDateFr(date),
|
||||
usualSlots: usual.slots,
|
||||
usualText: usual.slots.length > 0 ? formatHoursText(usual.slots) : 'Fermé',
|
||||
effectiveText: effective.slots.length > 0 ? formatHoursText(effective.slots) : 'Fermé',
|
||||
isException: effective.isException,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Every day ahead that departs from the reference week, whatever the cause.
|
||||
*
|
||||
|
||||
+21
-1
@@ -18,7 +18,7 @@ test('changing today’s hours reaches the panel', async ({ page, request }) =>
|
||||
await page.goto('/admin/exceptions');
|
||||
|
||||
await page.getByRole('button', { name: /Fermé aujourd’hui/ }).click();
|
||||
await expect(page.getByText(/La boutique est fermée aujourd’hui/)).toBeVisible();
|
||||
await expect(page.getByRole('status')).toContainText(/sera fermée aujourd’hui/);
|
||||
|
||||
// Stored as a manual exception for today, in the shop's timezone.
|
||||
// Read as text: node-postgres parses a DATE column into a local-midnight
|
||||
@@ -37,6 +37,26 @@ test('changing today’s hours reaches the panel', async ({ page, request }) =>
|
||||
await expect(page.getByText(/aujourd’hui/).first()).toBeVisible();
|
||||
});
|
||||
|
||||
test('a quick change can target a day other than today', async ({ page }) => {
|
||||
const target = today(3);
|
||||
|
||||
await signIn(page, 'admin');
|
||||
await page.goto('/admin/exceptions');
|
||||
|
||||
// The date defaults to today; closing next Thursday must not cost more
|
||||
// clicks than closing this afternoon.
|
||||
await page.getByLabel('Jour à modifier').selectOption(target);
|
||||
await page.getByRole('button', { name: /^Fermé le / }).click();
|
||||
|
||||
await expect(page.getByRole('status')).toContainText(/sera fermée/);
|
||||
|
||||
const [exception] = await query<{ date: string; isClosed: boolean }>(
|
||||
'SELECT date::text AS date, "isClosed" FROM schedule_exceptions',
|
||||
);
|
||||
expect(exception?.date).toBe(target);
|
||||
expect(exception?.isClosed).toBe(true);
|
||||
});
|
||||
|
||||
test('the reference week can be edited and shows what will change', async ({ page }) => {
|
||||
await signIn(page, 'admin');
|
||||
await page.goto('/admin/horaires');
|
||||
|
||||
Reference in New Issue
Block a user