diff --git a/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx b/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx index 5956c8d2e6..f7bad0400a 100644 --- a/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx +++ b/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx @@ -34,7 +34,6 @@ type Props = { favorite: IFavorite; handleRemoveFromFavorites: (favorite: IFavorite) => void; handleRemoveFromFavoritesFolder: (favoriteId: string) => void; - handleReorder: (favoriteId: string, sequence: number) => void; handleDrop: (self: DropTargetRecord,source: ElementDragPayload, location: DragLocationHistory) => void; }; diff --git a/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx b/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx index 024f2cdf89..8aea968eca 100644 --- a/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx +++ b/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx @@ -28,7 +28,7 @@ import { usePlatformOS } from "@/hooks/use-platform-os"; // plane web components import { FavoriteFolder } from "./favorite-folder"; import { FavoriteRoot } from "./favorite-items"; -import { getDestinationStateSequence, getInstructionFromPayload, TargetData } from "./favorites.helpers"; +import { getInstructionFromPayload, TargetData } from "./favorites.helpers"; import { NewFavoriteFolder } from "./new-fav-folder"; export const SidebarFavoritesMenu = observer(() => { @@ -94,22 +94,20 @@ export const SidebarFavoritesMenu = observer(() => { handleMoveToFolder(sourceData.id, parentId); } //handle remove from folder if dropped outside of the folder - if (parentId && sourceData.isChild) { + if (parentId && parentId !== sourceData.parentId && sourceData.isChild) { handleRemoveFromFavoritesFolder(sourceData.id); } // handle reordering at root level if (droppedFavId) { if (instruction != "make-child") { - const destinationSequence = getDestinationStateSequence(groupedFavorites, droppedFavId, instruction); - handleReorder(sourceData.id, destinationSequence || 0); + handleReorder(sourceData.id, droppedFavId, instruction); } } } else { //handling reordering for favorites if (droppedFavId) { - const destinationSequence = getDestinationStateSequence(groupedFavorites, droppedFavId, instruction); - handleReorder(sourceData.id, destinationSequence || 0); + handleReorder(sourceData.id, droppedFavId, instruction); } // handle removal from folder if dropped outside a folder @@ -147,10 +145,8 @@ export const SidebarFavoritesMenu = observer(() => { }; const handleReorder = useCallback( - (favoriteId: string, sequence: number) => { - reOrderFavorite(workspaceSlug.toString(), favoriteId, { - sequence: sequence, - }).catch(() => { + (favoriteId: string, droppedFavId: string, edge: string | undefined) => { + reOrderFavorite(workspaceSlug.toString(), favoriteId, droppedFavId, edge).catch(() => { setToast({ type: TOAST_TYPE.ERROR, title: "Error!", @@ -271,7 +267,6 @@ export const SidebarFavoritesMenu = observer(() => { isLastChild={index === length - 1} handleRemoveFromFavorites={handleRemoveFromFavorites} handleRemoveFromFavoritesFolder={handleRemoveFromFavoritesFolder} - handleReorder={handleReorder} handleDrop={handleDrop} /> ) : ( diff --git a/web/core/components/workspace/sidebar/favorites/favorites.helpers.ts b/web/core/components/workspace/sidebar/favorites/favorites.helpers.ts index 94d54f8947..a7364c9ed9 100644 --- a/web/core/components/workspace/sidebar/favorites/favorites.helpers.ts +++ b/web/core/components/workspace/sidebar/favorites/favorites.helpers.ts @@ -9,47 +9,6 @@ export type TargetData = { isChild: boolean; } -export const getDestinationStateSequence = ( - favoriteMap: Record, - destinationId: string, - edge: string | undefined -) => { - const defaultSequence = 65535; - if (!edge) return defaultSequence; - - - const favoriteIds = orderBy(Object.values(favoriteMap), "sequence", "desc") - .filter((fav: IFavorite) => !fav.parent) - .map((fav: IFavorite) => fav.id); - const destinationStateIndex = favoriteIds.findIndex((id) => id === destinationId); - const destinationStateSequence = favoriteMap[destinationId]?.sequence || undefined; - - if (!destinationStateSequence) return defaultSequence; - - - let resultSequence = defaultSequence; - if (edge === "reorder-above") { - const prevStateSequence = favoriteMap[favoriteIds[destinationStateIndex - 1]]?.sequence || undefined; - - if (prevStateSequence === undefined) { - resultSequence = destinationStateSequence + defaultSequence; - }else { - resultSequence = (destinationStateSequence + prevStateSequence) / 2 - } - } else if (edge === "reorder-below") { - const nextStateSequence = favoriteMap[favoriteIds[destinationStateIndex + 1]]?.sequence || undefined; - - if (nextStateSequence === undefined) { - resultSequence = destinationStateSequence - defaultSequence; - } else { - resultSequence = (destinationStateSequence + nextStateSequence) / 2; - } - } - resultSequence = Math.round(resultSequence) - - return resultSequence; -}; - /** * extracts the Payload and translates the instruction for the current dropTarget based on drag and drop payload * @param dropTarget dropTarget for which the instruction is required diff --git a/web/core/store/favorite.store.ts b/web/core/store/favorite.store.ts index cc1ac1b2df..3f4f636d34 100644 --- a/web/core/store/favorite.store.ts +++ b/web/core/store/favorite.store.ts @@ -1,4 +1,4 @@ -import { uniqBy } from "lodash"; +import { orderBy, result, uniqBy } from "lodash"; import set from "lodash/set"; import { action, observable, makeObservable, runInAction, computed } from "mobx"; import { v4 as uuidv4 } from "uuid"; @@ -28,7 +28,12 @@ export interface IFavoriteStore { getGroupedFavorites: (workspaceSlug: string, favoriteId: string) => Promise; moveFavoriteToFolder: (workspaceSlug: string, favoriteId: string, data: Partial) => Promise; removeFavoriteEntity: (workspaceSlug: string, entityId: string) => Promise; - reOrderFavorite: (workspaceSlug: string, favoriteId: string, data: Partial) => Promise; + reOrderFavorite: ( + workspaceSlug: string, + favoriteId: string, + destinationId: string, + edge: string | undefined + ) => Promise; removeFromFavoriteFolder: (workspaceSlug: string, favoriteId: string) => Promise; removeFavoriteFromStore: (entity_identifier: string) => void; } @@ -190,14 +195,37 @@ export class FavoriteStore implements IFavoriteStore { } }; - reOrderFavorite = async (workspaceSlug: string, favoriteId: string, data: Partial) => { + reOrderFavorite = async ( + workspaceSlug: string, + favoriteId: string, + destinationId: string, + edge: string | undefined + ) => { const initialSequence = this.favoriteMap[favoriteId].sequence; try { + let resultSequence = 10000; + if (edge) { + const sortedIds = orderBy(Object.values(this.favoriteMap), "sequence", "desc").map((fav: IFavorite) => fav.id); + const destinationSequence = this.favoriteMap[destinationId]?.sequence || undefined; + if (destinationSequence) { + const destinationIndex = sortedIds.findIndex((id) => id === destinationId); + if (edge === "reorder-above") { + const prevSequence = this.favoriteMap[sortedIds[destinationIndex - 1]]?.sequence || undefined; + if (prevSequence) { + resultSequence = (destinationSequence + prevSequence) / 2; + } else { + resultSequence = destinationSequence + resultSequence; + } + } else { + resultSequence = destinationSequence - resultSequence; + } + } + } runInAction(() => { - set(this.favoriteMap, [favoriteId, "sequence"], data.sequence); + set(this.favoriteMap, [favoriteId, "sequence"], resultSequence); }); - await this.favoriteService.updateFavorite(workspaceSlug, favoriteId, data); + await this.favoriteService.updateFavorite(workspaceSlug, favoriteId, { sequence: resultSequence }); } catch (error) { console.error("Failed to move favorite folder"); runInAction(() => { @@ -214,8 +242,7 @@ export class FavoriteStore implements IFavoriteStore { //remove parent set(this.favoriteMap, [favoriteId, "parent"], null); }); - await this.favoriteService.updateFavorite(workspaceSlug, favoriteId, { parent: null}); - + await this.favoriteService.updateFavorite(workspaceSlug, favoriteId, { parent: null }); } catch (error) { console.error("Failed to move favorite"); runInAction(() => {