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

Fix dragging behavior below the last card when dragging below the new CTA button (#11781)

Browse Source 
- Fixed an issue where dragging an item below the last card didn't work
when the card was dragged below the new CTA button (`destination.index
=== items.length` case).
- Moved the "new record" button outside of the draggable list

### Demo

https://github.com/user-attachments/assets/370f2c1f-4bb2-403b-b8ed-4afda064c98d

Closes #10197

---------

Co-authored-by: prastoin <paul@twenty.com>
Co-authored-by: Félix Malfait <felix@twenty.com>
This commit is contained in:
Abdul Rahman
2025-04-30 13:04:56 +05:30
committed by GitHub
parent e6c1b70d9c
commit ea25498625
4 changed files with 132 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx
View File

@ -32,6 +32,7 @@ import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
import { ViewType } from '@/views/types/ViewType';
import { getIndexNeighboursElementsFromArray } from '~/utils/array/getIndexNeighboursElementsFromArray';
const StyledContainer = styled.div`
display: flex;
@ -173,14 +174,15 @@ export const RecordBoard = () => {
)
: destinationRecordByGroupIds;
const recordBeforeId =
otherRecordIdsInDestinationColumn[destinationIndexInColumn - 1];
const { before: recordBeforeId, after: recordAfterId } =
getIndexNeighboursElementsFromArray({
index: destinationIndexInColumn,
array: otherRecordIdsInDestinationColumn,
});
const recordBefore = recordBeforeId
? getSnapshotValue(snapshot, recordStoreFamilyState(recordBeforeId))
: null;
const recordAfterId =
otherRecordIdsInDestinationColumn[destinationIndexInColumn];
const recordAfter = recordAfterId
? getSnapshotValue(snapshot, recordStoreFamilyState(recordAfterId))
: null;

11
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardsContainer.tsx
View File

@ -13,7 +13,6 @@ import { isRecordBoardCompactModeActiveComponentState } from '@/object-record/re
import { recordBoardVisibleFieldDefinitionsComponentSelector } from '@/object-record/record-board/states/selectors/recordBoardVisibleFieldDefinitionsComponentSelector';
import { isRecordIndexBoardColumnLoadingFamilyState } from '@/object-record/states/isRecordBoardColumnLoadingFamilyState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
const StyledColumnCardsContainer = styled.div`
display: flex;
flex: 1;
@ -23,7 +22,6 @@ const StyledColumnCardsContainer = styled.div`
const StyledNewButtonContainer = styled.div`
padding-bottom: ${({ theme }) => theme.spacing(4)};
`;
// eslint-disable-next-line @nx/workspace-no-hardcoded-colors
const StyledSkeletonCardContainer = styled.div`
background-color: ${({ theme }) => theme.background.secondary};
@ -102,14 +100,13 @@ export const RecordBoardColumnCardsContainer = ({
ref={draggableProvided?.innerRef}
// eslint-disable-next-line react/jsx-props-no-spreading
{...draggableProvided?.draggableProps}
>
<StyledNewButtonContainer>
<RecordBoardColumnNewRecordButton />
</StyledNewButtonContainer>
</div>
></div>
)}
</Draggable>
{droppableProvided?.placeholder}
<StyledNewButtonContainer>
<RecordBoardColumnNewRecordButton />
</StyledNewButtonContainer>
</StyledColumnCardsContainer>
);
};