From aaf429a90780e790cf04b8a7c52d093c81de0963 Mon Sep 17 00:00:00 2001 From: Ravan <69167444+RamK777-stack@users.noreply.github.com> Date: Fri, 29 Mar 2024 22:32:22 +0530 Subject: [PATCH] fix: impossible to unselect all check box (#4471) * fix: impossible to unselect all check box * fix: newly loaded records adopts select/unselect status * Fix * Fixes * Fixed naming * Used better naming * Fixed naming --------- Co-authored-by: Lucas Bordeau --- .../components/ObjectSortDropdownButton.tsx | 10 +++---- .../components/RecordTableWithWrappers.tsx | 4 +-- .../components/SelectAllCheckbox.tsx | 13 ++++++--- .../hooks/internal/useRecordTableStates.ts | 6 ++++- .../internal/useSetAllRowSelectedState.ts | 16 +++++++++++ .../hooks/internal/useSetRecordTableData.ts | 27 ++++++++++++++++--- .../record-table/hooks/useRecordTable.ts | 8 ++++-- .../hasUserSelectedAllRowsFamilyState.ts | 7 +++++ 8 files changed, 75 insertions(+), 16 deletions(-) create mode 100644 packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetAllRowSelectedState.ts create mode 100644 packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState.ts diff --git a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx index 2b3fb2541..57f8bbd58 100644 --- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx +++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx @@ -38,10 +38,6 @@ export const ObjectSortDropdownButton = ({ setSelectedSortDirection('asc'); }, []); - const { isSortSelectedState } = useSortDropdown({ - sortDropdownId: sortDropdownId, - }); - const { toggleDropdown } = useDropdown(OBJECT_SORT_DROPDOWN_ID); const handleButtonClick = () => { @@ -49,7 +45,11 @@ export const ObjectSortDropdownButton = ({ resetState(); }; - const { availableSortDefinitionsState, onSortSelectState } = useSortDropdown({ + const { + availableSortDefinitionsState, + onSortSelectState, + isSortSelectedState, + } = useSortDropdown({ sortDropdownId: sortDropdownId, }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx index cb071bfff..179aed225 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx @@ -68,7 +68,7 @@ export const RecordTableWithWrappers = ({ isRecordTableInitialLoadingState, ); - const { resetTableRowSelection, setRowSelectedState } = useRecordTable({ + const { resetTableRowSelection, setRowSelected } = useRecordTable({ recordTableId, }); @@ -109,7 +109,7 @@ export const RecordTableWithWrappers = ({ { const { allRowsSelectedStatusSelector } = useRecordTableStates(); const allRowsSelectedStatus = useRecoilValue(allRowsSelectedStatusSelector()); - const { selectAllRows } = useRecordTable(); + const { selectAllRows, resetTableRowSelection, setHasUserSelectedAllRows } = + useRecordTable(); const checked = allRowsSelectedStatus === 'all'; const indeterminate = allRowsSelectedStatus === 'some'; - const onChange = () => { - selectAllRows(); + const onChange = (e: React.ChangeEvent) => { + if (e.target.checked) { + setHasUserSelectedAllRows(true); + selectAllRows(); + } else { + setHasUserSelectedAllRows(false); + resetTableRowSelection(); + } }; return ( diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableStates.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableStates.ts index 1d7fff60f..70099c544 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableStates.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableStates.ts @@ -1,3 +1,4 @@ +import { hasUserSelectedAllRowsComponentState } from '@/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState'; import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState'; import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext'; import { availableTableColumnsComponentState } from '@/object-record/record-table/states/availableTableColumnsComponentState'; @@ -48,7 +49,6 @@ export const useRecordTableStates = (recordTableId?: string) => { tableColumnsComponentState, scopeId, ), - onColumnsChangeState: extractComponentState( onColumnsChangeComponentState, scopeId, @@ -98,6 +98,10 @@ export const useRecordTableStates = (recordTableId?: string) => { isRowSelectedComponentFamilyState, scopeId, ), + hasUserSelectedAllRowState: extractComponentState( + hasUserSelectedAllRowsComponentState, + scopeId, + ), allRowsSelectedStatusSelector: extractComponentReadOnlySelector( allRowsSelectedStatusComponentSelector, scopeId, diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetAllRowSelectedState.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetAllRowSelectedState.ts new file mode 100644 index 000000000..4544c4b71 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetAllRowSelectedState.ts @@ -0,0 +1,16 @@ +import { useRecoilCallback } from 'recoil'; + +import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; + +export const useSetHasUserSelectedAllRows = (recordTableId?: string) => { + const { hasUserSelectedAllRowState: hasUserSelectedAllRowFamilyState } = + useRecordTableStates(recordTableId); + + return useRecoilCallback( + ({ set }) => + (selected: boolean) => { + set(hasUserSelectedAllRowFamilyState, selected); + }, + [hasUserSelectedAllRowFamilyState], + ); +}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts index 32c1986ec..781d348b4 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts @@ -14,8 +14,12 @@ export const useSetRecordTableData = ({ recordTableId, onEntityCountChange, }: useSetRecordTableDataProps) => { - const { tableRowIdsState, numberOfTableRowsState } = - useRecordTableStates(recordTableId); + const { + tableRowIdsState, + numberOfTableRowsState, + isRowSelectedFamilyState, + hasUserSelectedAllRowState, + } = useRecordTableStates(recordTableId); return useRecoilCallback( ({ set, snapshot }) => @@ -32,15 +36,32 @@ export const useSetRecordTableData = ({ } const currentRowIds = getSnapshotValue(snapshot, tableRowIdsState); + const hasUserSelectedAllRows = getSnapshotValue( + snapshot, + hasUserSelectedAllRowState, + ); + const entityIds = newEntityArray.map((entity) => entity.id); if (!isDeeplyEqual(currentRowIds, entityIds)) { set(tableRowIdsState, entityIds); } + if (hasUserSelectedAllRows) { + for (const rowId of entityIds) { + set(isRowSelectedFamilyState(rowId), true); + } + } + set(numberOfTableRowsState, totalCount); onEntityCountChange(totalCount); }, - [numberOfTableRowsState, tableRowIdsState, onEntityCountChange], + [ + numberOfTableRowsState, + tableRowIdsState, + onEntityCountChange, + isRowSelectedFamilyState, + hasUserSelectedAllRowState, + ], ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts index e876c5184..78e5f0cef 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts @@ -4,6 +4,7 @@ import { Key } from 'ts-key-enum'; import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; import { useGetIsSomeCellInEditModeState } from '@/object-record/record-table/hooks/internal/useGetIsSomeCellInEditMode'; import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; +import { useSetHasUserSelectedAllRows } from '@/object-record/record-table/hooks/internal/useSetAllRowSelectedState'; import { useRecordTableMoveFocus } from '@/object-record/record-table/hooks/useRecordTableMoveFocus'; import { isSoftFocusUsingMouseState } from '@/object-record/record-table/states/isSoftFocusUsingMouseState'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; @@ -110,7 +111,9 @@ export const useRecordTable = (props?: useRecordTableProps) => { const leaveTableFocus = useLeaveTableFocus(recordTableId); - const setRowSelectedState = useSetRowSelectedState(recordTableId); + const setRowSelected = useSetRowSelectedState(recordTableId); + + const setHasUserSelectedAllRows = useSetHasUserSelectedAllRows(recordTableId); const resetTableRowSelection = useResetTableRowSelection(recordTableId); @@ -196,7 +199,7 @@ export const useRecordTable = (props?: useRecordTableProps) => { setRecordTableData, setTableColumns, leaveTableFocus, - setRowSelectedState, + setRowSelected, resetTableRowSelection, upsertRecordTableItem, moveDown, @@ -211,5 +214,6 @@ export const useRecordTable = (props?: useRecordTableProps) => { setSoftFocusPosition, isSomeCellInEditModeState, selectedRowIdsSelector, + setHasUserSelectedAllRows, }; }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState.ts new file mode 100644 index 000000000..2d19afefa --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState.ts @@ -0,0 +1,7 @@ +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +export const hasUserSelectedAllRowsComponentState = + createComponentState({ + key: 'hasUserSelectedAllRowsFamilyState', + defaultValue: false, + });