feat: Display the added page in the StoryPageAddModal

running-elephant · Oct 17, 2023 · 0faca75 · 0faca75
1 parent 72bee4d
commit 0faca75
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 73 deletions.
diff --git a/frontend/src/app/pages/StoryBoardPage/Editor/StoryToolBar.tsx b/frontend/src/app/pages/StoryBoardPage/Editor/StoryToolBar.tsx
@@ -32,56 +32,59 @@ import {
 import StoryPageAddModal from '../components/StoryPageAddModal';
 import { StoryContext } from '../contexts/StoryContext';
 import { addStoryPages } from '../slice/thunks';
+import { StoryPage } from '../slice/types';
 import { StoryPageSetting } from './StoryPageSetting';
 import { StorySetting } from './StorySetting';
 
-export const StoryToolBar: React.FC<{ onCloseEditor?: () => void }> = memo(
-  ({ onCloseEditor }) => {
-    const dispatch = useDispatch();
+export const StoryToolBar: React.FC<{
+  onCloseEditor?: () => void;
+  sortedPages: StoryPage[];
+}> = memo(({ onCloseEditor, sortedPages }) => {
+  const dispatch = useDispatch();
 
-    const closeEditor = useCallback(() => {
-      onCloseEditor?.();
-    }, [onCloseEditor]);
-    const { storyId, name } = useContext(StoryContext);
-    const [visible, setVisible] = useState(false);
-    const chartOptionsMock = useSelector(selectVizs);
-    const chartOptions = chartOptionsMock.filter(
-      item => item.relType === 'DASHBOARD',
-    );
+  const closeEditor = useCallback(() => {
+    onCloseEditor?.();
+  }, [onCloseEditor]);
+  const { storyId, name } = useContext(StoryContext);
+  const [visible, setVisible] = useState(false);
+  const chartOptionsMock = useSelector(selectVizs);
+  const chartOptions = chartOptionsMock.filter(
+    item => item.relType === 'DASHBOARD',
+  );
 
-    const onSelectedPages = useCallback(
-      (relIds: string[]) => {
-        dispatch(addStoryPages({ storyId, relIds }));
-        setVisible(false);
-      },
-      [storyId, dispatch],
-    );
-    return (
-      <Wrapper>
-        <LeftOutlined
-          onClick={closeEditor}
-          style={{ marginRight: '10px', fontSize: '1.2rem' }}
-        />
-        <Title>{name}</Title>
-        <AddButton
-          type="primary"
-          icon={<PlusOutlined />}
-          onClick={() => setVisible(true)}
-        />
-        <Settings>
-          <StoryPageSetting />
-          <StorySetting />
-        </Settings>
-        <StoryPageAddModal
-          pageContents={chartOptions}
-          visible={visible}
-          onSelectedPages={onSelectedPages}
-          onCancel={() => setVisible(false)}
-        />
-      </Wrapper>
-    );
-  },
-);
+  const onSelectedPages = useCallback(
+    (relIds: string[]) => {
+      dispatch(addStoryPages({ storyId, relIds }));
+      setVisible(false);
+    },
+    [storyId, dispatch],
+  );
+  return (
+    <Wrapper>
+      <LeftOutlined
+        onClick={closeEditor}
+        style={{ marginRight: '10px', fontSize: '1.2rem' }}
+      />
+      <Title>{name}</Title>
+      <AddButton
+        type="primary"
+        icon={<PlusOutlined />}
+        onClick={() => setVisible(true)}
+      />
+      <Settings>
+        <StoryPageSetting />
+        <StorySetting />
+      </Settings>
+      <StoryPageAddModal
+        sortedPages={sortedPages}
+        pageContents={chartOptions}
+        visible={visible}
+        onSelectedPages={onSelectedPages}
+        onCancel={() => setVisible(false)}
+      />
+    </Wrapper>
+  );
+});
 
 const Wrapper = styled.div`
   display: flex;

diff --git a/frontend/src/app/pages/StoryBoardPage/Editor/index.tsx b/frontend/src/app/pages/StoryBoardPage/Editor/index.tsx
@@ -263,7 +263,10 @@ export const StoryEditor: React.FC<{}> = memo(() => {
         }}
       >
         <Wrapper>
-          <StoryToolBar onCloseEditor={onCloseEditor} />
+          <StoryToolBar
+            onCloseEditor={onCloseEditor}
+            sortedPages={sortedPages}
+          />
           <Container
             sizes={sizes}
             minSize={[256, 0]}

diff --git a/frontend/src/app/pages/StoryBoardPage/components/StoryPageAddModal.tsx b/frontend/src/app/pages/StoryBoardPage/components/StoryPageAddModal.tsx
@@ -19,14 +19,16 @@ import { Modal, Table } from 'antd';
 import { RowSelectionType } from 'antd/lib/table/interface';
 import { Folder } from 'app/pages/MainPage/pages/VizPage/slice/types';
 import i18next from 'i18next';
-import React, { useEffect, useState } from 'react';
-
+import difference from 'lodash/difference';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { StoryPage } from '../slice/types';
 export interface IProps {
   // dataCharts: DataChart[];
   pageContents: Folder[];
   visible: boolean;
   onSelectedPages: (selectedIds: string[]) => void;
   onCancel: () => void;
+  sortedPages: StoryPage[];
 }
 
 const StoryPageAddModal: React.FC<IProps> = props => {
@@ -35,41 +37,61 @@ const StoryPageAddModal: React.FC<IProps> = props => {
     onSelectedPages,
     onCancel,
     pageContents: dataCharts,
+    sortedPages,
   } = props;
   const [selectedDataChartIds, setSelectedDataChartIds] = useState<string[]>(
     [],
   );
-  const onOk = () => {
-    onSelectedPages(selectedDataChartIds);
-  };
+  const onOk = useCallback(() => {
+    onSelectedPages(
+      difference(
+        selectedDataChartIds,
+        sortedPages.map(v => v.relId),
+      ),
+    );
+  }, [onSelectedPages, sortedPages, selectedDataChartIds]);
+
   useEffect(() => {
     if (!visible) {
-      setSelectedDataChartIds([]);
+      const defaultSelectedIds = sortedPages.map(v => v.relId);
+      setSelectedDataChartIds(defaultSelectedIds);
     }
-  }, [visible]);
-  const columns = [
-    {
-      title: i18next.t('viz.board.setting.storyName'),
-      dataIndex: 'name',
-      render: (text: string) => text,
-    },
-    {
-      title: i18next.t('viz.board.setting.storyDescription'),
-      dataIndex: 'description',
-      render: (text: string) => text,
-    },
-  ];
-  const rowSelection = {
-    type: 'checkbox' as RowSelectionType,
-    selectedRowKeys: selectedDataChartIds,
-    onChange: (keys: React.Key[]) => {
-      setSelectedDataChartIds(keys as string[]);
-    },
-  };
+  }, [visible, sortedPages]);
+
+  const columns = useMemo(
+    () => [
+      {
+        title: i18next.t('viz.board.setting.storyName'),
+        dataIndex: 'name',
+        render: (text: string) => text,
+      },
+      {
+        title: i18next.t('viz.board.setting.storyDescription'),
+        dataIndex: 'description',
+        render: (text: string) => text,
+      },
+    ],
+    [],
+  );
+  const rowSelection = useMemo(
+    () => ({
+      type: 'checkbox' as RowSelectionType,
+      selectedRowKeys: selectedDataChartIds,
+      getCheckboxProps: record => {
+        return {
+          disabled: !!sortedPages.find(page => page.relId === record.relId),
+        };
+      },
+      onChange: (keys: React.Key[]) => {
+        setSelectedDataChartIds(keys as string[]);
+      },
+    }),
+    [selectedDataChartIds, sortedPages],
+  );
 
   return (
     <Modal
-      title="Add Story Page"
+      title={i18next.t('viz.board.setting.addStoryPage')}
       visible={visible}
       onOk={onOk}
       centered