Initial commit

lib/assets/javascripts/dashboard/components/form-components/editors/multi-checkbox/multi-checkbox.js

@@ -0,0 +1,52 @@
+const _ = require('underscore');
+const Backbone = require('backbone');
+const template = require('./multi-checkbox.tpl');
+const EditorHelpers = require('builder/components/form-components/helpers/editor');
+
+Backbone.Form.editors.MultiCheckbox = Backbone.Form.editors.Base.extend({
+  events: {
+    'click .js-checkbox': '_onCheckboxClick'
+  },
+
+  initialize: function (opts) {
+    Backbone.Form.editors.Base.prototype.initialize.call(this, opts);
+    EditorHelpers.setOptions(this, opts);
+
+    this._initViews();
+  },
+
+  validate: function () {
+    if (this.options.optional) {
+      return null;
+    }
+
+    const requiredError = {
+      type: 'required',
+      message: 'Required'
+    };
+
+    return this._hasValue() ? null : requiredError;
+  },
+
+  _initViews: function () {
+    this.$el.html(
+      template({
+        disabled: this.options.editorAttrs.disabled,
+        inputs: this.options.inputs,
+        values: this.value
+      })
+    );
+  },
+
+  _onCheckboxClick: function (event) {
+    const { name, checked } = event.target;
+    const newValue = { ...this.getValue(), [name]: checked };
+
+    this.setValue(newValue);
+    this.trigger('change', this);
+  },
+
+  _hasValue: function () {
+    return _.some(_.values(this.value));
+  }
+});

lib/assets/javascripts/dashboard/components/form-components/editors/multi-checkbox/multi-checkbox.tpl

@@ -0,0 +1,19 @@
+<div class="FormAccount-rowData">
+  <% inputs.forEach(function (input) { %>
+    <div
+      class="ApiKeys-MultiCheckbox u-iblock CDB-Text CDB-Size-medium"
+      data-name="<%- input.name %>"
+    >
+      <input
+        class="CDB-Checkbox js-checkbox"
+        type="checkbox"
+        id="<%- input.name %>"
+        name="<%- input.name %>"
+        <%- values[input.name] ? 'checked' : '' %>
+        <%- disabled ? 'disabled' : '' %>
+      >
+      <span class="u-iBlock CDB-Checkbox-face"></span>
+      <label class="u-secondaryTextColor u-iBlock u-lSpace u-rSpace" for="<%- input.name %>"><%- input.label || input.name %></label>
+    </div>
+  <% }) %>
+</div>

lib/assets/javascripts/dashboard/components/form-components/index.js

@@ -0,0 +1,2 @@
+require('builder/components/form-components/index');
+require('./editors/multi-checkbox/multi-checkbox');