Initial commit

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

@@ -0,0 +1,50 @@
+const $ = require('jquery');
+const CoreView = require('backbone/core-view');
+
+/* Progress quota bar for organization users input */
+
+module.exports = CoreView.extend({
+
+  events: {
+    'keyup .js-assignedSize': '_onKeyup'
+  },
+
+  initialize: function () {
+    this._initBinds();
+    this._initViews();
+  },
+
+  _initBinds: function () {
+    this.listenTo(this.model, 'change:quota_in_bytes', this._onQuotaChange);
+  },
+
+  _initViews: function () {
+    const quotaInMb = Math.max(Math.floor(this.model.get('quota_in_bytes') / 1024 / 1024).toFixed(0), 1);
+    this.$('.js-assignedSize').val(quotaInMb);
+  },
+
+  _onQuotaChange: function () {
+    this.$('.js-assignedSize').val(Math.max(this.model.assignedQuotaInRoundedMb(), 1));
+  },
+
+  _onKeyup: function () {
+    const modifiedQuotaInBytes = Math.max(Math.floor(this.$('.js-assignedSize').val() * 1048576), 1048576);
+    const assignedPer = (modifiedQuotaInBytes * 100) / this.model.organization.get('available_quota_for_user');
+    const errorMessage = '<p class="FormAccount-rowInfoText FormAccount-rowInfoText--error js-userQuotaError">Invalid quota, insert a valid one.</p>';
+
+    if (!isNaN(assignedPer)) {
+      this.model.set('quota_in_bytes', modifiedQuotaInBytes);
+    }
+
+    if (isNaN(assignedPer) || (this.model.get('quota_in_bytes') > this.model.organization.get('available_quota_for_user')) || (this.model.get('quota_in_bytes') < this.model.get('db_size_in_bytes'))) {
+      this.$('.js-assignedSize').addClass('has-error');
+
+      if (this.$('.js-userQuotaError').length === 0) {
+        $('.js-userQuotaSliderInput').append(errorMessage);
+      }
+    } else {
+      this.$('.js-assignedSize').removeClass('has-error');
+      this.$('.js-userQuotaError').remove();
+    }
+  }
+});