mirror of
https://git.v0id.ovh/n3wt-innov/n3wt-school.git
synced 2026-01-29 16:03:21 +00:00
fix: Ajout du mode Visu
This commit is contained in:
N3WT DE COMPET
@ -1,9 +1,8 @@
|
||||
import { useState } from 'react';
|
||||
import { usePlanning,PlanningModes } from '@/context/PlanningContext';
|
||||
import { usePlanning, PlanningModes } from '@/context/PlanningContext';
|
||||
import { Plus, Edit2, Eye, EyeOff, Check, X } from 'lucide-react';
|
||||
|
||||
|
||||
export default function ScheduleNavigation({classes, modeSet='event'}) {
|
||||
export default function ScheduleNavigation({ classes, modeSet = 'event' }) {
|
||||
const {
|
||||
schedules,
|
||||
selectedSchedule,
|
||||
@ -46,7 +45,7 @@ export default function ScheduleNavigation({classes, modeSet='event'}) {
|
||||
|
||||
const handleAddNew = () => {
|
||||
if (newSchedule.name) {
|
||||
let payload = {
|
||||
let payload = {
|
||||
name: newSchedule.name,
|
||||
color: newSchedule.color,
|
||||
};
|
||||
@ -65,7 +64,11 @@ export default function ScheduleNavigation({classes, modeSet='event'}) {
|
||||
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>
|
||||
<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"
|
||||
@ -83,7 +86,11 @@ export default function ScheduleNavigation({classes, modeSet='event'}) {
|
||||
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"}
|
||||
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>
|
||||
@ -96,7 +103,7 @@ export default function ScheduleNavigation({classes, modeSet='event'}) {
|
||||
className="w-8 h-8"
|
||||
/>
|
||||
</div>
|
||||
{planningMode === PlanningModes.CLASS_SCHEDULE&& (
|
||||
{planningMode === PlanningModes.CLASS_SCHEDULE && (
|
||||
<div className="mb-2">
|
||||
<label className="text-sm">Classe (optionnel):</label>
|
||||
<select
|
||||
@ -110,13 +117,14 @@ export default function ScheduleNavigation({classes, modeSet='event'}) {
|
||||
className="w-full p-1 border rounded"
|
||||
>
|
||||
<option value="">Aucune</option>
|
||||
{classes.map((classe) => { console.log({classe});
|
||||
{classes.map((classe) => {
|
||||
console.log({ classe });
|
||||
return (
|
||||
<option key={classe.id} value={classe.id}>
|
||||
{classe.atmosphere_name}
|
||||
</option>
|
||||
)}
|
||||
)}
|
||||
<option key={classe.id} value={classe.id}>
|
||||
{classe.atmosphere_name}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
@ -138,111 +146,109 @@ export default function ScheduleNavigation({classes, modeSet='event'}) {
|
||||
)}
|
||||
|
||||
<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">
|
||||
{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="text"
|
||||
value={editedName}
|
||||
onChange={(e) => setEditedName(e.target.value)}
|
||||
className="w-full p-1 border rounded"
|
||||
type="color"
|
||||
value={editedColor}
|
||||
onChange={(e) => setEditedColor(e.target.value)}
|
||||
className="w-8 h-8"
|
||||
/>
|
||||
<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)}
|
||||
{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"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user