feat(recurrence): Yearly tab — month grid + day grid, both multi-select
Yearly was a single Month dropdown + a Day number input — one Month and
one Day per rule. That meant "every quarter on the 1st" needed four
separate schedule rows.
Now Yearly mirrors Monthly's grid pattern but with two grids:
Months [Jan][Feb][Mar][Apr][May][Jun]
[Jul][Aug][Sep][Oct][Nov][Dec]
Days [ 1][ 2][ 3]...[31] (7×5 grid)
Both grids are multi-select. Cron output uses the comma-list form on
both DOM and month positions:
months: [1,4,7,10] + days: [1] → "0 9 1 1,4,7,10 *"
months: [12] + days: [24,25,31] → "0 9 24,25,31 12 *"
The cron field is a Cartesian product — every selected day fires in
every selected month. So "every quarter on the 1st" is now one rule.
Round-trip: parser accepts comma-lists for both DOM and month, with
single-element shapes (the old "0 9 13 5 *") still loading fine.
Migration of saved data: old yearly rules with one DOM + one month
parse into monthDays=[X], months=[Y] — identical visual selection in
the new grid, identical cron output. No DB changes needed.
Renamed `Draft.month` to `Draft.months: number[]`. The "Single
day-of-month for yearly" field is gone — yearly now reads
`monthDays` (same as monthly).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
b8f60bdaf3
commit
48cae84919
@ -36,11 +36,10 @@ interface Draft {
|
||||
type: RuleType;
|
||||
/** Cron weekday list (0=Sun..6=Sat). */
|
||||
weekdays: number[];
|
||||
/** Sorted unique day-of-month list (1-31) for monthly. */
|
||||
/** Sorted unique day-of-month list (1-31). Used by monthly + yearly. */
|
||||
monthDays: number[];
|
||||
/** Single day-of-month (1-31) for yearly. */
|
||||
monthDay: number;
|
||||
month: number;
|
||||
/** Sorted unique month list (1-12). Used by yearly only. */
|
||||
months: number[];
|
||||
/** Hour-of-day (0-23) for this rule's fire time. */
|
||||
hour: number;
|
||||
/** Minute-of-hour (0-59). */
|
||||
@ -54,8 +53,7 @@ function defaultDraft(firstFire: DateTime): Draft {
|
||||
type: "daily",
|
||||
weekdays: [isoWeekdayToCron(firstFire.weekday)],
|
||||
monthDays: [firstFire.day],
|
||||
monthDay: firstFire.day,
|
||||
month: firstFire.month,
|
||||
months: [firstFire.month],
|
||||
hour: firstFire.hour,
|
||||
minute: firstFire.minute,
|
||||
};
|
||||
@ -65,6 +63,10 @@ function uniqSortedDays(days: number[]): number[] {
|
||||
return Array.from(new Set(days.filter((d) => d >= 1 && d <= 31))).sort((a, b) => a - b);
|
||||
}
|
||||
|
||||
function uniqSortedMonths(months: number[]): number[] {
|
||||
return Array.from(new Set(months.filter((m) => m >= 1 && m <= 12))).sort((a, b) => a - b);
|
||||
}
|
||||
|
||||
function pad2(n: number): string {
|
||||
return n.toString().padStart(2, "0");
|
||||
}
|
||||
@ -102,8 +104,12 @@ function draftToCron(d: Draft): string | null {
|
||||
if (!days.length) return null;
|
||||
return `${m} ${h} ${days.join(",")} * *`;
|
||||
}
|
||||
case "yearly":
|
||||
return `${m} ${h} ${clamp(d.monthDay, 1, 31)} ${clamp(d.month, 1, 12)} *`;
|
||||
case "yearly": {
|
||||
const days = uniqSortedDays(d.monthDays);
|
||||
const months = uniqSortedMonths(d.months);
|
||||
if (!days.length || !months.length) return null;
|
||||
return `${m} ${h} ${days.join(",")} ${months.join(",")} *`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -134,8 +140,18 @@ function describeDraft(d: Draft): string {
|
||||
: `${days.slice(0, 6).join(", ")} +${days.length - 6} more`;
|
||||
return `Every month on day${days.length > 1 ? "s" : ""} ${list} at ${t}`;
|
||||
}
|
||||
case "yearly":
|
||||
return `Every year on ${MONTH_NAMES[clamp(d.month, 1, 12) - 1]} ${clamp(d.monthDay, 1, 31)} at ${t}`;
|
||||
case "yearly": {
|
||||
const days = uniqSortedDays(d.monthDays);
|
||||
const months = uniqSortedMonths(d.months);
|
||||
if (!days.length) return "Pick at least one day";
|
||||
if (!months.length) return "Pick at least one month";
|
||||
const monthLabel = months.map((mo) => MONTH_NAMES[mo - 1]?.slice(0, 3)).join(", ");
|
||||
const dayLabel =
|
||||
days.length <= 6
|
||||
? days.join(", ")
|
||||
: `${days.slice(0, 6).join(", ")} +${days.length - 6} more`;
|
||||
return `Every year in ${monthLabel} on day${days.length > 1 ? "s" : ""} ${dayLabel} at ${t}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -181,12 +197,14 @@ function draftFromCronExpr(expr: string, firstFire: DateTime): Draft {
|
||||
minute,
|
||||
};
|
||||
}
|
||||
if ((m = rest.match(/^(\d+) (\d+) \*$/))) {
|
||||
if ((m = rest.match(/^([0-9,]+) ([0-9,]+) \*$/))) {
|
||||
const days = uniqSortedDays(m[1]!.split(",").map((s) => Number(s)));
|
||||
const months = uniqSortedMonths(m[2]!.split(",").map((s) => Number(s)));
|
||||
return {
|
||||
...base,
|
||||
type: "yearly",
|
||||
monthDay: Number(m[1]),
|
||||
month: Number(m[2]),
|
||||
monthDays: days.length ? days : [1],
|
||||
months: months.length ? months : [1],
|
||||
hour,
|
||||
minute,
|
||||
};
|
||||
@ -461,33 +479,82 @@ function RuleEditor({ draft, onChange }: RuleEditorProps) {
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="yearly" className="space-y-3 pt-3">
|
||||
<div className="flex flex-wrap items-end gap-3">
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs text-muted-foreground">Month</Label>
|
||||
<select
|
||||
value={draft.month}
|
||||
onChange={(e) => onChange({ month: Number(e.target.value) })}
|
||||
className="h-8 rounded-lg border border-input bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
>
|
||||
{MONTH_NAMES.map((name, i) => (
|
||||
<option key={name} value={i + 1}>
|
||||
{name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<Label className="text-sm">Months</Label>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{draft.months.length} selected
|
||||
</span>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs text-muted-foreground">Day</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
max={31}
|
||||
value={draft.monthDay}
|
||||
onChange={(e) => onChange({ monthDay: Number(e.target.value) || 1 })}
|
||||
className="h-8 w-20"
|
||||
/>
|
||||
<div className="grid grid-cols-6 gap-1">
|
||||
{MONTH_NAMES.map((name, i) => {
|
||||
const month = i + 1;
|
||||
const active = draft.months.includes(month);
|
||||
return (
|
||||
<button
|
||||
key={month}
|
||||
type="button"
|
||||
onClick={() =>
|
||||
onChange({
|
||||
months: active
|
||||
? draft.months.filter((mo) => mo !== month)
|
||||
: uniqSortedMonths([...draft.months, month]),
|
||||
})
|
||||
}
|
||||
aria-pressed={active}
|
||||
className={cn(
|
||||
"inline-flex h-8 items-center justify-center rounded-md border text-xs font-medium transition-colors",
|
||||
active
|
||||
? "border-primary bg-primary text-primary-foreground"
|
||||
: "border-border bg-background hover:border-primary/50 hover:bg-primary/5 hover:text-primary",
|
||||
)}
|
||||
>
|
||||
{name.slice(0, 3)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<Label className="text-sm">Days</Label>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{draft.monthDays.length} selected
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-7 gap-1">
|
||||
{Array.from({ length: 31 }, (_, i) => i + 1).map((day) => {
|
||||
const active = draft.monthDays.includes(day);
|
||||
return (
|
||||
<button
|
||||
key={day}
|
||||
type="button"
|
||||
onClick={() =>
|
||||
onChange({
|
||||
monthDays: active
|
||||
? draft.monthDays.filter((d) => d !== day)
|
||||
: uniqSortedDays([...draft.monthDays, day]),
|
||||
})
|
||||
}
|
||||
aria-pressed={active}
|
||||
className={cn(
|
||||
"inline-flex h-8 items-center justify-center rounded-md border text-xs font-medium transition-colors",
|
||||
active
|
||||
? "border-primary bg-primary text-primary-foreground"
|
||||
: "border-border bg-background hover:border-primary/50 hover:bg-primary/5 hover:text-primary",
|
||||
)}
|
||||
>
|
||||
{day}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Fires on every selected day of every selected month.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<TimeField draft={draft} onChange={onChange} />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user