Merge branch 'sprint/174_sunhao/improve_kanban' into 'master'

* Improve kanban UI, bug #17063.

See merge request easycorp/zentaopms!787

module/common/view/kanban.html.php

@@ -436,21 +436,6 @@ $.extend($.fn.kanban.Constructor.DEFAULTS,
         var color = kanbanColorList[lane.$index % kanbanColorList.length];
         $name.css('background-color', color);
     },
-    onRenderKanban: function($kanban, kanbanData)
-    {
-        /* Update project count and execution count */
-        var doingProjectCount   = 0;
-        var doingExecutionCount = 0;
-        var $doingProjectItems = $kanban.find('.kanban-lane-col[data-type="doingProject"] > .kanban-lane-items');
-        if($doingProjectItems.length)
-        {
-            doingProjectCount = $doingProjectItems.find('.project-item').length;
-            doingExecutionCount = $doingProjectItems.find('.execution-item').length;
-        }
-
-        $kanban.find('.kanban-header-col[data-type="doingProject"] > .title > .count').text(doingProjectCount || 0);
-        $kanban.find('.kanban-header-col[data-type="doingExecution"] > .title > .count').text(doingExecutionCount || 0);
-    },
     onCreate: function(kanban)
     {
         kanban.$.on('scroll', tryUpdateKanbanAffix);

module/product/js/kanban.js

@@ -9,14 +9,22 @@ function processKanbanData(key, programsData)
     var kanbanId = key;
 
     /* Generate columns */
-    var columns = [];
+    var columns         = [];
     var hasDoingProject = false;
+    var executionsCol;
     $.each(kanbanColumns, function(_, column)
     {
         var colType = column.type;
+        if(colType === 'doingProject') hasDoingProject = true;
+        column = $.extend({}, column,
+        {
+            kanban:     kanbanId,
+            id:         kanbanId + '-' + colType,
+            parentType: (hasDoingProject && (colType === 'doingProject' || colType === 'doingExecution')) ? 'doing' : false,
+        });
+
         if(colType === 'doingProject')
         {
-            hasDoingProject = true;
             columns.push(
             {
                 kanban:   kanbanId,
@@ -27,12 +35,12 @@ function processKanbanData(key, programsData)
                 count:    ''
             });
         }
-        columns.push($.extend({}, column,
+        else if(colType === 'doingExecution')
         {
-            kanban:     kanbanId,
-            id:         kanbanId + '-' + colType,
-            parentType: (hasDoingProject && (colType === 'doingProject' || colType === 'doingExecution')) ? 'doing' : false,
-        }));
+            executionsCol = column;
+            executionsCol.count = 0;
+        }
+        columns.push(column);
     });
 
     /* Format lanes data */
@@ -76,6 +84,8 @@ function processKanbanData(key, programsData)
 
                         var execution = latestExecutions[projectID];
                         if(!execution || !execution.id) return;
+
+                        executionsCol.count++;
                         projectItem.execution = $.extend({}, execution, {id: 'execution-' + execution.id, _id: execution.id});
                     });
                 }

module/program/js/kanban.js

@@ -10,9 +10,17 @@ function processKanbanData(key, programsData)
 
     /* Generate columns */
     var columns = [];
+    var executionsCol;
     $.each(kanbanColumns, function(_, column)
     {
         var colType = column.type;
+        column = $.extend({}, column,
+        {
+            kanban:     kanbanId,
+            id:         kanbanId + '-' + column.type,
+            parentType: (colType === 'doingProject' || colType === 'doingExecution') ? 'doing' : false,
+        });
+
         if(colType === 'doingProject')
         {
             columns.push(
@@ -25,13 +33,12 @@ function processKanbanData(key, programsData)
                 count:    ''
             });
         }
-
-        columns.push($.extend({}, column,
+        else if(colType === 'doingExecution')
         {
-            kanban:     kanbanId,
-            id:         kanbanId + '-' + column.type,
-            parentType: (colType === 'doingProject' || colType === 'doingExecution') ? 'doing' : false,
-        }));
+            executionsCol = column;
+            executionsCol.count = 0;
+        }
+        columns.push(column);
     });
 
     /* Format lanes data */
@@ -87,6 +94,8 @@ function processKanbanData(key, programsData)
 
                     var execution = project.execution;
                     if(!execution || !execution.id) return;
+
+                    executionsCol.count++;
                     projectItem.execution = $.extend({}, execution, {id: 'execution-' + execution.id, _id: execution.id});
                 });
             }

module/project/js/kanban.js

@@ -10,9 +10,17 @@ function processKanbanData(key, programGroup)
 
     /* Generate columns */
     var columns = [];
+    var executionsCol;
     $.each(kanbanColumns, function(_, column)
     {
         var colType = column.type;
+        column = $.extend({}, column,
+        {
+            kanban:     kanbanId,
+            id:         kanbanId + '-' + column.type,
+            parentType: (colType === 'doingProject' || colType === 'doingExecution') ? 'doing' : false,
+        });
+
         if(colType === 'doingProject')
         {
             columns.push(
@@ -25,13 +33,13 @@ function processKanbanData(key, programGroup)
                 count:    ''
             });
         }
-
-        columns.push($.extend({}, column,
+        else if(colType === 'doingExecution')
         {
-            kanban:     kanbanId,
-            id:         kanbanId + '-' + column.type,
-            parentType: (colType === 'doingProject' || colType === 'doingExecution') ? 'doing' : false,
-        }));
+            executionsCol = column;
+            executionsCol.count = 0;
+        }
+
+        columns.push(column);
     });
     /* Format lanes data */
     var lanes = [];
@@ -58,6 +66,7 @@ function processKanbanData(key, programGroup)
                         var execution = latestExecutions[projectID];
                         if(execution && execution.id)
                         {
+                            executionsCol.count++;
                             projectItem.execution = $.extend({}, execution, {id: 'execution-' + execution.id, _id: execution.id});
                         }
                     }
@@ -72,6 +81,15 @@ function processKanbanData(key, programGroup)
     return {id: kanbanId, columns: columns, lanes: lanes};
 }
 
+/** Define kanban d-n-d rules */
+var projectDropRules =
+{
+    waitProject:   ['doingProject', 'closedProject'],
+    doingProject:  ['closedProject'],
+    closedProject: ['doingProject'],
+};
+window.kanbanDropRules = {my: projectDropRules, other: projectDropRules};
+
 /*
  * Find drop columns
  * @param {JQuery} $element Drag element
@@ -145,13 +163,6 @@ function changeCardColType(card, fromColType, toColType, kanbanID)
         var modalTrigger = new $.zui.ModalTrigger({type: 'iframe', width: '80%', url: link});
         modalTrigger.show();
     }
-
-    /*
-        // TODO: The server must return a updated kanban data  服务器返回更新后的看板数据
-
-        // 调用 updateKanban 更新看板数据
-        updateKanban(kanbanID, newKanbanData);
-    */
 }
 
 /**
@@ -161,7 +172,7 @@ function changeCardColType(card, fromColType, toColType, kanbanID)
  */
 function handleFinishDrop(event)
 {
-    var $card    = $(event.element); // The drag card
+    var $card    = $(event.element).closest('.kanban-item'); // The drag card
     var $dragCol = $card.closest('.kanban-lane-col');
     var $dropCol = $(event.target);
 
@@ -171,8 +182,6 @@ function handleFinishDrop(event)
     var toColType   = $dropCol.data('type');
     var kanbanID    = $card.closest('.kanban').data('id');
 
-    if(fromColType == 'doingProject') card = $card.parent().parent().data('item');
-
     changeCardColType(card, fromColType, toColType, kanbanID);
 }
 
@@ -197,7 +206,7 @@ $(function()
             virtualize:    true,
             droppable:
             {
-                selector:     '.kanban-item:not(.execution-item)',
+                selector:     '.kanban-card:not(.execution-item)',
                 target:       findDropColumns,
                 finish:       handleFinishDrop,
                 mouseButton: 'left'