From 19f744f72d80614f1b727eba0d95aa27c4835425 Mon Sep 17 00:00:00 2001
From: alan <alan@fanruan.com>
Date: Tue, 24 Sep 2019 15:53:00 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20KERNEL-1395=20=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=BF=9E=E6=8E=A5=E5=88=97=E8=A1=A8=E5=88=86=E9=A1=B5=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/connection/list/list.model.ts       |  9 ++++
 src/modules/pages/connection/list/list.ts     | 50 ++++++++++++++-----
 .../list/list_item/list_item.model.ts         |  2 +-
 src/ui/fineui.ts                              |  2 +-
 4 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/src/modules/pages/connection/list/list.model.ts b/src/modules/pages/connection/list/list.model.ts
index b5f60cd..bde4eb5 100644
--- a/src/modules/pages/connection/list/list.model.ts
+++ b/src/modules/pages/connection/list/list.model.ts
@@ -12,6 +12,12 @@ export class ConnectionListModel extends Model<{
 }> {
     context = ['connections', 'connectionSelected'];
 
+    state() {
+        return {
+            showItemNum: 50,
+        };
+    }
+
     actions = {
         setConnections: ():Promise<void> => api.getConnectionlist().then(data => {
             this.model.connections = data.data;
@@ -24,5 +30,8 @@ export class ConnectionListModel extends Model<{
                 resolve();
             });
         }),
+        setItemNum: (num: number) => {
+            this.model.showItemNum = num;
+        },
     }
 }
diff --git a/src/modules/pages/connection/list/list.ts b/src/modules/pages/connection/list/list.ts
index 36a7785..2b5bb27 100644
--- a/src/modules/pages/connection/list/list.ts
+++ b/src/modules/pages/connection/list/list.ts
@@ -1,5 +1,5 @@
 import { shortcut, store } from '@core/core';
-import { ButtonGroup, Vertical, CenterAdapt, Label, Layout, Vtape } from 'ui';
+import { ButtonGroup, Vertical, CenterAdapt, Label, Layout, Vtape, LoadingBar } from 'ui';
 import { ListItemXtype } from './list_item/list_item';
 import { ConnectionListModel, ConnectionListModelXtype } from './list.model';
 import { Connection } from '../../../crud/crud.typings';
@@ -12,6 +12,7 @@ export class ConnectionList extends BI.LoadingPane {
     model: ConnectionListModel['model'];
 
     groupWidget: any;
+    loadingBar: any;
 
     beforeInit(cb: Function) {
         this.store.setConnections().then(() => {
@@ -20,13 +21,20 @@ export class ConnectionList extends BI.LoadingPane {
     }
 
     watch = {
-        connections() {
+        connections: () => {
             this.groupWidget.populate(this.renderList());
         },
+        showItemNum: () => {
+            this.groupWidget.addItems(this.renderList(this.model.showItemNum - 50));
+            BI.size(this.model.connections) > this.model.showItemNum ?
+                this.loadingBar.setLoaded() :
+                this.loadingBar.setEnd();
+        },
     }
 
     render() {
-        if (this.model.connections.length === 0) {
+        const connectionLength = BI.size(this.model.connections);
+        if (connectionLength === 0) {
             return {
                 type: CenterAdapt,
                 items: [
@@ -54,19 +62,37 @@ export class ConnectionList extends BI.LoadingPane {
         }
         
         return {
-            type: ButtonGroup,
-            layouts: [{
-                type: Vertical,
+            type: Vertical,
+            items: [{
+                type: ButtonGroup,
+                layouts: [{
+                    type: Vertical,
+                }],
+                items: this.renderList(),
+                ref: (_ref: any) => {
+                    this.groupWidget = _ref;
+                },
+            }, {
+                type: LoadingBar,
+                ref: (_ref: any) => {
+                    this.loadingBar = _ref;
+                    connectionLength > this.model.showItemNum ?
+                        this.loadingBar.setLoaded() :
+                        null;
+                },
+                handler: () => {
+                    this.loadingBar.setLoading();
+                    this.store.setItemNum(this.model.showItemNum + 50);
+                },
             }],
-            items: this.renderList(),
-            ref: (_ref: any) => {
-                this.groupWidget = _ref;
-            },
+            
         };
     }
 
-    private renderList() {
-        return this.model.connections.map((item: Connection) => {
+    private renderList(start = 0) {
+        const itemNum = Math.min(this.model.connections.length, this.model.showItemNum);
+        
+        return this.model.connections.slice(start, itemNum).map((item: Connection) => {
             return {
                 type: ListItemXtype,
                 name: item.connectionName,
diff --git a/src/modules/pages/connection/list/list_item/list_item.model.ts b/src/modules/pages/connection/list/list_item/list_item.model.ts
index bba0b94..d112a42 100644
--- a/src/modules/pages/connection/list/list_item/list_item.model.ts
+++ b/src/modules/pages/connection/list/list_item/list_item.model.ts
@@ -76,7 +76,7 @@ export class ListItemModel extends Model<{
             
             return api.updateConnection(connection).then(re => {
                 if (!re.errorCode) {
-                    this.store.setIsEdit(false, oldName);
+                    this.setIsEdit(false, oldName);
                     this.model.connections = this.model.connections.map(item => {
                         return {
                             ...item,
diff --git a/src/ui/fineui.ts b/src/ui/fineui.ts
index 2a356e2..0f76edd 100644
--- a/src/ui/fineui.ts
+++ b/src/ui/fineui.ts
@@ -50,7 +50,7 @@ export const Img = 'bi.img';
 export const BubbleCombo = 'bi.bubble_combo';
 export const TextBubblePopupBarView = 'bi.text_bubble_bar_popup_view';
 export const TextValueCombo = 'bi.text_value_combo';
-
+export const LoadingBar = 'bi.loading_bar';
 
 // 布局
 export const VerticalAdapt = 'bi.vertical_adapt';