From 889b18a1ff16a48093385c1987b016d989e5991e Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Mon, 2 Mar 2020 12:05:09 +0100
Subject: [PATCH] Drag to remove

---
 www/kanban/app-kanban.less | 19 ++++++++++++++
 www/kanban/inner.js        | 54 +++++++++++++++++++++++++++++---------
 www/kanban/jkanban.css     |  2 ++
 www/kanban/jkanban.js      | 53 ++++++++++++++++++++++++++++---------
 4 files changed, 103 insertions(+), 25 deletions(-)

diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less
index e1f5ab274..615a5c904 100644
--- a/www/kanban/app-kanban.less
+++ b/www/kanban/app-kanban.less
@@ -45,6 +45,23 @@
                 justify-content: space-around;
             }
         }
+        #kanban-trash {
+            width: 100px;
+            height: 100px;
+            align-self: end;
+            font-size: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            &.kanban-trash-active {
+                color: red;
+                border: 1px solid red;
+                background-color: rgba(255,0,0,0.5);
+            }
+            .kanban-item, .kanban-board {
+                display: none;
+            }
+        }
 
         .kanban-item {
             display: flex;
@@ -103,6 +120,7 @@
             .tools_unselectable();
         }
 
+/*
         .kanban-remove-item {
             padding: 0 0.5em;
             visibility: hidden;
@@ -112,6 +130,7 @@
                 visibility: visible;
             }
         }
+*/
 
         .kanban-additem {
             float: right;
diff --git a/www/kanban/inner.js b/www/kanban/inner.js
index 6b041c44d..6a1448009 100644
--- a/www/kanban/inner.js
+++ b/www/kanban/inner.js
@@ -32,28 +32,37 @@ define([
 
     var COLORS = ['yellow', 'green', 'orange', 'blue', 'red', 'purple', 'cyan', 'lightgreen', 'lightblue'];
 
-    var addRemoveItemButton = function (framework, kanban) {
+    var addEditItemButton = function (framework, kanban) {
         if (!kanban) { return; }
         if (framework.isReadOnly() || framework.isLocked()) { return; }
         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 boards = kanban.options.boards;
-            var board = boards.data[$(el.parentNode.parentNode).attr('data-id')];
+        $container.find('.kanban-edit-item').remove();
+        $container.find('.kanban-item').each(function (i, el) {
+            var itemId = $(el).attr('data-eid');
             $('<button>', {
-                'class': 'kanban-remove-item btn btn-default fa fa-times',
-                title: Messages.kanban_removeItem
+                'class': 'kanban-edit-item btn btn-default fa fa-pencil',
             }).click(function (e) {
                 e.stopPropagation();
+                /*
                 UI.confirm(Messages.kanban_removeItemConfirm, function (yes) {
                     if (!yes) { return; }
                     board.item.splice(pos, 1);
                     $(el).remove();
                     kanban.onChange();
                 });
+                */
+                // XXX Open edit modal
             }).appendTo($(el));
         });
+        $container.find('.kanban-board').each(function (i, el) {
+            var itemId = $(el).attr('data-id');
+            $('<button>', {
+                'class': 'kanban-edit-item btn btn-default fa fa-pencil',
+            }).click(function (e) {
+                e.stopPropagation();
+                // XXX Open edit modal
+            }).appendTo($(el).find('.kanban-board-header'));
+        });
     };
 
     // Kanban code
@@ -129,7 +138,7 @@ define([
                 verbose("Board object has changed");
                 framework.localChange();
                 if (kanban) {
-                    addRemoveItemButton(framework, kanban);
+                    addEditItemButton(framework, kanban);
                 }
             },
             click: function (el) {
@@ -176,7 +185,7 @@ define([
                         e.stopPropagation();
                         $(el).text(name);
                         kanban.inEditMode = false;
-                        addRemoveItemButton(framework, kanban);
+                        addEditItemButton(framework, kanban);
                         return;
                     }
                 });
@@ -407,7 +416,7 @@ define([
             if (framework.isReadOnly()) { return; }
             if (!kanban) { return; }
             if (unlocked) {
-                addRemoveItemButton(framework, kanban);
+                addEditItemButton(framework, kanban);
                 kanban.options.readOnly = false;
                 return void $container.removeClass('cp-app-readonly');
             }
@@ -498,7 +507,7 @@ define([
             // Init if needed
             if (!kanban) {
                 kanban = initKanban(framework, (newContent || {}).content);
-                addRemoveItemButton(framework, kanban);
+                addEditItemButton(framework, kanban);
                 return;
             }
 
@@ -513,7 +522,7 @@ define([
                 verbose("Content is different.. Applying content");
                 kanban.setBoards(remoteContent);
                 kanban.inEditMode = false;
-                addRemoveItemButton(framework, kanban);
+                addEditItemButton(framework, kanban);
                 restoreCursor(cursor);
             }
         });
@@ -531,8 +540,27 @@ define([
             };
         });
 
+        var cleanData = function (boards) {
+            if (typeof(boards) !== "object") { return; }
+            var items = boards.items || {};
+            var data = boards.data || {};
+            var list = boards.list || [];
+            Object.keys(data).forEach(function (id) {
+                if (list.indexOf(id) === -1) { delete data[id]; }
+            });
+            Object.keys(items).forEach(function (eid) {
+                var exists = Object.keys(data).some(function (id) {
+                    return (data[id].item || []).indexOf(eid) !== -1;
+                });
+                if (!exists) { delete items[eid]; }
+            });
+            framework.localChange();
+        };
+
         framework.onReady(function () {
             $("#cp-app-kanban-content").focus();
+            var content = kanban.getBoardsJSON();
+            cleanData(content);
         });
 
         framework.onDefaultContentNeeded(function () {
diff --git a/www/kanban/jkanban.css b/www/kanban/jkanban.css
index ed5a8f5db..197a2d224 100644
--- a/www/kanban/jkanban.css
+++ b/www/kanban/jkanban.css
@@ -19,6 +19,7 @@
 
 .kanban-board.is-moving.gu-mirror {
     transform: rotate(3deg);
+    opacity: 0.8;
 }
 
 .kanban-board.is-moving.gu-mirror .kanban-drag {
@@ -69,6 +70,7 @@
 .kanban-item.is-moving.gu-mirror {
     transform: rotate(3deg);
     height: auto !important;
+    opacity: 0.8;
 }
 
 /* Dragula CSS  */
diff --git a/www/kanban/jkanban.js b/www/kanban/jkanban.js
index a9b199d4d..7318c7453 100644
--- a/www/kanban/jkanban.js
+++ b/www/kanban/jkanban.js
@@ -94,7 +94,8 @@
                                 },
                                 accepts: function (el, target, source, sibling) {
                                     if (self.options.readOnly) { return false; }
-                                    return target.classList.contains('kanban-container');
+                                    return target.classList.contains('kanban-container') ||
+                                           target.classList.contains('kanban-trash');
                                 },
                                 revertOnSpill: true,
                                 direction: 'horizontal',
@@ -179,6 +180,14 @@
                                 var boardId = $(source).closest('kanban-board').data('id');
                                 self.options.dragcancelEl(el, boardId);
                             })
+                            .on('over', function (el, target, source) {
+                                if (!target.classList.contains('kanban-trash')) { return false; }
+                                target.classList.add('kanban-trash-active');
+                            })
+                            .on('out', function (el, target) {
+                                if (!target.classList.contains('kanban-trash')) { return false; }
+                                target.classList.remove('kanban-trash-active');
+                            })
                             .on('drop', function(el, target, source, sibling) {
                                 self.enableAllBoards();
                                 el.classList.remove('is-moving');
@@ -186,15 +195,26 @@
                                 console.log("In drop");
 
                                 var sourceId = $(source).closest('.kanban-board').data('id');
-                                var targetId = $(target).closest('.kanban-board').data('id');
-
                                 var board1 = __findBoardJSON(sourceId);
+                                var id1 = $(el).attr('data-eid');
+                                var pos1 = board1.item.indexOf(id1);
+
+                                if (target.classList.contains('kanban-trash')) {
+                                    board1.item.splice(pos1, 1);
+                                    delete self.options.boards.items[id1];
+                                    self.onChange();
+                                    return;
+                                }
+
+
+
+
+                                var targetId = $(target).closest('.kanban-board').data('id');
                                 var board2 = __findBoardJSON(targetId);
-console.log(source, target, sourceId, targetId, board1, board2);
+                                var id2 = $(sibling).attr('data-eid');
+                                var pos2 = id2 ? board2.item.indexOf(id2) : (board2.item.length)
+                                if (pos2 === -1) { pos2 = board2.item.length; }
 
-                                var pos1 = self.dragItemPos;
-                                var pos2 = (sibling) ? self.findElementPosition(sibling) : (board2.item.length + 1);
-                                console.log("Drop element " + pos1 + " before " + pos2);
 
                                 if (el !== null) {
                                     self.options.dropEl(el, target, source, sibling);
@@ -204,13 +224,14 @@ console.log(source, target, sourceId, targetId, board1, board2);
                                     }
                                 }
 
-                                var item = board1.item[pos1];
-                                // if (board1==board2 && pos2<pos1)
-                                //   pos2 = pos2;
+                                if (board1 === board2 && pos1 < pos2) {
+                                    pos2 = pos2 - 1;
+                                }
 
                                 // moving element to target array
-                                board1.item.splice(pos1, 1);
-                                board2.item.splice(pos2 - 1, 0, item);
+
+                                var item = board1.item.splice(pos1, 1);
+                                board2.item.splice(pos2, 0, item[0]);
 
                                 // send event that board has changed
                                 self.onChange();
@@ -470,12 +491,20 @@ console.log(source, target, sourceId, targetId, board1, board2);
                     addBoard.id = 'kanban-addboard';
                     addBoard.setAttribute('class', 'fa fa-plus');
                     boardContainer.appendChild(addBoard);
+                    var trash = document.createElement('div');
+                    trash.setAttribute('id', 'kanban-trash');
+                    trash.setAttribute('class', 'kanban-trash');
+                    var trashIcon = document.createElement('i');
+                    trashIcon.setAttribute('class', 'fa fa-trash');
+                    trash.appendChild(trashIcon);
+                    self.boardContainer.push(trash);
 
                     self.container = boardContainer;
                     //add boards
                     self.addBoards();
                     //appends to container
                     self.element.appendChild(boardContainerOuter);
+                    self.element.appendChild(trash);
 
                     // send event that board has changed
                     self.onChange();