feat: Added the ability to import data sources from Navciat and DBEver

JerryFan626 · JerryFan626 · commit 5ad9cd5eaa2a · 2023-10-14T17:13:12.000+08:00
diff --git a/chat2db-client/src/components/ImportConnection/index.tsx b/chat2db-client/src/components/ImportConnection/index.tsx
@@ -1,64 +1,82 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Modal, Upload, Button, message } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
 
-interface FileUploadModalProps {
+const uploadFileType = {
+  ncx: {
+    accept: '.ncx',
+    uploadUrl: '/api/converter/ncx/upload',
+  },
+  dbp: {
+    accept: '.dbp',
+    uploadUrl: '/api/converter/dbp/upload',
+  },
+};
+interface IImportConnectionProps {
   open: boolean;
   onClose: () => void;
-  onUploaded?: (file: File) => void;
   onConfirm?: () => void;
 }
 
-const FileUploadModal: React.FC<FileUploadModalProps> = ({ open, onClose, onUploaded, onConfirm }) => {
-  const beforeUpload = (file: File) => {
-    const fileName = file.name.toLowerCase();
-    if (fileName.includes('navicat')) {
-      message.success('Navicat file detected');
-      onUploaded && onUploaded(file);
-    } else if (fileName.includes('dbeaver')) {
-      message.success('DBeaver file detected');
-      onUploaded && onUploaded(file);
-    } else if (fileName.includes('datagrip')) {
-      message.success('DataGrip file detected');
-      onUploaded && onUploaded(file);
-    } else {
-      message.error('File type not recognized');
-      return false;
+const ImportConnection: React.FC<IImportConnectionProps> = ({ open, onClose, onConfirm }) => {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [uploading, setUploading] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      setSelectedFile(null);
     }
-    return false; // Prevent auto-upload for the sake of this demo
+  }, [open]);
+
+  const handleBeforeUpload = (file: File) => {
+    setSelectedFile(file);
+    return false; // 停止自动上传
   };
 
-  const renderSelect = () => {
-    // 下拉框 选择Navciat、dbever、datagrip
+  const handleConfirmUpload = async () => {
+    if (!selectedFile) return;
+
+    const formData = new FormData();
+    formData.append('file', selectedFile);
+
+    const fileExtension = selectedFile.name.split('.').pop() || '';
+    console.log('fileExtension', fileExtension);
+
+    const { uploadUrl } = uploadFileType[fileExtension] || {};
+
+    try {
+      setUploading(true);
+
+      const response = await fetch(uploadUrl, {
+        method: 'POST',
+        body: formData,
+      });
+      if (response.ok) {
+        message.success(`${selectedFile.name} 导入数据源成功`);
+        onConfirm && onConfirm();
+      } else {
+        message.error(`${selectedFile.name} 导入数据源是吧`);
+      }
+    } catch (error) {
+      message.error(`Error: ${error}`);
+    } finally {
+      setUploading(false);
+    }
   };
+
   return (
     <Modal
-      title="Upload your file"
+      title="导入文件, .ncx(navicat) 或 .dbp(dbever)"
       open={open}
       onCancel={onClose}
-      onOk={onConfirm}
-      footer={[
-        <Button key="back" onClick={onClose}>
-          Cancel
-        </Button>,
-        <Button key="submit" type="primary" onClick={onConfirm}>
-          Confirm
-        </Button>,
-      ]}
+      onOk={handleConfirmUpload}
+      confirmLoading={uploading}
     >
-      <Upload
-        action="/api/converter/ncx/upload"
-        name="file"
-        accept=".ncx"
-        beforeUpload={beforeUpload}
-        onChange={(info) => {
-          console.log(info);
-        }}
-      >
+      <Upload name="file" accept=".ncx,.dbp" beforeUpload={handleBeforeUpload} maxCount={1}>
         <Button icon={<UploadOutlined />}>Select File</Button>
       </Upload>
     </Modal>
   );
 };
 
-export default FileUploadModal;
+export default ImportConnection;
diff --git a/chat2db-client/src/pages/main/connection/index.tsx b/chat2db-client/src/pages/main/connection/index.tsx
@@ -308,6 +308,10 @@ function Connections(props: IProps) {
         onClose={() => {
           setIsFileUploadModalOpen(false);
         }}
+        onConfirm={() => {
+          setIsFileUploadModalOpen(false);
+          handleEnvRefresh(ConnectionKind.Private);
+        }}
       />
     </>
   );
diff --git a/chat2db-client/src/service/connection.ts b/chat2db-client/src/service/connection.ts
@@ -42,9 +42,14 @@ const remove = createRequest<{ id: number }, void>('/api/connection/datasource/:
 
 const clone = createRequest<{ id: number }, void>('/api/connection/datasource/clone', { method: 'post' });
 
-const getDBList = createRequest<{ dataSourceId: number, refresh?: boolean }, any>('/api/rdb/database/list', { method: 'get' });
+const getDBList = createRequest<{ dataSourceId: number; refresh?: boolean }, any>('/api/rdb/database/list', {
+  method: 'get',
+});
 
-const getSchemaList = createRequest<{ dataSourceId: number, databaseName: string; refresh?: boolean }, any>('/api/rdb/schema/list', { method: 'get' });
+const getSchemaList = createRequest<{ dataSourceId: number; databaseName: string; refresh?: boolean }, any>(
+  '/api/rdb/schema/list',
+  { method: 'get' },
+);
 
 export interface IDriverResponse {
   driverConfigList: {
@@ -77,7 +82,17 @@ const downloadDriver = createRequest<{ dbType: string }, void>('/api/jdbc/driver
 
 const saveDriver = createRequest<IUploadDriver, void>('/api/jdbc/driver/save', { errorLevel: false, method: 'post' });
 
-const getEnvList = createRequest<void, IConnectionEnv[]>('/api/common/environment/list_all', { errorLevel: false});
+const getEnvList = createRequest<void, IConnectionEnv[]>('/api/common/environment/list_all', { errorLevel: false });
+
+/** 导入Navicat链接 */
+// const importNavicatConnection = createRequest<
+//   {
+//     formData: FormData;
+//   },
+//   void
+// >('/api/converter/ncx/upload', {
+//   method: 'post',
+// });
 
 export default {
   getEnvList,
@@ -95,4 +110,5 @@ export default {
   getDriverList,
   downloadDriver,
   saveDriver,
+  // importNavicatConnection,
 };
