Merge branch 'sprint/sunhao/optimize_kanban' into 'master'

* task #54187, optimize kanban with a lot of cards with virtualList.

See merge request easycorp/zentaopms!3511

module/execution/js/executionkanban.js

@@ -169,9 +169,10 @@ $(function()
 
     $('#kanban').kanban(
     {
-        data:          processKanbanData(),
-        laneNameWidth: 5,
-        virtualize:    true,
+        data:            processKanbanData(),
+        laneNameWidth:   5,
+        virtualize:      true,
+        virtualCardList: true,
         droppable:
         {
             selector:     '.kanban-item:not(.kanban-item-span)',

module/execution/js/kanban.js

@@ -1215,7 +1215,7 @@ function initKanban($kanban)
         calcColHeight:     calcColHeight,
         minColWidth:       240,
         maxColWidth:       240,
-        cardHeight:        60,
+        cardHeight:        getCardHeight(),
         fluidBoardWidth:   fluidBoard,
         displayCards:      displayCards,
         createColumnText:  kanbanLang.createColumn,
@@ -1226,6 +1226,8 @@ function initKanban($kanban)
         onRenderHeaderCol: renderHeaderCol,
         onRenderCount:     renderCount,
         droppable:         groupBy == 'default' ? {target: findDropColumns, finish:handleFinishDrop} : false,
+        virtualize:        true,
+        virtualCardList:   true
     });
 
     $kanban.on('click', '.action-cancel', hideKanbanAction);

module/execution/js/taskkanban.js

@@ -1057,6 +1057,7 @@ $(function()
         virtualize:           true,
         onAction:             handleKanbanAction,
         virtualRenderOptions: {container: '#kanbanContainer>.panel-body'},
+        virtualCardList:      true,
         droppable:
         {
             target:       findDropColumns,

module/kanban/js/view.js

@@ -1227,10 +1227,15 @@ function handleSortCards(event)
 {
     var newLaneID = event.element.closest('.kanban-lane').data('id');
     var newColID  = event.element.closest('.kanban-col').data('id');
-    var orders = [];
-    event.list.each(function(_, item){orders.push(item.item.data('id'));});
-    var url = createLink('kanban', 'sortCard', 'kanbanID=' + kanbanID + '&laneID=' + newLaneID + '&columnID=' + newColID + '&cards=' + orders.join(','));
+    var cards     = event.element.closest('.kanban-lane-items').data('cards');
+    var orders    = cards.map(function(card){return card.id});
+    var fromID    = String(event.element.data('id'));
+    var toID      = String(event.target.data('id'));
 
+    orders.splice(orders.indexOf(fromID), 1);
+    orders.splice(orders.indexOf(toID) + (event.insert === 'before' ?  0 : 1), 0, fromID);
+
+    var url = createLink('kanban', 'sortCard', 'kanbanID=' + kanbanID + '&laneID=' + newLaneID + '&columnID=' + newColID + '&cards=' + orders.join(','));
     $.getJSON(url, function(response)
     {
         if(response.result === 'fail')
@@ -1281,6 +1286,8 @@ function initKanban($kanban)
         onRenderHeaderCol: renderHeaderCol,
         onRenderCount:     renderCount,
         sortable:          handleSortCards,
+        virtualize:        true,
+        virtualCardList:   true,
         droppable:
         {
             target:       findDropColumns,

module/product/js/kanban.js

@@ -148,6 +148,13 @@ $(function()
         var $kanban = $('#kanban-' + key);
         if(!$kanban.length) return;
         var data = processKanbanData(key, programsData);
-        $kanban.kanban({data: data, noLaneName: isClassicMode, calcColHeight: calcColHeight});
+        $kanban.kanban(
+        {
+            data:            data,
+            noLaneName:      isClassicMode,
+            virtualize:      true,
+            virtualCardList: true,
+            calcColHeight:   calcColHeight
+        });
     });
 });

module/program/js/kanban.js

@@ -140,9 +140,10 @@ $(function()
         if(!$kanban.length) return;
         $kanban.kanban(
         {
-            data:          processKanbanData(key, programsData),
-            virtualize:    true,
-            calcColHeight: calcColHeight
+            data:            processKanbanData(key, programsData),
+            virtualize:      true,
+            virtualCardList: true,
+            calcColHeight:   calcColHeight
         });
     });
 });

module/project/js/kanban.js

@@ -201,9 +201,10 @@ $(function()
         if(!$kanban.length) return;
         $kanban.kanban(
         {
-            data:          processKanbanData(key, programGroup),
-            calcColHeight: calcColHeight,
-            virtualize:    true,
+            data:            processKanbanData(key, programGroup),
+            calcColHeight:   calcColHeight,
+            virtualize:      true,
+            virtualCardList: true,
             droppable:
             {
                 selector:     '.kanban-card:not(.execution-item)',