Add tags filter

www/kanban/app-kanban.less

@@ -190,6 +190,9 @@
             overflow-wrap: anywhere;
             flex: 1;
         }
+        &.kanban-item-hidden {
+            display: none;
+        }
     }
 
     #cp-app-kanban-content {
@@ -218,6 +221,33 @@
             width: 100%;
             justify-content: space-between;
             position: relative;
+            .cp-kanban-filterTags {
+                display: inline-flex;
+                width: 250px;
+                height: 40px;
+                align-items: center;
+
+                &> .tokenfield {
+                    border-radius: 0px;
+                    display: inline-flex;
+                    border: 1px solid @cryptpad_text_col;
+                    flex-wrap: nowrap;
+                    align-items: center;
+                    width: 100px;
+                    input {
+                        margin-right: 5px;
+                    }
+                    .token {
+                        order: 2;
+                        border-radius: 0;
+                        margin-left: 5px;
+                        margin-right: 0px;
+                        .token-label {
+                            font-size: 12px;
+                        }
+                    }
+                }
+            }
             .cp-kanban-changeView {
                 height: 30px;
                 width: 60px;

www/kanban/inner.js

@@ -57,9 +57,12 @@ define([
     Messages.kanban_color = "Color"; // XXX
     Messages.kanban_submit = "Submit"; // XXX
     Messages.kanban_delete = "Delete"; // XXX
+    Messages.kanban_tags = "Filter tags"; // XXX
 
 // XXX
-// Add "large" view
+// Tag filter:
+//   remember tags in padAttribute
+//   click on a tag ==> add it to the list
 
     var setValueAndCursor = function (input, val, _cursor) {
         if (!input) { return; }
@@ -79,6 +82,20 @@ define([
         input.selectionEnd = selects[1];
     };
 
+    var getExistingTags = function (boards) {
+        var tags = [];
+        boards = boards || {};
+        Object.keys(boards.items || {}).forEach(function (id) {
+            var data = boards.items[id];
+            if (!Array.isArray(data.tags)) { return; }
+            data.tags.forEach(function (tag) {
+                if (tags.indexOf(tag) === -1) { tags.push(tag); }
+            });
+        });
+        tags.sort();
+        return tags;
+    };
+
     var addEditItemButton = function () {};
     var onRemoteChange = Util.mkEvent();
     var editModal;
@@ -161,19 +178,6 @@ define([
         });
 
         // Tags
-        var getExisting = function () {
-            var tags = [];
-            var boards = kanban.options.boards || {};
-            Object.keys(boards.items || {}).forEach(function (id) {
-                var data = boards.items[id];
-                if (!Array.isArray(data.tags)) { return; }
-                data.tags.forEach(function (tag) {
-                    if (tags.indexOf(tag) === -1) { tags.push(tag); }
-                });
-            });
-            tags.sort();
-            return tags;
-        };
         var $tags = $(tagsDiv);
         var _field, initialTags;
         var tags = {
@@ -191,11 +195,10 @@ define([
                 $tags.empty();
                 var input = UI.dialog.textInput();
                 $tags.append(input);
-                var existing = getExisting();
+                var existing = getExistingTags(kanban.options.boards);
                 _field = UI.tokenField(input, existing).preventDuplicates(function (val) {
                     UI.warn(Messages._getKey('tags_duplicate', [val]));
                 });
-                $tags.append(_field);
                 _field.setTokens(tags || []);
 
                 var commitTags = function () {
@@ -682,8 +685,29 @@ define([
                 $container.removeClass('cp-kanban-quick');
                 framework._.sfCommon.setPadAttribute('quickMode', false);
             });
+
+            var existing = getExistingTags(kanban.options.boards);
+            var input = UI.dialog.textInput();
+            var tags = h('div.cp-kanban-filterTags', [
+                Messages.kanban_tags,
+                input
+            ]);
+            var field = UI.tokenField(input, existing).preventDuplicates(function (val) {
+                UI.warn(Messages._getKey('tags_duplicate', [val]));
+            });
+            field.setTokens([]);
+            var commitTags = function () {
+                var t = field.getTokens();
+                kanban.options.tags = t;
+                kanban.setBoards(kanban.options.boards);
+                addEditItemButton(framework, kanban);
+            };
+            field.tokenfield.on('tokenfield:createdtoken', commitTags);
+            field.tokenfield.on('tokenfield:editedoken', commitTags);
+            field.tokenfield.on('tokenfield:removedtoken', commitTags);
+
             var container = h('div#cp-kanban-controls', [
-                h('div', "Tags"), // XXX
+                tags, // XXX
                 h('div.cp-kanban-changeView', [
                     small,
                     big
@@ -860,9 +884,7 @@ define([
 
         framework.setContentGetter(function () {
             if (!kanban) {
-                return {
-                    content: {}
-                };
+                throw new Error("NOT INITIALIZED");
             }
             var content = kanban.getBoardsJSON();
             verbose("Content current value is " + content);

www/kanban/jkanban.js

@@ -56,6 +56,7 @@
                         items: {},
                         list: []
                     },
+                    tags: [],
                     dragBoards: true,
                     addItemButton: false,
                     readOnly: false,
@@ -337,6 +338,16 @@
                     nodeItemText.dataset.eid = element.id;
                     nodeItemText.innerText = element.title;
                     nodeItem.appendChild(nodeItemText);
+                    // Check if this card is filtered out
+                    if (Array.isArray(self.options.tags) && self.options.tags.length) {
+                        var hide = !Array.isArray(element.tags) ||
+                            !element.tags.some(function (tag) {
+                              return self.options.tags.indexOf(tag) !== -1;
+                        });
+                        if (hide) {
+                            nodeItem.classList.add('kanban-item-hidden');
+                        }
+                    }
                     if (element.body) {
                         var html = self.renderMd(element.body);
                         var nodeBody = document.createElement('div');