Initial commit

lib/assets/javascripts/dashboard/components/dashboard-header/settings-dropdown-view.js

@@ -0,0 +1,109 @@
+const _ = require('underscore');
+const $ = require('jquery');
+const checkAndBuildOpts = require('builder/helpers/required-opts');
+const DropdownAdminView = require('dashboard/components/dropdown/dropdown-admin-view');
+const Utils = require('builder/helpers/utils');
+const template = require('./settings-dropdown.tpl');
+
+const REQUIRED_OPTS = [
+  'model',
+  'configModel'
+];
+
+/**
+ * The content of the dropdown menu opened by the user avatar in the top-right of the header, e.g.:
+ *   Explore, Learn, ♞
+ *             ______/\____
+ *            |            |
+ *            |    this    |
+ *            |____________|
+ */
+
+module.exports = DropdownAdminView.extend({
+  className: 'Dropdown',
+
+  initialize: function (options) {
+    checkAndBuildOpts(options, REQUIRED_OPTS, this);
+    DropdownAdminView.prototype.initialize.apply(this, arguments);
+  },
+
+  shortDisplayName: function (user) {
+    // This changes should also be done in Central, ./app/assets/javascripts/dashboard/users/views/user_avatar.js
+    var accountTypeDisplayName = user.get('account_type_display_name');
+    var displayName = _.isUndefined(accountTypeDisplayName) ? user.get('account_type') : accountTypeDisplayName;
+
+    if (_.isUndefined(displayName)) {
+      return displayName;
+    }
+
+    displayName = displayName.toLowerCase();
+
+    if (displayName === 'organization user') {
+      return 'org. user';
+    } else {
+      return displayName.replace(/lump-sum/gi, '- A')
+        .replace(/academic/gi, 'aca.')
+        .replace(/ - Monthly/i, ' - M')
+        .replace(/ - Annual/i, ' - A')
+        .replace(/Non-Profit/i, 'NP')
+        .replace(/On-premises/i, 'OP')
+        .replace(/Internal use engine/i, 'engine')
+        .replace(/Lite/i, 'L')
+        .replace(/Cloud Engine &/i, 'C. Engine &')
+        .replace(/& Enterprise Builder/i, '& E. Builder')
+        .replace(/CARTO for /i, '')
+        .replace(/CARTO /i, '');
+    }
+  },
+
+  render: function () {
+    var user = this.model;
+    var usedDataBytes = user.get('db_size_in_bytes');
+    var quotaInBytes = user.get('quota_in_bytes');
+    var usedDataPct = Math.round(usedDataBytes / quotaInBytes * 100);
+    var progressBarClass = '';
+
+    if (usedDataPct > 80 && usedDataPct < 90) {
+      progressBarClass = 'is--inAlert';
+    } else if (usedDataPct > 89) {
+      progressBarClass = 'is--inDanger';
+    }
+
+    var accountType = this.shortDisplayName(user);
+
+    var userUrl = this.model.viewUrl();
+    var upgradeUrl = window.upgrade_url || this._configModel.get('upgrade_url') || '';
+
+    this.$el.html(template({
+      name: user.fullName() || user.get('username'),
+      email: user.get('email'),
+      accountType: accountType,
+      isOrgAdmin: user.isOrgAdmin(),
+      usedDataStr: Utils.readablizeBytes(usedDataBytes),
+      usedDataPct: usedDataPct,
+      progressBarClass: progressBarClass,
+      availableDataStr: Utils.readablizeBytes(quotaInBytes),
+      showUpgradeLink: upgradeUrl && (user.isOrgOwner() || !user.isInsideOrg()) && !this._configModel.get('cartodb_com_hosted'),
+      upgradeUrl: upgradeUrl,
+      publicProfileUrl: userUrl.publicProfile(),
+      apiKeysUrl: userUrl.apiKeys(),
+      organizationUrl: userUrl.organization(),
+      accountProfileUrl: userUrl.accountProfile(),
+      logoutUrl: userUrl.logout(),
+      isViewer: user.isViewer(),
+      isBuilder: user.isBuilder(),
+      orgDisplayEmail: user.isInsideOrg() ? user.organization.display_email : null,
+      engineEnabled: user.get('actions').engine_enabled,
+      mobileAppsEnabled: user.get('actions').mobile_sdk_enabled
+    }));
+
+    // Necessary to hide dialog on click outside popup, for example.
+    // TODO: Handle closeDialogs
+    // cdb.god.bind('closeDialogs', this.hide, this);
+
+    // TODO: taken from existing code, how should dropdowns really be added to the DOM?
+    $('body').append(this.el);
+
+    return this;
+  }
+});