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

feat: reorder kanban columns (#1699)

Browse Source 
* kaban header options

* gql codegn

* moveColumn hook refactor

* BoardColumnContext addition

* saved board columns state

* db call hook update

* lint fix

* state change first db call second

* handleMoveTableColumn call

* codegen lint fix

* useMoveViewColumns hook

* useBoardColumns db call addition

* boardColumns state change from BoardHeader

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Aditya Pimpalkar
2023-09-27 14:59:44 +01:00
committed by GitHub
parent 1e716bf6d6
commit 46ad36061e
18 changed files with 456 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
front/src/modules/ui/table/components/TableColumnDropdownMenu.tsx
View File

@ -22,11 +22,8 @@ export const TableColumnDropdownMenu = ({
isLastColumn,
primaryColumnKey,
}: EntityTableHeaderOptionsProps) => {
const {
handleColumnVisibilityChange,
handleColumnLeftMove,
handleColumnRightMove,
} = useTableColumns();
const { handleColumnVisibilityChange, handleMoveTableColumn } =
useTableColumns();
const { closeDropdownButton } = useDropdownButton({
dropdownId: ColumnHeadDropdownId,
@ -37,7 +34,7 @@ export const TableColumnDropdownMenu = ({
if (isFirstColumn) {
return;
}
handleColumnLeftMove(column);
handleMoveTableColumn('left', column);
};
const handleColumnMoveRight = () => {
@ -45,7 +42,7 @@ export const TableColumnDropdownMenu = ({
if (isLastColumn) {
return;
}
handleColumnRightMove(column);
handleMoveTableColumn('right', column);
};
const handleColumnVisibility = () => {

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

@ -5,6 +5,7 @@ import { 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 { useMoveViewColumns } from '@/views/hooks/useMoveViewColumns';
import { TableContext } from '../contexts/TableContext';
import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
@ -32,6 +33,8 @@ export const useTableColumns = () => {
TableRecoilScopeContext,
);
const { handleColumnMove } = useMoveViewColumns();
const handleColumnsChange = useCallback(
async (columns: ColumnDefinition<ViewFieldMetadata>[]) => {
setSavedTableColumns(columns);
@ -71,54 +74,28 @@ export const useTableColumns = () => {
[tableColumnsByKey, tableColumns, handleColumnsChange],
);
const handleColumnMove = useCallback(
async (direction: string, column: ColumnDefinition<ViewFieldMetadata>) => {
const handleMoveTableColumn = useCallback(
(
direction: 'left' | 'right',
column: ColumnDefinition<ViewFieldMetadata>,
) => {
const currentColumnArrayIndex = tableColumns.findIndex(
(tableColumn) => tableColumn.key === column.key,
);
const targetColumnArrayIndex =
direction === 'left'
? currentColumnArrayIndex - 1
: currentColumnArrayIndex + 1;
const columns = handleColumnMove(
direction,
currentColumnArrayIndex,
tableColumns,
);
if (currentColumnArrayIndex >= 0) {
const currentColumn = tableColumns[currentColumnArrayIndex];
const targetColumn = tableColumns[targetColumnArrayIndex];
const newTableColumns = [...tableColumns];
newTableColumns[currentColumnArrayIndex] = {
...targetColumn,
index: currentColumn.index,
};
newTableColumns[targetColumnArrayIndex] = {
...currentColumn,
index: targetColumn.index,
};
await handleColumnsChange(newTableColumns);
}
setTableColumns(columns);
},
[tableColumns, handleColumnsChange],
);
const handleColumnLeftMove = useCallback(
(column: ColumnDefinition<ViewFieldMetadata>) => {
handleColumnMove('left', column);
},
[handleColumnMove],
);
const handleColumnRightMove = useCallback(
(column: ColumnDefinition<ViewFieldMetadata>) => {
handleColumnMove('right', column);
},
[handleColumnMove],
[tableColumns, setTableColumns, handleColumnMove],
);
return {
handleColumnVisibilityChange,
handleColumnLeftMove,
handleColumnRightMove,
handleMoveTableColumn,
handleColumnReorder,
handleColumnsChange,
};