Initial commit

lib/assets/javascripts/dashboard/components/table-grants/table-grants-form.tpl

@@ -0,0 +1 @@
+<ul class="ApiKeysForm-tablesList CDB-Text CDB-Size-medium js-list"><%= rows %></ul>

lib/assets/javascripts/dashboard/components/table-grants/table-grants-item.tpl

@@ -0,0 +1,6 @@
+<li class="ApiKeysForm-grantsTable-item u-ellipsis">
+  <span class="u-ellipsis u-rSpace" title="<%- tableName %>">
+    <%- tableName %>
+  </span>
+  <div data-fields="<%- tableName %>"></div>
+</li>

lib/assets/javascripts/dashboard/components/table-grants/table-grants-loader.tpl

@@ -0,0 +1,3 @@
+<li class="ApiKeys-list-loader">
+  <div class="Spinner"></div>
+</li>

lib/assets/javascripts/dashboard/components/table-grants/table-grants-placeholder.tpl

@@ -0,0 +1,8 @@
+<li class="ApiKeys-list-placeholder">
+  <div class="LayoutIcon">
+    <i class="CDB-IconFont CDB-IconFont-lens"></i>
+  </div>
+  <div class="CDB-Text CDB-Size-medium u-mainTextColor u-secondaryTextColor u-tSpace-xl">
+    <%- message %>
+  </div>
+</li>

lib/assets/javascripts/dashboard/components/table-grants/table-grants-view.js

@@ -0,0 +1,125 @@
+const _ = require('underscore');
+const Backbone = require('backbone');
+const CoreView = require('backbone/core-view');
+const checkAndBuildOpts = require('builder/helpers/required-opts');
+const template = require('./table-grants.tpl');
+const formTemplate = require('./table-grants-form.tpl');
+const itemTemplate = require('./table-grants-item.tpl');
+const loadingTemplate = require('./table-grants-loader.tpl');
+const placeholderTemplate = require('./table-grants-placeholder.tpl');
+
+const REQUIRED_OPTS = [
+  'apiKeyModel',
+  'userTablesModel'
+];
+
+module.exports = CoreView.extend({
+  className: 'ApiKeysForm-grantsTable',
+
+  events: {
+    'input .js-search': '_onSearchChanged'
+  },
+
+  initialize: function (options) {
+    checkAndBuildOpts(options, REQUIRED_OPTS, this);
+
+    if (this._apiKeyModel.isPublic()) {
+      this._userTablesModel.fetchPublicDatasets();
+    }
+
+    this._initBinds();
+  },
+
+  render: function () {
+    this.$el.html(template({
+      showSearch: !this._apiKeyModel.id
+    }));
+
+    this._renderFormView();
+
+    return this;
+  },
+
+  _initBinds: function () {
+    this.listenTo(this._userTablesModel.getStateModel(), 'change:status', this._renderFormView);
+  },
+
+  _renderFormView: function () {
+    this._formView && this._formView.off('change', this._onFormViewChanged, this);
+    let view = loadingTemplate();
+
+    if (this._userTablesModel.isFetched()) {
+      if (this._userTablesModel.isEmpty()) {
+        const message = this._userTablesModel.hasQuery() ? '0 datasets found' : 'There are no datasets';
+        view = placeholderTemplate({ message });
+      } else {
+        view = this._createFormView().render().el;
+      }
+    }
+
+    this.$('.js-datasets-list').html(view);
+  },
+
+  _createFormView: function () {
+    const tables = this._getTables();
+
+    const multiCheckbox = {
+      type: 'MultiCheckbox',
+      title: false,
+      inputs: [
+        { name: 'select', label: 'Select' },
+        { name: 'insert', label: 'Insert' },
+        { name: 'update', label: 'Update' },
+        { name: 'delete', label: 'Delete' }
+      ],
+      editorAttrs: {
+        disabled: !!this._apiKeyModel.id
+      }
+    };
+
+    const schema = _.mapObject(tables, () => multiCheckbox);
+
+    const data = _.mapObject(tables, (value, tableName) => {
+      const apiKeyTables = this._apiKeyModel.get('tables');
+
+      if (apiKeyTables.hasOwnProperty(tableName) && apiKeyTables[tableName]) {
+        return apiKeyTables[tableName].permissions;
+      }
+
+      return value.permissions;
+    });
+
+    this._formView = new Backbone.Form({ data, schema, template: this._generateFormMarkup });
+    this._formView.on('change', this._onFormViewChanged, this);
+
+    return this._formView;
+  },
+
+  _generateFormMarkup: function () {
+    const rows = Object.keys(this.data).map((tableName) => itemTemplate({ tableName })).join('');
+    return formTemplate({ rows });
+  },
+
+  _getTables: function () {
+    return !this._apiKeyModel.id || this._apiKeyModel.isPublic()
+      ? this._userTablesModel.attributes
+      : this._apiKeyModel.get('tables');
+  },
+
+  _onFormViewChanged: function (form) {
+    const persistedTables = this._apiKeyModel.get('tables');
+
+    const formTables = _.mapObject(form.getValue(), (value, key) => ({ permissions: value }));
+
+    this._apiKeyModel.set({
+      tables: {
+        ...persistedTables,
+        ...formTables
+      }
+    });
+  },
+
+  _onSearchChanged: _.debounce(function (event) {
+    this._userTablesModel.setQuery(event.target.value);
+  }, 500, this)
+});

lib/assets/javascripts/dashboard/components/table-grants/table-grants.tpl

@@ -0,0 +1,13 @@
+<div class="CDB-Text Editor-formInner">
+  <div class="CDB-Box-modal ApiKeysForm-box-modal">
+    <% if (showSearch) { %>
+      <div class="CDB-Box-modalHeader">
+        <div class="CDB-Box-modalHeaderItem">
+          <input type="text" name="text" placeholder="Search by name" class="CDB-InputTextPlain CDB-Text js-search">
+        </div>
+      </div>
+    <% } %>
+
+    <ul class="js-datasets-list"></ul>
+  </div>
+</div>