Pivot implementation and redesign (#69)

- Pivot support implementation 
- Rename queries into inquiries
- Rename editor into workspace
- Change result set format
- New JSON format for inquiries
- Redesign panels

src/views/Main/Workspace/Tabs/Tab/SqlEditor/hint.js

@@ -0,0 +1,50 @@
+import CM from 'codemirror'
+import 'codemirror/addon/hint/show-hint.js'
+import 'codemirror/addon/hint/sql-hint.js'
+import store from '@/store'
+
+export function getHints (cm, options) {
+  const token = cm.getTokenAt(cm.getCursor()).string.toUpperCase()
+  const result = CM.hint.sql(cm, options)
+  // Don't show the hint if there is only one option
+  // and the token is already completed with this option
+  if (result.list.length === 1 && result.list[0].text.toUpperCase() === token) {
+    result.list = []
+  }
+  return result
+}
+
+const hintOptions = {
+  get tables () {
+    const tables = {}
+    if (store.state.db.schema) {
+      store.state.db.schema.forEach(table => {
+        tables[table.name] = table.columns.map(column => column.name)
+      })
+    }
+    return tables
+  },
+  get defaultTable () {
+    const schema = store.state.db.schema
+    return schema && schema.length === 1 ? schema[0].name : null
+  },
+  completeSingle: false,
+  completeOnSingleClick: true,
+  alignWithWord: false
+}
+
+export function showHintOnDemand (editor) {
+  CM.showHint(editor, getHints, hintOptions)
+}
+
+export default function showHint (editor) {
+  // Don't show autocomplete after a space or semicolon or in string literals
+  const token = editor.getTokenAt(editor.getCursor())
+  const ch = token.string.slice(-1)
+  const tokenType = token.type
+  if (tokenType === 'string' || !ch || ch === ' ' || ch === ';') {
+    return
+  }
+
+  CM.showHint(editor, getHints, hintOptions)
+}

src/views/Main/Workspace/Tabs/Tab/SqlEditor/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="sql-editor-panel">
+    <div class="codemirror-container">
+      <codemirror
+        ref="cm"
+        v-model="query"
+        :options="cmOptions"
+        @changes="onChange"
+      />
+    </div>
+    <side-tool-bar panel="sqlEditor" @switchTo="$emit('switchTo', $event)">
+      <icon-button
+        :disabled="runDisabled"
+        :loading="isGettingResults"
+        tooltip="Run SQL query"
+        tooltip-position="top-left"
+        @click="$emit('run')"
+      >
+        <run-icon :disabled="runDisabled"/>
+      </icon-button>
+    </side-tool-bar>
+  </div>
+</template>
+
+<script>
+import showHint, { showHintOnDemand } from './hint'
+import time from '@/lib/utils/time'
+import { codemirror } from 'vue-codemirror'
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/mode/sql/sql.js'
+import 'codemirror/theme/neo.css'
+import 'codemirror/addon/hint/show-hint.css'
+import 'codemirror/addon/display/autorefresh.js'
+import SideToolBar from '../SideToolBar'
+import IconButton from '@/components/IconButton'
+import RunIcon from '@/components/svg/run'
+
+export default {
+  name: 'SqlEditor',
+  props: ['value', 'isGettingResults'],
+  components: {
+    codemirror,
+    SideToolBar,
+    IconButton,
+    RunIcon
+  },
+  data () {
+    return {
+      query: this.value,
+      cmOptions: {
+        tabSize: 4,
+        mode: 'text/x-mysql',
+        theme: 'neo',
+        lineNumbers: true,
+        line: true,
+        autoRefresh: true,
+        extraKeys: { 'Ctrl-Space': showHintOnDemand }
+      }
+    }
+  },
+  computed: {
+    runDisabled () {
+      return (!this.$store.state.db || !this.query || this.isGettingResults)
+    }
+  },
+  watch: {
+    query () {
+      this.$emit('input', this.query)
+    }
+  },
+  methods: {
+    onChange: time.debounce(showHint, 400),
+    focus () {
+      this.$refs.cm.codemirror.focus()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.sql-editor-panel {
+  display: flex;
+  flex-grow: 1;
+  height: 100%;
+  max-height: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.codemirror-container {
+  flex-grow: 1;
+  overflow: auto;
+}
+
+>>> .vue-codemirror {
+  height: 100%;
+  max-height: 100%;
+}
+>>> .CodeMirror {
+  height: 100%;
+  max-height: 100%;
+}
+>>> .CodeMirror-cursor {
+  width: 1px;
+  background: var(--color-text-base);
+}
+</style>