From 28fbc7a6770fcda5172906a633ac1fb0488f0864 Mon Sep 17 00:00:00 2001
From: Stephen Cui <229063661@qq.com>
Date: Fri, 15 Jul 2022 14:56:06 +0800
Subject: [PATCH] fix: support story board adjust orders, issue #1037
---
.../app/pages/StoryBoardPage/Editor/index.tsx | 16 +++++++++++
.../pages/StoryBoardPage/Preview/Preview.tsx | 11 +++++---
.../components/PageThumbnailList.tsx | 23 +++++++++++++---
.../components/ThumbnailItem.tsx | 6 ++++-
.../app/pages/StoryBoardPage/slice/thunks.ts | 27 +++++++++++++++++++
5 files changed, 75 insertions(+), 8 deletions(-)
diff --git a/frontend/src/app/pages/StoryBoardPage/Editor/index.tsx b/frontend/src/app/pages/StoryBoardPage/Editor/index.tsx
index dd4787487..ef2e1b49b 100644
--- 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(() => {
>
diff --git a/frontend/src/app/pages/StoryBoardPage/Preview/Preview.tsx b/frontend/src/app/pages/StoryBoardPage/Preview/Preview.tsx
index 72a4b6710..f651904c8 100644
--- 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<{
>
diff --git a/frontend/src/app/pages/StoryBoardPage/components/PageThumbnailList.tsx b/frontend/src/app/pages/StoryBoardPage/components/PageThumbnailList.tsx
index a1c81e635..0fcbf6a9c 100644
--- 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 = ({
sortedPages,
+ canDrag,
onPageClick,
onDeletePages,
+ onMoveCard,
}) => {
const { storyId: stroyBoardId } = useContext(StoryContext);
const pageInfoMap = useSelector((state: { storyBoard: StoryBoardState }) =>
@@ -72,6 +76,10 @@ const PageThumbnailList: React.FC = ({
}));
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 = ({
},
[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 = ({
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
index 55a9a3a20..a0bcc43e6 100644
--- 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 = ({
page,
index,
selected,
+ canDrag,
moveCard,
moveEnd,
}) => {
@@ -146,6 +147,9 @@ const ThumbnailItem: React.FC = ({
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
index 1249b19ff..f26b00bd4 100644
--- 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 },