Completion support

.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    ["es2015", {
+      "modules": false,
+      "targets": {
+        "browsers": "> 1%",
+        "uglify": true
+      },
+      "useBuiltIns": true
+    }],
+    "env",
+    "stage-0"
+  ]
+}

.gitignore

@@ -11,3 +11,5 @@ tmp/*
 coverage/*
 gemfiles/*.lock
 ./Gemfile.lock
+.cache
+Gemfile.lock

Gemfile

@@ -10,6 +10,8 @@ gemspec
 # Git. Remember to move these dependencies to your gemspec before releasing
 # your gem to rubygems.org.
 
+gem 'axlsx', github: 'randym/axlsx'
+
 # To use debugger
 # gem 'debugger'
 group :test do

app/assets/javascripts/adhoq/application.js

@@ -16,5 +16,6 @@
 //= require ./bootstrap
 //= require ./previewer
 //= require ./current_tables
+//= require queryEditor.bundle
 
 window.Adhoq = {}

app/assets/javascripts/adhoq/previewer.js.coffee

@@ -18,6 +18,14 @@ class Previewer
     )
 
   source: ->
+    # NOTE: Sometimes the textarea is empty even if the monaco editor has some contents.
+    #       That's why the editor source is preferred.
+    @editorSource() || @domSource()
+
+  editorSource: ->
+    Adhoq.editor && Adhoq.editor.getValue()
+
+  domSource: ->
     $(@el.data('source')).val()
 
   result: ->

app/controllers/adhoq/current_tables_controller.rb

@@ -11,11 +11,32 @@ def index
         reject {|klass| klass.abstract_class? || hidden_model_names.include?(klass.name) || klass.name.nil? }.
         sort_by(&:name)
 
-      render layout: false
+      respond_to do |format|
+        format.html { render layout: false }
+        format.json { render json: tables_as_json(@ar_classes) }
+      end
     end
 
     private
 
+    def tables_as_json(ar_classes)
+      ar_classes.map {|ar_class|
+        {
+          table_name: ar_class.table_name,
+          columns: ar_class.columns.map {|column|
+            {
+              name: column.name,
+              type: column.type,
+              primary_key: column.name == ar_class.primary_key,
+              null: column.null,
+              limit: column.limit,
+              default: column.default
+            }
+          }
+        }
+      }
+    end
+
     def eager_load_models
       return unless Rails.env.development?
       [Rails.application, Adhoq::Engine].each(&:eager_load!)

app/views/adhoq/queries/_current_tables_leftbar.html.slim

@@ -1,5 +1,5 @@
 #current-tables
-  a.loading[href=current_tables_path]
+  a.loading[href=current_tables_path(format: 'html')]
 
 javascript:
   $(function() {

app/views/adhoq/queries/_form.html.slim

@@ -7,8 +7,20 @@
           i.fa.fa-database.fa-pad-r
           | Show tables
 
+  .clearfix
+    a#disable_code_editor.pull-right(href='#')
+      i.fa.fa-edit
+      | Switch to Plain Editor
+
   .form-group
-    = f.text_area :query, class: 'form-control', rows: 15, required: true
+    .form-control.query-editor
+      #query_field(
+        data-current-tables-path="#{current_tables_path}"
+        data-id="query_query"
+        data-name="query[query]"
+        data-placeholder="#{@query.persisted? ? 'Edit' : 'New'} query"
+        data-query="#{@query.query}"
+      )
 
   .modal.fade#nameAndDesc[role='dialog']
     .modal-dialog
@@ -85,9 +97,25 @@ ul.nav.nav-tabs[role='tablist']
 
 javascript:
   $(function() {
+    var element = document.getElementById('query_field');
+
+    Adhoq.editor = Adhoq.launchEditor(element);
+    Adhoq.installCompletion(element.dataset.currentTablesPath);
+
+    $('#disable_code_editor').on('click', function(e) {
+      e.preventDefault();
+
+      Adhoq.switchToTextareaEditor({
+        editor: Adhoq.editor,
+        element: element.parentNode,
+        content: Adhoq.editor.getModel().getValue()
+      });
+
+      e.target.remove();
+    });
+
     Adhoq.enablePreview($('#preview a.js-preview-button'));
     Adhoq.enablePreview($('#explain a.js-explain-button'));
 
     Adhoq.enablePreviewKeybordShortCut($('#query_query'), '#previews .tab-pane.active a:has(".fa-refresh")')
   });
-

lib/adhoq/engine.rb

@@ -12,5 +12,7 @@ class Engine < ::Rails::Engine
       g.test_framework      :rspec,        fixture: false
       g.fixture_replacement :factory_girl, dir:     'spec/factories'
     end
+
+    config.assets.paths << "#{__dir__}/../../query_editor/dist"
   end
 end

lib/adhoq/version.rb

@@ -1,3 +1,3 @@
 module Adhoq
-  VERSION = "0.4.0"
+  VERSION = "0.5.0.beta1"
 end

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "adhoq",
+  "version": "1.0.0",
+  "main": "editor/index.js",
+  "repository": "https://github.com/esminc/adhoq",
+  "author": "Hibariya <[email protected]>",
+  "license": "MIT",
+  "private": true,
+  "dependencies": {
+    "babel-loader": "^7.1.4",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "css-loader": "^0.28.11",
+    "lodash": "^4.17.5",
+    "monaco-editor": "^0.11.1",
+    "style-loader": "^0.20.3",
+    "webpack": "^4.5.0",
+    "webpack-cli": "^2.0.14"
+  }
+}

query_editor/completion.js

@@ -0,0 +1,94 @@
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import { language as sql } from 'monaco-editor/esm/vs/basic-languages/sql/sql';
+import { difference, uniq, throttle } from 'lodash';
+
+/* global $ */
+
+const { CompletionItemKind } = monaco.languages;
+const keywords = [ ...sql.keywords, ...sql.operators, ...sql.builtinFunctions ];
+
+function extractCompletionTokens(model) {
+  const tokens = model.getValue().split(/[\s+;]/);
+
+  return uniq(tokens.filter(item => item.length > 2));
+}
+
+function completionItem({ label, kind }) {
+  const insertText = label;
+
+  return { label, kind, insertText };
+}
+
+function updateLocalCompletionsLater(model) {
+  const localWords = extractCompletionTokens(model);
+  const allWords = [ ...keywords, ...this.tableColumnCompletions.map(i => i.label) ];
+
+  this.localCompletions = difference(localWords, allWords).map(label => completionItem({
+    label,
+    kind: CompletionItemKind.Text,
+  }));
+}
+
+class Completion {
+  updateLocalCompletionsLater = throttle(updateLocalCompletionsLater, 1000)
+
+  keywordCompletions = [];
+  tableColumnCompletions = [];
+  localCompletions = [];
+
+  constructor(currentTablesPath) {
+    this.currentTablesPath = currentTablesPath;
+  }
+
+  get items() {
+    return [
+      ...this.tableColumnCompletions,
+      ...this.keywordCompletions,
+      ...this.localCompletions,
+    ];
+  }
+
+  install() {
+    this.installKeywordCompletions();
+    this.installTableColumnCompletions();
+  }
+
+  installKeywordCompletions() {
+    this.keywordCompletions = keywords.map((keyword) => {
+      const label = keyword.toLowerCase();
+
+      return completionItem({ label, kind: CompletionItemKind.Keyword });
+    });
+  }
+
+  async installTableColumnCompletions() {
+    try {
+      const tables = await $.getJSON(this.currentTablesPath);
+      const columns = uniq(tables.reduce((acc, table) => (
+        [ ...acc, ...table.columns.map(c => c.name) ]
+      ), []));
+
+      this.tableColumnCompletions = [
+        ...tables.map(({ table_name }) => completionItem({ label: table_name, kind: CompletionItemKind.Interface })),
+        ...columns.map(label => completionItem({ label, kind: CompletionItemKind.Field })),
+      ];
+    } catch (e) { /* NOP */ };
+  }
+}
+
+// From performance perspective, it would be better to define a dedicated service worker for completions
+export function installCompletion(currentTablesPath) {
+  const completion = new Completion(currentTablesPath);
+
+  completion.install();
+
+  monaco.languages.registerCompletionItemProvider('sql', {
+    provideCompletionItems(model) {
+      completion.updateLocalCompletionsLater(model);
+
+      return completion.items;
+    },
+  });
+}
+
+export default { installCompletion };

query_editor/index.js

@@ -0,0 +1,9 @@
+import 'babel-polyfill';
+
+import { launchEditor } from './queryEditor';
+import { installCompletion } from './completion';
+import { switchToTextareaEditor } from './textareaEditor';
+
+window.Adhoq.launchEditor = launchEditor;
+window.Adhoq.installCompletion = installCompletion;
+window.Adhoq.switchToTextareaEditor = switchToTextareaEditor;

query_editor/queryEditor.js

@@ -0,0 +1,29 @@
+// from https://github.com/Microsoft/monaco-editor-samples/tree/master/browser-esm-parcel
+
+import 'monaco-editor/esm/vs/editor/browser/controller/coreCommands';
+import 'monaco-editor/esm/vs/editor/contrib/suggest/suggestController';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution';
+
+import './style.css';
+
+export function launchEditor(element) {
+  const editor = monaco.editor.create(element, {
+    language: 'sql',
+    value: '',
+    automaticLayout: true,
+    minimap: { enabled: false },
+  });
+
+  const model = editor.getModel();
+
+  model.updateOptions({ tabSize: 2 });
+  model.setValue(element.dataset.query);
+
+  const textarea = editor.domElement.getElementsByTagName('textarea')[0];
+  textarea.setAttribute('placeholder', element.dataset.placeholder);
+  textarea.setAttribute('id', element.dataset.id);
+  textarea.setAttribute('name', element.dataset.name);
+
+  return editor;
+}

query_editor/style.css

@@ -0,0 +1,11 @@
+.query-editor {
+  height: 260px;
+  padding: 1px;
+}
+
+.query-editor #query_field {
+  border: none !important;
+  max-width: 100%;
+  height:250px;
+  border:1px solid #ccc;
+}

query_editor/textareaEditor.js

@@ -0,0 +1,13 @@
+export function switchToTextareaEditor({ editor, element, content }) {
+  const textarea = document.createElement('textarea');
+
+  textarea.innerText = content;
+  textarea.classList.add('form-control');
+  textarea.setAttribute('rows', 15);
+  textarea.setAttribute('required', true);
+  textarea.setAttribute('id', 'query_query');
+  textarea.setAttribute('name', 'query[query]');
+
+  element.parentNode.replaceChild(textarea, element);
+  editor.dispose();
+}

query_editor/webpack.config.js

@@ -0,0 +1,28 @@
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+  mode: process.env.NODE_ENV || 'production',
+  entry: {
+    'queryEditor': path.resolve(__dirname, 'index.js'),
+  },
+  output: {
+    filename: '[name].bundle.js',
+    path: path.resolve(__dirname, 'dist')
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [ 'style-loader', 'css-loader' ]
+      },
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+        },
+      },
+    ],
+  },
+};

spec/spec_helper.rb

@@ -13,6 +13,7 @@
 Dir["#{File.dirname(__FILE__)}/support/**/*.rb"].each {|f| require f }
 
 Capybara.default_driver = :poltergeist
+Capybara.default_wait_time = 30
 
 RSpec.configure do |config|
   config.expect_with :rspec do |expectations|