From 6b734e7a8000d14224a5815b55d559c057629df2 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Wed, 5 Aug 2020 11:17:00 +0200
Subject: [PATCH] Switch between OR and AND modes for the tags filter in kanban

---
 www/kanban/inner.js            | 14 ++++++++++
 www/kanban/jkanban_cp.js       | 16 ++++++++---
 www/settings/app-settings.less |  2 +-
 www/settings/inner.js          | 51 +++++++++++++++++++++++++++++++++-
 4 files changed, 77 insertions(+), 6 deletions(-)

diff --git a/www/kanban/inner.js b/www/kanban/inner.js
index 9aaa508a0..7a1450d8b 100644
--- a/www/kanban/inner.js
+++ b/www/kanban/inner.js
@@ -608,6 +608,8 @@ define([
             framework._.sfCommon.openUnsafeURL(href);
         };
 
+        var md = framework._.cpNfInner.metadataMgr.getPrivateData();
+        var _tagsAnd = Util.find(md, ['settings', 'kanban', 'tagsAnd']);
 
         var kanban = new jKanban({
             element: '#cp-app-kanban-content',
@@ -615,6 +617,7 @@ define([
             widthBoard: '300px',
             buttonContent: '❌',
             readOnly: framework.isReadOnly(),
+            tagsAnd: _tagsAnd,
             refresh: function () {
                 onRedraw.fire();
             },
@@ -830,6 +833,17 @@ define([
             boards: boards
         });
 
+        framework._.cpNfInner.metadataMgr.onChange(function () {
+            var md = framework._.cpNfInner.metadataMgr.getPrivateData();
+            var tagsAnd = Util.find(md, ['settings', 'kanban', 'tagsAnd']);
+            if (_tagsAnd === tagsAnd) { return; }
+
+            // If the rendering has changed, update the value and redraw
+            kanban.options.tagsAnd = tagsAnd;
+            _tagsAnd = tagsAnd;
+            kanban.setBoards(kanban.options.boards);
+        });
+
         if (migrated) { framework.localChange(); }
 
         var addBoardDefault = document.getElementById('kanban-addboard');
diff --git a/www/kanban/jkanban_cp.js b/www/kanban/jkanban_cp.js
index 0e0568f16..f122eed59 100644
--- a/www/kanban/jkanban_cp.js
+++ b/www/kanban/jkanban_cp.js
@@ -506,10 +506,18 @@ define([
             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;
-                });
+                var hide;
+                if (self.options.tagsAnd) {
+                    hide = !Array.isArray(element.tags) ||
+                        !self.options.tags.every(function (tag) {
+                          return element.tags.indexOf(tag) !== -1;
+                    });
+                } else {
+                    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');
                 }
diff --git a/www/settings/app-settings.less b/www/settings/app-settings.less
index f64455540..3ea38ae97 100644
--- a/www/settings/app-settings.less
+++ b/www/settings/app-settings.less
@@ -167,7 +167,7 @@
                 }
             }
 
-            .cp-settings-autostore-radio {
+            .cp-settings-radio-container {
                 display: flex;
                 align-items: center;
                 flex-wrap: wrap;
diff --git a/www/settings/inner.js b/www/settings/inner.js
index df24e71d2..7d2a418a2 100644
--- a/www/settings/inner.js
+++ b/www/settings/inner.js
@@ -86,6 +86,9 @@ define([
             'cp-settings-code-font-size',
             'cp-settings-code-spellcheck',
         ],
+        'kanban': [
+            'cp-settings-kanban-tags',
+        ],
         'subscription': {
             onClick: function() {
                 var urls = common.getMetadataMgr().getPrivateData().accounts;
@@ -290,7 +293,7 @@ define([
                 input: { value: 1 },
                 label: { class: 'noTitle' }
             });
-        var $div2 = $(h('div.cp-settings-autostore-radio', [
+        var $div2 = $(h('div.cp-settings-radio-container', [
             opt3,
             opt2,
             opt1
@@ -1470,6 +1473,52 @@ define([
     };
 
 
+    Messages.settings_kanbanTagsTitle = "Kanban tags filter"; // XXX
+    Messages.settings_kanbanTagsHint = "Select how you want the tags filter to act when selecting multiple tags: only show cards containing all the selected tags (AND) or show cards containing any of the selected tags (OR)"; // XXX
+    Messages.settings_kanbanTagsAnd = "AND";
+    Messages.settings_kanbanTagsOr = "OR";
+    Messages.settings_cat_kanban = "Kanban";
+
+    makeBlock('kanban-tags', function(cb) {
+
+        var opt1 = UI.createRadio('cp-settings-kanban-tags', 'cp-settings-kanban-tags-and',
+            Messages.settings_kanbanTagsAnd, false, {
+                input: { value: 1 },
+                label: { class: 'noTitle' }
+            });
+        var opt2 = UI.createRadio('cp-settings-kanban-tags', 'cp-settings-kanban-tags-or',
+            Messages.settings_kanbanTagsOr, true, {
+                input: { value: 0 },
+                label: { class: 'noTitle' }
+            });
+        var div = h('div.cp-settings-radio-container', [
+            opt1,
+            opt2,
+        ]);
+        var $d = $(div);
+
+        var spinner = UI.makeSpinner($d);
+
+        $d.find('input[type="radio"]').on('change', function() {
+            spinner.spin();
+            var val = $('input:radio[name="cp-settings-kanban-tags"]:checked').val();
+            val = Number(val) || 0;
+            common.setAttribute(['kanban', 'tagsAnd'], val, function() {
+                spinner.done();
+            });
+        });
+
+
+        common.getAttribute(['kanban', 'tagsAnd'], function(e, val) {
+            if (e) { return void console.error(e); }
+            if (val) {
+                $(opt1).find('input').attr('checked', 'checked');
+            }
+        });
+
+        cb($d);
+    }, true);
+
     // Settings app
 
     var createUsageButton = function() {