mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: persist table columns on change (#1697)

Browse Source 
* feat: persist table columns on change

Closes #1580

* fix: fix drag-and-select on Table Options dropdown toggle
This commit is contained in:
Thaïs
2023-09-21 22:15:57 +02:00
committed by GitHub
parent 189bf4a627
commit ab0cdbf960
15 changed files with 149 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
front/src/modules/ui/table/components/EntityTable.tsx
View File

@ -1,6 +1,6 @@
import { useRef } from 'react';
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { useRecoilValue } from 'recoil';
import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
@ -90,9 +90,7 @@ type OwnProps = {
export const EntityTable = ({ updateEntityMutation }: OwnProps) => {
const tableBodyRef = useRef<HTMLDivElement>(null);
const [isDraggingAndSelecting, setIsDraggingAndSelecting] = useRecoilState(
isDraggingAndSelectingState,
);
const isDraggingAndSelecting = useRecoilValue(isDraggingAndSelectingState);
const setRowSelectedState = useSetRowSelectedState();
const resetTableRowSelection = useResetTableRowSelection();
@ -105,7 +103,6 @@ export const EntityTable = ({ updateEntityMutation }: OwnProps) => {
refs: [tableBodyRef],
callback: () => {
leaveTableFocus();
setIsDraggingAndSelecting(true);
},
});

12
front/src/modules/ui/table/components/EntityTableHeader.tsx
View File

@ -7,9 +7,9 @@ import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-co
import { IconPlus } from '@/ui/icon';
import { useTrackPointer } from '@/ui/utilities/pointer-event/hooks/useTrackPointer';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { useTableColumns } from '../hooks/useTableColumns';
import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
import { resizeFieldOffsetState } from '../states/resizeFieldOffsetState';
import { hiddenTableColumnsScopedSelector } from '../states/selectors/hiddenTableColumnsScopedSelector';
@ -76,7 +76,7 @@ export const EntityTableHeader = () => {
const [resizeFieldOffset, setResizeFieldOffset] = useRecoilState(
resizeFieldOffsetState,
);
const [tableColumns, setTableColumns] = useRecoilScopedState(
const tableColumns = useRecoilScopedValue(
tableColumnsScopedState,
TableRecoilScopeContext,
);
@ -99,6 +99,8 @@ export const EntityTableHeader = () => {
const [resizedFieldKey, setResizedFieldKey] = useState<string | null>(null);
const [isColumnMenuOpen, setIsColumnMenuOpen] = useState(false);
const { handleColumnsChange } = useTableColumns();
const handleResizeHandlerStart = useCallback((positionX: number) => {
setInitialPointerPositionX(positionX);
}, []);
@ -113,7 +115,7 @@ export const EntityTableHeader = () => {
const handleResizeHandlerEnd = useRecoilCallback(
({ snapshot, set }) =>
() => {
async () => {
if (!resizedFieldKey) return;
const nextWidth = Math.round(
@ -131,14 +133,14 @@ export const EntityTableHeader = () => {
: column,
);
setTableColumns(nextColumns);
await handleColumnsChange(nextColumns);
}
set(resizeFieldOffsetState, 0);
setInitialPointerPositionX(null);
setResizedFieldKey(null);
},
[resizedFieldKey, tableColumnsByKey, tableColumns, setTableColumns],
[resizedFieldKey, tableColumnsByKey, tableColumns, handleColumnsChange],
);
useTrackPointer({