Search/filter users in the share dialog

NEWS.md

@@ -1,5 +1,6 @@
 3.10.1 ()
 ---------
+* Adds user search/filter to the Share Dialog [3417](https://github.com/CartoDB/cartodb/pull/3417)
 * Change default CartoCSS properties of polygon strokes [3375](https://github.com/CartoDB/cartodb/pull/3375)
 * Fix custom image header templates [3378](https://github.com/CartoDB/cartodb/pull/3378)
 * Adds field to select or type an administrative region in the georeferenciation by city name pane [3306](https://github.com/CartoDB/cartodb/pull/3306)

app/assets/stylesheets/new_common/change-privacy.css.scss

@@ -48,17 +48,30 @@
   width: 200px;
   margin-right: 120px;
 }
+.Dialog-body.ChangePrivacy-ShareDialog-body {
+  padding-top: 0px;
+}
+.ChangePrivacy-ShareDialog-body {
+  @include display-flex();
+  @include align-items(center);
+  @include flex-direction(column);
+}
+.ChangePrivacy-ShareDialog-body .u-inner {
+  width: 620px;
+}
+.ChangePrivacy-ShareFilters{
+  border-bottom: 1px solid $cStructure-mainLine;
+}
 .ChangePrivacy-shareListItem {
   @include display-flex();
   @include justify-content(space-between, justify);
   @include align-items(center);
   padding-bottom: $sMargin-element;
-  width: 620px;
+  padding-top: $sMargin-element;
   margin: 0 auto;
 }
-.ChangePrivacy-shareListItem:not(:first-child) {
+.ChangePrivacy-shareListItem:not(:nth-child(2)) {
   border-top: 1px solid $cStructure-mainLine;
-  padding-top: $sMargin-element;
 }
 .ChangePrivacy-shareListItemInfo {
   @include display-flex();

app/assets/stylesheets/new_common/filters.css.scss

@@ -267,7 +267,10 @@ a.Filters-cleanSearch { line-height:32px }
   .Filters-orderItem,
   .Button--positive { display:none }
 
-  .Filters-searchEnabler { display:inline }
+  .Filters-searchEnabler {
+    display:inline;
+    min-width: 65px;
+  }
   .Filters-searchItem { display:inherit }
 }
 .Filters-progress {

lib/assets/javascripts/cartodb/new_common/dialogs/change_privacy/share_view.js

@@ -11,7 +11,11 @@ module.exports = cdb.core.View.extend({
   className: 'Dialog-expandedSubContent',
 
   events: {
-    'click .js-save' : '_onClickSave'
+    'click .js-save': '_onClickSave',
+    'click .js-search-link': '_onSearchClick',
+    'click .js-clean-search': '_onCleanSearchClick',
+    'keydown .js-search-input': '_onKeyDown',
+    'submit .js-search-form': 'killEvent'
   },
 
   initialize: function() {
@@ -20,44 +24,35 @@ module.exports = cdb.core.View.extend({
     }
     this._viewModel = this.options.viewModel;
     this.add_related_model(this._viewModel);
-
     this._template = cdb.templates.getTemplate('new_common/dialogs/change_privacy/share_view/template');
+
+    this._viewModel.bind('change:search', this.render, this);
   },
 
   render: function() {
     this.clearSubViews();
 
     this.$el.html(
       this._template({
+        q: this._viewModel.get('search')
       })
     );
 
-    this._renderOrganizationPermissionView();
+    if (this._viewModel.get('search') === '') {
+      this._renderOrganizationPermissionView();
+    } else {
+      this._focusSearchInput();
+    }
     this._renderUserPermissionViews();
 
     return this;
   },
 
-  _organization: function() {
-    return this._viewModel.get('user').organization;
-  },
-
-  _renderOrganizationPermissionView: function() {
-    this._appendPermissionView(
-      new PermissionView({
-        model: this._organization(),
-        permission: this._viewModel.get('permission'),
-        canChangeWriteAccess: this._viewModel.canChangeWriteAccess(),
-        title: 'Default settings for your Organization',
-        desc: 'New users will have this permission'
-      })
-    );
-  },
-
   _renderUserPermissionViews: function() {
+    var organizationUsers = this._viewModel.organizationUsers();
     var usersUsingVis = this._viewModel.usersUsingVis();
 
-    this._organization().users.each(function(user) {
+    _.each(organizationUsers, function(user) {
       this._appendPermissionView(
         new PermissionView({
           model: user,
@@ -72,13 +67,62 @@ module.exports = cdb.core.View.extend({
     }, this);
   },
 
+  _renderOrganizationPermissionView: function() {
+    var organization = this._viewModel.get('user').organization;
+    this._appendPermissionView(
+      new PermissionView({
+        model: organization,
+        permission: this._viewModel.get('permission'),
+        canChangeWriteAccess: this._viewModel.canChangeWriteAccess(),
+        title: 'Default settings for your Organization',
+        desc: 'New users will have this permission'
+      })
+    );
+  },
+
   _appendPermissionView: function(view) {
     this.$('.js-permissions').append(view.render().el);
     this.addView(view);
   },
 
+  _focusSearchInput: function() {
+    var $searchInput = this.$('.js-search-input');
+    $searchInput.focus().val($searchInput.val());
+  },
+
+  _onSearchClick: function(e) {
+    if (e) this.killEvent(e);
+    this.$('.js-search-input').focus();
+  },
+
   _onClickSave: function(ev) {
     this.killEvent(ev);
     this._viewModel.save();
+  },
+
+  _onCleanSearchClick: function(ev) {
+    this.killEvent(ev);
+    this._cleanSearch()
+  },
+
+  _onKeyDown: function(ev) {
+    var enterPressed = (ev.keyCode == $.ui.keyCode.ENTER);
+    var escapePressed = (ev.keyCode == $.ui.keyCode.ESCAPE);
+    if (enterPressed) {
+      this.killEvent(ev);
+      this._submitSearch();
+    } else if (escapePressed) {
+      this.killEvent(ev);
+      this._cleanSearch();
+    }
+  },
+
+  _submitSearch: function(e) {
+    var search = this.$('.js-search-input').val().trim();
+    this._viewModel.set('search', search);
+  },
+
+  _cleanSearch: function() {
+    this._viewModel.set('search', '');
   }
 });

lib/assets/javascripts/cartodb/new_common/dialogs/change_privacy/share_view/template.jst.ejs

@@ -1,10 +1,38 @@
-<div class="u-inner Dialog-body Dialog-body--withoutBorder Dialog-body--expanded is-expandedWithSubFooter js-permissions"></div>
+<div class="ChangePrivacy-ShareDialog-body Dialog-body Dialog-body--withoutBorder Dialog-body--expanded is-expandedWithSubFooter">
+  <div class="u-inner js-permissions">
+    <div class="ChangePrivacy-ShareFilters Filters is-relative">
+      <div class="Filters-inner search--enabled">
+        <div class="Filters-row">
+          <div class="Filters-type">
+            <ul class="Filters-list">
+              <li class="Filters-typeItem Filters-searchEnabler">
+                <a href="#/search" class="Filters-searchLink js-search-link">
+                  <i class="Filters-searchLinkIcon iconFont iconFont-Lens"></i>Search
+                </a>
+              </li>
+              <li class="Filters-typeItem Filters-searchItem">
+                <form class="Filters-searchForm js-search-form" action="#">
+                  <input class="Filters-searchInput js-search-input" type="text" value="<%= q %>" placeholder="" />
+                  <% if (q) { %>
+                    <a href="#" class="Filters-cleanSearch js-clean-search">
+                      <i class="iconFont iconFont-Close"></i>
+                    </a>
+                  <% } %>
+                </form>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 
 <div class="Dialog-stickyFooter">
   <div class="Dialog-footer ChangePrivacy-shareFooter u-inner">
     <div class="ChangePrivacy-shareFooterGroup">
       <i class="iconFont iconFont-Info ChangePrivacy-infoIcon"></i>
-      <div class="DefaultSecondary">Be open my friend</div>
+      <div class="DefaultSecondary">Select users one by one, or share with the whole organization</div>
     </div>
     <div class="ChangePrivacy-shareFooterGroup">
       <button class="Button Button--secondary Dialog-footerBtn cancel">

lib/assets/javascripts/cartodb/new_common/dialogs/change_privacy/view_model.js

@@ -12,7 +12,8 @@ module.exports = cdb.core.Model.extend({
     user: undefined,
     state: 'Start',
     hasPermissionsChanged: false,
-    privacyOptions: undefined
+    privacyOptions: undefined,
+    search: ''
   },
 
   initialize: function(attrs) {
@@ -81,6 +82,20 @@ module.exports = cdb.core.Model.extend({
     }
   },
 
+  organizationUsers: function() {
+    var users = this.get('user').organization.users;
+    var search = this.get('search').toLowerCase().trim();
+    users = users.filter(function(user) {
+      if (search) {
+        return user.get('username').toLowerCase().indexOf(search) === 0;
+      } else {
+        return true;
+      }
+    }, this)
+
+    return users;
+  },
+
   _setupSharePrerequisities: function() {
     var vis = this.get('vis');
     this.set('permission', vis.permission.clone());

lib/assets/test/spec/cartodb/new_common/dialogs/change_privacy/share_view.spec.js

@@ -2,6 +2,16 @@ var ShareView = require('../../../../../../javascripts/cartodb/new_common/dialog
 var ViewModel = require('../../../../../../javascripts/cartodb/new_common/dialogs/change_privacy/view_model');
 var cdbAdmin = require('cdb.admin');
 
+function keyPressEvent(key, metaKey) {
+  var event = jQuery.Event("keydown");
+  event.which = key;
+  event.keyCode = key;
+  if (metaKey) {
+    event.metaKey = true;
+  }
+  return event;
+}
+
 /**
  * Most high-fidelity details are covered in underlying collection/model, so no need to re-test that here.
  * The importat feature is the interactions and that view don't throw errors on render and updates.
@@ -12,10 +22,16 @@ describe('new_common/dialogs/change_privacy/share_view', function() {
       username: 'pepe',
       actions: {},
       organization: {
-        users: [{
-          id: 'abc-123',
-          username: 'paco'
-        }]
+        users: [
+          {
+            id: 'abc-123',
+            username: 'paco'
+          },
+          {
+            id: 'abc-456',
+            username: 'pepe'
+          }
+        ]
       }
     });
 
@@ -60,8 +76,13 @@ describe('new_common/dialogs/change_privacy/share_view', function() {
       expect(this.view.render()).toBe(this.view);
     });
 
-    it('should rendered users', function() {
+    it('should render default settings for the organization', function() {
+      expect(this.innerHTML()).toContain('Default settings for your Organization');
+    });
+
+    it('should render users', function() {
       expect(this.innerHTML()).toContain('paco');
+      expect(this.innerHTML()).toContain('pepe');
     });
   });
 
@@ -78,4 +99,48 @@ describe('new_common/dialogs/change_privacy/share_view', function() {
       expect(this.viewModel.save).toHaveBeenCalled();
     });
   });
+
+  describe('filtering users', function() {
+
+    it('should re-render when then the search changes', function() {
+      expect(this.innerHTML()).toContain('pepe');
+      expect(this.innerHTML()).toContain('paco');
+
+      this.viewModel.set('search', 'pepe');
+
+      expect(this.innerHTML()).toContain('pepe');
+      expect(this.innerHTML()).not.toContain('paco');
+    });
+
+    it('should update the search when a search is submitted', function() {
+      this.view.$('.js-search-input').val('pepe');
+      this.view.$('.js-search-input').trigger(keyPressEvent($.ui.keyCode.ENTER));
+
+      expect(this.viewModel.get('search')).toEqual('pepe');
+    });
+
+    it('should NOT render default settings for the organization when showing search results', function() {
+      expect(this.innerHTML()).toContain('Default settings for your Organization');
+
+      this.viewModel.set('search', 'pepe');
+
+      expect(this.innerHTML()).not.toContain('Default settings for your Organization');
+    });
+
+    it('should clear the search when users clicks X', function() {
+      this.viewModel.set('search', 'pepe');
+
+      this.view.$('.js-clean-search').click();
+
+      expect(this.viewModel.get('search')).toEqual('');
+    });
+
+    it('should clear the search when user hits ESCAPE', function() {
+      this.viewModel.set('search', 'pepe');
+
+      this.view.$('.js-search-input').trigger(keyPressEvent($.ui.keyCode.ESCAPE));
+
+      expect(this.viewModel.get('search')).toEqual('');
+    });
+  });
 });