From 69ed03416c8af21bfa4542b3ec970abf2bdc8017 Mon Sep 17 00:00:00 2001
From: shanhexi <wdbb8848@163.com>
Date: Wed, 13 Dec 2023 11:50:26 +0800
Subject: [PATCH] fix:FileUploadModal

---
 .../src/blocks/CreateConnection/index.tsx     | 106 +++++++++++-------
 .../src/components/ImportConnection/index.tsx |   2 +-
 chat2db-client/src/i18n/en-us/connection.ts   |   1 +
 chat2db-client/src/i18n/zh-cn/connection.ts   |   1 +
 .../src/pages/main/connection/index.tsx       |  15 ---
 5 files changed, 71 insertions(+), 54 deletions(-)

diff --git a/chat2db-client/src/blocks/CreateConnection/index.tsx b/chat2db-client/src/blocks/CreateConnection/index.tsx
index b49b58fa..ea5e846d 100644
--- a/chat2db-client/src/blocks/CreateConnection/index.tsx
+++ b/chat2db-client/src/blocks/CreateConnection/index.tsx
@@ -5,6 +5,9 @@ import { IConnectionDetails, IDatabase } from '@/typings';
 import ConnectionEdit from '@/components/ConnectionEdit';
 import { databaseTypeList } from '@/constants';
 import Iconfont from '@/components/Iconfont';
+import i18n from '@/i18n';
+import FileUploadModal from '@/components/ImportConnection';
+import {getConnectionList} from '@/pages/main/store/connection';
 
 // IConnectionDetails 全部信息代表修改
 // null 展示因增列表
@@ -23,6 +26,8 @@ export default memo<IProps>((props) => {
   const [connectionDetail, setConnectionDetail] = useState<IEditConnectionDetail | null | undefined>(
     externalConnectionDetail,
   );
+  const [isFileUploadModalOpen, setIsFileUploadModalOpen] = useState(false);
+
 
   useEffect(() => {
     setConnectionDetail(externalConnectionDetail);
@@ -39,49 +44,74 @@ export default memo<IProps>((props) => {
   // }
 
   return (
-    <div className={classnames(styles.box, className)}>
-      {connectionDetail && (
-        <div
-          className={classnames(styles.createConnections, {
-            [styles.showCreateConnections]: connectionDetail,
-          })}
-        >
-          <ConnectionEdit
-            closeCreateConnection={() => {
-              setConnectionDetail(null);
-            }}
-            connectionData={connectionDetail as any}
-            submit={onSubmit}
-          />
-        </div>
-      )}
-      {connectionDetail === null && (
-        <div className={styles.dataBaseListBox}>
-          <div className={styles.dataBaseList}>
-            {databaseTypeList.map((t) => {
-              return (
-                <div key={t.code} className={styles.databaseItem} onClick={handleCreateConnections.bind(null, t)}>
-                  <div className={styles.databaseItemMain}>
-                    <div className={styles.databaseItemLeft}>
-                      <div className={styles.logoBox}>
-                        <Iconfont code={t.icon} />
+    <>
+      <div className={classnames(styles.box, className)}>
+        {connectionDetail && (
+          <div
+            className={classnames(styles.createConnections, {
+              [styles.showCreateConnections]: connectionDetail,
+            })}
+          >
+            <ConnectionEdit
+              closeCreateConnection={() => {
+                setConnectionDetail(null);
+              }}
+              connectionData={connectionDetail as any}
+              submit={onSubmit}
+            />
+          </div>
+        )}
+        {connectionDetail === null && (
+          <div className={styles.dataBaseListBox}>
+            <div className={styles.dataBaseList}>
+              {databaseTypeList.map((t) => {
+                return (
+                  <div key={t.code} className={styles.databaseItem} onClick={handleCreateConnections.bind(null, t)}>
+                    <div className={styles.databaseItemMain}>
+                      <div className={styles.databaseItemLeft}>
+                        <div className={styles.logoBox}>
+                          <Iconfont code={t.icon} />
+                        </div>
+                        {t.name}
+                      </div>
+                      <div className={styles.databaseItemRight}>
+                        <Iconfont code="&#xe631;" />
                       </div>
-                      {t.name}
-                    </div>
-                    <div className={styles.databaseItemRight}>
-                      <Iconfont code="&#xe631;" />
                     </div>
                   </div>
+                );
+              })}
+              <div className={styles.databaseItem} onClick={() => {setIsFileUploadModalOpen(true)}}>
+                <div className={styles.databaseItemMain}>
+                  <div className={styles.databaseItemLeft}>
+                    <div className={styles.logoBox}>
+                      <Iconfont code="&#xe66c;" />
+                    </div>
+                    {i18n('connection.title.importConnection')}
+                  </div>
+                  <div className={styles.databaseItemRight}>
+                    <Iconfont code="&#xe631;" />
+                  </div>
                 </div>
-              );
-            })}
-            {Array.from({ length: 20 }).map((t, index) => {
-              return <div key={index} className={styles.databaseItemSpacer} />;
-            })}
+              </div>
+              {Array.from({ length: 20 }).map((t, index) => {
+                return <div key={index} className={styles.databaseItemSpacer} />;
+              })}
+            </div>
           </div>
-        </div>
-      )}
-    </div>
+        )}
+      </div>
+      <FileUploadModal
+        open={isFileUploadModalOpen}
+        onClose={() => {
+          setIsFileUploadModalOpen(false);
+        }}
+        onConfirm={() => {
+          setIsFileUploadModalOpen(false);
+          getConnectionList()
+        }}
+      />
+    </>
   );
 });
 
diff --git a/chat2db-client/src/components/ImportConnection/index.tsx b/chat2db-client/src/components/ImportConnection/index.tsx
index 34d273e2..851c7173 100644
--- a/chat2db-client/src/components/ImportConnection/index.tsx
+++ b/chat2db-client/src/components/ImportConnection/index.tsx
@@ -67,7 +67,7 @@ const ImportConnection: React.FC<IImportConnectionProps> = ({ open, onClose, onC
 
   return (
     <Modal
-      title="导入文件, .ncx(navicat) 或 .dbp(dbever)"
+      title={i18n('connection.title.importTitle')}
       open={open}
       onCancel={onClose}
       onOk={handleConfirmUpload}
diff --git a/chat2db-client/src/i18n/en-us/connection.ts b/chat2db-client/src/i18n/en-us/connection.ts
index b781d81b..6773af00 100644
--- a/chat2db-client/src/i18n/en-us/connection.ts
+++ b/chat2db-client/src/i18n/en-us/connection.ts
@@ -33,4 +33,5 @@ export default {
   'connection.button.createConnection': 'Create connection',
   'connection.tips.noConnection': 'You have not created any connections yet',
   'connection.tips.noConnectionTips': 'You do not have permission to view the connection details, but you can connect to the connection directly',
+  'connection.title.importTitle': 'Import file,.ncx(navicat) or.dbp(dbever)',
 };
diff --git a/chat2db-client/src/i18n/zh-cn/connection.ts b/chat2db-client/src/i18n/zh-cn/connection.ts
index 46585233..830f6547 100644
--- a/chat2db-client/src/i18n/zh-cn/connection.ts
+++ b/chat2db-client/src/i18n/zh-cn/connection.ts
@@ -33,4 +33,5 @@ export default {
   'connection.button.createConnection': '创建连接',
   'connection.tips.noConnection': '您当前还没有创建任何连接',
   'connection.tips.noConnectionTips': '无权限查看该连接详情，但你可以直接连接该连接',
+  'connection.title.importTitle': '导入文件, .ncx(navicat) 或 .dbp(dbever)',
 };
diff --git a/chat2db-client/src/pages/main/connection/index.tsx b/chat2db-client/src/pages/main/connection/index.tsx
index 884b739d..6fb7f114 100644
--- a/chat2db-client/src/pages/main/connection/index.tsx
+++ b/chat2db-client/src/pages/main/connection/index.tsx
@@ -14,7 +14,6 @@ import { IConnectionDetails, IConnectionListItem } from '@/typings';
 // ----- components -----
 import CreateConnection from '@/blocks/CreateConnection';
 import Iconfont from '@/components/Iconfont';
-import FileUploadModal from '@/components/ImportConnection';
 import LoadingContent from '@/components/Loading/LoadingContent';
 import MenuLabel from '@/components/MenuLabel';
 
@@ -36,7 +35,6 @@ const ConnectionsPage = () => {
   });
   const volatileRef = useRef<any>();
   const [connectionActiveId, setConnectionActiveId] = useState<IConnectionListItem['id'] | null>(null);
-  const [isFileUploadModalOpen, setIsFileUploadModalOpen] = useState(false);
   const [connectionDetail, setConnectionDetail] = useState<IConnectionDetails | null | undefined>(null);
 
   // 处理列表单击事件
@@ -174,20 +172,7 @@ const ConnectionsPage = () => {
         >
           <CreateConnection connectionDetail={connectionDetail} onSubmit={onSubmit} />
         </LoadingContent>
-        {/* <div className={styles.layoutRight}>
-          <CreateConnection connectionDetail={connectionDetail} onSubmit={onSubmit} />
-        </div> */}
       </div>
-
-      <FileUploadModal
-        open={isFileUploadModalOpen}
-        onClose={() => {
-          setIsFileUploadModalOpen(false);
-        }}
-        onConfirm={() => {
-          setIsFileUploadModalOpen(false);
-        }}
-      />
     </>
   );
 };