acasini/n3wt-school
1
0
Fork 0
mirror of https://git.v0id.ovh/n3wt-innov/n3wt-school.git synced 2026-01-29 16:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Ajout de l'emploi du temps sur la page parent

Browse Source
This commit is contained in:
N3WT DE COMPET
2025-05-31 02:00:00 +02:00
parent c117f96e52
commit 78d96f82f9
7 changed files with 187 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
Front-End/src/components/Calendar/Calendar.js
View File

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { usePlanning } from '@/context/PlanningContext';
import { usePlanning, PlanningModes } from '@/context/PlanningContext';
import WeekView from '@/components/Calendar/WeekView';
import MonthView from '@/components/Calendar/MonthView';
import YearView from '@/components/Calendar/YearView';
@ -22,14 +22,16 @@ import { fr } from 'date-fns/locale';
import { AnimatePresence, motion } from 'framer-motion'; // Ajouter cet import
import logger from '@/utils/logger';
const Calendar = ({ modeSet, onDateClick, onEventClick, schoolClassMode=false }) => {
const Calendar = ({ modeSet, onDateClick, onEventClick, planningClassName='' }) => {
const {
currentDate,
setCurrentDate,
viewType,
setViewType,
events,
hiddenSchedules
hiddenSchedules,
planningMode,
parentView
} = usePlanning();
const [visibleEvents, setVisibleEvents] = useState([]);
const [showDatePicker, setShowDatePicker] = useState(false);
@ -90,9 +92,9 @@ const Calendar = ({ modeSet, onDateClick, onEventClick, schoolClassMode=false })
return (
<div className="flex-1 flex flex-col">
<div className="flex items-center justify-between p-4 bg-white sticky top-0 z-30 border-b shadow-sm h-[64px]">
{!schoolClassMode && (
{/* Navigation à gauche */}
{planningMode === PlanningModes.PLANNING && (
<div className="flex items-center gap-4">
{/* Navigation à gauche */}
<button
onClick={() => setCurrentDate(new Date())}
className="px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-gray-900 bg-gray-100 hover:bg-gray-200 rounded-md transition-colors"
@ -105,8 +107,6 @@ const Calendar = ({ modeSet, onDateClick, onEventClick, schoolClassMode=false })
>
<ChevronLeft className="w-5 h-5" />
</button>
{/* Menu déroulant pour le mois/année */}
<div className="relative">
<button
onClick={() => setShowDatePicker(!showDatePicker)}
@ -121,8 +121,6 @@ const Calendar = ({ modeSet, onDateClick, onEventClick, schoolClassMode=false })
</h2>
<ChevronDown className="w-4 h-4" />
</button>
{/* Menu de sélection du mois/année */}
{showDatePicker && (
<div className="absolute top-full left-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg z-50 w-64">
{viewType !== 'year' && (
@ -156,7 +154,6 @@ const Calendar = ({ modeSet, onDateClick, onEventClick, schoolClassMode=false })
</div>
)}
</div>
<button
onClick={() => navigateDate('next')}
className="p-2 hover:bg-gray-100 rounded-full"
@ -166,27 +163,37 @@ const Calendar = ({ modeSet, onDateClick, onEventClick, schoolClassMode=false })
</div>
)}
{/* Numéro de semaine au centre */}
{viewType === 'week' && (
<div className="flex items-center gap-1 text-sm font-medium text-gray-600">
<span>Semaine</span>
<span className="px-2 py-1 bg-gray-100 rounded-md">
{getWeek(currentDate, { weekStartsOn: 1 })}
{/* Centre : numéro de semaine ou classe/niveau */}
<div className="flex-1 flex justify-center">
{((planningMode === PlanningModes.PLANNING || planningMode === PlanningModes.CLASS_SCHEDULE) && viewType === 'week' && !parentView) && (
<div className="flex items-center gap-1 text-sm font-medium text-gray-600">
<span>Semaine</span>
<span className="px-2 py-1 bg-gray-100 rounded-md">
{getWeek(currentDate, { weekStartsOn: 1 })}
</span>
</div>
)}
{parentView && (
<span className="px-2 py-1 bg-gray-100 rounded-md text-base font-semibold">
{/* À adapter selon les props disponibles */}
{planningClassName}
</span>
</div>
)}
)}
</div>
{/* Contrôles à droite */}
<div className="flex items-center gap-4">
{!schoolClassMode && (
{planningMode === PlanningModes.PLANNING && (
<ToggleView viewType={viewType} setViewType={setViewType} />
)}
{(planningMode === PlanningModes.PLANNING || (planningMode === PlanningModes.CLASS_SCHEDULE && !parentView)) && (
<button
onClick={onDateClick}
className="w-10 h-10 flex items-center justify-center bg-emerald-600 text-white rounded-full hover:bg-emerald-700 shadow-md transition-colors"
>
<Plus className="w-5 h-5" />
</button>
<Plus className="w-5 h-5" />
</button>
)}
</div>
</div>

31
Front-End/src/components/Calendar/WeekView.js
View File

@ -1,12 +1,13 @@
import React, { useEffect, useState, useRef } from 'react';
import { usePlanning } from '@/context/PlanningContext';
import { usePlanning, PlanningModes } from '@/context/PlanningContext';
import { format, startOfWeek, addDays, isSameDay } from 'date-fns';
import { fr } from 'date-fns/locale';
import { getWeekEvents } from '@/utils/events';
import { isToday } from 'date-fns';
const WeekView = ({ onDateClick, onEventClick, events }) => {
const { currentDate } = usePlanning();
const { currentDate, planningMode, parentView } = usePlanning();
const [currentTime, setCurrentTime] = useState(new Date());
const scrollContainerRef = useRef(null); // Ajouter cette référence
@ -106,10 +107,14 @@ const WeekView = ({ onDateClick, onEventClick, events }) => {
key={event.id}
className="rounded-sm overflow-hidden cursor-pointer hover:shadow-lg"
style={eventStyle}
onClick={(e) => {
e.stopPropagation();
onEventClick(event);
}}
onClick={
parentView
? undefined
: (e) => {
e.stopPropagation();
onEventClick(event);
}
}
>
<div className="p-1">
<div
@ -198,11 +203,15 @@ const WeekView = ({ onDateClick, onEventClick, events }) => {
className={`h-20 relative border-b border-gray-100
${isWeekend(day) ? 'bg-gray-50' : 'bg-white'}
${isToday(day) ? 'bg-emerald-100/50 border-x border-emerald-600' : ''}`}
onClick={() => {
const date = new Date(day);
date.setHours(hour);
onDateClick(date);
}}
onClick={
parentView
? undefined
: () => {
const date = new Date(day);
date.setHours(hour);
onDateClick(date);
}
}
>
<div className="grid gap-1">
{dayEvents