diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less index a6c546b76..d8bfbce31 100644 --- a/www/kanban/app-kanban.less +++ b/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; diff --git a/www/kanban/inner.js b/www/kanban/inner.js index e1658c1af..a0f4e100e 100644 --- a/www/kanban/inner.js +++ b/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); diff --git a/www/kanban/jkanban.js b/www/kanban/jkanban.js index f0515ddb8..f34875931 100644 --- a/www/kanban/jkanban.js +++ b/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');