mockup/thet-relitemsfix: Fix filtering of non-selectable items

Repository: mockup
Branch: refs/heads/thet-relitemsfix
Date: 2017-07-27T23:58:47+02:00
Author: Johannes Raggam (thet) <[email protected]>
Commit: https://github.com/plone/mockup/commit/1c42f7f5f178a22d75279b6f32e2069f64b7809a

Fix filtering of non-selectable items
Do not filter out already selected items in search mode but make them non-selectable.
Also change the filtering logic where select2 kept filtered out items as empty list elements in the result list and making selecting items impossible in some cases.

Files changed:
M CHANGES.rst
M mockup/patterns/relateditems/pattern.js
M mockup/tests/pattern-relateditems-test.js

diff --git a/CHANGES.rst b/CHANGES.rst
index a5f16fbb..36f949fa 100644
--- a/CHANGES.rst
+++ b/CHANGES.rst
@@ -15,7 +15,9 @@ Incompatibile changes:
 
 Bug fixes:
 
-- * Add item here *
+- Do not filter out already selected items in search mode but make them non-selectable.
+  Also change the filtering logic where select2 kept filtered out items as empty list elements in the result list and making selecting items impossible in some cases.
+  [thet]
 
 
 2.5.0 (2017-07-03)
diff --git a/mockup/patterns/relateditems/pattern.js b/mockup/patterns/relateditems/pattern.js
index f10d3145..28aecc03 100644
--- a/mockup/patterns/relateditems/pattern.js
+++ b/mockup/patterns/relateditems/pattern.js
@@ -239,6 +239,18 @@ define([
           var more = (page * this.options.pageSize) < data.total;
           var results = data.results;
 
+          // Filter out non-selectable and non-folderish while browsing.
+          if (this.browsing) {
+            results = results.filter(
+              function (item) {
+                if (!item.is_folderish && !this.isSelectable(item)) {
+                  return false;
+                }
+                return true;
+              }.bind(this)
+            );
+          }
+
           // Extend ``data`` with a ``oneLevelUp`` item when browsing
           var path = this.currentPath.split('/');
           if (page === 1 &&           // Show level up only on top.
@@ -493,17 +505,6 @@ define([
             item.selectable = false;
           }
         }
-        if (
-          !item.selectable && (
-            !self.browsing ||
-            self.browsing && !item.is_folderish
-          )
-        ) {
-          // Filter out non-selectable and non-folderish while browsing.
-          // or
-          // Exclude already selected items while searching.
-          return;
-        }
         var result = $(self.applyTemplate('result', item));
 
         $('.pattern-relateditems-result-select', result).on('click', function(event) {
diff --git a/mockup/tests/pattern-relateditems-test.js b/mockup/tests/pattern-relateditems-test.js
index 13454588..362dfd5e 100644
--- a/mockup/tests/pattern-relateditems-test.js
+++ b/mockup/tests/pattern-relateditems-test.js
@@ -236,15 +236,18 @@ define([
       $input.trigger(keyup);
       clock.tick(1000);
 
-      // Searching for folder 2 brings up 2 items: folder2 itself and the not-yet-selected image.
-      expect($('.pattern-relateditems-result-select')).to.have.length(2);
+      // Searching for folder 2 brings up 3 items: folder2 itself, the already
+      // selected but now not selectable image and the not-yet-selected image.
+      expect($('.pattern-relateditems-result-select')).to.have.length(3);
 
       // We can even browse into folders in search mode
       $('.pattern-relateditems-result-browse[data-path="/folder2"]').click();
       clock.tick(1000);
 
-      // Being in folder 2, we see again two items...
-      expect($('.pattern-relateditems-result-select')).to.have.length(2);
+      // Being in folder 2, we see again three items...
+      expect($('.pattern-relateditems-result-select')).to.have.length(3);
+      // One of them being selectable
+      expect($('.pattern-relateditems-result-select.selectable')).to.have.length(1);
       expect($('.pattern-relateditems-result-select')[0].text).to.contain('One level up');
 
       // Selecting the image will add it to the selected items.
@@ -267,12 +270,13 @@ define([
       // result list must have expected length
       // Only Images and Folders.
       expect($('.pattern-relateditems-result-select')).to.have.length(5);
+      expect($('.pattern-relateditems-result-select.selectable')).to.have.length(3);
 
 
       // PT 2
 
       // select one element
-      $('a.pattern-relateditems-result-select')[2].click();
+      $('a.pattern-relateditems-result-select[data-path="/image1"]').click();
       expect($('input.pat-relateditems').val()).to.be.equal('UID8');
 
 
@@ -283,10 +287,10 @@ define([
       clock.tick(1000);
 
       // result list must have expected length
-      expect($('.pattern-relateditems-result-select')).to.have.length(4);
+      expect($('.pattern-relateditems-result-select.selectable')).to.have.length(2);
 
       // add another one
-      $('a.pattern-relateditems-result-select')[2].click();
+      $('a.pattern-relateditems-result-select[data-path="/image2"]').click();
       expect($('input.pat-relateditems').val()).to.be.equal('UID8,UID9');
 
       // remove first one
@@ -299,10 +303,10 @@ define([
       var keyup = $.Event('keyup-change');
       $input.trigger(keyup);
       clock.tick(1000);
-      expect($('.pattern-relateditems-result-select')).to.have.length(2);
+      expect($('.pattern-relateditems-result-select.selectable')).to.have.length(2);
 
       // add first from result
-      $('a.pattern-relateditems-result-select')[1].click();
+      $('a.pattern-relateditems-result-select[data-path="/image3"]').click();
       expect($('input.pat-relateditems').val()).to.be.equal('UID9,UID10');
 
     });
@@ -324,7 +328,7 @@ define([
       //  // PT 2
 
       //  // select one element
-      $('a.pattern-relateditems-result-select')[0].click();
+      $('a.pattern-relateditems-result-select[data-path="/document1"]').click();
       expect($('input.pat-relateditems').val()).to.be.equal('UID1');
 
 
@@ -335,10 +339,10 @@ define([
       clock.tick(1000);
 
       //  // result list must have expected length
-      expect($('.pattern-relateditems-result-select')).to.have.length(10);
+      expect($('.pattern-relateditems-result-select.selectable')).to.have.length(10);
 
       //  // add another one
-      $('a.pattern-relateditems-result-select')[0].click();
+      $('a.pattern-relateditems-result-select[data-path="/document2"]').click();
       expect($('input.pat-relateditems').val()).to.be.equal('UID1,UID2');
 
       //  // remove first one
@@ -351,10 +355,10 @@ define([
       var keyup = $.Event('keyup-change');
       $input.trigger(keyup);
       clock.tick(1000);
-      expect($('.pattern-relateditems-result-select')).to.have.length(1);
+      expect($('.pattern-relateditems-result-select.selectable')).to.have.length(1);
 
       //  // add first from result
-      $('a.pattern-relateditems-result-select')[0].click();
+      $('a.pattern-relateditems-result-select[data-path="/folder2/document15"]').click();
       expect($('input.pat-relateditems').val()).to.be.equal('UID2,UID15');
 
     });



------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot