feat(mysql): Excel sheet/header/NULL options (#2602)

chat2db-community-client/scripts/i18n-source-hashes.json

@@ -26,7 +26,7 @@
       "stream.ts": "8418dd25b0fd54b2ef2b15a2573edf0a4876efb4e69936ff82a157ea5cf42be4",
       "team.ts": "b24fbb075daccb2c44a24f732e7f338d8d08c9b1ee3599c3870171aa2e986512",
       "userGuide.ts": "0103ba35af95a3a0ff7a414130b68a7dd5f5f8196e59cd951631ac2090cb04fe",
-      "workspace.ts": "ff3ba00ee05c5e04c6ccaef4083a83e4f01b5307eff17b9afc6480525a9ef141"
+      "workspace.ts": "16aca82e43abbd523ce6e5979ceca46e9fd90e467f9178910be8163d3e1dcbcf"
     },
     "ko-KR": {
       "ai.ts": "e7a2fcbfb3ed647bd14f63aca4b6c35c8fb402c49a6a1f36bb04f76f4e8415af",
@@ -52,7 +52,7 @@
       "stream.ts": "8418dd25b0fd54b2ef2b15a2573edf0a4876efb4e69936ff82a157ea5cf42be4",
       "team.ts": "b24fbb075daccb2c44a24f732e7f338d8d08c9b1ee3599c3870171aa2e986512",
       "userGuide.ts": "0103ba35af95a3a0ff7a414130b68a7dd5f5f8196e59cd951631ac2090cb04fe",
-      "workspace.ts": "ff3ba00ee05c5e04c6ccaef4083a83e4f01b5307eff17b9afc6480525a9ef141"
+      "workspace.ts": "16aca82e43abbd523ce6e5979ceca46e9fd90e467f9178910be8163d3e1dcbcf"
     }
   }
 }

chat2db-community-client/src/blocks/ImportAndExport/components/ImportExportFile/index.tsx

@@ -13,6 +13,7 @@ import jcefApi from '@/jcef';
 interface IProps {
   className?: string;
   setIsReady?: (p: boolean) => void;
+  onImportFileChange?: (filePath: string, fileType: ImportExportFileType) => void;
 }
 
 export interface ImportExportFileRef {
@@ -82,7 +83,11 @@ const ImportExportFile = forwardRef((props: IProps, ref: ForwardedRef<ImportExpo
   }, [exportLocation, formValue]);
 
   const handleFileUrlListChange = (_fileUrlList) => {
-    setFileUrlList(_fileUrlList.map((item) => item.filePath));
+    const paths = _fileUrlList.map((item) => item.filePath);
+    setFileUrlList(paths);
+    if (isImport && paths[0] && props.onImportFileChange) {
+      props.onImportFileChange(paths[0], formValue.exportType);
+    }
   };
 
   useImperativeHandle(ref, () => ({
@@ -117,10 +122,14 @@ const ImportExportFile = forwardRef((props: IProps, ref: ForwardedRef<ImportExpo
   }));
 
   const handleFormChange = (changedValues, allValues) => {
-    setFormValue({
+    const nextFormValue = {
       ...formValue,
       ...allValues,
-    });
+    };
+    setFormValue(nextFormValue);
+    if (isImport && fileUrlList[0] && props.onImportFileChange) {
+      props.onImportFileChange(fileUrlList[0], nextFormValue.exportType);
+    }
   };
 
   const handleSelectExportLocation = async () => {

chat2db-community-client/src/blocks/ImportAndExport/components/ImportFileModal/index.tsx

@@ -6,9 +6,11 @@ import ImportExportFile, { ImportExportFileRef } from '../ImportExportFile';
 import { useImportExportStore } from '@/store/importExport';
 import ModalFooterButton from '@/components/Modal/ModalFooterButton';
 import importExportServices from '@/service/importExport';
-import { ImportExportTaskStatus, ImportExportType } from '@/constants/importExport';
+import { ImportExportFileType, ImportExportTaskStatus, ImportExportType } from '@/constants/importExport';
+import { DatabaseTypeCode } from '@/constants';
 import Log from '@/blocks/ImportAndExport/components/Log';
 import { ImportExportTaskDetails } from '@/typings/importExport';
+import ImportMappingContent from '@/blocks/ImportAndExport/components/ImportMappingContent';
 import jcefApi from '@/jcef';
 import { isDesktop } from '@/utils/env';
 
@@ -21,6 +23,8 @@ export default memo<IProps>((_props) => {
   const importExportFileRef = useRef<ImportExportFileRef>(null);
   const [taskId, setTaskId] = useState<number>();
   const [taskDetails, setTaskDetails] = useState<ImportExportTaskDetails>();
+  const [importFilePath, setImportFilePath] = useState<string>('');
+  const [importFileType, setImportFileType] = useState<ImportExportFileType>();
 
   const { importExportDataBoundInfo, setImportExportDataBoundInfo, getTaskList } = useImportExportStore((state) => {
     return {
@@ -34,6 +38,8 @@ export default memo<IProps>((_props) => {
     if (!importExportDataBoundInfo) {
       setTaskId(undefined);
       setTaskDetails(undefined);
+      setImportFilePath('');
+      setImportFileType(undefined);
     }
   }, [importExportDataBoundInfo]);
 
@@ -48,6 +54,16 @@ export default memo<IProps>((_props) => {
     });
   };
 
+  const handleImportFileChange = (filePath: string, fileType: ImportExportFileType) => {
+    setImportFilePath(filePath);
+    setImportFileType(fileType);
+  };
+
+  const useMysqlExcelMapping =
+    importExportDataBoundInfo?.type === ImportExportType.IMPORT &&
+    importExportDataBoundInfo.databaseType === DatabaseTypeCode.MYSQL &&
+    (importFileType === ImportExportFileType.XLS || importFileType === ImportExportFileType.XLSX);
+
   const renderFooter = () => {
     return (
       <ModalFooterButton
@@ -121,16 +137,30 @@ export default memo<IProps>((_props) => {
       headerIconCode={importExportDataBoundInfo?.type === ImportExportType.IMPORT ? 'icon-upload' : 'icon-download'}
       headerBorder
       destroyOnClose
-      footer={taskId ? logRenderFooter() : renderFooter()}
+      footer={taskId ? logRenderFooter() : useMysqlExcelMapping ? null : renderFooter()}
       maskClosable={false}
       onCancel={() => {
         setImportExportDataBoundInfo(null);
       }}
     >
       {taskId ? (
         <Log onTaskChange={handleTaskChange} taskId={taskId} />
+      ) : useMysqlExcelMapping && importFilePath ? (
+        <ImportMappingContent
+          dataSourceId={importExportDataBoundInfo.dataSourceId}
+          databaseName={importExportDataBoundInfo.databaseName}
+          tableName={importExportDataBoundInfo.tableName || ''}
+          filePath={importFilePath}
+          onDone={() => {
+            setImportExportDataBoundInfo(null);
+          }}
+        />
       ) : (
-        <ImportExportFile ref={importExportFileRef} setIsReady={setIsReady} />
+        <ImportExportFile
+          ref={importExportFileRef}
+          setIsReady={setIsReady}
+          onImportFileChange={handleImportFileChange}
+        />
       )}
     </Modal>
   );