From 0f641ecbbac1621d63ab48f18c131dee20047e5f Mon Sep 17 00:00:00 2001 From: vamsi krishna Date: Wed, 20 Nov 2024 18:44:27 +0530 Subject: [PATCH 1/7] fixed re order for favorites --- .../sidebar/favorites/favorite-folder.tsx | 85 ++++++++++-------- .../sidebar/favorites/favorite-items/root.tsx | 90 ++++++++++++++++--- .../sidebar/favorites/favorites-menu.tsx | 24 ++++- web/core/store/favorite.store.ts | 12 +-- 4 files changed, 155 insertions(+), 56 deletions(-) diff --git a/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx b/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx index 70dd006cb76..0d3b0892780 100644 --- a/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx +++ b/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx @@ -3,12 +3,16 @@ import { useEffect, useRef, useState } from "react"; import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine"; import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"; +import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview"; +import { pointerOutsideOfPreview } from "@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview"; import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge"; import uniqBy from "lodash/uniqBy"; import { useParams } from "next/navigation"; import { PenSquare, Star, MoreHorizontal, ChevronRight, GripVertical } from "lucide-react"; import { Disclosure, Transition } from "@headlessui/react"; +import { createRoot } from "react-dom/client"; + // plane helpers import { useOutsideClickDetector } from "@plane/helpers"; // ui @@ -24,21 +28,23 @@ import { usePlatformOS } from "@/hooks/use-platform-os"; import { FavoriteRoot } from "./favorite-items"; import { getDestinationStateSequence } from "./favorites.helpers"; import { NewFavoriteFolder } from "./new-fav-folder"; +import { orderBy } from "lodash"; type Props = { isLastChild: boolean; favorite: IFavorite; handleRemoveFromFavorites: (favorite: IFavorite) => void; handleRemoveFromFavoritesFolder: (favoriteId: string) => void; + handleReorder: (favoriteId: string, sequence: number) => void; }; export const FavoriteFolder: React.FC = (props) => { - const { favorite, handleRemoveFromFavorites, handleRemoveFromFavoritesFolder } = props; + const { favorite, handleRemoveFromFavorites, handleRemoveFromFavoritesFolder, handleReorder } = props; // store hooks const { sidebarCollapsed: isSidebarCollapsed } = useAppTheme(); const { isMobile } = usePlatformOS(); - const { moveFavorite, getGroupedFavorites, groupedFavorites, moveFavoriteFolder } = useFavorite(); + const { getGroupedFavorites, groupedFavorites, moveFavoriteToFolder } = useFavorite(); const { workspaceSlug } = useParams(); // states const [isMenuActive, setIsMenuActive] = useState(false); @@ -53,8 +59,8 @@ export const FavoriteFolder: React.FC = (props) => { !favorite.children && getGroupedFavorites(workspaceSlug.toString(), favorite.id); - const handleOnDrop = (source: string, destination: string) => { - moveFavorite(workspaceSlug.toString(), source, { + const handleMoveToFolder = (source: string, destination: string) => { + moveFavoriteToFolder(workspaceSlug.toString(), source, { parent: destination, }) .then(() => { @@ -73,24 +79,6 @@ export const FavoriteFolder: React.FC = (props) => { }); }; - const handleOnDropFolder = (payload: Partial) => { - moveFavoriteFolder(workspaceSlug.toString(), favorite.id, payload) - .then(() => { - setToast({ - type: TOAST_TYPE.SUCCESS, - title: "Success!", - message: "Folder moved successfully.", - }); - }) - .catch(() => { - setToast({ - type: TOAST_TYPE.ERROR, - title: "Error!", - message: "Failed to move folder.", - }); - }); - }; - useEffect(() => { const element = elementRef.current; @@ -101,7 +89,25 @@ export const FavoriteFolder: React.FC = (props) => { draggable({ element, getInitialData: () => initialData, - onDragStart: () => setIsDragging(true), + // onDragStart: () => setIsDragging(true), + onGenerateDragPreview: ({ nativeSetDragImage }) =>{ + setCustomNativeDragPreview({ + getOffset: pointerOutsideOfPreview({ x: "0px", y: "0px" }), + render: ({ container }) => { + const root = createRoot(container); + root.render( +
+
+ +
+

{favorite.name}

+
+ ); + return () => root.unmount(); + }, + nativeSetDragImage, + }); + }, onDrop: (data) => { setIsDraggedOver(false); if (!data.location.current.dropTargets[0]) return; @@ -109,14 +115,10 @@ export const FavoriteFolder: React.FC = (props) => { if (favorite.id && destinationData) { const edge = extractClosestEdge(destinationData) || undefined; - const payload = { - id: favorite.id, - sequence: Math.round( - getDestinationStateSequence(groupedFavorites, destinationData.id as string, edge) || 0 - ), - }; - - handleOnDropFolder(payload); + const sequence = Math.round( + getDestinationStateSequence(groupedFavorites, destinationData.id as string, edge) || 0 + ); + handleReorder(favorite.id,sequence); } }, // canDrag: () => isDraggable, }), @@ -128,10 +130,14 @@ export const FavoriteFolder: React.FC = (props) => { element, allowedEdges: ["top", "bottom"], }), - onDragEnter: (args) => { - setIsDragging(true); - setIsDraggedOver(true); - args.source.data.is_folder && setClosestEdge(extractClosestEdge(args.self.data)); + onDragEnter: ({source,self}) => { + const sourceId = source?.data?.id as string; + const destinationId = self?.data?.id as string | undefined; + if (groupedFavorites[sourceId].parent !== destinationId) { + setIsDraggedOver(true); + setIsDragging(true); + }; + source.data.is_folder && setClosestEdge(extractClosestEdge(self.data)); }, onDragLeave: () => { setIsDragging(false); @@ -146,16 +152,18 @@ export const FavoriteFolder: React.FC = (props) => { setIsDraggedOver(false); const sourceId = source?.data?.id as string | undefined; const destinationId = self?.data?.id as string | undefined; + if (source.data.is_folder) return; if (sourceId === destinationId) return; if (!sourceId || !destinationId) return; if (groupedFavorites[sourceId].parent === destinationId) return; - handleOnDrop(sourceId, destinationId); + + handleMoveToFolder(sourceId, destinationId); }, }) ); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [elementRef.current, isDragging, favorite.id, handleOnDrop]); + }, [elementRef.current, isDragging, favorite.id, handleMoveToFolder]); useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false)); @@ -316,7 +324,7 @@ export const FavoriteFolder: React.FC = (props) => { "px-2": !isSidebarCollapsed, })} > - {uniqBy(favorite.children, "id").map((child) => ( + {orderBy(uniqBy(favorite.children, "id"),'sequence','desc').map((child) => ( = (props) => { handleRemoveFromFavorites={handleRemoveFromFavorites} handleRemoveFromFavoritesFolder={handleRemoveFromFavoritesFolder} favoriteMap={groupedFavorites} + handleReorder={handleReorder} /> ))} diff --git a/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx b/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx index 5d880e3a6ce..9080fa13876 100644 --- a/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx +++ b/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx @@ -3,6 +3,9 @@ import React, { FC, useEffect, useRef, useState } from "react"; import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine"; import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"; +import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge"; +import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview"; +import { pointerOutsideOfPreview } from "@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview"; import { observer } from "mobx-react"; // plane helpers import { useOutsideClickDetector } from "@plane/helpers"; @@ -19,48 +22,94 @@ import { import { useAppTheme } from "@/hooks/store"; import { useFavoriteItemDetails } from "@/hooks/use-favorite-item-details"; +import { createRoot } from "react-dom/client"; +import { DropIndicator } from "@plane/ui"; +//constants +import { getDestinationStateSequence } from "../favorites.helpers"; + type Props = { workspaceSlug: string; favorite: IFavorite; favoriteMap: Record; handleRemoveFromFavorites: (favorite: IFavorite) => void; handleRemoveFromFavoritesFolder: (favoriteId: string) => void; + handleReorder: (favoriteId: string, sequence: number) => void; }; export const FavoriteRoot: FC = observer((props) => { // props - const { workspaceSlug, favorite, favoriteMap, handleRemoveFromFavorites, handleRemoveFromFavoritesFolder } = props; + const { + workspaceSlug, + favorite, + favoriteMap, + handleRemoveFromFavorites, + handleRemoveFromFavoritesFolder, + handleReorder, + } = props; // store hooks const { sidebarCollapsed } = useAppTheme(); - + const { itemLink, itemIcon, itemTitle } = useFavoriteItemDetails(workspaceSlug, favorite); //state const [isDragging, setIsDragging] = useState(false); const [isMenuActive, setIsMenuActive] = useState(false); + const [closestEdge, setClosestEdge] = useState(null); + const [isDraggedOver, setIsDraggedOver] = useState(false); + //ref const elementRef = useRef(null); const actionSectionRef = useRef(null); const handleQuickAction = (value: boolean) => setIsMenuActive(value); - const { itemLink, itemIcon, itemTitle } = useFavoriteItemDetails(workspaceSlug, favorite); // drag and drop useEffect(() => { const element = elementRef.current; if (!element) return; + const initialData = { id: favorite.id, type: favorite.parent ? 'CHILD' : 'NON_PARENT' }; return combine( draggable({ element, dragHandle: elementRef.current, - canDrag: () => true, - getInitialData: () => ({ id: favorite.id, type: "CHILD" }), + getInitialData: () => initialData, onDragStart: () => { setIsDragging(true); }, - onDrop: () => { + onDrop: (data) => { + setIsDraggedOver(false); setIsDragging(false); + if (!data.location.current.dropTargets[0]) return; + const destinationData = data.location.current.dropTargets[0].data; + + if (favorite.id && destinationData) { + const edge = extractClosestEdge(destinationData) || undefined; + const sequence = Math.round( + getDestinationStateSequence(favoriteMap, destinationData.id as string, edge) || 0 + ); + handleReorder(favorite.id, sequence); + } + }, + onGenerateDragPreview: ({ nativeSetDragImage }) => { + setCustomNativeDragPreview({ + getOffset: pointerOutsideOfPreview({ x: "0px", y: "0px" }), + render: ({ container }) => { + const root = createRoot(container); + root.render( +
+ +
+ ); + return () => root.unmount(); + }, + nativeSetDragImage, + }); }, }), dropTargetForElements({ @@ -68,17 +117,34 @@ export const FavoriteRoot: FC = observer((props) => { onDragStart: () => { setIsDragging(true); }, - onDragEnter: () => { + getData: ({ input, element }) => + attachClosestEdge(initialData, { + input, + element, + allowedEdges: ["top", "bottom"], + }), + onDragEnter: (args) => { setIsDragging(true); + setIsDraggedOver(true); + setClosestEdge(extractClosestEdge(args.self.data)); }, onDragLeave: () => { setIsDragging(false); + setIsDraggedOver(false); + setClosestEdge(null); }, - onDrop: ({ source }) => { + onDrop: ({ self, source }) => { setIsDragging(false); - const sourceId = source?.data?.id as string | undefined; - if (!sourceId || !favoriteMap[sourceId].parent) return; - handleRemoveFromFavoritesFolder(sourceId); + setIsDraggedOver(false); + const sourceId = source.data?.id as string | undefined; + const destinationType = self.data?.type as string | undefined; + const sourceType = source.data?.type as string | undefined; + + if(!sourceId) return; + + if(destinationType === 'NON_PARENT'){ + handleRemoveFromFavoritesFolder(sourceId) + } }, }) ); @@ -90,6 +156,7 @@ export const FavoriteRoot: FC = observer((props) => { return ( <> + {!sidebarCollapsed && } {!sidebarCollapsed && ( @@ -101,6 +168,7 @@ export const FavoriteRoot: FC = observer((props) => { handleRemoveFromFavorites={handleRemoveFromFavorites} /> )} + ); diff --git a/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx b/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx index 89cd6f36f3a..2dc442e33e8 100644 --- a/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx +++ b/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx @@ -33,7 +33,7 @@ export const SidebarFavoritesMenu = observer(() => { // store hooks const { sidebarCollapsed } = useAppTheme(); - const { favoriteIds, groupedFavorites, deleteFavorite, removeFromFavoriteFolder } = useFavorite(); + const { favoriteIds, groupedFavorites, deleteFavorite, removeFromFavoriteFolder, reOrderFavorite } = useFavorite(); const { workspaceSlug } = useParams(); const { isMobile } = usePlatformOS(); @@ -83,6 +83,26 @@ export const SidebarFavoritesMenu = observer(() => { }); }); }; + + const handleReorder = (favoriteId: string, sequence: number) => { + reOrderFavorite(workspaceSlug.toString(), favoriteId, { + sequence: sequence + }) + .then(() => { + // setToast({ + // type: TOAST_TYPE.SUCCESS, + // title: "Success!", + // message: "Folder moved successfully.", + // }); + }) + .catch(() => { + setToast({ + type: TOAST_TYPE.ERROR, + title: "Error!", + message: "Failed to move folder.", + }); + }); + } useEffect(() => { if (sidebarCollapsed) toggleFavoriteMenu(true); }, [sidebarCollapsed, toggleFavoriteMenu]); @@ -194,6 +214,7 @@ export const SidebarFavoritesMenu = observer(() => { isLastChild={index === favoriteIds.length - 1} handleRemoveFromFavorites={handleRemoveFromFavorites} handleRemoveFromFavoritesFolder={handleRemoveFromFavoritesFolder} + handleReorder={handleReorder} /> ) : ( { handleRemoveFromFavorites={handleRemoveFromFavorites} handleRemoveFromFavoritesFolder={handleRemoveFromFavoritesFolder} favoriteMap={groupedFavorites} + handleReorder={handleReorder} /> )} diff --git a/web/core/store/favorite.store.ts b/web/core/store/favorite.store.ts index 9d04ed1303e..da2a5b4c92f 100644 --- a/web/core/store/favorite.store.ts +++ b/web/core/store/favorite.store.ts @@ -26,9 +26,9 @@ export interface IFavoriteStore { updateFavorite: (workspaceSlug: string, favoriteId: string, data: Partial) => Promise; deleteFavorite: (workspaceSlug: string, favoriteId: string) => Promise; getGroupedFavorites: (workspaceSlug: string, favoriteId: string) => Promise; - moveFavorite: (workspaceSlug: string, favoriteId: string, data: Partial) => Promise; + moveFavoriteToFolder: (workspaceSlug: string, favoriteId: string, data: Partial) => Promise; removeFavoriteEntity: (workspaceSlug: string, entityId: string) => Promise; - moveFavoriteFolder: (workspaceSlug: string, favoriteId: string, data: Partial) => Promise; + reOrderFavorite: (workspaceSlug: string, favoriteId: string, data: Partial) => Promise; removeFromFavoriteFolder: (workspaceSlug: string, favoriteId: string, data: Partial) => Promise; removeFavoriteFromStore: (entity_identifier: string) => void; } @@ -64,9 +64,9 @@ export class FavoriteStore implements IFavoriteStore { // CRUD actions addFavorite: action, getGroupedFavorites: action, - moveFavorite: action, + moveFavoriteToFolder: action, removeFavoriteEntity: action, - moveFavoriteFolder: action, + reOrderFavorite: action, removeFavoriteEntityFromStore: action, removeFromFavoriteFolder: action, }); @@ -168,7 +168,7 @@ export class FavoriteStore implements IFavoriteStore { * @param data * @returns Promise */ - moveFavorite = async (workspaceSlug: string, favoriteId: string, data: Partial) => { + moveFavoriteToFolder = async (workspaceSlug: string, favoriteId: string, data: Partial) => { const oldParent = this.favoriteMap[favoriteId].parent; try { runInAction(() => { @@ -190,7 +190,7 @@ export class FavoriteStore implements IFavoriteStore { } }; - moveFavoriteFolder = async (workspaceSlug: string, favoriteId: string, data: Partial) => { + reOrderFavorite = async (workspaceSlug: string, favoriteId: string, data: Partial) => { const initialSequence = this.favoriteMap[favoriteId].sequence; try { runInAction(() => { From 12743b5b046da958081d3f0d435f90774988c9fc Mon Sep 17 00:00:00 2001 From: vamsi krishna Date: Wed, 20 Nov 2024 19:32:08 +0530 Subject: [PATCH 2/7] fixed lint errors --- .../workspace/sidebar/favorites/favorite-folder.tsx | 12 ++++++------ .../sidebar/favorites/favorite-items/root.tsx | 13 ++++++------- .../workspace/sidebar/favorites/favorites-menu.tsx | 4 ++-- 3 files changed, 14 insertions(+), 15 deletions(-) diff --git a/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx b/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx index 0d3b0892780..51edaa556ad 100644 --- a/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx +++ b/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx @@ -3,15 +3,16 @@ import { useEffect, useRef, useState } from "react"; import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine"; import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"; -import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview"; import { pointerOutsideOfPreview } from "@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview"; +import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview"; import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge"; +import orderBy from "lodash/orderBy"; import uniqBy from "lodash/uniqBy"; import { useParams } from "next/navigation"; +import { createRoot } from "react-dom/client"; import { PenSquare, Star, MoreHorizontal, ChevronRight, GripVertical } from "lucide-react"; import { Disclosure, Transition } from "@headlessui/react"; -import { createRoot } from "react-dom/client"; // plane helpers import { useOutsideClickDetector } from "@plane/helpers"; @@ -28,7 +29,6 @@ import { usePlatformOS } from "@/hooks/use-platform-os"; import { FavoriteRoot } from "./favorite-items"; import { getDestinationStateSequence } from "./favorites.helpers"; import { NewFavoriteFolder } from "./new-fav-folder"; -import { orderBy } from "lodash"; type Props = { isLastChild: boolean; @@ -57,7 +57,7 @@ export const FavoriteFolder: React.FC = (props) => { const actionSectionRef = useRef(null); const elementRef = useRef(null); - !favorite.children && getGroupedFavorites(workspaceSlug.toString(), favorite.id); + if(!favorite.children) getGroupedFavorites(workspaceSlug.toString(), favorite.id); const handleMoveToFolder = (source: string, destination: string) => { moveFavoriteToFolder(workspaceSlug.toString(), source, { @@ -137,7 +137,7 @@ export const FavoriteFolder: React.FC = (props) => { setIsDraggedOver(true); setIsDragging(true); }; - source.data.is_folder && setClosestEdge(extractClosestEdge(self.data)); + if(source.data.is_folder) setClosestEdge(extractClosestEdge(self.data)); }, onDragLeave: () => { setIsDragging(false); @@ -152,7 +152,7 @@ export const FavoriteFolder: React.FC = (props) => { setIsDraggedOver(false); const sourceId = source?.data?.id as string | undefined; const destinationId = self?.data?.id as string | undefined; - + if (source.data.is_folder) return; if (sourceId === destinationId) return; if (!sourceId || !destinationId) return; diff --git a/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx b/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx index 9080fa13876..0fb8280b57f 100644 --- a/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx +++ b/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx @@ -3,15 +3,17 @@ import React, { FC, useEffect, useRef, useState } from "react"; import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine"; import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"; -import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge"; -import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview"; import { pointerOutsideOfPreview } from "@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview"; +import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview"; +import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge"; import { observer } from "mobx-react"; // plane helpers +import { createRoot } from "react-dom/client"; import { useOutsideClickDetector } from "@plane/helpers"; // ui import { IFavorite } from "@plane/types"; // components +import { DropIndicator } from "@plane/ui"; import { FavoriteItemDragHandle, FavoriteItemQuickAction, @@ -22,8 +24,6 @@ import { import { useAppTheme } from "@/hooks/store"; import { useFavoriteItemDetails } from "@/hooks/use-favorite-item-details"; -import { createRoot } from "react-dom/client"; -import { DropIndicator } from "@plane/ui"; //constants import { getDestinationStateSequence } from "../favorites.helpers"; @@ -138,13 +138,12 @@ export const FavoriteRoot: FC = observer((props) => { setIsDraggedOver(false); const sourceId = source.data?.id as string | undefined; const destinationType = self.data?.type as string | undefined; - const sourceType = source.data?.type as string | undefined; - + if(!sourceId) return; if(destinationType === 'NON_PARENT'){ handleRemoveFromFavoritesFolder(sourceId) - } + } }, }) ); diff --git a/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx b/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx index 2dc442e33e8..fedaf24322b 100644 --- a/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx +++ b/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx @@ -102,7 +102,7 @@ export const SidebarFavoritesMenu = observer(() => { message: "Failed to move folder.", }); }); - } + } useEffect(() => { if (sidebarCollapsed) toggleFavoriteMenu(true); }, [sidebarCollapsed, toggleFavoriteMenu]); @@ -158,7 +158,7 @@ export const SidebarFavoritesMenu = observer(() => { { setCreateNewFolder(true); - !isFavoriteMenuOpen && toggleFavoriteMenu(!isFavoriteMenuOpen); + if(!isFavoriteMenuOpen) toggleFavoriteMenu(!isFavoriteMenuOpen); }} className={cn("size-4 flex-shrink-0 text-custom-sidebar-text-400 transition-transform")} /> From 23b30d047978ea42ec2c90c78e0e432f5e9f1e8a Mon Sep 17 00:00:00 2001 From: vamsi krishna Date: Fri, 22 Nov 2024 15:31:52 +0530 Subject: [PATCH 3/7] added reorder --- .../sidebar/favorites/favorite-folder.tsx | 136 +++++++++++------- .../sidebar/favorites/favorite-items/root.tsx | 95 ++++++------ .../sidebar/favorites/favorites-menu.tsx | 20 +-- .../sidebar/favorites/favorites.helpers.ts | 72 +++++++++- .../workspace/sidebar/projects-list-item.tsx | 3 +- 5 files changed, 220 insertions(+), 106 deletions(-) diff --git a/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx b/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx index 51edaa556ad..6b49cd8aacb 100644 --- a/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx +++ b/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx @@ -5,10 +5,9 @@ import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine"; import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"; import { pointerOutsideOfPreview } from "@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview"; import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview"; +import { attachInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item"; -import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge"; import orderBy from "lodash/orderBy"; -import uniqBy from "lodash/uniqBy"; import { useParams } from "next/navigation"; import { createRoot } from "react-dom/client"; import { PenSquare, Star, MoreHorizontal, ChevronRight, GripVertical } from "lucide-react"; @@ -17,7 +16,7 @@ import { Disclosure, Transition } from "@headlessui/react"; // plane helpers import { useOutsideClickDetector } from "@plane/helpers"; // ui -import { IFavorite } from "@plane/types"; +import { IFavorite, InstructionType } from "@plane/types"; import { CustomMenu, Tooltip, DropIndicator, setToast, TOAST_TYPE, FavoriteFolderIcon, DragHandle } from "@plane/ui"; // helpers import { cn } from "@/helpers/common.helper"; @@ -27,7 +26,7 @@ import { useFavorite } from "@/hooks/store/use-favorite"; import { usePlatformOS } from "@/hooks/use-platform-os"; // constants import { FavoriteRoot } from "./favorite-items"; -import { getDestinationStateSequence } from "./favorites.helpers"; +import { getCanDrop, TargetData, getInstructionFromPayload, getDestinationStateSequence } from "./favorites.helpers"; import { NewFavoriteFolder } from "./new-fav-folder"; type Props = { @@ -39,7 +38,7 @@ type Props = { }; export const FavoriteFolder: React.FC = (props) => { - const { favorite, handleRemoveFromFavorites, handleRemoveFromFavoritesFolder, handleReorder } = props; + const { favorite, handleRemoveFromFavorites, handleRemoveFromFavoritesFolder, handleReorder, isLastChild } = props; // store hooks const { sidebarCollapsed: isSidebarCollapsed } = useAppTheme(); @@ -50,8 +49,7 @@ export const FavoriteFolder: React.FC = (props) => { const [isMenuActive, setIsMenuActive] = useState(false); const [isDragging, setIsDragging] = useState(false); const [folderToRename, setFolderToRename] = useState(null); - const [isDraggedOver, setIsDraggedOver] = useState(false); - const [closestEdge, setClosestEdge] = useState(null); + const [instruction, setInstruction] = useState(undefined); // refs const actionSectionRef = useRef(null); @@ -79,17 +77,18 @@ export const FavoriteFolder: React.FC = (props) => { }); }; + useEffect(() => { const element = elementRef.current; if (!element) return; - const initialData = { type: "PARENT", id: favorite.id, is_folder: favorite.is_folder }; + const initialData = { id: favorite.id, isGroup: true, isChild: false }; return combine( draggable({ element, getInitialData: () => initialData, - // onDragStart: () => setIsDragging(true), + onDragStart: () => setIsDragging(true), onGenerateDragPreview: ({ nativeSetDragImage }) =>{ setCustomNativeDragPreview({ getOffset: pointerOutsideOfPreview({ x: "0px", y: "0px" }), @@ -108,63 +107,93 @@ export const FavoriteFolder: React.FC = (props) => { nativeSetDragImage, }); }, - onDrop: (data) => { - setIsDraggedOver(false); - if (!data.location.current.dropTargets[0]) return; - const destinationData = data.location.current.dropTargets[0].data; - - if (favorite.id && destinationData) { - const edge = extractClosestEdge(destinationData) || undefined; - const sequence = Math.round( - getDestinationStateSequence(groupedFavorites, destinationData.id as string, edge) || 0 - ); - handleReorder(favorite.id,sequence); - } + onDrop: () => { + setIsDragging(false) }, // canDrag: () => isDraggable, }), dropTargetForElements({ element, - getData: ({ input, element }) => - attachClosestEdge(initialData, { + canDrop: ({ source }) => getCanDrop(source, favorite, false), + getData: ({ input, element }) =>{ + + const blockedStates: InstructionType[] = []; + if(!isLastChild){ + blockedStates.push('reorder-below'); + } + + return attachInstruction(initialData,{ input, element, - allowedEdges: ["top", "bottom"], - }), - onDragEnter: ({source,self}) => { - const sourceId = source?.data?.id as string; - const destinationId = self?.data?.id as string | undefined; - if (groupedFavorites[sourceId].parent !== destinationId) { - setIsDraggedOver(true); - setIsDragging(true); - }; - if(source.data.is_folder) setClosestEdge(extractClosestEdge(self.data)); + currentLevel: 0, + indentPerLevel: 0, + mode: isLastChild ? 'last-in-group' : 'standard', + block: blockedStates + }) }, - onDragLeave: () => { - setIsDragging(false); - setIsDraggedOver(false); - setClosestEdge(null); + onDrag: ({source, self, location}) => { + const instruction = getInstructionFromPayload(self,source, location); + setInstruction(instruction); }, - onDragStart: () => { - setIsDragging(true); + onDragLeave: () => { + setInstruction(undefined); }, - onDrop: ({ self, source }) => { - setIsDragging(false); - setIsDraggedOver(false); - const sourceId = source?.data?.id as string | undefined; - const destinationId = self?.data?.id as string | undefined; + onDrop: ({ source, location }) => { + setInstruction(undefined); + + const dropTargets = location?.current?.dropTargets ?? [] + if(!dropTargets || dropTargets.length <= 0) return; + const dropTarget = dropTargets.length > 1 ? dropTargets.find(target=>target?.data?.isChild) : dropTargets[0]; - if (source.data.is_folder) return; - if (sourceId === destinationId) return; - if (!sourceId || !destinationId) return; - if (groupedFavorites[sourceId].parent === destinationId) return; + const dropTargetData = dropTarget?.data as TargetData; - handleMoveToFolder(sourceId, destinationId); + if(!dropTarget || !dropTargetData) return; + const instruction = getInstructionFromPayload(dropTarget, source, location); + const parentId = instruction === 'make-child' ? dropTargetData.id : dropTargetData.parentId; + const droppedFavId = instruction !== "make-child" ? dropTargetData.id : undefined; + const sourceData = source.data as TargetData; + + if(droppedFavId && sourceData.id){ + if(!!parentId) return; // skip if reorder is inside folder + const destinationSequence = getDestinationStateSequence(groupedFavorites,droppedFavId,instruction) + handleReorder(sourceData.id,destinationSequence || 0) + } + + if(!parentId && !droppedFavId) return + if(sourceData.isGroup) return + if(sourceData.parentId === parentId) return + + if(!parentId && sourceData.isChild){ + handleRemoveFromFavoritesFolder(sourceData.id) + return + } + + if(parentId){ + handleMoveToFolder(sourceData.id,parentId) + } + + + // if(parentId) + // handleMoveToFolder(sourceData.id,parentId); + // else + // handleRemoveFromFavoritesFolder(sourceData.id) + + // setIsDragging(false); + // const sourceId = source?.data?.id as string | undefined; + // const destinationId = self?.data?.id as string | undefined; + + // if (source.data.is_folder) return; + // if (sourceId === destinationId) return; + // if (!sourceId || !destinationId) return; + // if (groupedFavorites[sourceId].parent === destinationId) return; + + // handleMoveToFolder(sourceId, destinationId); }, }) ); // eslint-disable-next-line react-hooks/exhaustive-deps }, [elementRef.current, isDragging, favorite.id, handleMoveToFolder]); + useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false)); return folderToRename ? ( @@ -182,10 +211,11 @@ export const FavoriteFolder: React.FC = (props) => { // id={`sidebar-${projectId}-${projectListType}`} className={cn("relative", { "bg-custom-sidebar-background-80 opacity-60": isDragging, + "border-[2px] border-custom-primary-100" : instruction === 'make-child' })} > {/* draggable drop top indicator */} - +
= (props) => { "px-2": !isSidebarCollapsed, })} > - {orderBy(uniqBy(favorite.children, "id"),'sequence','desc').map((child) => ( + {orderBy(favorite.children,'sequence','desc').map((child,index) => ( = (props) => { )} {/* draggable drop bottom indicator */} - {" "} + { isLastChild && }
)} diff --git a/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx b/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx index 0fb8280b57f..2acc38139c5 100644 --- a/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx +++ b/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx @@ -5,13 +5,14 @@ import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine"; import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"; import { pointerOutsideOfPreview } from "@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview"; import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview"; -import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge"; +import { attachInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item"; + import { observer } from "mobx-react"; // plane helpers import { createRoot } from "react-dom/client"; import { useOutsideClickDetector } from "@plane/helpers"; // ui -import { IFavorite } from "@plane/types"; +import { IFavorite, InstructionType } from "@plane/types"; // components import { DropIndicator } from "@plane/ui"; import { @@ -23,11 +24,13 @@ import { // hooks import { useAppTheme } from "@/hooks/store"; import { useFavoriteItemDetails } from "@/hooks/use-favorite-item-details"; +//helpers +import { getCanDrop, TargetData , getInstructionFromPayload, getDestinationStateSequence} from "../favorites.helpers"; -//constants -import { getDestinationStateSequence } from "../favorites.helpers"; type Props = { + isLastChild: boolean; + parentId: string | undefined; workspaceSlug: string; favorite: IFavorite; favoriteMap: Record; @@ -39,6 +42,8 @@ type Props = { export const FavoriteRoot: FC = observer((props) => { // props const { + isLastChild, + parentId, workspaceSlug, favorite, favoriteMap, @@ -52,8 +57,7 @@ export const FavoriteRoot: FC = observer((props) => { //state const [isDragging, setIsDragging] = useState(false); const [isMenuActive, setIsMenuActive] = useState(false); - const [closestEdge, setClosestEdge] = useState(null); - const [isDraggedOver, setIsDraggedOver] = useState(false); + const [instruction, setInstruction] = useState(undefined); //ref const elementRef = useRef(null); @@ -67,8 +71,7 @@ export const FavoriteRoot: FC = observer((props) => { const element = elementRef.current; if (!element) return; - const initialData = { id: favorite.id, type: favorite.parent ? 'CHILD' : 'NON_PARENT' }; - + const initialData = { id: favorite.id, isGroup: false, isChild: !!parentId, parentId }; return combine( draggable({ element, @@ -77,19 +80,8 @@ export const FavoriteRoot: FC = observer((props) => { onDragStart: () => { setIsDragging(true); }, - onDrop: (data) => { - setIsDraggedOver(false); + onDrop: () => { setIsDragging(false); - if (!data.location.current.dropTargets[0]) return; - const destinationData = data.location.current.dropTargets[0].data; - - if (favorite.id && destinationData) { - const edge = extractClosestEdge(destinationData) || undefined; - const sequence = Math.round( - getDestinationStateSequence(favoriteMap, destinationData.id as string, edge) || 0 - ); - handleReorder(favorite.id, sequence); - } }, onGenerateDragPreview: ({ nativeSetDragImage }) => { setCustomNativeDragPreview({ @@ -114,35 +106,56 @@ export const FavoriteRoot: FC = observer((props) => { }), dropTargetForElements({ element, + canDrop: ({ source }) => getCanDrop(source, favorite, !!parentId), onDragStart: () => { setIsDragging(true); }, - getData: ({ input, element }) => - attachClosestEdge(initialData, { + getData: ({ input, element }) =>{ + + const blockedStates: InstructionType[] = ['make-child']; + if(!isLastChild){ + blockedStates.push('reorder-below'); + } + + return attachInstruction(initialData,{ input, element, - allowedEdges: ["top", "bottom"], - }), - onDragEnter: (args) => { - setIsDragging(true); - setIsDraggedOver(true); - setClosestEdge(extractClosestEdge(args.self.data)); + currentLevel: 1, + indentPerLevel: 0, + mode: isLastChild ? 'last-in-group' : 'standard', + block: blockedStates + }) + }, + onDrag: ({ self, source, location }) => { + const instruction = getInstructionFromPayload(self, source, location); + setInstruction(instruction); }, onDragLeave: () => { - setIsDragging(false); - setIsDraggedOver(false); - setClosestEdge(null); + setInstruction(undefined); }, - onDrop: ({ self, source }) => { - setIsDragging(false); - setIsDraggedOver(false); - const sourceId = source.data?.id as string | undefined; - const destinationType = self.data?.type as string | undefined; + onDrop: ({ source, location }) => { + setInstruction(undefined); + const dropTargets = location?.current?.dropTargets ?? [] + if(!dropTargets || dropTargets.length <= 0) return; + + const dropTarget = dropTargets.length > 1 ? dropTargets.find(target=>target?.data?.isChild) : dropTargets[0]; - if(!sourceId) return; + const dropTargetData = dropTarget?.data as TargetData; - if(destinationType === 'NON_PARENT'){ - handleRemoveFromFavoritesFolder(sourceId) + if(!dropTarget || !dropTargetData) return; + + const instruction = getInstructionFromPayload(dropTarget, source, location); + const parentId = instruction === 'make-child' ? dropTargetData.id : dropTargetData.parentId; + const droppedFavId = instruction !== "make-child" ? dropTargetData.id : undefined; + const sourceData = source.data as TargetData; + + if(droppedFavId && sourceData.id){ + const destinationSequence = getDestinationStateSequence(favoriteMap,droppedFavId,instruction) + handleReorder(sourceData.id,destinationSequence || 0) + } + + if(!parentId && sourceData.isChild){ + handleRemoveFromFavoritesFolder(sourceData.id) } }, }) @@ -154,8 +167,8 @@ export const FavoriteRoot: FC = observer((props) => { return ( <> + - {!sidebarCollapsed && } {!sidebarCollapsed && ( @@ -167,8 +180,8 @@ export const FavoriteRoot: FC = observer((props) => { handleRemoveFromFavorites={handleRemoveFromFavorites} /> )} - + { isLastChild && } ); }); diff --git a/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx b/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx index fedaf24322b..14d0b7ee54e 100644 --- a/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx +++ b/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx @@ -89,17 +89,17 @@ export const SidebarFavoritesMenu = observer(() => { sequence: sequence }) .then(() => { - // setToast({ - // type: TOAST_TYPE.SUCCESS, - // title: "Success!", - // message: "Folder moved successfully.", - // }); + setToast({ + type: TOAST_TYPE.SUCCESS, + title: "Success!", + message: "Reordered successfully.", + }); }) .catch(() => { setToast({ type: TOAST_TYPE.ERROR, title: "Error!", - message: "Failed to move folder.", + message: "Failed reorder", }); }); } @@ -129,7 +129,7 @@ export const SidebarFavoritesMenu = observer(() => { const sourceId = source?.data?.id as string | undefined; console.log({ sourceId }); if (!sourceId || !groupedFavorites[sourceId].parent) return; - handleRemoveFromFavoritesFolder(sourceId); + // handleRemoveFromFavoritesFolder(sourceId); }, }) ); @@ -199,7 +199,7 @@ export const SidebarFavoritesMenu = observer(() => { ) : ( orderBy(Object.values(groupedFavorites), "sequence", "desc") .filter((fav) => !fav.parent) - .map((fav, index) => ( + .map((fav, index, {length}) => ( { {fav.is_folder ? ( { , @@ -17,14 +25,14 @@ export const getDestinationStateSequence = ( if (!destinationStateSequence) return defaultSequence; - if (edge === "top") { + if (edge === "reorder-above") { const prevStateSequence = favoriteMap[favoriteIds[destinationStateIndex - 1]]?.sequence || undefined; if (prevStateSequence === undefined) { return destinationStateSequence + defaultSequence; } return (destinationStateSequence + prevStateSequence) / 2; - } else if (edge === "bottom") { + } else if (edge === "reorder-below") { const nextStateSequence = favoriteMap[favoriteIds[destinationStateIndex + 1]]?.sequence || undefined; if (nextStateSequence === undefined) { @@ -33,3 +41,61 @@ export const getDestinationStateSequence = ( return (destinationStateSequence + nextStateSequence) / 2; } }; + +/** + * 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 + * @param source the dragging favorite data that is being dragged on the dropTarget + * @param location location includes the data of all the dropTargets the source is being dragged on + * @returns Instruction for dropTarget + */ +export const getInstructionFromPayload = ( + dropTarget: TDropTarget, + source: TDropTarget, + location: IPragmaticPayloadLocation +): InstructionType | undefined => { + const dropTargetData = dropTarget?.data as TargetData; + const sourceData = source?.data as TargetData; + const allDropTargets = location?.current?.dropTargets; + + // if all the dropTargets are greater than 1 meaning the source is being dragged on a group and its child at the same time + // and also if the dropTarget in question is also a group then, it should be a child of the current Droptarget + if (allDropTargets?.length > 1 && dropTargetData?.isGroup) return "make-child"; + + if (!dropTargetData || !sourceData) return undefined; + + let instruction = extractInstruction(dropTargetData)?.type; + + // If the instruction is blocked then set an instruction based on if dropTarget it is a child or not + if (instruction === "instruction-blocked") { + instruction = dropTargetData.isChild ? "reorder-above" : "make-child"; + } + + // if source that is being dragged is a group. A group cannon be a child of any other favorite, + // hence if current instruction is to be a child of dropTarget then reorder-above instead + if (instruction === "make-child" && sourceData.isGroup) instruction = "reorder-above"; + + return instruction; +}; + +/** + * This provides a boolean to indicate if the favorite can be dropped onto the droptarget + * @param source + * @param favorite + * @param isCurrentChild if the dropTarget is a child + * @returns + */ +export const getCanDrop = (source: TDropTarget, favorite: IFavorite | undefined, isCurrentChild: boolean) => { + const sourceData = source?.data; + + if (!sourceData) return false; + + // a favorite cannot be dropped on to itself + if (sourceData.id === favorite?.id ) return false; + + + // if current dropTarget is a child and the favorite being dropped is a group then don't enable drop + if (isCurrentChild && sourceData.isGroup) return false; + + return true; +}; \ No newline at end of file diff --git a/web/core/components/workspace/sidebar/projects-list-item.tsx b/web/core/components/workspace/sidebar/projects-list-item.tsx index faa85a82607..644994080f1 100644 --- a/web/core/components/workspace/sidebar/projects-list-item.tsx +++ b/web/core/components/workspace/sidebar/projects-list-item.tsx @@ -298,12 +298,13 @@ export const SidebarProjectsListItem: React.FC = observer((props) => { <> setPublishModal(false)} /> setLeaveProjectModal(false)} /> - +
Date: Fri, 22 Nov 2024 21:31:12 +0530 Subject: [PATCH 4/7] fixed reorder inside folder --- .../sidebar/favorites/favorite-folder.tsx | 39 +++++++++---------- .../sidebar/favorites/favorite-items/root.tsx | 2 +- .../sidebar/favorites/favorites-menu.tsx | 20 +++++----- .../sidebar/favorites/favorites.helpers.ts | 24 +++++++++--- 4 files changed, 47 insertions(+), 38 deletions(-) diff --git a/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx b/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx index 6b49cd8aacb..55452fe7767 100644 --- a/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx +++ b/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx @@ -38,7 +38,7 @@ type Props = { }; export const FavoriteFolder: React.FC = (props) => { - const { favorite, handleRemoveFromFavorites, handleRemoveFromFavoritesFolder, handleReorder, isLastChild } = props; + const { favorite, handleRemoveFromFavorites, handleRemoveFromFavoritesFolder, handleReorder, isLastChild} = props; // store hooks const { sidebarCollapsed: isSidebarCollapsed } = useAppTheme(); @@ -62,11 +62,11 @@ export const FavoriteFolder: React.FC = (props) => { parent: destination, }) .then(() => { - setToast({ - type: TOAST_TYPE.SUCCESS, - title: "Success!", - message: "Favorite moved successfully.", - }); + // setToast({ + // type: TOAST_TYPE.SUCCESS, + // title: "Success!", + // message: "Favorite moved successfully.", + // }); }) .catch(() => { setToast({ @@ -152,25 +152,22 @@ export const FavoriteFolder: React.FC = (props) => { const droppedFavId = instruction !== "make-child" ? dropTargetData.id : undefined; const sourceData = source.data as TargetData; - if(droppedFavId && sourceData.id){ - if(!!parentId) return; // skip if reorder is inside folder + if(!sourceData.id) return + if(parentId){ + if(parentId !== sourceData.parentId){ + handleMoveToFolder(sourceData.id,parentId) + } + } else { + if(sourceData.isChild){ + handleRemoveFromFavoritesFolder(sourceData.id) + } + } + if(droppedFavId){ + if(instruction === 'make-child') return; /** Reorder iniside the folder skipped here. It is handled in root element */ const destinationSequence = getDestinationStateSequence(groupedFavorites,droppedFavId,instruction) handleReorder(sourceData.id,destinationSequence || 0) } - - if(!parentId && !droppedFavId) return - if(sourceData.isGroup) return - if(sourceData.parentId === parentId) return - - if(!parentId && sourceData.isChild){ - handleRemoveFromFavoritesFolder(sourceData.id) - return - } - if(parentId){ - handleMoveToFolder(sourceData.id,parentId) - } - // if(parentId) // handleMoveToFolder(sourceData.id,parentId); diff --git a/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx b/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx index 2acc38139c5..bfed7668203 100644 --- a/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx +++ b/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx @@ -148,7 +148,7 @@ export const FavoriteRoot: FC = observer((props) => { const parentId = instruction === 'make-child' ? dropTargetData.id : dropTargetData.parentId; const droppedFavId = instruction !== "make-child" ? dropTargetData.id : undefined; const sourceData = source.data as TargetData; - + if(droppedFavId && sourceData.id){ const destinationSequence = getDestinationStateSequence(favoriteMap,droppedFavId,instruction) handleReorder(sourceData.id,destinationSequence || 0) diff --git a/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx b/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx index 14d0b7ee54e..c9253a67708 100644 --- a/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx +++ b/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx @@ -69,11 +69,11 @@ export const SidebarFavoritesMenu = observer(() => { parent: null, }) .then(() => { - setToast({ - type: TOAST_TYPE.SUCCESS, - title: "Success!", - message: "Favorite moved successfully.", - }); + // setToast({ + // type: TOAST_TYPE.SUCCESS, + // title: "Success!", + // message: "Favorite moved successfully.", + // }); }) .catch(() => { setToast({ @@ -89,11 +89,11 @@ export const SidebarFavoritesMenu = observer(() => { sequence: sequence }) .then(() => { - setToast({ - type: TOAST_TYPE.SUCCESS, - title: "Success!", - message: "Reordered successfully.", - }); + // setToast({ + // type: TOAST_TYPE.SUCCESS, + // title: "Success!", + // message: "Reordered successfully.", + // }); }) .catch(() => { setToast({ diff --git a/web/core/components/workspace/sidebar/favorites/favorites.helpers.ts b/web/core/components/workspace/sidebar/favorites/favorites.helpers.ts index cbf95fd02fe..cd1c379a2cc 100644 --- a/web/core/components/workspace/sidebar/favorites/favorites.helpers.ts +++ b/web/core/components/workspace/sidebar/favorites/favorites.helpers.ts @@ -1,6 +1,7 @@ import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item"; import orderBy from "lodash/orderBy"; import { IFavorite, InstructionType, IPragmaticPayloadLocation, TDropTarget } from "@plane/types"; +import { result } from "lodash"; export type TargetData = { id: string; @@ -17,6 +18,7 @@ export const getDestinationStateSequence = ( 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); @@ -25,21 +27,31 @@ export const getDestinationStateSequence = ( if (!destinationStateSequence) return defaultSequence; + + let resultSequence = defaultSequence; if (edge === "reorder-above") { const prevStateSequence = favoriteMap[favoriteIds[destinationStateIndex - 1]]?.sequence || undefined; if (prevStateSequence === undefined) { - return destinationStateSequence + defaultSequence; - } - return (destinationStateSequence + prevStateSequence) / 2; - } else if (edge === "reorder-below") { + resultSequence = destinationStateSequence + defaultSequence; + }else { + resultSequence = (destinationStateSequence + prevStateSequence) / 2 + } + } else if (edge === "reorder-below") { const nextStateSequence = favoriteMap[favoriteIds[destinationStateIndex + 1]]?.sequence || undefined; if (nextStateSequence === undefined) { - return destinationStateSequence - defaultSequence; + resultSequence = destinationStateSequence - defaultSequence; + } else { + resultSequence = (destinationStateSequence + nextStateSequence) / 2; } - return (destinationStateSequence + nextStateSequence) / 2; } + + console.log({resultSequence}); + + resultSequence = Math.round(resultSequence) + + return resultSequence; }; /** From b2a58a382f6bfbf7f102082e3ff47c2bc4dfa6ca Mon Sep 17 00:00:00 2001 From: vamsi krishna Date: Sat, 23 Nov 2024 00:10:42 +0530 Subject: [PATCH 5/7] fixed lint issues --- .../workspace/sidebar/favorites/favorite-folder.tsx | 4 ++-- .../workspace/sidebar/favorites/favorite-items/root.tsx | 4 ++-- .../workspace/sidebar/favorites/favorites.helpers.ts | 5 ++--- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx b/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx index 55452fe7767..f50410db491 100644 --- a/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx +++ b/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx @@ -167,11 +167,11 @@ export const FavoriteFolder: React.FC = (props) => { const destinationSequence = getDestinationStateSequence(groupedFavorites,droppedFavId,instruction) handleReorder(sourceData.id,destinationSequence || 0) } - + // if(parentId) // handleMoveToFolder(sourceData.id,parentId); - // else + // else // handleRemoveFromFavoritesFolder(sourceData.id) // setIsDragging(false); diff --git a/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx b/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx index bfed7668203..07083cde52c 100644 --- a/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx +++ b/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx @@ -148,12 +148,12 @@ export const FavoriteRoot: FC = observer((props) => { const parentId = instruction === 'make-child' ? dropTargetData.id : dropTargetData.parentId; const droppedFavId = instruction !== "make-child" ? dropTargetData.id : undefined; const sourceData = source.data as TargetData; - + if(droppedFavId && sourceData.id){ const destinationSequence = getDestinationStateSequence(favoriteMap,droppedFavId,instruction) handleReorder(sourceData.id,destinationSequence || 0) } - + if(!parentId && sourceData.isChild){ handleRemoveFromFavoritesFolder(sourceData.id) } diff --git a/web/core/components/workspace/sidebar/favorites/favorites.helpers.ts b/web/core/components/workspace/sidebar/favorites/favorites.helpers.ts index cd1c379a2cc..06729f29872 100644 --- a/web/core/components/workspace/sidebar/favorites/favorites.helpers.ts +++ b/web/core/components/workspace/sidebar/favorites/favorites.helpers.ts @@ -1,7 +1,6 @@ import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item"; import orderBy from "lodash/orderBy"; import { IFavorite, InstructionType, IPragmaticPayloadLocation, TDropTarget } from "@plane/types"; -import { result } from "lodash"; export type TargetData = { id: string; @@ -36,8 +35,8 @@ export const getDestinationStateSequence = ( resultSequence = destinationStateSequence + defaultSequence; }else { resultSequence = (destinationStateSequence + prevStateSequence) / 2 - } - } else if (edge === "reorder-below") { + } + } else if (edge === "reorder-below") { const nextStateSequence = favoriteMap[favoriteIds[destinationStateIndex + 1]]?.sequence || undefined; if (nextStateSequence === undefined) { From 1b124c61e59d991f1bb4a2bcebbda4ee924cad35 Mon Sep 17 00:00:00 2001 From: vamsi krishna Date: Sat, 23 Nov 2024 00:43:32 +0530 Subject: [PATCH 6/7] memoized reorder --- .../sidebar/favorites/favorite-folder.tsx | 2 +- .../sidebar/favorites/favorites-menu.tsx | 34 +++++++++---------- 2 files changed, 17 insertions(+), 19 deletions(-) diff --git a/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx b/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx index f50410db491..2fc59e523fc 100644 --- a/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx +++ b/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx @@ -188,7 +188,7 @@ export const FavoriteFolder: React.FC = (props) => { }) ); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [elementRef.current, isDragging, favorite.id, handleMoveToFolder]); + }, [isDragging, favorite.id, handleMoveToFolder]); useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false)); diff --git a/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx b/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx index c9253a67708..c8e76b25482 100644 --- a/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx +++ b/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx @@ -1,6 +1,6 @@ "use client"; -import React, { useEffect, useRef, useState } from "react"; +import React, { useCallback, useEffect, useRef, useState } from "react"; import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine"; import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"; import orderBy from "lodash/orderBy"; @@ -84,25 +84,23 @@ export const SidebarFavoritesMenu = observer(() => { }); }; - const handleReorder = (favoriteId: string, sequence: number) => { - reOrderFavorite(workspaceSlug.toString(), favoriteId, { - sequence: sequence - }) - .then(() => { - // setToast({ - // type: TOAST_TYPE.SUCCESS, - // title: "Success!", - // message: "Reordered successfully.", - // }); + const handleReorder = useCallback( + (favoriteId: string, sequence: number) => { + reOrderFavorite(workspaceSlug.toString(), favoriteId, { + sequence: sequence, }) - .catch(() => { - setToast({ - type: TOAST_TYPE.ERROR, - title: "Error!", - message: "Failed reorder", + .catch(() => { + setToast({ + type: TOAST_TYPE.ERROR, + title: "Error!", + message: "Failed reorder favorite", + }); }); - }); - } + }, + [workspaceSlug,reOrderFavorite] + ); + + useEffect(() => { if (sidebarCollapsed) toggleFavoriteMenu(true); }, [sidebarCollapsed, toggleFavoriteMenu]); From d1cc0e0f8e53ccf3e560617370f9ab4dfaf4031b Mon Sep 17 00:00:00 2001 From: vamsi krishna Date: Mon, 25 Nov 2024 16:02:21 +0530 Subject: [PATCH 7/7] removed unnecessary comments --- .../sidebar/favorites/favorite-folder.tsx | 24 ------------------- .../sidebar/favorites/favorites-menu.tsx | 8 ------- 2 files changed, 32 deletions(-) diff --git a/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx b/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx index 2fc59e523fc..c5a3bc310f0 100644 --- a/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx +++ b/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx @@ -61,13 +61,6 @@ export const FavoriteFolder: React.FC = (props) => { moveFavoriteToFolder(workspaceSlug.toString(), source, { parent: destination, }) - .then(() => { - // setToast({ - // type: TOAST_TYPE.SUCCESS, - // title: "Success!", - // message: "Favorite moved successfully.", - // }); - }) .catch(() => { setToast({ type: TOAST_TYPE.ERROR, @@ -167,23 +160,6 @@ export const FavoriteFolder: React.FC = (props) => { const destinationSequence = getDestinationStateSequence(groupedFavorites,droppedFavId,instruction) handleReorder(sourceData.id,destinationSequence || 0) } - - - // if(parentId) - // handleMoveToFolder(sourceData.id,parentId); - // else - // handleRemoveFromFavoritesFolder(sourceData.id) - - // setIsDragging(false); - // const sourceId = source?.data?.id as string | undefined; - // const destinationId = self?.data?.id as string | undefined; - - // if (source.data.is_folder) return; - // if (sourceId === destinationId) return; - // if (!sourceId || !destinationId) return; - // if (groupedFavorites[sourceId].parent === destinationId) return; - - // handleMoveToFolder(sourceId, destinationId); }, }) ); diff --git a/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx b/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx index c8e76b25482..5a813693b33 100644 --- a/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx +++ b/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx @@ -68,13 +68,6 @@ export const SidebarFavoritesMenu = observer(() => { id: favoriteId, parent: null, }) - .then(() => { - // setToast({ - // type: TOAST_TYPE.SUCCESS, - // title: "Success!", - // message: "Favorite moved successfully.", - // }); - }) .catch(() => { setToast({ type: TOAST_TYPE.ERROR, @@ -127,7 +120,6 @@ export const SidebarFavoritesMenu = observer(() => { const sourceId = source?.data?.id as string | undefined; console.log({ sourceId }); if (!sourceId || !groupedFavorites[sourceId].parent) return; - // handleRemoveFromFavoritesFolder(sourceId); }, }) );