[improvement][headless-fe] Revamped the interaction for semantic modeling routing and successfully implemented the switching between dimension and dataset management.

webapp/packages/supersonic-fe/src/pages/SemanticModel/View/components/Detail.tsx

@@ -1,16 +1,14 @@
 import { message, Form } from 'antd';
-import React, { useState, useEffect } from 'react';
-import { getMetricData } from '../../service';
+import React, { useState, useEffect, useRef } from 'react';
 import { useParams, useModel, Helmet } from '@umijs/max';
 import { BASE_TITLE } from '@/common/constants';
 import { ISemantic } from '../../data';
-import { createView, updateView, getAllModelByDomainId, getDataSetDetail } from '../../service';
+import { getAllModelByDomainId, getDataSetDetail } from '../../service';
 import DetailContainer from '@/pages/SemanticModel/components/DetailContainer';
 import DetailSider from '@/pages/SemanticModel/components/DetailContainer/DetailSider';
 import { ProjectOutlined, ConsoleSqlOutlined } from '@ant-design/icons';
 import DatasetCreateForm from './DatasetCreateForm';
 import DetailFormWrapper from '@/pages/SemanticModel/components/DetailContainer/DetailFormWrapper';
-// import { MetricSettingKey, MetricSettingWording } from './constants';
 
 type Props = Record<string, any>;
 
@@ -29,16 +27,28 @@ const DataSetDetail: React.FC<Props> = () => {
   ];
   const params: any = useParams();
   const detailId = params.datasetId;
-  const [detailData, setDetailData] = useState<ISemantic.IMetricItem>();
+  const menuKey = params.menuKey;
+  const [detailData, setDetailData] = useState<ISemantic.IDatasetItem>();
   const domainModel = useModel('SemanticModel.domainData');
-  const modelModel = useModel('SemanticModel.modelData');
-  const { modelList } = modelModel;
-  const { selectDomainId } = domainModel;
-  const [settingKey, setSettingKey] = useState<string>();
-  // const [modelList, setModelList] = useState<ISemantic.IModelItem[]>([]);
-  const [activeMenu, setActiveMenu] = useState<any>(settingList[0]);
+  const { selectDomainId, setSelectDataSet } = domainModel;
+  const [modelList, setModelList] = useState<ISemantic.IModelItem[]>([]);
+  const [activeMenu, setActiveMenu] = useState<any>(() => {
+    if (menuKey) {
+      const target = settingList.find((item) => item.key === menuKey);
+      if (target) {
+        return target;
+      }
+    }
 
-  const [form] = Form.useForm();
+    return settingList[0];
+  });
+  const detailFormRef = useRef<any>();
+
+  useEffect(() => {
+    return () => {
+      setSelectDataSet(undefined);
+    };
+  }, []);
 
   useEffect(() => {
     if (!detailId) {
@@ -47,26 +57,27 @@ const DataSetDetail: React.FC<Props> = () => {
     queryDetailData(detailId);
   }, [detailId]);
 
-  // useEffect(() => {
-  //   if (!selectDomainId) {
-  //     return;
-  //   }
-  //   queryDomainAllModel();
-  // }, [selectDomainId]);
+  useEffect(() => {
+    if (!selectDomainId) {
+      return;
+    }
+    queryDomainAllModel();
+  }, [selectDomainId]);
 
-  // const queryDomainAllModel = async () => {
-  //   const { code, data, msg } = await getAllModelByDomainId(selectDomainId);
-  //   if (code === 200) {
-  //     setModelList(data);
-  //   } else {
-  //     message.error(msg);
-  //   }
-  // };
+  const queryDomainAllModel = async () => {
+    const { code, data, msg } = await getAllModelByDomainId(selectDomainId);
+    if (code === 200) {
+      setModelList(data);
+    } else {
+      message.error(msg);
+    }
+  };
 
   const queryDetailData = async (id: number) => {
     const { code, data, msg } = await getDataSetDetail(id);
     if (code === 200) {
-      setDetailData({ ...data });
+      setDetailData(data);
+      setSelectDataSet(data);
       return;
     }
     message.error(msg);
@@ -78,11 +89,11 @@ const DataSetDetail: React.FC<Props> = () => {
       <DetailContainer
         siderNode={
           <DetailSider
-            menuKey={'basic'}
+            menuKey={activeMenu.key}
             menuList={settingList}
             detailData={detailData}
             onMenuKeyChange={(key: string, menu) => {
-              setSettingKey(key);
+              // setSettingKey(key);
               setActiveMenu(menu);
             }}
           />
@@ -91,22 +102,15 @@ const DataSetDetail: React.FC<Props> = () => {
           <DetailFormWrapper
             currentMenu={activeMenu}
             onSave={() => {
-              console.log(form.getFieldsValue());
+              detailFormRef.current.onSave();
             }}
           >
             <DatasetCreateForm
-              form={form}
+              ref={detailFormRef}
               activeKey={activeMenu.key}
               domainId={selectDomainId}
-              viewItem={detailData}
+              datasetItem={detailData}
               modelList={modelList}
-              onSubmit={() => {
-                // queryDataSetList();
-                // setCreateDataSourceModalOpen(false);
-              }}
-              onCancel={() => {
-                // setCreateDataSourceModalOpen(false);
-              }}
             />
           </DetailFormWrapper>
         }