Agenda refactor
This commit is contained in:
parent
0f20ba724d
commit
d9ce6869a8
@ -7,7 +7,7 @@ import { ResponsiveIframe } from "@/app/components/responsive-iframe";
|
||||
import { Users, FolderKanban, Video, ArrowLeft, Loader2, Calendar, Clock, Plus, X } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useToast } from "@/components/ui/use-toast";
|
||||
import { Calendar as CalendarComponent } from "@/components/ui/calendar";
|
||||
import { CalendarClient } from "@/components/calendar/calendar-client";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
@ -52,6 +52,8 @@ export default function VisionPage() {
|
||||
const [scheduledMeetings, setScheduledMeetings] = useState<ScheduledMeeting[]>([]);
|
||||
const [showMeetingDialog, setShowMeetingDialog] = useState(false);
|
||||
const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());
|
||||
const [calendars, setCalendars] = useState<any[]>([]);
|
||||
const [calendarsLoading, setCalendarsLoading] = useState(true);
|
||||
const [meetingForm, setMeetingForm] = useState<{
|
||||
type: "group" | "mission" | "";
|
||||
entityId: string;
|
||||
@ -96,6 +98,32 @@ export default function VisionPage() {
|
||||
}
|
||||
}, [scheduledMeetings, session, status]);
|
||||
|
||||
// Fetch calendars
|
||||
useEffect(() => {
|
||||
const fetchCalendars = async () => {
|
||||
if (status !== "authenticated" || !session?.user?.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setCalendarsLoading(true);
|
||||
const response = await fetch("/api/calendars");
|
||||
if (response.ok) {
|
||||
const calendarsData = await response.json();
|
||||
setCalendars(Array.isArray(calendarsData) ? calendarsData : []);
|
||||
} else {
|
||||
console.error("Failed to fetch calendars");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching calendars:", error);
|
||||
} finally {
|
||||
setCalendarsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchCalendars();
|
||||
}, [session, status]);
|
||||
|
||||
// Fetch user groups and missions
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
@ -378,74 +406,75 @@ export default function VisionPage() {
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col lg:flex-row gap-6">
|
||||
{/* Colonne calendrier (étroite) */}
|
||||
{/* Colonne calendrier (étroite) - CalendarClient avec dimensions réduites */}
|
||||
<div id="vision-calendar" className="w-full lg:w-80 lg:flex-shrink-0">
|
||||
<style dangerouslySetInnerHTML={{__html: `
|
||||
#vision-calendar .rdp-caption_label {
|
||||
color: #111827 !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
#vision-calendar .rdp-nav_button {
|
||||
color: #374151 !important;
|
||||
background-color: white !important;
|
||||
}
|
||||
#vision-calendar .rdp-nav_button:hover {
|
||||
color: #111827 !important;
|
||||
}
|
||||
#vision-calendar .rdp-nav_button svg,
|
||||
#vision-calendar .rdp-nav_button path {
|
||||
color: #374151 !important;
|
||||
stroke: #374151 !important;
|
||||
fill: #374151 !important;
|
||||
}
|
||||
#vision-calendar .rdp-nav_button:hover svg,
|
||||
#vision-calendar .rdp-nav_button:hover path {
|
||||
color: #111827 !important;
|
||||
stroke: #111827 !important;
|
||||
fill: #111827 !important;
|
||||
}
|
||||
#vision-calendar .rdp-day {
|
||||
color: #1f2937 !important;
|
||||
background-color: white !important;
|
||||
}
|
||||
#vision-calendar .rdp-day_today {
|
||||
background-color: #DBEAFE !important;
|
||||
color: #1d4ed8 !important;
|
||||
border: 2px solid #3b82f6 !important;
|
||||
}
|
||||
#vision-calendar .rdp-day_selected {
|
||||
background-color: #2563eb !important;
|
||||
color: white !important;
|
||||
}
|
||||
#vision-calendar .rdp-day_outside {
|
||||
color: #9ca3af !important;
|
||||
background-color: white !important;
|
||||
}
|
||||
#vision-calendar .rdp-day.hasMeeting {
|
||||
background-color: #2563eb !important;
|
||||
color: white !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
#vision-calendar .rdp-day.hasMeeting:hover {
|
||||
background-color: #1d4ed8 !important;
|
||||
color: white !important;
|
||||
}
|
||||
`}} />
|
||||
<CalendarComponent
|
||||
mode="single"
|
||||
selected={selectedDate}
|
||||
onSelect={setSelectedDate}
|
||||
className="rounded-md border"
|
||||
modifiers={{
|
||||
hasMeeting: (date) => {
|
||||
if (!date) return false;
|
||||
return getMeetingsForDate(date).length > 0;
|
||||
},
|
||||
}}
|
||||
modifiersClassNames={{
|
||||
hasMeeting: "hasMeeting",
|
||||
}}
|
||||
/>
|
||||
{calendarsLoading ? (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-purple-600" />
|
||||
</div>
|
||||
) : session?.user?.id ? (
|
||||
<div className="vision-calendar-wrapper" style={{ height: 'auto', maxHeight: '600px' }}>
|
||||
<style dangerouslySetInnerHTML={{__html: `
|
||||
.vision-calendar-wrapper .fc {
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
.vision-calendar-wrapper .fc-toolbar {
|
||||
padding: 0.5rem !important;
|
||||
margin-bottom: 0.5rem !important;
|
||||
}
|
||||
.vision-calendar-wrapper .fc-toolbar-title {
|
||||
font-size: 0.875rem !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
.vision-calendar-wrapper .fc-button {
|
||||
padding: 0.25rem 0.5rem !important;
|
||||
font-size: 0.75rem !important;
|
||||
height: auto !important;
|
||||
}
|
||||
.vision-calendar-wrapper .fc-daygrid-day {
|
||||
min-height: 3rem !important;
|
||||
}
|
||||
.vision-calendar-wrapper .fc-daygrid-day-number {
|
||||
padding: 0.25rem !important;
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
.vision-calendar-wrapper .fc-daygrid-event {
|
||||
font-size: 0.65rem !important;
|
||||
padding: 0.125rem 0.25rem !important;
|
||||
margin: 0.125rem !important;
|
||||
}
|
||||
.vision-calendar-wrapper .fc-col-header-cell {
|
||||
padding: 0.25rem !important;
|
||||
font-size: 0.7rem !important;
|
||||
}
|
||||
.vision-calendar-wrapper .fc-scrollgrid {
|
||||
border-width: 1px !important;
|
||||
}
|
||||
.vision-calendar-wrapper .fc-daygrid-day-frame {
|
||||
min-height: 3rem !important;
|
||||
}
|
||||
/* Masquer les éléments non nécessaires pour Vision */
|
||||
.vision-calendar-wrapper .calendar-selector,
|
||||
.vision-calendar-wrapper .calendar-stats,
|
||||
.vision-calendar-wrapper .calendar-view-switcher {
|
||||
display: none !important;
|
||||
}
|
||||
/* Réduire la taille de la colonne des événements du jour si elle existe */
|
||||
.vision-calendar-wrapper .w-80.flex-shrink-0 {
|
||||
display: none !important;
|
||||
}
|
||||
`}} />
|
||||
<CalendarClient
|
||||
initialCalendars={calendars}
|
||||
userId={session.user.id}
|
||||
userProfile={{
|
||||
name: session.user.name || '',
|
||||
email: session.user.email || '',
|
||||
avatar: session.user.image || undefined
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
{/* Colonne invisible pour espacer calendrier et liste des réunions */}
|
||||
<div className="hidden lg:block w-8" />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user