agenda form
This commit is contained in:
parent
af0352bbec
commit
a55835be74
@ -106,7 +106,7 @@ export default async function CalendarPage() {
|
||||
}, 0);
|
||||
|
||||
return (
|
||||
<div className="container mx-auto py-10">
|
||||
<div className="flex flex-col h-full w-full bg-white">
|
||||
<CalendarClient
|
||||
initialCalendars={calendars}
|
||||
userId={session.user.id}
|
||||
|
||||
@ -98,6 +98,7 @@ function CalendarDialog({ open, onClose, onSave, onDelete, initialData }: Calend
|
||||
const [customColorMode, setCustomColorMode] = useState(false);
|
||||
|
||||
const isMainCalendar = initialData?.name === "Calendrier principal";
|
||||
const isMissionOrGroupCalendar = initialData?.name?.startsWith("Mission:") || initialData?.name?.startsWith("Groupe:");
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
@ -173,7 +174,7 @@ function CalendarDialog({ open, onClose, onSave, onDelete, initialData }: Calend
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Nom du calendrier"
|
||||
required
|
||||
disabled={isMainCalendar}
|
||||
disabled={isMainCalendar || isMissionOrGroupCalendar}
|
||||
className="rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 bg-white text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
@ -252,6 +253,7 @@ function CalendarDialog({ open, onClose, onSave, onDelete, initialData }: Calend
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="Description du calendrier"
|
||||
rows={3}
|
||||
disabled={isMissionOrGroupCalendar}
|
||||
className="rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 bg-white text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
@ -259,12 +261,12 @@ function CalendarDialog({ open, onClose, onSave, onDelete, initialData }: Calend
|
||||
|
||||
<DialogFooter className="mt-6 border-t border-gray-100 pt-4">
|
||||
<div className="flex justify-between w-full">
|
||||
{initialData?.id && !isMainCalendar && (
|
||||
{initialData?.id && !isMainCalendar && !isMissionOrGroupCalendar && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
onClick={handleDelete}
|
||||
disabled={isSubmitting || isMainCalendar}
|
||||
disabled={isSubmitting || isMainCalendar || isMissionOrGroupCalendar}
|
||||
>
|
||||
<X className="w-4 h-4 mr-2" />
|
||||
Supprimer
|
||||
@ -282,7 +284,7 @@ function CalendarDialog({ open, onClose, onSave, onDelete, initialData }: Calend
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={!name || isSubmitting || isMainCalendar}
|
||||
disabled={!name || isSubmitting || isMainCalendar || isMissionOrGroupCalendar}
|
||||
className="rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white"
|
||||
>
|
||||
{isSubmitting
|
||||
@ -840,7 +842,10 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
||||
) : null}
|
||||
</div>
|
||||
</Button>
|
||||
{calendar.name !== "Calendrier principal" && calendar.name !== "Default" && (
|
||||
{calendar.name !== "Calendrier principal" &&
|
||||
calendar.name !== "Default" &&
|
||||
!calendar.name.startsWith("Mission:") &&
|
||||
!calendar.name.startsWith("Groupe:") && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
@ -916,71 +921,75 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex gap-4">
|
||||
<div className="flex gap-4 h-full">
|
||||
{/* 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);
|
||||
}}
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="h-8"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<CalendarSelector />
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Right column for calendar view */}
|
||||
<div className="flex-1">
|
||||
<Card className="p-4">
|
||||
<div className="flex-1 flex flex-col">
|
||||
<Card className="p-4 flex-1 flex flex-col">
|
||||
<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>
|
||||
{/* Display selected calendar name */}
|
||||
{(() => {
|
||||
const selectedCal = calendars.find(cal => visibleCalendarIds.includes(cal.id) && visibleCalendarIds.length === 1);
|
||||
const displayName = selectedCal
|
||||
? (selectedCal.name === "Default" ? "Privée" : selectedCal.name)
|
||||
: "Tous les calendriers";
|
||||
return (
|
||||
<h2 className="text-lg font-semibold text-gray-900">
|
||||
{displayName}
|
||||
</h2>
|
||||
);
|
||||
})()}
|
||||
<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-blue-600 hover:bg-blue-700 text-white"
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
<span className="font-medium">Nouvel événement</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Tabs value={view} className="w-auto">
|
||||
<TabsList>
|
||||
<TabsList className="bg-blue-600">
|
||||
<TabsTrigger
|
||||
value="dayGridMonth"
|
||||
onClick={() => handleViewChange("dayGridMonth")}
|
||||
className="data-[state=active]:bg-blue-700 data-[state=active]:text-white text-white hover:text-white/80"
|
||||
>
|
||||
Mois
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="timeGridWeek"
|
||||
onClick={() => handleViewChange("timeGridWeek")}
|
||||
className="data-[state=active]:bg-blue-700 data-[state=active]:text-white text-white hover:text-white/80"
|
||||
>
|
||||
Semaine
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="timeGridDay"
|
||||
onClick={() => handleViewChange("timeGridDay")}
|
||||
className="data-[state=active]:bg-blue-700 data-[state=active]:text-white text-white hover:text-white/80"
|
||||
>
|
||||
Jour
|
||||
</TabsTrigger>
|
||||
@ -988,6 +997,7 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-auto">
|
||||
<style jsx global>{`
|
||||
/* Fixed height and scrolling for day cells only */
|
||||
.fc .fc-daygrid-day-frame {
|
||||
@ -1156,6 +1166,7 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user