Initial commit

lib/assets/javascripts/dashboard/views/organization/organization-user-quota-slider.js

@@ -0,0 +1,85 @@
+const $ = require('jquery');
+const CoreView = require('backbone/core-view');
+const TipsyTooltipView = require('builder/components/tipsy-tooltip-view');
+
+const MAX_QUOTA_BITS = 104857600; // 100Mb
+
+/* Progress quota bar for organization users */
+
+module.exports = CoreView.extend({
+
+  events: {
+    'hover .js-quotaProgressSlider': '_showTooltip'
+  },
+
+  initialize: function () {
+    this._initBinds();
+    this._initViews();
+  },
+
+  _initBinds: function () {
+    this.listenTo(this.model, 'change:quota_in_bytes', this._onQuotaChange);
+  },
+
+  _initViews: function () {
+    const userMinQuota = MAX_QUOTA_BITS / this.model.organization.get('available_quota_for_user');
+
+    // Init slider
+    this.$('.js-slider').slider({
+      max: 100,
+      min: userMinQuota,
+      step: 1,
+      value: this.model.assignedQuotaPercentage(),
+      range: 'min',
+      orientation: 'horizontal',
+      slide: this._onSlideChange.bind(this)
+    });
+
+    $('.ui-slider-handle').addClass('js-quotaProgressSlider');
+  },
+
+  _onSlideChange: function (ev, ui) {
+    const userQuota = Math.max(Math.floor((this.model.organization.get('available_quota_for_user') * ui.value) / 100), 1);
+    const assignedPer = (userQuota * 100) / this.model.organization.get('available_quota_for_user');
+
+    if (ui.value >= this.model.usedQuotaPercentage()) {
+      this.$('.ui-slider-range').css('width', `${assignedPer}%`);
+      this.$('.js-quotaProgressSlider').css('left', `${assignedPer}%`);
+
+      const tooltipLeft = $('.js-quotaProgressSlider').offset().left -
+        ($('.js-orgUserQuotaTooltip').outerWidth() / 2) +
+        ($('.js-quotaProgressSlider').outerWidth() / 2);
+
+      $('.js-orgUserQuotaTooltip').css('left', tooltipLeft);
+
+      this.model.set('quota_in_bytes', userQuota);
+    } else {
+      return false;
+    }
+  },
+
+  _onQuotaChange: function () {
+    if (this.model.assignedQuotaPercentage() >= this.model.usedQuotaPercentage()) {
+      const assignedQuotaPercentage = Math.min(this.model.assignedQuotaPercentage(), 100);
+
+      $('.ui-slider-range').css('width', `${assignedQuotaPercentage}%`);
+      $('.js-quotaProgressSlider').css('left', `${assignedQuotaPercentage}%`);
+    }
+  },
+
+  _showTooltip: function () {
+    const viewModel = this.model;
+
+    this.addView(
+      new TipsyTooltipView({
+        el: $('.js-quotaProgressSlider'),
+        className: 'js-orgUserQuotaTooltip',
+        title: function () {
+          const quotaPercentage = viewModel.assignedQuotaPercentage().toFixed(0);
+
+          return `${quotaPercentage}% of the available org quota`;
+        }
+      })
+    );
+  }
+});