618b2e9e5c
- Added DnD functionality to `DailySection` for reordering checkboxes using `@dnd-kit/core` and `@dnd-kit/sortable`. - Introduced `onReorderCheckboxes` prop to handle server updates after reordering. - Updated `useDaily` hook to streamline error handling during reordering. - Cleaned up `Header` component by removing unnecessary syncing text. - Adjusted `DailyPageClient` to pass reorder function to `DailySection`.
79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import { useSortable } from '@dnd-kit/sortable';
|
|
import { CSS } from '@dnd-kit/utilities';
|
|
import { DailyCheckbox, DailyCheckboxType } from '@/lib/types';
|
|
import { DailyCheckboxItem } from './DailyCheckboxItem';
|
|
|
|
interface DailyCheckboxSortableProps {
|
|
checkbox: DailyCheckbox;
|
|
onToggle: (checkboxId: string) => Promise<void>;
|
|
onUpdate: (checkboxId: string, text: string, type: DailyCheckboxType, taskId?: string) => Promise<void>;
|
|
onDelete: (checkboxId: string) => Promise<void>;
|
|
saving?: boolean;
|
|
}
|
|
|
|
export function DailyCheckboxSortable({
|
|
checkbox,
|
|
onToggle,
|
|
onUpdate,
|
|
onDelete,
|
|
saving = false
|
|
}: DailyCheckboxSortableProps) {
|
|
const {
|
|
attributes,
|
|
listeners,
|
|
setNodeRef,
|
|
transform,
|
|
transition,
|
|
isDragging,
|
|
} = useSortable({
|
|
id: checkbox.id,
|
|
});
|
|
|
|
const style = {
|
|
transform: CSS.Transform.toString(transform),
|
|
transition,
|
|
opacity: isDragging ? 0.5 : 1,
|
|
};
|
|
|
|
return (
|
|
<div
|
|
ref={setNodeRef}
|
|
style={style}
|
|
className={`
|
|
${isDragging ? 'z-50' : 'z-0'}
|
|
${isDragging ? 'shadow-lg' : ''}
|
|
transition-shadow duration-200
|
|
`}
|
|
>
|
|
<div className="relative group">
|
|
{/* Handle de drag */}
|
|
<div
|
|
{...attributes}
|
|
{...listeners}
|
|
className="absolute left-0 top-0 bottom-0 w-3 cursor-grab active:cursor-grabbing flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
|
|
title="Glisser pour réorganiser"
|
|
>
|
|
<div className="w-1.5 h-6 flex flex-col justify-center gap-0.5">
|
|
<div className="w-full h-0.5 bg-[var(--muted-foreground)] rounded"></div>
|
|
<div className="w-full h-0.5 bg-[var(--muted-foreground)] rounded"></div>
|
|
<div className="w-full h-0.5 bg-[var(--muted-foreground)] rounded"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Checkbox item avec padding left pour le handle */}
|
|
<div className="pl-4">
|
|
<DailyCheckboxItem
|
|
checkbox={checkbox}
|
|
onToggle={onToggle}
|
|
onUpdate={onUpdate}
|
|
onDelete={onDelete}
|
|
saving={saving}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|