From 2e81605c95fb948613e5f8fc5c64cd1e2097a88a Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Fri, 28 Feb 2020 15:43:01 +0100
Subject: [PATCH] New kanban structure with drag&drop support

---
 www/kanban/inner.js   |  72 ++++++++-------
 www/kanban/jkanban.js | 201 +++++++++++++++++++-----------------------
 2 files changed, 131 insertions(+), 142 deletions(-)

diff --git a/www/kanban/inner.js b/www/kanban/inner.js
index 621d56cae..c764927bc 100644
--- a/www/kanban/inner.js
+++ b/www/kanban/inner.js
@@ -39,9 +39,8 @@ define([
         $container.find('.kanban-remove-item').remove();
         $container.find('.kanban-board .kanban-item').each(function (i, el) {
             var pos = kanban.findElementPosition(el);
-            var board = kanban.options.boards.find(function (b) {
-                return b.id === $(el.parentNode.parentNode).attr('data-id');
-            });
+            var boards = kanban.options.boards;
+            var board = boards.data[$(el.parentNode.parentNode).attr('data-id')];
             $('<button>', {
                 'class': 'kanban-remove-item btn btn-default fa fa-times',
                 title: Messages.kanban_removeItem
@@ -59,41 +58,48 @@ define([
 
     // Kanban code
     var initKanban = function (framework, boards) {
-        var defaultBoards = [{
-            "id": "todo",
-            "title": Messages.kanban_todo,
-            "color": "blue",
-            "item": [{
-                "title": Messages._getKey('kanban_item', [1])
-            }, {
-                "title": Messages._getKey('kanban_item', [2])
-            }]
-        }, {
-            "id": "working",
-            "title": Messages.kanban_working,
-            "color": "orange",
-            "item": [{
-                "title": Messages._getKey('kanban_item', [3])
-            }, {
-                "title": Messages._getKey('kanban_item', [4])
-            }]
-        }, {
-            "id": "done",
-            "title": Messages.kanban_done,
-            "color": "green",
-            "item": [{
-                "title": Messages._getKey('kanban_item', [5])
-            }, {
-                "title": Messages._getKey('kanban_item', [6])
-            }]
-        }];
+        var items = {};
+        for (var i=1; i<=6; i++) {
+            items['id'+i] = {
+                id: "id"+i,
+                title: Messages._getKey('kanban_item', [i])
+            };
+        }
+        var defaultBoards = {
+            list: ["todo", "working", "done"],
+            data: {
+                "todo": {
+                    "id": "todo",
+                    "title": Messages.kanban_todo,
+                    "color": "blue",
+                    "item": ["id1", "id2"]
+                },
+                "working": {
+                    "id": "working",
+                    "title": Messages.kanban_working,
+                    "color": "orange",
+                    "item": ["id3", "id4"]
+                },
+                "done": {
+                    "id": "done",
+                    "title": Messages.kanban_done,
+                    "color": "green",
+                    "item": ["id5", "id6"]
+                }
+            },
+            items: items
+        };
 
         if (!boards) {
             verbose("Initializing with default boards content");
             boards = defaultBoards;
+        } else if (Array.isArray(boards)) {
+            // XXX also migrate colors!
+            throw new Error("NEED MIGRATION"); // XXX
         } else {
             verbose("Initializing with boards content " + boards);
         }
+            boards = defaultBoards;
 
         // Remove any existing elements
         $(".kanban-container-outer").remove();
@@ -262,6 +268,8 @@ define([
                 jscolorL.fromString(currentColor);
             },
             buttonClick: function (el, boardId, e) {
+                return;
+                // XXX delete baord from modal only? or drag&drop
                 e.stopPropagation();
                 if (framework.isReadOnly() || framework.isLocked()) { return; }
                 UI.confirm(Messages.kanban_deleteBoard, function (yes) {
@@ -512,7 +520,7 @@ define([
         framework.setContentGetter(function () {
             if (!kanban) {
                 return {
-                    content: []
+                    content: {}
                 };
             }
             var content = kanban.getBoardsJSON();
diff --git a/www/kanban/jkanban.js b/www/kanban/jkanban.js
index f3f4bf6d4..af127ff08 100644
--- a/www/kanban/jkanban.js
+++ b/www/kanban/jkanban.js
@@ -53,7 +53,11 @@
                     responsive: '700',
                     colors: ["yellow", "green", "blue", "red", "orange"],
                     responsivePercentage: false,
-                    boards: [],
+                    boards: {
+                        data: {},
+                        items: {},
+                        list: []
+                    },
                     dragBoards: true,
                     addItemButton: false,
                     buttonContent: '+',
@@ -87,7 +91,7 @@
                         self.drakeBoard = self.dragula([self.container], {
                                 moves: function (el, source, handle, sibling) {
                                     if (self.options.readOnly) { return false; }
-                                    if (!self.options.dragBoards) return false;
+                                    if (!self.options.dragBoards) { return false; }
                                     return (handle.classList.contains('kanban-board-header') || handle.classList.contains('kanban-title-board'));
                                 },
                                 accepts: function (el, target, source, sibling) {
@@ -100,8 +104,9 @@
                             .on('drag', function (el, source) {
                                 el.classList.add('is-moving');
                                 self.options.dragBoard(el, source);
-                                if (typeof (el.dragfn) === 'function')
+                                if (typeof (el.dragfn) === 'function') {
                                     el.dragfn(el, source);
+                                }
                             })
                             .on('dragend', function (el) {
                                 el.classList.remove('is-moving');
@@ -112,32 +117,24 @@
                             .on('drop', function (el, target, source, sibling) {
                                 el.classList.remove('is-moving');
                                 self.options.dropBoard(el, target, source, sibling);
-                                if (typeof (el.dropfn) === 'function')
+                                if (typeof (el.dropfn) === 'function') {
                                     el.dropfn(el, target, source, sibling);
+                                }
 
-                                // TODO: update board object board order
-                                console.log("Drop " + $(el).attr("data-id") + " just before " + (sibling ? $(sibling).attr("data-id") : " end "));
-                                var index1, index2;
-                                self.options.boards.some(function (element, index) {
-                                    if (element.id === $(el).attr("data-id")) {
-                                        index1 = index;
-                                        return true;
-                                    }
-                                });
+                                var list = self.options.boards.list || [];
+                                var index1 = list.indexOf($(el).attr("data-id"));
+                                var index2;
                                 if (sibling) {
-                                    self.options.boards.some(function (element, index) {
-                                        if (element.id === $(sibling).attr("data-id")) {
-                                            index2 = index;
-                                            return true;
-                                        }
-                                    })
+                                    index2 = list.indexOf($(sibling).attr("data-id"));
                                 } else {
-                                    index2 = self.options.boards.length;
+                                    index2 = list.length;
                                 }
+
                                 console.log("Switch " + index1 + " and " + index2);
-                                if (index1 < index2)
+                                if (index1 < index2) {
                                     index2 = index2 - 1;
-                                self.options.boards.splice(index2, 0, self.options.boards.splice(index1, 1)[0]);
+                                }
+                                list.splice(index2, 0, list.splice(index1, 1)[0]);
                                 // send event that board has changed
                                 self.onChange();
 
@@ -164,31 +161,24 @@
                                 self.dragItemPos = self.findElementPosition(el);
 
                                 el.classList.add('is-moving');
-                                var boardJSON = __findBoardJSON(source.parentNode.dataset.id);
-                                if (boardJSON.dragTo !== undefined) {
-                                    self.options.boards.map(function (board) {
-                                        if (boardJSON.dragTo.indexOf(board.id) === -1 && board.id !== source.parentNode.dataset.id) {
-                                            self.findBoard(board.id).classList.add('disabled-board');
-                                        }
-                                    })
-                                }
 
                                 self.options.dragEl(el, source);
-                                if (el !== null && typeof (el.dragfn) === 'function')
+                                if (el !== null && typeof (el.dragfn) === 'function') {
                                     el.dragfn(el, source);
+                                }
                             })
                             .on('dragend', function (el) {
                                 console.log("In dragend");
                                 el.classList.remove('is-moving');
                                 self.options.dragendEl(el);
-                                if (el !== null && typeof (el.dragendfn) === 'function')
+                                if (el !== null && typeof (el.dragendfn) === 'function') {
                                     el.dragendfn(el);
+                                }
                             })
                             .on('cancel', function (el, container, source) {
                                 console.log("In cancel");
                                 el.classList.remove('is-moving');
-                                // FIXME custom code
-                                var boardId = source.parentNode.dataset.id;
+                                var boardId = $(source).closest('kanban-board').data('id');
                                 self.options.dragcancelEl(el, boardId);
                             })
                             .on('drop', function(el, target, source, sibling) {
@@ -197,42 +187,23 @@
 
                                 console.log("In drop");
 
-                                // TODO: update board object board order
-                                var board1;
-                                self.options.boards.some(function (element) {
-                                    if (element.id === $(source.parentNode).attr("data-id")) {
-                                        return board1 = element;
-                                    }
-                                });
-                                var board2;
-                                self.options.boards.some(function (element) {
-                                    if (element.id === $(target.parentNode).attr("data-id")) {
-                                        return board2 = element;
-                                    }
-                                });
+                                var sourceId = $(source).closest('.kanban-board').data('id');
+                                var targetId = $(target).closest('.kanban-board').data('id');
+
+                                var board1 = __findBoardJSON(sourceId);
+                                var board2 = __findBoardJSON(targetId);
+console.log(source, target, sourceId, targetId, board1, board2);
+
                                 var pos1 = self.dragItemPos;
                                 var pos2 = (sibling) ? self.findElementPosition(sibling) : (board2.item.length + 1);
                                 console.log("Drop element " + pos1 + " before " + pos2);
 
-                                // TODO: update board object item order
-
-                                var allB = document.querySelectorAll('.kanban-board');
-                                if (allB.length > 0 && allB !== undefined) {
-                                    for (var i = 0; i < allB.length; i++) {
-                                        allB[i].classList.remove('disabled-board');
-                                    }
-                                }
-                                var boardJSON = __findBoardJSON(source.parentNode.dataset.id);
-                                if (boardJSON.dragTo !== undefined) {
-                                    if (boardJSON.dragTo.indexOf(target.parentNode.dataset.id) === -1 && target.parentNode.dataset.id !== source.parentNode.dataset.id) {
-                                        self.drake.cancel(true)
-                                    }
-                                }
                                 if (el !== null) {
                                     self.options.dropEl(el, target, source, sibling);
                                     el.classList.remove('is-moving');
-                                    if (typeof (el.dropfn) === 'function')
+                                    if (typeof (el.dropfn) === 'function') {
                                         el.dropfn(el, target, source, sibling);
+                                    }
                                 }
 
                                 var item = board1.item[pos1];
@@ -297,27 +268,25 @@
 
 
                 this.addBoards = function(boards) {
-                    if (self.options.responsivePercentage) {
-                        self.container.style.width = '100%';
-                        self.options.gutter = '1%';
-                        if (window.innerWidth > self.options.responsive) {
-                            var boardWidth = (100 - boards.length * 2) / boards.length;
-                        } else {
-                            var boardWidth = 100 - (boards.length * 2);
-                        }
-                    } else {
-                        var boardWidth = self.options.widthBoard;
-                    }
+                    var boardWidth = self.options.widthBoard;
                     var addButton = self.options.addItemButton;
                     var buttonContent = self.options.buttonContent;
 
 
                     //for on all the boards
-                    for (var boardkey in boards) {
+                    var old = self.options.boards;
+                    boards.list = boards.list || [];
+                    boards.data = boards.data || {};
+                    for (var index in boards.list) {
                         // single board
-                        var board = boards[boardkey];
-                        if (self.options.boards !== boards)
-                            self.options.boards.push(board);
+                        var boardkey = boards.list[index];
+                        var board = boards.data[boardkey];
+                        if (!board) { continue; } // XXX clean invalid data
+
+                        // Remote changes, we had to reset our data
+                        if (old !== boards && old.list.indexOf(boardKey === -1)) {
+                            old.list.push(boardKey);
+                        }
 
                         //create node
                         var boardNode = document.createElement('div');
@@ -333,18 +302,23 @@
                         boardNode.style.marginRight = self.options.gutter;
                         // header board
                         var headerBoard = document.createElement('header');
-                        if (board.class !== '' && board.class !== undefined)
+                        if (board.class !== '' && board.class !== undefined) {
                             var allClasses = board.class.split(",");
-                        else allClasses = [];
+                        } else {
+                            allClasses = [];
+                        }
                         headerBoard.classList.add('kanban-board-header');
                         allClasses.map(function (value) {
                             headerBoard.classList.add(value);
                         });
                         if (board.color !== '' && board.color !== undefined) {
+                            /*
                             headerBoard._jscLinkedInstance = undefined;
                             jscolorL = new jscolor(headerBoard,{showOnClick: false, valueElement:undefined});
                             jscolorL.fromString(board.color);
                             headerBoard._jscLinkedInstance = undefined;
+                            */
+                            // XXX fixed list of color: use class?
                             headerBoard.classList.add("kanban-header-" + board.color);
                         }
                         titleBoard = document.createElement('div');
@@ -354,24 +328,25 @@
                         titleBoard.clickfn = board.boardTitleClick;
                         __onboardTitleClickHandler(titleBoard);
                         headerBoard.appendChild(titleBoard);
-                        __onColorClickHandler(headerBoard, "board");
-
-                        // if add button is true, add button to the board
-                        if (addButton) {
-                            var btn = document.createElement("BUTTON");
-                            btn.setAttribute("class", "kanban-title-button btn btn-default btn-xs fa fa-times");
-                            //var buttonHtml = '<button class="kanban-title-button btn btn-default btn-xs">'+buttonContent+'</button>'
-                            headerBoard.appendChild(btn);
-                            __onButtonClickHandler(btn, board.id);
-                        }
+                        //__onColorClickHandler(headerBoard, "board"); // XXX color
+
+                        // add button to the board
+                        /* // XXX delete board button ==> removed
+                        var btn = document.createElement("BUTTON");
+                        btn.setAttribute("class", "kanban-title-button btn btn-default btn-xs fa fa-times");
+                        headerBoard.appendChild(btn);
+                        __onButtonClickHandler(btn, board.id);
+                        */
+
                         //content board
                         var contentBoard = document.createElement('main');
                         contentBoard.classList.add('kanban-drag');
                         //add drag to array for dragula
                         self.boardContainer.push(contentBoard);
-                        for (var itemkey in board.item) {
+                        (board.item || []).forEach(function (itemkey) {
                             //create item
-                            var itemKanban = board.item[itemkey];
+                            var itemKanban = boards.items[itemkey];
+                            if (!itemKanban) { return; } // XXX clean invalid data
                             var nodeItem = document.createElement('div');
                             nodeItem.classList.add('kanban-item');
                             nodeItem.dataset.eid = itemKanban.id;
@@ -387,24 +362,32 @@
                             nodeItemText.dropfn = itemKanban.drop;
                             //add click handler of item
                             __onclickHandler(nodeItemText);
+                            /*
+                            // XXX color handle color differently
                             if (itemKanban.color !== '' && itemKanban.color !== undefined) {
-	                            jscolorL = new jscolor(nodeItem,{showOnClick: false, valueElement:undefined});
-	                            jscolorL.fromString(itemKanban.color);
-	                        }
-                            __onColorClickHandler(nodeItem, "item");
+                                jscolorL = new jscolor(nodeItem,{
+                                    showOnClick: false, valueElement:undefined
+                                });
+                                jscolorL.fromString(itemKanban.color);
+                            }*/
+                            //__onColorClickHandler(nodeItem, "item"); // XXX color
 
                             contentBoard.appendChild(nodeItem);
-                        }
+                        });
+
                         //footer board
+                        var footerBoard = document.createElement('footer');
+                        footerBoard.classList.add('kanban-board-footer');
                         //add button
                         var addBoardItem = document.createElement('button');
                         $(addBoardItem).addClass("kanban-title-button btn btn-default fa fa-plus");
-                        headerBoard.appendChild(addBoardItem);
+                        footerBoard.appendChild(addBoardItem);
                         __onAddItemClickHandler(addBoardItem);
 
                         //board assembly
                         boardNode.appendChild(headerBoard);
                         boardNode.appendChild(contentBoard);
+                        boardNode.appendChild(footerBoard);
                         //board add
                         self.container.appendChild(boardNode);
                     }
@@ -416,12 +399,16 @@
                 }
 
                 this.setBoards = function (boards) {
-                    self.element
-                    for (var boardkey in this.options.boards) {
-                        var board = this.options.boards[boardkey];
-                        this.removeBoard(board.id);
+                    //self.element
+                    for (var boardkey in this.options.boards.list) {
+                        //var board = this.options.boards[boardkey];
+                        this.removeBoard(boardKey);
                     }
-                    this.options.boards = [];
+                    this.options.boards = {
+                        list: [],
+                        data: boards.data || {},
+                        items: boards.items || {}
+                    };
                     this.addBoards(boards);
                 }
 
@@ -508,13 +495,13 @@
                     var addBoard = document.createElement('div');
                     addBoard.id = 'kanban-addboard';
                     addBoard.setAttribute('class', 'fa fa-plus');
+                    boardContainer.appendChild(addBoard);
 
                     self.container = boardContainer;
                     //add boards
                     self.addBoards(self.options.boards);
                     //appends to container
                     self.element.appendChild(boardContainerOuter);
-                    self.element.appendChild(addBoard);
 
                     // send event that board has changed
                     self.onChange();
@@ -571,13 +558,7 @@
                 }
 
                 function __findBoardJSON(id) {
-                    var el = []
-                    self.options.boards.map(function (board) {
-                        if (board.id === id) {
-                            return el.push(board)
-                        }
-                    })
-                    return el[0]
+                    return (self.options.boards.data || {})[id];
                 }