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