Initial commit

lib/assets/javascripts/builder/components/modals/publish/share/share-list-view.js

@@ -0,0 +1,137 @@
+var CoreView = require('backbone/core-view');
+var _ = require('underscore');
+var PermissionView = require('./share-permission-view');
+
+var REQUIRED_OPTS = [
+  'collection',
+  'currentUserId',
+  'organization',
+  'hasOrganization',
+  'sharePermissionModel',
+  'isVisualization'
+];
+
+module.exports = CoreView.extend({
+  className: 'Share-list',
+
+  initialize: function (opts) {
+    _.each(REQUIRED_OPTS, function (item) {
+      if (opts[item] === undefined) throw new Error(item + ' is required');
+      this['_' + item] = opts[item];
+    }, this);
+
+    // To avoid jumps in rendering when the user gets permission
+    // we sort the collection only the first time
+    this._sortedCollection = this._sortCollection();
+    this._initBinds();
+  },
+
+  render: function () {
+    this.clearSubViews();
+    this.$el.empty();
+    this._initViews();
+    return this;
+  },
+
+  _initBinds: function () {
+    this._sharePermissionModel.acl.on('add remove reset change', this.render, this);
+    this.add_related_model(this._sharePermissionModel);
+  },
+
+  _initViews: function () {
+    if (this._hasOrganization) {
+      this._renderOrganization();
+    }
+
+    _.each(this._sortedCollection, this._renderItem, this);
+  },
+
+  _sortCollection: function () {
+    // sharing first
+    var sharing = this._collection.filter(function (model) {
+      var permission = this._sharePermissionModel;
+      var hasWriteAccess = permission.hasWriteAccess(model);
+      var hasReadAccess = permission.hasReadAccess(model);
+      return hasWriteAccess || hasReadAccess;
+    }, this);
+
+    var noSharing = this._collection.filter(function (model) {
+      var permission = this._sharePermissionModel;
+      var hasWriteAccess = permission.hasWriteAccess(model);
+      var hasReadAccess = permission.hasReadAccess(model);
+      return !hasWriteAccess && !hasReadAccess;
+    }, this);
+
+    return sharing.concat(noSharing);
+  },
+
+  _renderOrganization: function () {
+    var self = this;
+    var organization = this._organization;
+    var permission = this._sharePermissionModel;
+    var hasWriteAccessAvailable = !self._isVisualization;
+    var canChangeWriteAccess = permission.canChangeWriteAccess(organization);
+    var hasWriteAccess = permission.hasWriteAccess(organization);
+    var canChangeReadAccess = permission.canChangeReadAccess(organization);
+    var hasReadAccess = permission.hasReadAccess(organization);
+
+    var view = new PermissionView({
+      model: organization,
+      permission: permission,
+      avatar: organization.get('avatar_url'),
+      description: _t('components.modals.publish.share.organization.desc'),
+      name: _t('components.modals.publish.share.organization.title'),
+      canChangeReadAccess: canChangeReadAccess,
+      hasReadAccess: hasReadAccess,
+      hasWriteAccessAvailable: hasWriteAccessAvailable,
+      canChangeWriteAccess: canChangeWriteAccess,
+      hasWriteAccess: hasWriteAccess,
+      isSelected: hasReadAccess || hasWriteAccess
+    });
+
+    this.$el.append(view.render().$el);
+    this.addView(view);
+  },
+
+  _renderItem: function (model) {
+    var self = this;
+    var view;
+    var o = model.get('model');
+    var permission = this._sharePermissionModel;
+    var hasWriteAccessAvailable = !self._isVisualization;
+    var canChangeWriteAccess = permission.canChangeWriteAccess(model);
+    var hasWriteAccess = permission.hasWriteAccess(model);
+    var canChangeReadAccess = permission.canChangeReadAccess(model);
+    var hasReadAccess = permission.hasReadAccess(model);
+    var role = this._getRole(o);
+
+    if (model.id !== this._currentUserId) {
+      view = new PermissionView({
+        model: model,
+        permission: permission,
+        name: model.get('name') || model.get('username'),
+        avatar: model.get('avatar_url'),
+        role: role,
+        users: o.users,
+        canChangeReadAccess: canChangeReadAccess,
+        hasReadAccess: hasReadAccess,
+        hasWriteAccessAvailable: hasWriteAccessAvailable,
+        canChangeWriteAccess: canChangeWriteAccess,
+        hasWriteAccess: hasWriteAccess,
+        isSelected: hasReadAccess || hasWriteAccess
+      });
+
+      this.$el.append(view.render().$el);
+      this.addView(view);
+    }
+  },
+
+  _getRole: function (d) {
+    if (d.viewer !== undefined) {
+      return d.viewer === true ? _t('components.modals.publish.share.role.viewer')
+        : _t('components.modals.publish.share.role.builder');
+    }
+
+    return false;
+  }
+});

lib/assets/javascripts/builder/components/modals/publish/share/share-permission-view.js

@@ -0,0 +1,153 @@
+var _ = require('underscore');
+var CoreView = require('backbone/core-view');
+var template = require('./share-permission.tpl');
+var TipsyTooltipView = require('builder/components/tipsy-tooltip-view.js');
+var $ = require('jquery');
+var UsersGroup = require('./users-group-view');
+
+var REQUIRED_OPTS = [
+  'model',
+  'permission',
+  'name',
+  'canChangeReadAccess',
+  'hasReadAccess',
+  'hasWriteAccessAvailable',
+  'canChangeWriteAccess',
+  'hasWriteAccess',
+  'isSelected'
+];
+
+var OPTIONALS_OPT = [
+  'description',
+  'role',
+  'avatar',
+  'users'
+];
+
+module.exports = CoreView.extend({
+  className: 'Share-permission',
+
+  events: {
+    'change .js-read': '_onChangeRead',
+    'change .js-write': '_onChangeWrite',
+    'mouseover .js-toggler.is-disabled': '_onHoverDisabledToggler',
+    'mouseout .js-toggler': '_destroyTooltip',
+    'mouseleave .js-toggler': '_destroyTooltip'
+  },
+
+  initialize: function (opts) {
+    _.each(REQUIRED_OPTS, function (item) {
+      if (opts[item] === undefined) throw new Error(item + ' is required');
+      this['_' + item] = opts[item];
+    }, this);
+
+    _.each(OPTIONALS_OPT, function (item) {
+      this['_' + item] = opts[item];
+    }, this);
+  },
+
+  render: function () {
+    this.clearSubViews();
+    this.$el.html(template({
+      name: this._name,
+      avatar: this._avatar,
+      role: this._role,
+      users: this._users,
+      description: this._description,
+      canChangeReadAccess: this._canChangeReadAccess,
+      hasReadAccess: this._hasReadAccess,
+      hasWriteAccessAvailable: this._hasWriteAccessAvailable,
+      canChangeWriteAccess: this._canChangeWriteAccess,
+      hasWriteAccess: this._hasWriteAccess
+    }));
+
+    if (this._users) {
+      this._renderUsers();
+    }
+
+    this.$el.toggleClass('is-selected', this._isSelected);
+    return this;
+  },
+
+  _renderUsers: function () {
+    var view = new UsersGroup({
+      className: 'u-flex u-alignCenter',
+      users: this._users
+    });
+
+    this.$('.js-users').append(view.render().el);
+    this.addView(view);
+  },
+
+  _onChangeWrite: function () {
+    var p = this._permission;
+    if (p.canChangeWriteAccess(this._model)) {
+      if (p.hasWriteAccess(this._model)) {
+        p.revokeWriteAccess(this._model);
+      } else {
+        p.grantWriteAccess(this._model);
+      }
+    }
+  },
+
+  _onChangeRead: function () {
+    var p = this._permission;
+    if (p.canChangeReadAccess(this._model)) {
+      if (p.hasReadAccess(this._model)) {
+        p.revokeAccess(this._model);
+      } else {
+        p.grantReadAccess(this._model);
+      }
+    }
+  },
+
+  _onHoverDisabledToggler: function (e) {
+    var aclItem = this._permission.findRepresentableAclItem(this._model);
+    var msg;
+    var $el;
+
+    if (aclItem && !aclItem.isOwn(this._model)) {
+      msg = this._inheritedAccessTooltipText(aclItem);
+      $el = $(e.currentTarget);
+
+      this._tooltip = this._createTooltip({
+        $el: $el,
+        msg: msg
+      });
+      this._tooltip.showTipsy();
+    }
+  },
+
+  _createTooltip: function (opts) {
+    return new TipsyTooltipView({
+      el: opts.$el,
+      title: function () {
+        return opts.msg;
+      }
+    });
+  },
+
+  _destroyTooltip: function () {
+    if (this._tooltip) {
+      this._tooltip.hideTipsy();
+      this._tooltip.destroyTipsy();
+    }
+  },
+
+  _inheritedAccessTooltipText: function (aclItem) {
+    var type = aclItem.get('type');
+
+    switch (type) {
+      case 'group':
+        return _t('components.modals.publish.share.tooltip.group', {
+          name: aclItem.get('entity').get('name')
+        });
+      case 'org':
+        return _t('components.modals.publish.share.tooltip.org');
+      default:
+        console.error('Trying to display inherited access for an unrecognized type ' + type);
+        return '';
+    }
+  }
+
+});

lib/assets/javascripts/builder/components/modals/publish/share/share-permission.tpl

@@ -0,0 +1,52 @@
+<div class="Share-permissionInfo">
+  <div class="Share-permissionIcon">
+    <% if (avatar) { %>
+      <div class="Share-user Share-user--huge" style="background-image: url(<%- avatar %>)"></div>
+    <% } else { %>
+        <i class="CDB-IconFont CDB-IconFont-people"></i>
+    <% } %>
+  </div>
+  <div>
+    <div class="CDB-Text u-mainTextColor CDB-Size-medium is-semibold u-ellipsis">
+      <%- name %>
+    </div>
+
+
+    <div class="CDB-Text u-mainTextColor u-tSpace CDB-Size-medium u-ellipsis">
+      <% if (role) { %>
+        <i class="Tag Tag--outline Tag--<%- role %> CDB-Text CDB-Size-small u-upperCase"><%- role %></i>
+      <% } %>
+
+      <% if (users) { %>
+        <div class="js-users"></div>
+      <% } %>
+    </div>
+
+
+    <% if (description) { %>
+    <div class="CDB-Text u-mainTextColor u-tSpace CDB-Size-medium u-ellipsis">
+      <%- description %>
+    </div>
+    <% } %>
+  </div>
+</div>
+<div class="Share-togglers">
+  <% if (hasWriteAccessAvailable) { %>
+    <div class="CDB-Text CDB-Size-medium u-rSpace--xl Share-toggler js-toggler <% if (!canChangeWriteAccess) { %>is-disabled<% } %>">
+      <input class="CDB-Toggle u-iBlock js-write" type="checkbox"
+        <% if (!canChangeWriteAccess) { %>disabled="disabled"<% } %>
+        <% if (hasWriteAccess) { %> checked <% } %>
+      />
+      <span class="u-iBlock CDB-ToggleFace"></span>
+      <label class="u-iBlock u-altTextColor "><%- _t('components.modals.publish.share.toggle.write') %></label>
+    </div>
+  <% } %>
+  <div class="CDB-Text CDB-Size-medium Share-toggler js-toggler <% if (!canChangeReadAccess) { %>is-disabled<% } %>">
+    <input class="CDB-Toggle u-iBlock js-read" type="checkbox"
+      <% if (hasReadAccess) { %> checked <% } %>
+      <% if (!canChangeReadAccess) { %>disabled="disabled"<% } %>
+    />
+    <span class="u-iBlock CDB-ToggleFace"></span>
+    <label class="u-iBlock u-altTextColor "><%- _t('components.modals.publish.share.toggle.read') %></label>
+  </div>
+</div>

lib/assets/javascripts/builder/components/modals/publish/share/share-view.js

@@ -0,0 +1,82 @@
+var _ = require('underscore');
+var CoreView = require('backbone/core-view');
+var template = require('./share.tpl');
+var GrantableCollection = require('builder/data/grantables-collection');
+var SearchPaginationView = require('builder/components/pagination-search/pagination-search-view');
+var ListView = require('./share-list-view');
+
+var REQUIRED_OPTS = [
+  'configModel',
+  'currentUserId',
+  'organization',
+  'visDefinitionModel'
+];
+
+module.exports = CoreView.extend({
+  initialize: function (opts) {
+    _.each(REQUIRED_OPTS, function (item) {
+      if (!opts[item]) throw new Error(item + ' is required');
+      this['_' + item] = opts[item];
+    }, this);
+
+    this._grantablesCollection = new GrantableCollection([], {
+      currentUserId: this._currentUserId,
+      organization: this._organization,
+      configModel: this._configModel
+    });
+
+    this._sharePermissionModel = this._visDefinitionModel.getPermissionModel().clone();
+    this._initBinds();
+  },
+
+  render: function () {
+    this.clearSubViews();
+    this.$el.html(template({
+      name: this._visDefinitionModel.get('name')
+    }));
+    this._initViews();
+    return this;
+  },
+
+  _initBinds: function () {
+    this._sharePermissionModel.acl.on('add remove reset change', this._onSave, this);
+    this.add_related_model(this._sharePermissionModel.acl);
+  },
+
+  _initViews: function () {
+    var self = this;
+
+    this._searchPaginationView = new SearchPaginationView({
+      className: 'u-inner',
+      listCollection: this._grantablesCollection,
+      createContentView: function (opts) {
+        return new ListView(_.extend({}, opts, {
+          collection: self._grantablesCollection,
+          currentUserId: self._currentUserId,
+          sharePermissionModel: self._sharePermissionModel,
+          organization: self._organization,
+          isVisualization: self._visDefinitionModel.isVisualization()
+        }));
+      }
+    });
+    this.addView(this._searchPaginationView);
+    this.$('.js-body').html(this._searchPaginationView.render().el);
+  },
+
+  _onCancel: function () {
+    this._modalModel.destroy();
+  },
+
+  _onBack: function () {
+    this._modalModel.destroy();
+    this._onBack();
+  },
+
+  _onSave: function () {
+    var permission = this._visDefinitionModel.getPermissionModel();
+    permission.overwriteAcl(this._sharePermissionModel);
+    // Show loading here
+    permission.save()
+      .fail(this._searchPaginationView.showError.bind(this._searchPaginationView));
+  }
+});

lib/assets/javascripts/builder/components/modals/publish/share/share.tpl

@@ -0,0 +1,3 @@
+<div class="js-body">
+
+</div>

lib/assets/javascripts/builder/components/modals/publish/share/user-view.js

@@ -0,0 +1,42 @@
+var $ = require('jquery');
+var _ = require('underscore');
+var CoreView = require('backbone/core-view');
+var template = require('./user.tpl');
+var TipsyTooltipView = require('builder/components/tipsy-tooltip-view');
+
+var REQUIRED_OPTS = [
+  'username',
+  'avatar'
+];
+
+module.exports = CoreView.extend({
+
+  initialize: function (opts) {
+    _.each(REQUIRED_OPTS, function (item) {
+      if (opts[item] === undefined) throw new Error(item + ' is required');
+      this['_' + item] = opts[item];
+    }, this);
+  },
+
+  render: function () {
+    this.clearSubViews();
+    this.$el.html(template({
+      avatar: this._avatar,
+      username: this._username
+    }));
+
+    this._initViews();
+    return this;
+  },
+
+  _initViews: function () {
+    var tooltip = new TipsyTooltipView({
+      el: this.$('.js-avatar'),
+      title: function () {
+        return $(this).attr('data-title');
+      }
+    });
+
+    this.addView(tooltip);
+  }
+});

lib/assets/javascripts/builder/components/modals/publish/share/user.tpl

@@ -0,0 +1 @@
+<div class="Share-user u-rSpace js-avatar" style="background-image: url(<%- avatar %>)" data-title="<%- username %>"></div>

lib/assets/javascripts/builder/components/modals/publish/share/users-group-view.js

@@ -0,0 +1,46 @@
+var CoreView = require('backbone/core-view');
+var _ = require('underscore');
+var template = require('./users-group.tpl');
+var UserView = require('./user-view');
+
+var REQUIRED_OPTS = [
+  'users'
+];
+
+var MAX_USERS_TO_SHOW = 3;
+
+module.exports = CoreView.extend({
+  initialize: function (opts) {
+    _.each(REQUIRED_OPTS, function (item) {
+      if (!opts[item]) throw new Error(item + ' is required');
+      this['_' + item] = opts[item];
+    }, this);
+  },
+
+  render: function () {
+    this.clearSubViews();
+    this.$el.html(template({
+      people: this._getRemainsPeople()
+    }));
+    this._renderUsers();
+    return this;
+  },
+
+  _getRemainsPeople: function () {
+    return Math.max(0, this._users.length - MAX_USERS_TO_SHOW);
+  },
+
+  _renderUsers: function () {
+    _.each(this._users.slice(0, MAX_USERS_TO_SHOW), this._renderUser, this);
+  },
+
+  _renderUser: function (user) {
+    var view = new UserView({
+      username: user.username,
+      avatar: user.avatar_url
+    });
+
+    this.$('.js-content').append(view.render().el);
+    this.addView(view);
+  }
+});

lib/assets/javascripts/builder/components/modals/publish/share/users-group.tpl

@@ -0,0 +1,4 @@
+<div class="u-flex js-content"></div>
+<% if (people > 0) { %>
+  <div class="u-secondaryTextColor CDB-Text CDB-Size-small u-lSpace">+ <%- people %></div>
+<% } %>