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

Fix position calculations -- favorites (#9202)

Browse Source 
Co-authored-by: Weiko <corentin@twenty.com>
This commit is contained in:
nitin
2024-12-23 20:15:01 +05:30
committed by GitHub
parent 691fbbe576
commit 061c92069f
5 changed files with 30 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx
View File

@ -146,7 +146,7 @@ export const CurrentWorkspaceMemberFavorites = ({
onClick={handleToggle} onClick={handleToggle}
rightOptions={rightOptions} rightOptions={rightOptions}
className="navigation-drawer-item" className="navigation-drawer-item"
active={isFavoriteFolderEditDropdownOpen} isRightOptionsDropdownOpen={isFavoriteFolderEditDropdownOpen}
/> />
</FavoritesDroppable> </FavoritesDroppable>
)} )}

12
packages/twenty-front/src/modules/favorites/hooks/__mocks__/useFavorites.ts
View File

@ -724,7 +724,7 @@ export const mocks = [
variables: { variables: {
idToUpdate: '1', idToUpdate: '1',
input: { input: {
position: 2, position: 3,
}, },
}, },
}, },
@ -733,7 +733,7 @@ export const mocks = [
updateFavorite: { updateFavorite: {
__typename: 'Favorite', __typename: 'Favorite',
id: favoriteId, id: favoriteId,
position: 2, position: 3,
}, },
}, },
})), })),
@ -746,7 +746,7 @@ export const mocks = [
variables: { variables: {
idToUpdate: '1', idToUpdate: '1',
input: { input: {
position: 0, position: 1,
favoriteFolderId: '2', favoriteFolderId: '2',
}, },
}, },
@ -756,7 +756,7 @@ export const mocks = [
updateFavorite: { updateFavorite: {
__typename: 'Favorite', __typename: 'Favorite',
id: favoriteId, id: favoriteId,
position: 0, position: 1,
favoriteFolderId: '2', favoriteFolderId: '2',
}, },
}, },
@ -770,7 +770,7 @@ export const mocks = [
variables: { variables: {
idToUpdate: '1', idToUpdate: '1',
input: { input: {
position: 0, position: 1,
favoriteFolderId: null, favoriteFolderId: null,
}, },
}, },
@ -780,7 +780,7 @@ export const mocks = [
updateFavorite: { updateFavorite: {
__typename: 'Favorite', __typename: 'Favorite',
id: favoriteId, id: favoriteId,
position: 0, position: 1,
favoriteFolderId: null, favoriteFolderId: null,
}, },
}, },

12
packages/twenty-front/src/modules/favorites/hooks/useHandleFavoriteDragAndDrop.ts
View File

@ -53,7 +53,7 @@ export const useHandleFavoriteDragAndDrop = () => {
const newPosition = const newPosition =
folderFavorites.length === 0 folderFavorites.length === 0
? 0 ? 1
: folderFavorites[folderFavorites.length - 1].position + 1; : folderFavorites[folderFavorites.length - 1].position + 1;
updateOneFavorite({ updateOneFavorite({
@ -75,9 +75,9 @@ export const useHandleFavoriteDragAndDrop = () => {
let newPosition; let newPosition;
if (destinationFavorites.length === 0) { if (destinationFavorites.length === 0) {
newPosition = 0; newPosition = 1;
} else if (destination.index === 0) { } else if (destination.index === 0) {
newPosition = destinationFavorites[0].position / 2; newPosition = destinationFavorites[0].position - 1;
} else if (destination.index >= destinationFavorites.length) { } else if (destination.index >= destinationFavorites.length) {
newPosition = newPosition =
destinationFavorites[destinationFavorites.length - 1].position + 1; destinationFavorites[destinationFavorites.length - 1].position + 1;
@ -99,9 +99,9 @@ export const useHandleFavoriteDragAndDrop = () => {
return; return;
} }
const favoritesInSameList = favoritesSorted.filter( const favoritesInSameList = favoritesSorted
(favorite) => favorite.favoriteFolderId === sourceFolderId, .filter((favorite) => favorite.favoriteFolderId === sourceFolderId)
); .filter((favorite) => favorite.id !== draggableId);
const newPosition = calculateNewPosition({ const newPosition = calculateNewPosition({
destinationIndex: destination.index, destinationIndex: destination.index,

11
packages/twenty-front/src/modules/favorites/utils/calculateNewPosition.ts
View File

@ -10,18 +10,19 @@ export const calculateNewPosition = ({
items, items,
}: CalculateNewPositionParams): number => { }: CalculateNewPositionParams): number => {
if (destinationIndex === 0) { if (destinationIndex === 0) {
return items[0].position / 2; return items[0].position - 1;
} }
if (destinationIndex === items.length - 1) { if (destinationIndex === items.length) {
return items[destinationIndex - 1].position + 1; return items[items.length - 1].position + 1;
} }
if (destinationIndex > sourceIndex) { if (destinationIndex > sourceIndex) {
return ( return (
(items[destinationIndex + 1].position + items[destinationIndex].position +
(items[destinationIndex - 1].position -
items[destinationIndex].position) / items[destinationIndex].position) /
2 2
); );
} }

13
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
View File

@ -40,6 +40,7 @@ export type NavigationDrawerItemProps = {
keyboard?: string[]; keyboard?: string[];
rightOptions?: ReactNode; rightOptions?: ReactNode;
isDragging?: boolean; isDragging?: boolean;
isRightOptionsDropdownOpen?: boolean;
}; };
type StyledItemProps = Pick< type StyledItemProps = Pick<
@ -211,6 +212,7 @@ const visibleStateStyles = css`
const StyledRightOptionsVisbility = styled.div<{ const StyledRightOptionsVisbility = styled.div<{
isMobile: boolean; isMobile: boolean;
isRightOptionsDropdownOpen?: boolean;
}>` }>`
display: block; display: block;
opacity: 0; opacity: 0;
@ -223,7 +225,8 @@ const StyledRightOptionsVisbility = styled.div<{
height: 1px; height: 1px;
width: 1px; width: 1px;
${({ isMobile }) => isMobile && visibleStateStyles} ${({ isMobile, isRightOptionsDropdownOpen }) =>
(isMobile || isRightOptionsDropdownOpen) && visibleStateStyles}
.navigation-drawer-item:hover & { .navigation-drawer-item:hover & {
${visibleStateStyles} ${visibleStateStyles}
@ -246,6 +249,7 @@ export const NavigationDrawerItem = ({
subItemState, subItemState,
rightOptions, rightOptions,
isDragging, isDragging,
isRightOptionsDropdownOpen,
}: NavigationDrawerItemProps) => { }: NavigationDrawerItemProps) => {
const theme = useTheme(); const theme = useTheme();
const isMobile = useIsMobile(); const isMobile = useIsMobile();
@ -345,7 +349,12 @@ export const NavigationDrawerItem = ({
e.preventDefault(); e.preventDefault();
}} }}
> >
<StyledRightOptionsVisbility isMobile={isMobile}> <StyledRightOptionsVisbility
isMobile={isMobile}
isRightOptionsDropdownOpen={
isRightOptionsDropdownOpen || false
}
>
{rightOptions} {rightOptions}
</StyledRightOptionsVisbility> </StyledRightOptionsVisbility>
</StyledRightOptionsContainer> </StyledRightOptionsContainer>