Initial commit

lib/assets/javascripts/dashboard/views/organization/groups-admin/group-user/group-user-view.js

@@ -0,0 +1,54 @@
+const CoreView = require('backbone/core-view');
+const template = require('./group-user.tpl');
+const pluralizeStr = require('dashboard/helpers/pluralize');
+
+const checkAndBuildOpts = require('builder/helpers/required-opts');
+
+const REQUIRED_OPTS = [
+  'model'
+];
+
+/**
+ * View of a single group user.
+ */
+module.exports = CoreView.extend({
+  tagName: 'li',
+  className: 'OrganizationList-user is-selectable',
+  events: {
+    'click': '_onClick'
+  },
+
+  initialize: function (options) {
+    checkAndBuildOpts(options, REQUIRED_OPTS, this);
+
+    this._initBinds();
+  },
+
+  _initBinds: function () {
+    this.listenTo(this.model, 'change:selected', this._onChangeSelected);
+  },
+
+  render: function () {
+    this.$el.html(
+      template({
+        avatarUrl: this.model.get('avatar_url'),
+        username: this.model.get('username'),
+        email: this.model.get('email'),
+        maps_count: pluralizeStr.prefixWithCount('map', 'maps', this.model.get('all_visualization_count')),
+        table_count: pluralizeStr.prefixWithCount('dataset', 'datasets', this.model.get('table_count'))
+      })
+    );
+
+    return this;
+  },
+
+  _onChangeSelected: function (model, isSelected) {
+    this.$el.toggleClass('is-selected', !!isSelected);
+  },
+
+  _onClick: function (ev) {
+    this.killEvent(ev);
+    this.model.set('selected', !this.model.get('selected'));
+  }
+
+});

lib/assets/javascripts/dashboard/views/organization/groups-admin/group-user/group-user.tpl

@@ -0,0 +1,25 @@
+<a class="CDB-Text OrganizationList-userLink">
+  <div class="OrganizationList-userAvatar UserAvatar">
+    <img src="<%- avatarUrl %>" alt="<%- username %>" src="<%- username %>" class="UserAvatar-img UserAvatar-img--medium-large OrganizationList-userAvatar--img" />
+  </div>
+  <div class="OrganizationList-userInfo">
+    <div class="OrganizationList-userInfoName">
+      <h3 class="CDB-Size-medium OrganizationList-userInfoTitle u-ellipsLongText" title="<%- username %>">
+        <%- username %>
+      </h3>
+      <h4 class="CDB-Text CDB-Size-small u-ellipis u-secondaryTextColor" title="<%- email %>">
+        <%- email %>
+      </h4>
+    </div>
+    <div class="OrganizationList-userInfoData CDB-Text CDB-Size-small u-altTextColor u-alignCenter">
+      <p class="u-flex u-alignCenter">
+        <i class="CDB-IconFont CDB-IconFont-map OrganizationList-userInfoData--paragraph-icon"></i>
+        <%- maps_count %>
+      </p>
+      <p class="u-flex u-alignCenter u-lSpace--xl">
+        <i class="CDB-IconFont CDB-IconFont-rows OrganizationList-userInfoData--paragraph-icon"></i>
+        <%- table_count %>
+      </p>
+    </div>
+  </div>
+</a>