alma/NeahStable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

agenda form

Browse Source
This commit is contained in:
alma 2026-01-14 13:00:37 +01:00
parent c552beffbe
commit af0352bbec
2 changed files with 76 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/agenda/page.tsx
View File

@ -62,7 +62,7 @@ export default async function CalendarPage() {
if (calendars.length === 0) {
const defaultCalendars = [
{
name: "Default",
name: "Privée",
color: "#4F46E5",
description: "Your default calendar"
}

128
components/calendar/calendar-client.tsx
View File

@ -174,7 +174,7 @@ function CalendarDialog({ open, onClose, onSave, onDelete, initialData }: Calend
placeholder="Nom du calendrier"
required
disabled={isMainCalendar}
className="rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
className="rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 bg-white text-gray-900"
/>
</div>
@ -252,7 +252,7 @@ function CalendarDialog({ open, onClose, onSave, onDelete, initialData }: Calend
onChange={(e) => setDescription(e.target.value)}
placeholder="Description du calendrier"
rows={3}
className="rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
className="rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 bg-white text-gray-900"
/>
</div>
</div>
@ -276,7 +276,7 @@ function CalendarDialog({ open, onClose, onSave, onDelete, initialData }: Calend
variant="outline"
onClick={onClose}
disabled={isSubmitting}
className="rounded-lg border-gray-300 text-gray-700 hover:bg-gray-50"
className="rounded-lg border-gray-300 bg-gray-200 text-gray-700 hover:bg-gray-300"
>
Annuler
</Button>
@ -813,14 +813,14 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
}
};
// Update CalendarSelector to handle visibility
// Update CalendarSelector to handle visibility - displayed as a left column
const CalendarSelector = () => (
<div className="flex flex-wrap items-center gap-2 mb-4">
<div className="flex flex-col gap-2 mb-4">
{calendars.map((calendar) => (
<div key={calendar.id} className="relative group">
<Button
variant={visibleCalendarIds.includes(calendar.id) ? "secondary" : "ghost"}
className="flex items-center gap-2 pr-8"
className="flex items-center gap-2 pr-8 w-full justify-start"
onClick={() => {
if (visibleCalendarIds.includes(calendar.id)) {
setVisibleCalendarIds(visibleCalendarIds.filter(id => id !== calendar.id));
@ -833,14 +833,14 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
className="w-3 h-3 rounded-full"
style={{ backgroundColor: calendar.color }}
/>
<span>{calendar.name}</span>
<div className="ml-2">
<span>{calendar.name === "Default" ? "Privée" : calendar.name}</span>
<div className="ml-auto">
{visibleCalendarIds.includes(calendar.id) ? (
<Check className="h-4 w-4" />
) : null}
</div>
</Button>
{calendar.name !== "Calendrier principal" && (
{calendar.name !== "Calendrier principal" && calendar.name !== "Default" && (
<Button
variant="ghost"
size="icon"
@ -916,56 +916,77 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
};
return (
<div className="space-y-4">
<Card className="p-4">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-4">
<Button
onClick={() => {
setSelectedEvent(null);
setEventForm({
title: "",
description: null,
start: new Date().toISOString(),
end: new Date(new Date().setHours(new Date().getHours() + 1)).toISOString(),
allDay: false,
location: null,
calendarId: selectedCalendarId
});
setIsEventModalOpen(true);
<div className="flex gap-4">
{/* Left column for calendars */}
<div className="w-64 flex-shrink-0">
<Card className="p-4">
<div className="flex items-center justify-between mb-4">
<h3 className="text-lg font-semibold text-gray-900">Calendriers</h3>
<Button
onClick={() => {
setSelectedCalendar(null);
setIsCalendarModalOpen(true);
}}
className="bg-primary hover:bg-primary/90 text-white"
size="sm"
variant="outline"
className="h-8"
>
<Plus className="mr-2 h-4 w-4" />
<span className="font-medium">Nouvel événement</span>
</Button>
<Plus className="h-4 w-4" />
</Button>
</div>
<CalendarSelector />
</Card>
</div>
<Tabs value={view} className="w-auto">
<TabsList>
<TabsTrigger
value="dayGridMonth"
onClick={() => handleViewChange("dayGridMonth")}
>
Mois
</TabsTrigger>
<TabsTrigger
value="timeGridWeek"
onClick={() => handleViewChange("timeGridWeek")}
>
Semaine
</TabsTrigger>
<TabsTrigger
value="timeGridDay"
onClick={() => handleViewChange("timeGridDay")}
>
Jour
</TabsTrigger>
</TabsList>
</Tabs>
{/* Right column for calendar view */}
<div className="flex-1">
<Card className="p-4">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-4">
<Button
onClick={() => {
setSelectedEvent(null);
setEventForm({
title: "",
description: null,
start: new Date().toISOString(),
end: new Date(new Date().setHours(new Date().getHours() + 1)).toISOString(),
allDay: false,
location: null,
calendarId: selectedCalendarId
});
setIsEventModalOpen(true);
}}
className="bg-primary hover:bg-primary/90 text-white"
>
<Plus className="mr-2 h-4 w-4" />
<span className="font-medium">Nouvel événement</span>
</Button>
</div>
<CalendarSelector />
<Tabs value={view} className="w-auto">
<TabsList>
<TabsTrigger
value="dayGridMonth"
onClick={() => handleViewChange("dayGridMonth")}
>
Mois
</TabsTrigger>
<TabsTrigger
value="timeGridWeek"
onClick={() => handleViewChange("timeGridWeek")}
>
Semaine
</TabsTrigger>
<TabsTrigger
value="timeGridDay"
onClick={() => handleViewChange("timeGridDay")}
>
Jour
</TabsTrigger>
</TabsList>
</Tabs>
</div>
<style jsx global>{`
/* Fixed height and scrolling for day cells only */
@ -1136,6 +1157,7 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
/>
)}
</Card>
</div>
{/* Calendar dialog */}
<CalendarDialog