feat: implement drag-and-drop reordering for daily checkboxes

- 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`.
This commit is contained in:
Julien Froidefond
2025-09-18 14:56:05 +02:00
parent 2c262b06e7
commit 618b2e9e5c
5 changed files with 220 additions and 60 deletions

View File

@@ -36,6 +36,7 @@ export function DailyPageClient({
toggleAllYesterday,
updateCheckbox,
deleteCheckbox,
reorderCheckboxes,
goToPreviousDay,
goToNextDay,
goToToday,
@@ -93,6 +94,10 @@ export function DailyPageClient({
});
};
const handleReorderCheckboxes = async (date: Date, checkboxIds: string[]) => {
await reorderCheckboxes({ date, checkboxIds });
};
const getYesterdayDate = () => {
const yesterday = new Date(currentDate);
yesterday.setDate(yesterday.getDate() - 1);
@@ -220,6 +225,7 @@ export function DailyPageClient({
onToggleCheckbox={handleToggleCheckbox}
onUpdateCheckbox={handleUpdateCheckbox}
onDeleteCheckbox={handleDeleteCheckbox}
onReorderCheckboxes={handleReorderCheckboxes}
onToggleAll={toggleAllYesterday}
saving={saving}
refreshing={refreshing}
@@ -234,6 +240,7 @@ export function DailyPageClient({
onToggleCheckbox={handleToggleCheckbox}
onUpdateCheckbox={handleUpdateCheckbox}
onDeleteCheckbox={handleDeleteCheckbox}
onReorderCheckboxes={handleReorderCheckboxes}
onToggleAll={toggleAllToday}
saving={saving}
refreshing={refreshing}