diff --git a/module/project/css/kanban.css b/module/project/css/kanban.css index bc7972ce01..24771aaf89 100644 --- a/module/project/css/kanban.css +++ b/module/project/css/kanban.css @@ -19,5 +19,6 @@ table th, td {border: 2px solid #fff !important;} -#kanban {padding-bottom: 10px} .kanban-col[data-type='closedProject'] .count {display: none} +.kanban-item > a {cursor: move;} +.kanban-item.execution-item > a {cursor: pointer;} diff --git a/module/project/js/kanban.js b/module/project/js/kanban.js index 50e416da18..cc61a2a358 100644 --- a/module/project/js/kanban.js +++ b/module/project/js/kanban.js @@ -57,6 +57,80 @@ function processKanbanData(key, programGroup) return {id: kanbanId, columns: columns, lanes: lanes}; } +/* + * Find drop columns + * @param {JQuery} $element Drag element + * @param {JQuery} $root Dnd root element + */ +function findDropColumns($element, $root) +{ + var $col = $element.closest('.kanban-col'); + var col = $col.data(); + var lane = $col.closest('.kanban-lane').data(); + var kanbanID = $root.data('id'); + console.log('findDropColumns', {$element, $root, kanbanID, col, lane}); + var kanbanRules = window.kanbanDropRules ? window.kanbanDropRules[kanbanID] : null; + + if(!kanbanRules) return $root.find('.kanban-lane[data-id="' + lane.id + '"] .kanban-lane-col:not([data-type="doingExecution"],[data-type="' + col.type + '"])'); + + var colRules = kanbanRules[col.type]; + var lane = $col.closest('.kanban-lane').data('lane'); + return $root.find('.kanban-lane-col').filter(function() + { + if(!colRules) return false; + if(colRules === true) return true; + + var $newCol = $(this); + var newCol = $newCol.data(); + if(newCol.id === col.id) return false; + + var $newLane = $newCol.closest('.kanban-lane'); + var newLane = $newLane.data('lane'); + return colRules.indexOf(newCol.type) > -1 && newLane.id === lane.id; + }); +} + +/** + * Change column type for a card + * 变更卡片类型 + * @param {Object} card Card object + * @param {String} fromColType The column type before change + * @param {String} toColType The column type after change + * @param {String} kanbanID Kanban ID + */ +function changeCardColType(card, fromColType, toColType, kanbanID) +{ + /* TODO: Post data to server on change card type 将变更卡片类型操作提交到服务器 */ + console.log('TODO: Post data to server on change card type 将变更卡片类型操作提交到服务器', {card, fromColType, toColType, kanbanID}); + + /* + // TODO: The server must return a updated kanban data 服务器返回更新后的看板数据 + + // 调用 updateKanban 更新看板数据 + updateKanban(kanbanID, newKanbanData); + */ +} + +/** + * Handle finish drop task + * @param {Object} event Event object + * @returns {void} + */ +function handleFinishDrop(event) +{ + var $card = $(event.element); // The drag card + var $dragCol = $card.closest('.kanban-lane-col'); + var $dropCol = $(event.target); + + /* Get d-n-d(drag and drop) infos 获取拖放操作相关信息 */ + var card = $card.data('item'); + var fromColType = $dragCol.data('type'); + var toColType = $dropCol.data('type'); + var kanbanID = $card.closest('.kanban').data('id'); + + changeCardColType(card, fromColType, toColType, kanbanID); +} + $(function() { /* Init all kanbans */ @@ -64,6 +138,17 @@ $(function() { var $kanban = $('#kanban-' + key); if(!$kanban.length) return; - $kanban.kanban({data: processKanbanData(key, programGroup), maxColHeight: 'auto'}); + $kanban.kanban( + { + data: processKanbanData(key, programGroup), + maxColHeight: 'auto', + droppable: + { + selector: '.kanban-item:not(.execution-item)', + target: findDropColumns, + finish: handleFinishDrop, + mouseButton: 'left' + }, + }); }); }); diff --git a/module/project/view/kanban.html.php b/module/project/view/kanban.html.php index 30c267af11..fec377c4ff 100644 --- a/module/project/view/kanban.html.php +++ b/module/project/view/kanban.html.php @@ -24,7 +24,7 @@ project->typeList[$type];?>
-
+