admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: impossible to unselect all check box (#4471)

Browse Source 
* 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 <bordeau.lucas@gmail.com>
This commit is contained in:
Ravan
2024-03-29 22:32:22 +05:30
committed by GitHub
parent 09e77db74c
commit aaf429a907
8 changed files with 75 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
View File

@ -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,
});

4
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
View File

@ -68,7 +68,7 @@ export const RecordTableWithWrappers = ({
isRecordTableInitialLoadingState,
);
const { resetTableRowSelection, setRowSelectedState } = useRecordTable({
const { resetTableRowSelection, setRowSelected } = useRecordTable({
recordTableId,
});
@ -109,7 +109,7 @@ export const RecordTableWithWrappers = ({
<DragSelect
dragSelectable={tableBodyRef}
onDragSelectionStart={resetTableRowSelection}
onDragSelectionChange={setRowSelectedState}
onDragSelectionChange={setRowSelected}
/>
</div>
<RecordTableInternalEffect

13
packages/twenty-front/src/modules/object-record/record-table/components/SelectAllCheckbox.tsx
View File

@ -20,13 +20,20 @@ export const SelectAllCheckbox = () => {
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<HTMLInputElement>) => {
if (e.target.checked) {
setHasUserSelectedAllRows(true);
selectAllRows();
} else {
setHasUserSelectedAllRows(false);
resetTableRowSelection();
}
};
return (

6
packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableStates.ts
View File

@ -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,

16
packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetAllRowSelectedState.ts Normal file
View File

@ -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],
);
};

27
packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts
View File

@ -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,
],
);
};

8
packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts
View File

@ -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,
};
};

7
packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState.ts Normal file
View File

@ -0,0 +1,7 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
export const hasUserSelectedAllRowsComponentState =
createComponentState<boolean>({
key: 'hasUserSelectedAllRowsFamilyState',
defaultValue: false,
});