style(components): standardize main component file formatting
This commit is contained in:
@@ -1,153 +1,184 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import { useState } from "react"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { useState } from "react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
|
||||
type Recurrence = {
|
||||
freq: "NONE" | "DAILY" | "WEEKLY" | "MONTHLY"
|
||||
interval: number
|
||||
byDay?: string[]
|
||||
count?: number
|
||||
until?: string
|
||||
}
|
||||
freq: "NONE" | "DAILY" | "WEEKLY" | "MONTHLY";
|
||||
interval: number;
|
||||
byDay?: string[];
|
||||
count?: number;
|
||||
until?: string;
|
||||
};
|
||||
|
||||
interface Props {
|
||||
value?: string
|
||||
onChange: (rrule: string | undefined) => void
|
||||
value?: string;
|
||||
onChange: (rrule: string | undefined) => void;
|
||||
}
|
||||
|
||||
export function RecurrencePicker({ value, onChange }: Props) {
|
||||
const [rec, setRec] = useState<Recurrence>(() => {
|
||||
// If existing rrule, parse minimally (for simplicity we only rehydrate FREQ and INTERVAL)
|
||||
if (value) {
|
||||
const parts = Object.fromEntries(value.split(";").map((p) => p.split("=")))
|
||||
return {
|
||||
freq: parts.FREQ || "NONE",
|
||||
interval: parts.INTERVAL ? Number.parseInt(parts.INTERVAL, 10) : 1,
|
||||
byDay: parts.BYDAY ? parts.BYDAY.split(",") : [],
|
||||
count: parts.COUNT ? Number.parseInt(parts.COUNT, 10) : undefined,
|
||||
until: parts.UNTIL,
|
||||
}
|
||||
}
|
||||
return { freq: "NONE", interval: 1 }
|
||||
})
|
||||
const [rec, setRec] = useState<Recurrence>(() => {
|
||||
// If existing rrule, parse minimally (for simplicity we only rehydrate FREQ and INTERVAL)
|
||||
if (value) {
|
||||
const parts = Object.fromEntries(
|
||||
value.split(";").map((p) => p.split("=")),
|
||||
);
|
||||
return {
|
||||
freq: parts.FREQ || "NONE",
|
||||
interval: parts.INTERVAL ? Number.parseInt(parts.INTERVAL, 10) : 1,
|
||||
byDay: parts.BYDAY ? parts.BYDAY.split(",") : [],
|
||||
count: parts.COUNT ? Number.parseInt(parts.COUNT, 10) : undefined,
|
||||
until: parts.UNTIL,
|
||||
};
|
||||
}
|
||||
return { freq: "NONE", interval: 1 };
|
||||
});
|
||||
|
||||
const update = (updates: Partial<Recurrence>) => {
|
||||
const newRec = { ...rec, ...updates }
|
||||
setRec(newRec)
|
||||
const update = (updates: Partial<Recurrence>) => {
|
||||
const newRec = { ...rec, ...updates };
|
||||
setRec(newRec);
|
||||
|
||||
if (newRec.freq === "NONE") {
|
||||
onChange(undefined)
|
||||
return
|
||||
}
|
||||
if (newRec.freq === "NONE") {
|
||||
onChange(undefined);
|
||||
return;
|
||||
}
|
||||
|
||||
// Build RRULE string
|
||||
let rrule = `FREQ=${newRec.freq};INTERVAL=${newRec.interval}`
|
||||
if (newRec.freq === "WEEKLY" && newRec.byDay?.length) {
|
||||
rrule += `;BYDAY=${newRec.byDay.join(",")}`
|
||||
}
|
||||
if (newRec.count) rrule += `;COUNT=${newRec.count}`
|
||||
if (newRec.until) rrule += `;UNTIL=${newRec.until.replace(/-/g, "")}T000000Z`
|
||||
// Build RRULE string
|
||||
let rrule = `FREQ=${newRec.freq};INTERVAL=${newRec.interval}`;
|
||||
if (newRec.freq === "WEEKLY" && newRec.byDay?.length) {
|
||||
rrule += `;BYDAY=${newRec.byDay.join(",")}`;
|
||||
}
|
||||
if (newRec.count) rrule += `;COUNT=${newRec.count}`;
|
||||
if (newRec.until)
|
||||
rrule += `;UNTIL=${newRec.until.replace(/-/g, "")}T000000Z`;
|
||||
|
||||
onChange(rrule)
|
||||
}
|
||||
onChange(rrule);
|
||||
};
|
||||
|
||||
const toggleDay = (day: string) => {
|
||||
const byDay = rec.byDay || []
|
||||
const newByDay = byDay.includes(day) ? byDay.filter((d) => d !== day) : [...byDay, day]
|
||||
update({ byDay: newByDay })
|
||||
}
|
||||
const toggleDay = (day: string) => {
|
||||
const byDay = rec.byDay || [];
|
||||
const newByDay = byDay.includes(day)
|
||||
? byDay.filter((d) => d !== day)
|
||||
: [...byDay, day];
|
||||
update({ byDay: newByDay });
|
||||
};
|
||||
|
||||
const dayLabels = {
|
||||
MO: "Mon",
|
||||
TU: "Tue",
|
||||
WE: "Wed",
|
||||
TH: "Thu",
|
||||
FR: "Fri",
|
||||
SA: "Sat",
|
||||
SU: "Sun",
|
||||
}
|
||||
const dayLabels = {
|
||||
MO: "Mon",
|
||||
TU: "Tue",
|
||||
WE: "Wed",
|
||||
TH: "Thu",
|
||||
FR: "Fri",
|
||||
SA: "Sat",
|
||||
SU: "Sun",
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="">
|
||||
<Label htmlFor="frequency" className="pt-4 pb-2 pl-1">Repeats</Label>
|
||||
<div className="space-y-2">
|
||||
<Select value={rec.freq} onValueChange={(value) => update({ freq: value as Recurrence["freq"] })}>
|
||||
<SelectTrigger id="frequency">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="NONE">Does not repeat</SelectItem>
|
||||
<SelectItem value="DAILY">Daily</SelectItem>
|
||||
<SelectItem value="WEEKLY">Weekly</SelectItem>
|
||||
<SelectItem value="MONTHLY">Monthly</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
return (
|
||||
<div className="">
|
||||
<Label htmlFor="frequency" className="pt-4 pb-2 pl-1">
|
||||
Repeats
|
||||
</Label>
|
||||
<div className="space-y-2">
|
||||
<Select
|
||||
value={rec.freq}
|
||||
onValueChange={(value) =>
|
||||
update({ freq: value as Recurrence["freq"] })
|
||||
}
|
||||
>
|
||||
<SelectTrigger id="frequency">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="NONE">Does not repeat</SelectItem>
|
||||
<SelectItem value="DAILY">Daily</SelectItem>
|
||||
<SelectItem value="WEEKLY">Weekly</SelectItem>
|
||||
<SelectItem value="MONTHLY">Monthly</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{rec.freq !== "NONE" && (
|
||||
<>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="interval">
|
||||
Interval (every {rec.interval} {rec.freq === "DAILY" ? "day" : rec.freq === "WEEKLY" ? "week" : "month"}
|
||||
{rec.interval > 1 ? "s" : ""})
|
||||
</Label>
|
||||
<Input
|
||||
id="interval"
|
||||
type="number"
|
||||
min={1}
|
||||
value={rec.interval}
|
||||
onChange={(e) => update({ interval: Number.parseInt(e.target.value, 10) || 1 })}
|
||||
className="w-24"
|
||||
/>
|
||||
</div>
|
||||
{rec.freq !== "NONE" && (
|
||||
<>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="interval">
|
||||
Interval (every {rec.interval}{" "}
|
||||
{rec.freq === "DAILY"
|
||||
? "day"
|
||||
: rec.freq === "WEEKLY"
|
||||
? "week"
|
||||
: "month"}
|
||||
{rec.interval > 1 ? "s" : ""})
|
||||
</Label>
|
||||
<Input
|
||||
id="interval"
|
||||
type="number"
|
||||
min={1}
|
||||
value={rec.interval}
|
||||
onChange={(e) =>
|
||||
update({ interval: Number.parseInt(e.target.value, 10) || 1 })
|
||||
}
|
||||
className="w-24"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{rec.freq === "WEEKLY" && (
|
||||
<div className="space-y-2">
|
||||
<Label>Days of the week</Label>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
{["MO", "TU", "WE", "TH", "FR", "SA", "SU"].map((day) => (
|
||||
<div key={day} className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id={day}
|
||||
checked={rec.byDay?.includes(day) || false}
|
||||
onCheckedChange={() => toggleDay(day)}
|
||||
/>
|
||||
<Label htmlFor={day} className="text-sm font-normal">
|
||||
{dayLabels[day as keyof typeof dayLabels]}
|
||||
</Label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{rec.freq === "WEEKLY" && (
|
||||
<div className="space-y-2">
|
||||
<Label>Days of the week</Label>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
{["MO", "TU", "WE", "TH", "FR", "SA", "SU"].map((day) => (
|
||||
<div key={day} className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id={day}
|
||||
checked={rec.byDay?.includes(day) || false}
|
||||
onCheckedChange={() => toggleDay(day)}
|
||||
/>
|
||||
<Label htmlFor={day} className="text-sm font-normal">
|
||||
{dayLabels[day as keyof typeof dayLabels]}
|
||||
</Label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="count">End after (occurrences)</Label>
|
||||
<Input
|
||||
id="count"
|
||||
type="number"
|
||||
placeholder="e.g. 10"
|
||||
value={rec.count || ""}
|
||||
onChange={(e) => update({ count: e.target.value ? Number.parseInt(e.target.value, 10) : undefined })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="until">End by date</Label>
|
||||
<Input
|
||||
id="until"
|
||||
type="date"
|
||||
value={rec.until || ""}
|
||||
onChange={(e) => update({ until: e.target.value || undefined })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="count">End after (occurrences)</Label>
|
||||
<Input
|
||||
id="count"
|
||||
type="number"
|
||||
placeholder="e.g. 10"
|
||||
value={rec.count || ""}
|
||||
onChange={(e) =>
|
||||
update({
|
||||
count: e.target.value
|
||||
? Number.parseInt(e.target.value, 10)
|
||||
: undefined,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="until">End by date</Label>
|
||||
<Input
|
||||
id="until"
|
||||
type="date"
|
||||
value={rec.until || ""}
|
||||
onChange={(e) => update({ until: e.target.value || undefined })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user