fix: support story board adjust orders, issue running-elephant#1037

Cuiyansong · Jul 15, 2022 · 28fbc7a · 28fbc7a
1 parent 2cfe185
commit 28fbc7a
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 8 deletions.
diff --git a/frontend/src/app/pages/StoryBoardPage/Editor/index.tsx b/frontend/src/app/pages/StoryBoardPage/Editor/index.tsx
@@ -54,6 +54,7 @@ import {
   deleteStoryPage,
   getPageContentDetail,
   getStoryDetail,
+  updateStroyBoardPagesByMoveEvent,
 } from '../slice/thunks';
 import { StoryBoardState } from '../slice/types';
 import { StoryToolBar } from './StoryToolBar';
@@ -232,6 +233,19 @@ export const StoryEditor: React.FC<{}> = memo(() => {
     }
   }, [dispatch, histState, storyId, history]);
 
+  const handleMoveCard = useCallback(
+    async (dragId, dropId) => {
+      dispatch(
+        updateStroyBoardPagesByMoveEvent({
+          storyId,
+          sortedPages,
+          event: { dragId, dropId },
+        }),
+      );
+    },
+    [dispatch, sortedPages, storyId],
+  );
+
   useEffect(() => {
     addPages();
   }, [addPages]);
@@ -260,9 +274,11 @@ export const StoryEditor: React.FC<{}> = memo(() => {
           >
             <PageListWrapper>
               <PageThumbnailList
+                canDrag={true}
                 sortedPages={sortedPages}
                 onPageClick={onPageClick}
                 onDeletePages={onDeletePages}
+                onMoveCard={handleMoveCard}
               />
             </PageListWrapper>
             <Content>

diff --git a/frontend/src/app/pages/StoryBoardPage/Preview/Preview.tsx b/frontend/src/app/pages/StoryBoardPage/Preview/Preview.tsx
@@ -67,6 +67,11 @@ export const StoryPagePreview: React.FC<{
     return sortedPages;
   }, [pageMap]);
 
+  const currentPage = useMemo(() => {
+    const currentPage = sortedPages[currentPageIndex];
+    return currentPage;
+  }, [currentPageIndex, sortedPages]);
+
   const onPageClick = useCallback(
     (index: number, pageId: string, multiple: boolean) => {
       setCurrentPageIndex(index);
@@ -80,10 +85,6 @@ export const StoryPagePreview: React.FC<{
     },
     [dispatch, storyId],
   );
-  const currentPage = useMemo(() => {
-    const currentPage = sortedPages[currentPageIndex];
-    return currentPage;
-  }, [currentPageIndex, sortedPages]);
 
   const toggleEdit = useCallback(() => {
     history.push(`/organizations/${orgId}/vizs/storyEditor/${storyId}`);
@@ -92,6 +93,7 @@ export const StoryPagePreview: React.FC<{
   const playStory = useCallback(() => {
     window.open(`storyPlayer/${storyId}`, '_blank');
   }, [storyId]);
+
   const { publishStory } = usePublishBoard(
     storyId,
     'STORYBOARD',
@@ -174,6 +176,7 @@ export const StoryPagePreview: React.FC<{
           >
             <PageListWrapper>
               <PageThumbnailList
+                canDrag={false}
                 sortedPages={sortedPages}
                 onPageClick={onPageClick}
               />

diff --git a/frontend/src/app/pages/StoryBoardPage/components/PageThumbnailList.tsx b/frontend/src/app/pages/StoryBoardPage/components/PageThumbnailList.tsx
@@ -40,13 +40,17 @@ export type NameCard = {
 };
 export interface PageThumbnailListProps {
   sortedPages: StoryPage[];
+  canDrag: boolean;
   onPageClick: (index: number, pageId: string, multiple: boolean) => void;
   onDeletePages?: (ids: string[]) => void;
+  onMoveCard?: (dragId, dropId) => void;
 }
 const PageThumbnailList: React.FC<PageThumbnailListProps> = ({
   sortedPages,
+  canDrag,
   onPageClick,
   onDeletePages,
+  onMoveCard,
 }) => {
   const { storyId: stroyBoardId } = useContext(StoryContext);
   const pageInfoMap = useSelector((state: { storyBoard: StoryBoardState }) =>
@@ -72,6 +76,10 @@ const PageThumbnailList: React.FC<PageThumbnailListProps> = ({
     }));
     setCards(card);
   }, [pageInfoMap, sortedPages, stroyBoardId]);
+  const [cardMoveEvent, setCardMoveEvent] = useState<{
+    dragId?: string;
+    dropId?: string;
+  }>({});
 
   useEffect(() => {
     const deleteSlides = (e: KeyboardEvent) => {
@@ -97,9 +105,17 @@ const PageThumbnailList: React.FC<PageThumbnailListProps> = ({
     },
     [onPageClick],
   );
-  const moveCard = useCallback((dragPageId: string, hoverPageId: string) => {},
-  []);
-  const moveEnd = useCallback(() => {}, []);
+
+  const moveCard = useCallback((dragPageId: string, hoverPageId: string) => {
+    setCardMoveEvent({
+      dragId: dragPageId,
+      dropId: hoverPageId,
+    });
+  }, []);
+
+  const moveEnd = useCallback(() => {
+    onMoveCard?.(cardMoveEvent?.dragId, cardMoveEvent?.dropId);
+  }, [cardMoveEvent, onMoveCard]);
 
   return (
     <>
@@ -110,6 +126,7 @@ const PageThumbnailList: React.FC<PageThumbnailListProps> = ({
             index={index}
             selected={page.selected}
             page={page}
+            canDrag={canDrag}
             moveCard={moveCard}
             moveEnd={moveEnd}
           />

diff --git a/frontend/src/app/pages/StoryBoardPage/components/ThumbnailItem.tsx b/frontend/src/app/pages/StoryBoardPage/components/ThumbnailItem.tsx
@@ -41,7 +41,7 @@ export interface IProps {
   page: NameCard;
   index: number;
   selected: boolean;
-  className?: string;
+  canDrag: boolean;
   moveCard: (dragPageId: string, hoverPageId: string) => void;
   moveEnd: () => void;
 }
@@ -54,6 +54,7 @@ const ThumbnailItem: React.FC<IProps> = ({
   page,
   index,
   selected,
+  canDrag,
   moveCard,
   moveEnd,
 }) => {
@@ -146,6 +147,9 @@ const ThumbnailItem: React.FC<IProps> = ({
         selected: selected,
       };
     },
+    canDrag: () => {
+      return canDrag;
+    },
     collect: (monitor: any) => ({
       isDragging: monitor.isDragging(),
     }),

diff --git a/frontend/src/app/pages/StoryBoardPage/slice/thunks.ts b/frontend/src/app/pages/StoryBoardPage/slice/thunks.ts
@@ -21,7 +21,9 @@ import { migrateStoryPageConfig } from 'app/migration/StoryConfig/migrateStoryPa
 import { getBoardDetail } from 'app/pages/DashBoardPage/pages/Board/slice/thunk';
 import { selectVizs } from 'app/pages/MainPage/pages/VizPage/slice/selectors';
 import { ExecuteToken } from 'app/pages/SharePage/slice/types';
+import { updateBy } from 'app/utils/mutation';
 import { RootState } from 'types';
+import { isEmpty } from 'utils/object';
 import { request2 } from 'utils/request';
 import { storyActions } from '.';
 import { getInitStoryPageConfig } from '../utils';
@@ -182,6 +184,31 @@ export const updateStoryPage = createAsyncThunk<
     return null;
   },
 );
+export const updateStroyBoardPagesByMoveEvent = createAsyncThunk<
+  null,
+  { storyId: string; sortedPages: StoryPage[]; event: { dragId; dropId } },
+  { state: RootState }
+>(
+  'storyBoard/updateStroyBoardPagesByMoveEvent',
+  async ({ storyId, sortedPages, event }, { getState, dispatch }) => {
+    const dropPageIndex = sortedPages?.findIndex(p => p.id === event.dropId);
+    const dragPageIndex = sortedPages?.find(p => p.id === event.dragId);
+    if (dragPageIndex && dropPageIndex && dropPageIndex > -1) {
+      const newSortedPages = sortedPages.filter(p => p.id !== event?.dragId);
+      newSortedPages.splice(dropPageIndex, 0, dragPageIndex);
+
+      newSortedPages?.forEach((p, index) => {
+        if (!isEmpty(p.config.index)) {
+          const newPage = updateBy(p, draft => {
+            draft.config.index = index;
+          });
+          dispatch(updateStoryPage({ storyId, storyPage: newPage }));
+        }
+      });
+    }
+    return null;
+  },
+);
 export const updateStory = createAsyncThunk<
   null,
   { story: StoryBoard },