From f0512bbb1de66eff641e5d3112bdbe4b7bdf5e97 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Tue, 22 May 2018 18:22:25 +0200
Subject: [PATCH] Fix UI and realtime issues with kanban

---
 www/kanban/app-kanban.less | 17 +++++++++--
 www/kanban/inner.js        | 62 +++++++++++++++++++++++++++++---------
 www/kanban/jkanban.js      | 32 ++++++++------------
 3 files changed, 74 insertions(+), 37 deletions(-)

diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less
index 3e2b26bcb..60dd58135 100644
--- a/www/kanban/app-kanban.less
+++ b/www/kanban/app-kanban.less
@@ -84,16 +84,27 @@
         .tools_unselectable();
     }
 
-    .kanban-removeboard {
+    .kanban-additem, .kanban-remove-item {
         float: right;
-        margin: 10px;
+        background: #EEE;
+        padding: .25rem .5rem;
+        line-height: 1;
+        &:hover {
+            background: transparent;
+        }
+/*      margin: 10px;
         padding: 3px;
         width: 30px;
         text-align: center;
         background: #eee;
         font-weight: bold;
         cursor: pointer;
-        .tools_unselectable();
+        .tools_unselectable(); */
+    }
+
+    .kanban-additem {
+        margin-bottom: 5px;
+        margin-right: 5px;
     }
 
     .kanban-header-yellow {
diff --git a/www/kanban/inner.js b/www/kanban/inner.js
index 03d2a5389..c6cbebb32 100644
--- a/www/kanban/inner.js
+++ b/www/kanban/inner.js
@@ -1,5 +1,6 @@
 define([
     'jquery',
+    'json.sortify',
     '/bower_components/nthen/index.js',
     '/common/sframe-common.js',
     '/common/sframe-app-framework.js',
@@ -12,6 +13,7 @@ define([
     'css!/kanban/jkanban.css',
 ], function (
     $,
+    Sortify,
     nThen,
     SFCommon,
     Framework,
@@ -25,6 +27,23 @@ define([
     var verbose = function (x) { console.log(x); };
     verbose = function () {}; // comment out to enable verbose logging
 
+    var addRemoveItemButton = function (framework, kanban) {
+        var $container = $(kanban.element);
+        $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');
+            });
+            $('<button>', {'class': 'kanban-remove-item btn btn-default'}).click(function (e) {
+                e.stopPropagation();
+                board.item.splice(pos, 1);
+                $(el).remove();
+                kanban.onChange();
+            }).text('🗙').appendTo($(el));
+        });
+    };
+
     // Kanban code
     var initKanban = function (framework, boards) {
         var defaultBoards = [{
@@ -78,9 +97,13 @@ define([
             element: '#cp-app-kanban-content',
             gutter: '15px',
             widthBoard: '300px',
+            buttonContent: '🗙',
             onChange: function () {
                 verbose("Board object has changed");
                 framework.localChange();
+                if (kanban) {
+                    addRemoveItemButton(framework, kanban);
+                }
             },
             click: function (el) {
                 if (kanban.inEditMode) {
@@ -182,40 +205,42 @@ define([
                 kanban.onChange();
 
             },
-            removeClick: function (el) {
+            buttonClick: function (el, boardId, e) {
+                e.stopPropagation();
                 UI.confirm(Messages.kanban_deleteBoard, function (yes) {
                     if (!yes) { return; }
                     verbose("Delete board");
-                    var boardName = $(el.parentNode.parentNode).attr("data-id");
+                    //var boardName = $(el.parentNode.parentNode).attr("data-id");
                     for (var index in kanban.options.boards) {
-                        if (kanban.options.boards[index].id === boardName) {
+                        if (kanban.options.boards[index].id === boardId) {
                             break;
                         }
                         index++;
                     }
                     kanban.options.boards.splice(index, 1);
-                    kanban.removeBoard(boardName);
+                    kanban.removeBoard(boardId);
                     kanban.onChange();
                 });
             },
-            buttonClick: function (el, boardId, e) {
-                e.stopPropagation();
+            addItemClick: function (el) {
                 if (kanban.inEditMode) {
                     verbose("An edit is already active");
                     return;
                 }
                 kanban.inEditMode = true;
                 // create a form to enter element 
+                var boardId = $(el.parentNode.parentNode).attr("data-id");
                 var $item = $('<div>', {'class': 'kanban-item'});
                 var $input = getInput().val(name).appendTo($item);
                 kanban.addForm(boardId, $item[0]);
                 $input.focus();
                 var save = function () {
                     $item.remove();
+                    kanban.inEditMode = false;
+                    if (!$input.val()) { return; }
                     kanban.addElement(boardId, {
                         "title": $input.val(),
                     });
-                    kanban.inEditMode = false;
                 };
                 $input.blur(save);
                 $input.keydown(function (e) {
@@ -236,7 +261,7 @@ define([
             },
             addItemButton: true,
             boards: boards,
-            dragcancelEl: function (el, boardId) {
+            /*dragcancelEl: function (el, boardId) {
                 var pos = kanban.findElementPosition(el);
                 UI.confirm(Messages.kanban_deleteItem, function (yes) {
                     if (!yes) { return; }
@@ -251,7 +276,7 @@ define([
                     $(el).remove();
                     kanban.onChange();
                 });
-            }
+            }*/
         });
 
         var addBoardDefault = document.getElementById('kanban-addboard');
@@ -259,9 +284,8 @@ define([
             var counter = 1;
 
             // Get the new board id
-            while (kanban.options.boards.indexOf("board" + counter) !== -1) {
-                counter++;
-            }
+            var boardExists = function (b) { return b.id === "board" + counter; };
+            while (kanban.options.boards.some(boardExists)) { counter++; }
 
             kanban.addBoards([{
                 "id": "board" + counter,
@@ -280,24 +304,32 @@ define([
     // Start of the main loop
     var andThen2 = function (framework) {
 
-        var kanban = initKanban(framework);
+        var kanban;
 
         framework.onContentUpdate(function (newContent) {
+            // Init if needed
+            if (!kanban) {
+                kanban = initKanban(framework, (newContent || {}).content);
+                addRemoveItemButton(framework, kanban);
+                return;
+            }
+
             // Need to update the content
             verbose("Content should be updated to " + newContent);
             var currentContent = kanban.getBoardsJSON();
             var remoteContent = newContent.content;
 
-            if (currentContent !== remoteContent) {
+            if (Sortify(currentContent) !== Sortify(remoteContent)) {
                 // reinit kanban (TODO: optimize to diff only)
                 verbose("Content is different.. Applying content");
                 kanban.setBoards(remoteContent);
                 kanban.inEditMode = false;
+                addRemoveItemButton(framework, kanban);
             }
         });
 
         framework.setContentGetter(function () {
-            // var content = $("#cp-app-kanban-content").val();
+            if (!kanban) { return; }
             var content = kanban.getBoardsJSON();
             verbose("Content current value is " + content);
             return {
diff --git a/www/kanban/jkanban.js b/www/kanban/jkanban.js
index bc9648ccb..08ddc9776 100644
--- a/www/kanban/jkanban.js
+++ b/www/kanban/jkanban.js
@@ -67,7 +67,7 @@
                     boardTitleclick: function (el, boardId) {},
                     buttonClick: function (el, boardId) {},
                     colorClick: function (el, boardId) {},
-                    removeClick: function (el, boardId) {},
+                    addItemClick: function (el, boardId) {},
                     onChange: function () {}
                 };
 
@@ -257,13 +257,6 @@
                         if (self.options.boards !== boards)
                             self.options.boards.push(board);
 
-                        //add width to container
-                        /*if (self.container.style.width === '') {
-                            self.container.style.width = parseInt(boardWidth) + (parseInt(self.options.gutter) * 2) + 'px';
-                        } else {
-                            self.container.style.width = parseInt(self.container.style.width) + parseInt(boardWidth) + (parseInt(self.options.gutter) * 2) + 'px';
-                        }*/
-
                         //create node
                         var boardNode = document.createElement('div');
                         boardNode.dataset.id = board.id;
@@ -325,12 +318,12 @@
                         }
                         //footer board
                         var footerBoard = document.createElement('footer');
-                        //remove button
-                        var removeBoard = document.createElement('div');
-                        $(removeBoard).text("-")
-                        $(removeBoard).addClass("kanban-removeboard");
-                        footerBoard.appendChild(removeBoard);
-                        __onRemoveClickHandler(removeBoard);
+                        //add button
+                        var addBoardItem = document.createElement('button');
+                        $(addBoardItem).text("＋")
+                        $(addBoardItem).addClass("kanban-additem btn btn-default");
+                        footerBoard.appendChild(addBoardItem);
+                        __onAddItemClickHandler(addBoardItem);
 
                         //board assembly
                         boardNode.appendChild(headerBoard);
@@ -347,9 +340,9 @@
                 }
 
                 this.setBoards = function (boards) {
-                    for (var boardkey in boards) {
-                        // single board
-                        var board = boards[boardkey];
+                    self.element
+                    for (var boardkey in this.options.boards) {
+                        var board = this.options.boards[boardkey];
                         this.removeBoard(board.id);
                     }
                     this.options.boards = [];
@@ -478,10 +471,10 @@
                     });
                 }
 
-                function __onRemoveClickHandler(nodeItem, clickfn) {
+                function __onAddItemClickHandler(nodeItem, clickfn) {
                     nodeItem.addEventListener('click', function (e) {
                         e.preventDefault;
-                        self.options.removeClick(this);
+                        self.options.addItemClick(this);
                         if (typeof (this.clickfn) === 'function')
                             this.clickfn(this);
                     });
@@ -489,6 +482,7 @@
 
                 function __onButtonClickHandler(nodeItem, boardId) {
                     nodeItem.addEventListener('click', function (e) {
+                        e.stopPropagation();
                         e.preventDefault;
                         self.options.buttonClick(this, boardId, e);
                         // if(typeof(this.clickfn) === 'function')