feat: add toggle all functionality for daily checkboxes

- Implemented `toggleAllToday` and `toggleAllYesterday` methods in `useDaily` for batch checkbox state management.
- Updated `DailySection` to include a button for toggling all checkboxes, enhancing user interaction.
- Integrated new toggle functions in `DailyPageClient` to support the updated checkbox handling.
This commit is contained in:
Julien Froidefond
2025-09-16 08:09:13 +02:00
parent c2f949325a
commit 11200f85ac
3 changed files with 95 additions and 3 deletions

View File

@@ -2,6 +2,7 @@
import { DailyCheckbox, DailyCheckboxType } from '@/lib/types';
import { Card } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
import { DailyCheckboxItem } from './DailyCheckboxItem';
import { DailyAddForm } from './DailyAddForm';
@@ -13,6 +14,7 @@ interface DailySectionProps {
onToggleCheckbox: (checkboxId: string) => Promise<void>;
onUpdateCheckbox: (checkboxId: string, text: string, type: DailyCheckboxType, taskId?: string) => Promise<void>;
onDeleteCheckbox: (checkboxId: string) => Promise<void>;
onToggleAll?: () => Promise<void>;
saving: boolean;
refreshing?: boolean;
}
@@ -25,6 +27,7 @@ export function DailySection({
onToggleCheckbox,
onUpdateCheckbox,
onDeleteCheckbox,
onToggleAll,
saving,
refreshing = false
}: DailySectionProps) {
@@ -47,9 +50,24 @@ export function DailySection({
<div className="w-4 h-4 border-2 border-[var(--primary)] border-t-transparent rounded-full animate-spin"></div>
)}
</h2>
<span className="text-xs text-[var(--muted-foreground)] font-mono">
{checkboxes.filter(cb => cb.isChecked).length}/{checkboxes.length}
</span>
<div className="flex items-center gap-2">
<span className="text-xs text-[var(--muted-foreground)] font-mono">
{checkboxes.filter(cb => cb.isChecked).length}/{checkboxes.length}
</span>
{onToggleAll && checkboxes.length > 0 && (
<Button
type="button"
onClick={onToggleAll}
variant="ghost"
size="sm"
disabled={saving}
className="text-xs px-2 py-1 h-6"
title="Tout cocher/décocher"
>
</Button>
)}
</div>
</div>
</div>