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: Gestion du planning [3]

Browse Source
This commit is contained in:
Luc SORIGNET
2025-05-03 15:12:17 +02:00
parent cb4fe74a9e
commit 58144ba0d0
39 changed files with 939 additions and 1864 deletions
Download Patch File Download Diff File Expand all files Collapse all files

249
Front-End/src/components/Calendar/ScheduleNavigation.js Normal file
View File

@ -0,0 +1,249 @@
import { useState } from 'react';
import { usePlanning,PlanningModes } from '@/context/PlanningContext';
import { Plus, Edit2, Eye, EyeOff, Check, X } from 'lucide-react';
export default function ScheduleNavigation({classes, modeSet='event'}) {
const {
schedules,
selectedSchedule,
setSelectedSchedule,
hiddenSchedules,
toggleScheduleVisibility,
addSchedule,
updateSchedule,
planningMode,
} = usePlanning();
const [editingId, setEditingId] = useState(null);
const [editedName, setEditedName] = useState('');
const [editedColor, setEditedColor] = useState('');
const [editedSchoolClass, setEditedSchoolClass] = useState(null);
const [isAddingNew, setIsAddingNew] = useState(false);
const [newSchedule, setNewSchedule] = useState({
name: '',
color: '#10b981',
school_class: '', // Ajout du champ pour la classe
});
const handleEdit = (schedule) => {
setEditingId(schedule.id);
setEditedName(schedule.name);
setEditedColor(schedule.color);
setEditedSchoolClass(schedule.school_class);
};
const handleSave = () => {
if (editingId) {
updateSchedule(editingId, {
...schedules.find((s) => s.id === editingId),
name: editedName,
color: editedColor,
school_class: editedSchoolClass, // Ajout de l'ID de la classe
});
setEditingId(null);
}
};
const handleAddNew = () => {
if (newSchedule.name) {
let payload = {
name: newSchedule.name,
color: newSchedule.color,
};
if (planningMode === PlanningModes.CLASS_SCHEDULE) {
payload.school_class = newSchedule.school_class; // Ajout de l'ID de la classe
}
addSchedule({
id: `schedule-${Date.now()}`,
...payload,
});
setIsAddingNew(false);
setNewSchedule({ name: '', color: '#10b981', school_class: '' });
}
};
return (
<nav className="w-64 border-r p-4">
<div className="flex items-center justify-between mb-4">
<h2 className="font-semibold">{(planningMode === PlanningModes.CLASS_SCHEDULE)?"Emplois du temps":"Plannings"}</h2>
<button
onClick={() => setIsAddingNew(true)}
className="p-1 hover:bg-gray-100 rounded"
>
<Plus className="w-4 h-4" />
</button>
</div>
{isAddingNew && (
<div className="mb-4 p-2 border rounded">
<input
type="text"
value={newSchedule.name}
onChange={(e) =>
setNewSchedule((prev) => ({ ...prev, name: e.target.value }))
}
className="w-full p-1 mb-2 border rounded"
placeholder={(planningMode===PlanningModes.CLASS_SCHEDULE)?"Nom de l'emplois du temps":"Nom du planning"}
/>
<div className="flex gap-2 items-center mb-2">
<label className="text-sm">Couleur:</label>
<input
type="color"
value={newSchedule.color}
onChange={(e) =>
setNewSchedule((prev) => ({ ...prev, color: e.target.value }))
}
className="w-8 h-8"
/>
</div>
{planningMode === PlanningModes.CLASS_SCHEDULE&& (
<div className="mb-2">
<label className="text-sm">Classe (optionnel):</label>
<select
value={newSchedule.school_class}
onChange={(e) =>
setNewSchedule((prev) => ({
...prev,
school_class: e.target.value,
}))
}
className="w-full p-1 border rounded"
>
<option value="">Aucune</option>
{classes.map((classe) => { console.log({classe});
return (
<option key={classe.id} value={classe.id}>
{classe.atmosphere_name}
</option>
)}
)}
</select>
</div>
)}
<div className="flex justify-end gap-2">
<button
onClick={() => setIsAddingNew(false)}
className="p-1 hover:bg-gray-100 rounded"
>
<X className="w-4 h-4" />
</button>
<button
onClick={handleAddNew}
className="p-1 hover:bg-gray-100 rounded"
>
<Check className="w-4 h-4" />
</button>
</div>
</div>
)}
<ul className="space-y-2">
{schedules
.map((schedule) => (
<li
key={schedule.id}
className={`p-2 rounded ${
selectedSchedule === schedule.id
? 'bg-gray-100'
: 'hover:bg-gray-50'
}`}
>
{editingId === schedule.id ? (
<div className="space-y-2">
<input
type="text"
value={editedName}
onChange={(e) => setEditedName(e.target.value)}
className="w-full p-1 border rounded"
/>
<div className="flex gap-2 items-center">
<label className="text-sm">Couleur:</label>
<input
type="color"
value={editedColor}
onChange={(e) => setEditedColor(e.target.value)}
className="w-8 h-8"
/>
</div>
{planningMode === PlanningModes.CLASS_SCHEDULE && (
<div className="mb-2">
<label className="text-sm">Classe:</label>
<select
value={editedSchoolClass}
onChange={(e) => setEditedSchoolClass(e.target.value)}
className="w-full p-1 border rounded"
>
<option value="">Aucune</option>
{classes.map((classe) => (
<option key={classe.id} value={classe.id}>
{classe.atmosphere_name}
</option>
))}
</select>
</div>
)}
<div className="flex justify-end gap-2">
<button
onClick={() => setEditingId(null)}
className="p-1 hover:bg-gray-100 rounded"
>
<X className="w-4 h-4" />
</button>
<button
onClick={handleSave}
className="p-1 hover:bg-gray-100 rounded"
>
<Check className="w-4 h-4" />
</button>
</div>
</div>
) : (
<div className="flex items-center justify-between">
<div
className="flex items-center gap-2 flex-1 cursor-pointer"
onClick={() => setSelectedSchedule(schedule.id)}
>
<div
className="w-3 h-3 rounded-full"
style={{ backgroundColor: schedule.color }}
/>
<span
className={
hiddenSchedules.includes(schedule.id)
? 'text-gray-400'
: ''
}
>
{schedule.name}
</span>
</div>
<div className="flex gap-1">
<button
onClick={(e) => {
e.stopPropagation(); // Empêcher la propagation du clic
toggleScheduleVisibility(schedule.id);
}}
className="p-1 hover:bg-gray-100 rounded"
>
{hiddenSchedules.includes(schedule.id) ? (
<EyeOff className="w-4 h-4" />
) : (
<Eye className="w-4 h-4" />
)}
</button>
<button
onClick={() => handleEdit(schedule)}
className="p-1 hover:bg-gray-100 rounded"
>
<Edit2 className="w-4 h-4" />
</button>
</div>
</div>
)}
</li>
))}
</ul>
</nav>
);
}