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:
@@ -20,6 +20,8 @@ interface UseDailyActions {
|
||||
updateCheckbox: (checkboxId: string, data: UpdateDailyCheckboxData) => Promise<DailyCheckbox | null>;
|
||||
deleteCheckbox: (checkboxId: string) => Promise<void>;
|
||||
toggleCheckbox: (checkboxId: string) => Promise<void>;
|
||||
toggleAllToday: () => Promise<void>;
|
||||
toggleAllYesterday: () => Promise<void>;
|
||||
reorderCheckboxes: (data: ReorderCheckboxesData) => Promise<void>;
|
||||
goToPreviousDay: () => Promise<void>;
|
||||
goToNextDay: () => Promise<void>;
|
||||
@@ -278,6 +280,72 @@ export function useDaily(initialDate?: Date, initialDailyView?: DailyView): UseD
|
||||
}
|
||||
}, [dailyView]);
|
||||
|
||||
const toggleAllToday = useCallback(async (): Promise<void> => {
|
||||
if (!dailyView) return;
|
||||
|
||||
const todayCheckboxes = dailyView.today;
|
||||
if (todayCheckboxes.length === 0) return;
|
||||
|
||||
// Déterminer si on coche tout ou on décoche tout
|
||||
const allChecked = todayCheckboxes.every(cb => cb.isChecked);
|
||||
const newCheckedState = !allChecked;
|
||||
|
||||
const previousDailyView = dailyView;
|
||||
|
||||
// Mise à jour optimiste IMMÉDIATE
|
||||
setDailyView(prev => prev ? {
|
||||
...prev,
|
||||
today: prev.today.map(cb => ({ ...cb, isChecked: newCheckedState }))
|
||||
} : null);
|
||||
|
||||
try {
|
||||
// Appeler l'API pour chaque checkbox en parallèle
|
||||
await Promise.all(
|
||||
todayCheckboxes.map(checkbox =>
|
||||
dailyClient.updateCheckbox(checkbox.id, { isChecked: newCheckedState })
|
||||
)
|
||||
);
|
||||
} catch (err) {
|
||||
// Rollback en cas d'erreur
|
||||
setDailyView(previousDailyView);
|
||||
setError(err instanceof Error ? err.message : 'Erreur lors de la mise à jour des checkboxes');
|
||||
console.error('Erreur toggleAllToday:', err);
|
||||
}
|
||||
}, [dailyView]);
|
||||
|
||||
const toggleAllYesterday = useCallback(async (): Promise<void> => {
|
||||
if (!dailyView) return;
|
||||
|
||||
const yesterdayCheckboxes = dailyView.yesterday;
|
||||
if (yesterdayCheckboxes.length === 0) return;
|
||||
|
||||
// Déterminer si on coche tout ou on décoche tout
|
||||
const allChecked = yesterdayCheckboxes.every(cb => cb.isChecked);
|
||||
const newCheckedState = !allChecked;
|
||||
|
||||
const previousDailyView = dailyView;
|
||||
|
||||
// Mise à jour optimiste IMMÉDIATE
|
||||
setDailyView(prev => prev ? {
|
||||
...prev,
|
||||
yesterday: prev.yesterday.map(cb => ({ ...cb, isChecked: newCheckedState }))
|
||||
} : null);
|
||||
|
||||
try {
|
||||
// Appeler l'API pour chaque checkbox en parallèle
|
||||
await Promise.all(
|
||||
yesterdayCheckboxes.map(checkbox =>
|
||||
dailyClient.updateCheckbox(checkbox.id, { isChecked: newCheckedState })
|
||||
)
|
||||
);
|
||||
} catch (err) {
|
||||
// Rollback en cas d'erreur
|
||||
setDailyView(previousDailyView);
|
||||
setError(err instanceof Error ? err.message : 'Erreur lors de la mise à jour des checkboxes');
|
||||
console.error('Erreur toggleAllYesterday:', err);
|
||||
}
|
||||
}, [dailyView]);
|
||||
|
||||
const reorderCheckboxes = useCallback(async (data: ReorderCheckboxesData): Promise<void> => {
|
||||
try {
|
||||
setSaving(true);
|
||||
@@ -350,6 +418,8 @@ export function useDaily(initialDate?: Date, initialDailyView?: DailyView): UseD
|
||||
updateCheckbox,
|
||||
deleteCheckbox,
|
||||
toggleCheckbox,
|
||||
toggleAllToday,
|
||||
toggleAllYesterday,
|
||||
reorderCheckboxes,
|
||||
goToPreviousDay,
|
||||
goToNextDay,
|
||||
|
||||
Reference in New Issue
Block a user