Fix wrong trigger of autocomplete #15

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "sqliteviz",
-  "version": "0.0.1",
+  "version": "0.5.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -5149,6 +5149,11 @@
       "integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=",
       "dev": true
     },
+    "debounce": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.0.tgz",
+      "integrity": "sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg=="
+    },
     "debug": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "codemirror": "^5.57.0",
     "core-js": "^3.6.5",
+    "debounce": "^1.2.0",
     "nanoid": "^3.1.12",
     "plotly.js": "^1.57.1",
     "react": "^16.13.1",

src/components/MainMenu.vue

@@ -6,15 +6,15 @@
     </div>
     <div>
       <button
-        v-if="$store.state.tabs.length > 0"
+        v-if="currentQuery"
         class="primary"
-        :disabled="currentQuery && !$store.state.schema || !currentQuery.query"
+        :disabled="currentQuery && (!$store.state.schema || !currentQuery.query)"
         @click="currentQuery.execute"
       >
         Run
       </button>
       <button
-        v-if="$store.state.tabs.length > 0"
+        v-if="currentQuery"
         class="primary"
         :disabled="currentQuery && !currentQuery.isUnsaved"
         @click="checkQueryBeforeSave"

src/components/SqlEditor.vue

@@ -13,6 +13,19 @@ import 'codemirror/theme/neo.css'
 import 'codemirror/addon/hint/show-hint.js'
 import 'codemirror/addon/hint/show-hint.css'
 import 'codemirror/addon/hint/sql-hint.js'
+import { debounce } from 'debounce'
+
+const sqlHint = CM.hint.sql
+CM.hint.sql = (cm, options) => {
+  const token = cm.getTokenAt(cm.getCursor()).string
+  const result = sqlHint(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 === token) {
+    result.list = []
+  }
+  return result
+}
 
 export default {
   name: 'SqlEditor',
@@ -30,8 +43,7 @@ export default {
         theme: 'neo',
         lineNumbers: true,
         line: true
-      },
+      }
-      result: null
     }
   },
   watch: {
@@ -40,25 +52,23 @@ export default {
     }
   },
   methods: {
-    onCmChange (editor) {
+    onCmChange: debounce((editor) => {
-      // Don't show autocomplete after a space or semicolon
+      // Don't show autocomplete after a space or semicolon or in string literals
       const ch = editor.getTokenAt(editor.getCursor()).string.slice(-1)
-      if (!ch || ch === ' ' || ch === ';') {
+      const tokenType = editor.getTokenAt(editor.getCursor()).type
+      if (tokenType === 'string' || !ch || ch === ' ' || ch === ';') {
         return
       }
 
       const hintOptions = {
-      //   tables: this.state.tables,
+      //   tables: {table: [col1, col2], table2: [colA, colB]},
         completeSingle: false,
-        completeOnSingleClick: true
+        completeOnSingleClick: true,
+        alignWithWord: false
       }
 
-      // editor.hint.sql is defined when importing codemirror/addon/hint/sql-hint
-      // (this is mentioned in codemirror addon documentation)
-      // Reference the hint function imported here when including other hint addons
-      // or supply your own
       CM.showHint(editor, CM.hint.sql, hintOptions)
-    }
+    }, 400)
   }
 }
 </script>