Merge pull request #269 from lyp000119/slider-branch

Logic and code style optimization in "Add existing data chart"Slider branch

frontend/src/app/components/Tree/index.tsx

@@ -62,7 +62,7 @@ const StyledDirectoryTree = styled(AntTree)`
 
     .ant-tree-treenode {
       padding: 0 0 ${SPACE} ${SPACE_XS};
-
+      align-items: center;
       .ant-tree-node-content-wrapper {
         display: flex;
         align-items: center;
@@ -137,7 +137,9 @@ const StyledDirectoryTree = styled(AntTree)`
         margin: ${SPACE_XS} ${SPACE} 0 0;
       }
     }
-
+    .ant-tree-checkbox {
+      margin-top: 0px;
+    }
     &.medium {
       .ant-tree-switcher {
         line-height: 32px;

frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/BoardToolBar/AddChartBtn.tsx

@@ -24,7 +24,13 @@ import {
 } from 'app/pages/DashBoardPage/pages/Board/slice/types';
 import { selectVizs } from 'app/pages/MainPage/pages/VizPage/slice/selectors';
 import { selectOrgId } from 'app/pages/MainPage/slice/selectors';
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { v4 as uuidv4 } from 'uuid';
 import { addDataChartWidgets, addWrapChartWidget } from '../../slice/thunk';
@@ -33,13 +39,12 @@ import { ChartWidgetDropdown, ToolBtnProps } from './ToolBarItem';
 const AddChartBtn: React.FC<ToolBtnProps> = props => {
   const dispatch = useDispatch();
   const { boardId, boardType } = useContext(BoardContext);
-
   const orgId = useSelector(selectOrgId);
-
   // const chartOptions = useSelector(selectDataChartList);
   const chartOptionsMock = useSelector(selectVizs);
-  const chartOptions = chartOptionsMock.filter(
-    item => item.relType === 'DATACHART',
+  const chartOptions = useMemo(
+    () => chartOptionsMock.filter(item => item.relType !== 'DASHBOARD'),
+    [chartOptionsMock],
   );
 
   useEffect(() => {

frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/BoardToolBar/ToolBarItem.tsx

@@ -342,12 +342,12 @@ export const ChartWidgetDropdown: React.FC<ChartWidgetDropdownProps> =
     );
     const addChartTypes = [
       {
-        name: '添加公共数据图表',
+        name: '添加已有数据图表',
         icon: '',
         type: 'select',
       },
       {
-        name: '添加数据图表',
+        name: '新建数据图表',
         icon: '',
         type: 'create',
       },

frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ChartSelectModal.tsx

@@ -15,13 +15,21 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Modal, Table } from 'antd';
-import { RowSelectionType } from 'antd/lib/table/interface';
+import {
+  BarChartOutlined,
+  FolderFilled,
+  FolderOpenFilled,
+  FundFilled,
+} from '@ant-design/icons';
+import { Input, Modal } from 'antd';
+import { Tree } from 'app/components/Tree/index';
+import { useDebouncedSearch } from 'app/hooks/useDebouncedSearch';
+import { selectWidgetInfoDatachartId } from 'app/pages/DashBoardPage/pages/BoardEditor/slice/selectors';
 import { Folder } from 'app/pages/MainPage/pages/VizPage/slice/types';
-import React, { useEffect, useState } from 'react';
-
-// import { ChartWidget } from '../../../types';
-
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+import styled from 'styled-components/macro';
+import { listToTree } from 'utils/utils';
 export interface IProps {
   // dataCharts: DataChart[];
   dataCharts: Folder[];
@@ -34,54 +42,132 @@ const ChartSelectModalModal: React.FC<IProps> = props => {
   const { visible, onSelectedCharts, onCancel, dataCharts } = props;
   const [selectedDataChartIds, setSelectedDataChartIds] = useState<string[]>(
     [],
+  ); //zh 存储id的数组 en: Array of IDs
+  const [selectedDataChartRelIds, setSelectedDataChartRelIds] = useState<
+    string[]
+  >([]); //zh 存储RelId的数组 en: Array to store RelId
+  const WidgetInfoDatachartIds = useSelector(selectWidgetInfoDatachartId); //zh dashboard中已存在图表的datachartId en: The datachartId of the existing chart in the dashboard
+
+  const getIcon = useCallback(({ relType }: Folder) => {
+    switch (relType) {
+      case 'DASHBOARD':
+        return <FundFilled />;
+      case 'DATACHART':
+        return <BarChartOutlined />;
+      default:
+        return p => (p.expanded ? <FolderOpenFilled /> : <FolderFilled />);
+    }
+  }, []);
+
+  const treeData = useMemo(
+    () =>
+      listToTree(
+        dataCharts.map(v => ({
+          ...v,
+          isFolder: v.relType === 'FOLDER',
+          disabled: WidgetInfoDatachartIds.includes(v.relId),
+        })),
+        null,
+        [],
+        { getIcon },
+      ),
+    [WidgetInfoDatachartIds, dataCharts],
   );
+
+  const { filteredData: filteredTreeData, debouncedSearch: treeSearch } =
+    useDebouncedSearch(treeData, (keywords, d) => {
+      return d.name.toLowerCase().includes(keywords.toLowerCase());
+    });
+
   const onOk = () => {
-    onSelectedCharts(selectedDataChartIds);
+    onSelectedCharts(selectedDataChartRelIds);
+  };
+
+  const onSelectChart = (SelectKeys, nodeData) => {
+    let Ids: string[] = [],
+      RelIds: string[] = [];
+
+    nodeData.checkedNodes
+      .filter(
+        node => !node.isFolder && !WidgetInfoDatachartIds.includes(node.relId),
+      )
+      .map(val => {
+        RelIds.push(val.relId);
+        Ids.push(val.id);
+      }); //zh 去除文件类型和已有图表的数据 en: Remove file types and data from existing charts
+
+    setSelectedDataChartIds(Ids);
+    setSelectedDataChartRelIds(RelIds);
   };
+
+  const setDefaultChartsIds = () => {
+    let ChartsIds: any = [];
+    treeData?.map(treenode => {
+      let checkedlength = 0;
+
+      if (treenode.disabled) {
+        //zh  dashboard中已经含有该图表 en:The chart is already in the dashboard
+        ChartsIds.push(treenode.id);
+      }
+
+      treenode?.children?.map(v => {
+        if (v.disabled) {
+          //zh dashboard中已经含有该图表 en:The chart is already in the dashboard
+          checkedlength = checkedlength + 1;
+          ChartsIds.push(v.id);
+        }
+      });
+
+      if (checkedlength === treenode?.children?.length) {
+        // zh:如果该目录里的图表都被选中，那么目录也要被选中并且不可点击 en: If the charts in the catalog are all selected, then the catalog must also be selected and not clickable
+        treenode.disabled = true;
+        ChartsIds.push(treenode.id);
+      }
+    });
+    return ChartsIds;
+  };
+
+  let defaultChartsIds = useMemo(setDefaultChartsIds, [
+    WidgetInfoDatachartIds,
+    treeData,
+  ]);
+
   useEffect(() => {
     if (!visible) {
       setSelectedDataChartIds([]);
     }
   }, [visible]);
 
-  const columns = [
-    {
-      title: '名称',
-      dataIndex: 'name',
-      render: (text: string) => text,
-    },
-    {
-      title: '描述',
-      dataIndex: 'description',
-      render: (text: string) => text,
-    },
-  ];
-  const rowSelection = {
-    type: 'checkbox' as RowSelectionType,
-    selectedRowKeys: selectedDataChartIds,
-    onChange: (keys: React.Key[]) => {
-      setSelectedDataChartIds(keys as string[]);
-    },
-  };
-
   return (
     <Modal
-      title="add dataChartWidget"
+      title="添加已有数据图表"
       visible={visible}
       onOk={onOk}
       centered
       onCancel={onCancel}
       okButtonProps={{ disabled: !selectedDataChartIds.length }}
       cancelButtonProps={{ disabled: false }}
     >
-      <Table
-        rowKey={record => record.relId}
-        rowSelection={rowSelection}
-        columns={columns}
-        pagination={{ pageSize: 6 }}
-        dataSource={dataCharts}
+      <InputWrap>
+        <Input onChange={treeSearch} placeholder="搜索名称关键字" />
+      </InputWrap>
+      <Tree
+        loading={false}
+        showIcon
+        checkable
+        defaultExpandAll={true}
+        onCheck={onSelectChart}
+        treeData={filteredTreeData}
+        checkedKeys={[...defaultChartsIds, ...selectedDataChartIds]}
+        height={300}
       />
     </Modal>
   );
 };
+
 export default ChartSelectModalModal;
+
+const InputWrap = styled.div`
+  padding: 0 20px;
+  margin-bottom: 10px;
+`;

frontend/src/app/pages/DashBoardPage/pages/BoardEditor/slice/selectors.ts

@@ -111,6 +111,14 @@ export const selectSelectedIds = createSelector(
       .map(widgetInfo => widgetInfo.id) || [],
 );
 
+export const selectWidgetInfoDatachartId = createSelector(
+  [selectWidgetRecord],
+  WidgetsInfo =>
+    Object.values(WidgetsInfo).map(widgetInfo => {
+      return widgetInfo.datachartId || undefined;
+    }) || [],
+);
+
 // boardInfo
 export const boardInfoState = (state: { editBoard: EditBoardState }) =>
   state.editBoard.boardInfo;