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

55
front/src/modules/ui/table/hooks/useTableColumns.ts
View File

@ -1,15 +1,28 @@
import { useCallback } from 'react';
import { useCallback, useContext } from 'react';
import { useSetRecoilState } from 'recoil';
import type { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { currentViewIdScopedState } from '@/ui/view-bar/states/currentViewIdScopedState';
import { TableContext } from '../contexts/TableContext';
import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
import { savedTableColumnsFamilyState } from '../states/savedTableColumnsFamilyState';
import { tableColumnsByKeyScopedSelector } from '../states/selectors/tableColumnsByKeyScopedSelector';
import { tableColumnsScopedState } from '../states/tableColumnsScopedState';
import type { ColumnDefinition } from '../types/ColumnDefinition';
export const useTableColumns = () => {
const { onColumnsChange } = useContext(TableContext);
const currentViewId = useRecoilScopedValue(
currentViewIdScopedState,
TableRecoilScopeContext,
);
const setSavedTableColumns = useSetRecoilState(
savedTableColumnsFamilyState(currentViewId),
);
const [tableColumns, setTableColumns] = useRecoilScopedState(
tableColumnsScopedState,
TableRecoilScopeContext,
@ -19,21 +32,30 @@ export const useTableColumns = () => {
TableRecoilScopeContext,
);
const handleColumnReorder = useCallback(
(columns: ColumnDefinition<ViewFieldMetadata>[]) => {
const updatedColumnOrder = columns
.map((column, index) => {
return { ...column, index };
})
.sort((columnA, columnB) => columnA.index - columnB.index);
const handleColumnsChange = useCallback(
async (columns: ColumnDefinition<ViewFieldMetadata>[]) => {
await onColumnsChange?.(columns);
setTableColumns(updatedColumnOrder);
setSavedTableColumns(columns);
setTableColumns(columns);
},
[setTableColumns],
[onColumnsChange, setSavedTableColumns, setTableColumns],
);
const handleColumnReorder = useCallback(
async (columns: ColumnDefinition<ViewFieldMetadata>[]) => {
const updatedColumns = columns.map((column, index) => ({
...column,
index,
}));
await handleColumnsChange(updatedColumns);
},
[handleColumnsChange],
);
const handleColumnVisibilityChange = useCallback(
(column: ColumnDefinition<ViewFieldMetadata>) => {
async (column: ColumnDefinition<ViewFieldMetadata>) => {
const nextColumns = tableColumnsByKey[column.key]
? tableColumns.map((previousColumn) =>
previousColumn.key === column.key
@ -44,13 +66,13 @@ export const useTableColumns = () => {
(columnA, columnB) => columnA.index - columnB.index,
);
setTableColumns(nextColumns);
await handleColumnsChange(nextColumns);
},
[tableColumnsByKey, tableColumns, setTableColumns],
[tableColumnsByKey, tableColumns, handleColumnsChange],
);
const handleColumnMove = useCallback(
(direction: string, column: ColumnDefinition<ViewFieldMetadata>) => {
async (direction: string, column: ColumnDefinition<ViewFieldMetadata>) => {
const currentColumnArrayIndex = tableColumns.findIndex(
(tableColumn) => tableColumn.key === column.key,
);
@ -73,10 +95,10 @@ export const useTableColumns = () => {
index: targetColumn.index,
};
setTableColumns(newTableColumns);
await handleColumnsChange(newTableColumns);
}
},
[tableColumns, setTableColumns],
[tableColumns, handleColumnsChange],
);
const handleColumnLeftMove = useCallback(
@ -98,5 +120,6 @@ export const useTableColumns = () => {
handleColumnLeftMove,
handleColumnRightMove,
handleColumnReorder,
handleColumnsChange,
};
};