Merge pull request #3424 from ever-co/feat/toggle-timesheet-ids-checkbox

[Feat]: Toggle Timesheet IDs based on checkbox state
ever-co · Dec 13, 2024 · 3a15c2f · 3a15c2f
2 parents 7240d6f + 6e4a96c
commit 3a15c2f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 11 deletions.
diff --git a/apps/web/app/hooks/features/useTimelogFilterOptions.ts b/apps/web/app/hooks/features/useTimelogFilterOptions.ts
@@ -1,4 +1,4 @@
-import { IUser, RoleNameEnum } from '@/app/interfaces';
+import { IUser, RoleNameEnum, TimesheetLog } from '@/app/interfaces';
 import { timesheetDeleteState, timesheetGroupByDayState, timesheetFilterEmployeeState, timesheetFilterProjectState, timesheetFilterStatusState, timesheetFilterTaskState, timesheetUpdateStatus } from '@/app/stores';
 import { useAtom } from 'jotai';
 import React from 'react';
@@ -44,12 +44,16 @@ export function useTimelogFilterOptions() {
         setSelectTimesheetId((prev) => prev.includes(items) ? prev.filter((filter) => filter !== items) : [...prev, items])
     }
 
-    const handleSelectRowByStatusAndDate = (status: string, date: string) => {
-        setSelectedItems((prev) =>
-            prev.some((item) => item.status === status && item.date === date)
-                ? prev.filter((item) => !(item.status === status && item.date === date))
-                : [...prev, { status, date }]
-        );
+    const handleSelectRowByStatusAndDate = (logs: TimesheetLog[], isChecked: boolean) => {
+        setSelectTimesheetId((prev) => {
+            const logIds = logs.map((item) => item.id);
+
+            if (isChecked) {
+                return [...new Set([...prev, ...logIds])];
+            } else {
+                return prev.filter((id) => !logIds.includes(id));
+            }
+        });
     }
 
 
@@ -61,6 +65,7 @@ export function useTimelogFilterOptions() {
     return {
         statusState,
         employee,
+        setSelectedItems,
         project,
         task,
         setEmployeeState,

diff --git a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
@@ -229,7 +229,6 @@ export function DataTableTimeSheet({ data, user }: { data?: GroupedTimesheet[],
 		}
 	};
 
-
 	return (
 		<div className="w-full dark:bg-dark--theme">
 			<AlertConfirmationModal
@@ -303,14 +302,14 @@ export function DataTableTimeSheet({ data, user }: { data?: GroupedTimesheet[],
 												</Badge>
 											</div>
 											<div className={clsxm('flex items-center gap-2 p-x-1 capitalize')}>
-												{isManage && getTimesheetButtons(status as StatusType, t, true, handleButtonClick)}
+												{isManage && getTimesheetButtons(status as StatusType, t, selectTimesheetId.length === 0, handleButtonClick)}
 											</div>
 										</div>
 									</AccordionTrigger>
 									<AccordionContent className="flex flex-col w-full">
 										<HeaderRow
 											handleSelectRowByStatusAndDate={
-												() => handleSelectRowByStatusAndDate(status, plan.date)}
+												() => handleSelectRowByStatusAndDate(rows, selectTimesheetId.length === 0)}
 											data={rows}
 											status={status}
 											onSort={handleSort}
@@ -328,7 +327,7 @@ export function DataTableTimeSheet({ data, user }: { data?: GroupedTimesheet[],
 												)}
 											>
 												<Checkbox
-													className="w-5 h-5"
+													className="w-5 h-5 select-auto"
 													onCheckedChange={() => handleSelectRowTimesheet(task.id)}
 													checked={selectTimesheetId.includes(task.id)}
 												/>