add dataBase lib

src/components/Schema.vue

@@ -57,8 +57,7 @@ export default {
   components: { TableDescription, TextField },
   data () {
     return {
-      schemaVisible: true,
-      worker: this.$store.state.worker
+      schemaVisible: true
     }
   },
   computed: {
@@ -71,29 +70,7 @@ export default {
   },
   methods: {
     changeDb () {
-      const dbName = this.$refs.dbfile.value.substr(this.$refs.dbfile.value.lastIndexOf('\\') + 1)
-      this.$store.commit('saveDbName', dbName)
-      const f = this.$refs.dbfile.files[0]
-      const r = new FileReader()
-      r.onload = () => {
-        this.worker.onmessage = () => {
-          const getSchemaSql = `
-            SELECT name, sql
-            FROM sqlite_master
-            WHERE type='table' AND name NOT LIKE 'sqlite_%';`
-          this.worker.onmessage = event => {
-            this.$store.commit('saveSchema', event.data.results[0].values)
-          }
-          this.worker.postMessage({ action: 'exec', sql: getSchemaSql })
-        }
-        this.$store.commit('saveDbFile', r.result)
-        try {
-          this.worker.postMessage({ action: 'open', buffer: r.result }, [r.result])
-        } catch (exception) {
-          this.worker.postMessage({ action: 'open', buffer: r.result })
-        }
-      }
-      r.readAsArrayBuffer(f)
+      this.$db.loadDb(this.$refs.dbfile.files[0])
     }
   }
 }

src/components/TabContent.vue

@@ -89,7 +89,6 @@ export default {
       result: null,
       view: 'table',
       tableViewHeight: 0,
-      worker: this.$store.state.worker,
       isUnsaved: !this.name
     }
   },
@@ -164,18 +163,10 @@ export default {
     },
     // Run a command in the database
     execute (commands) {
-      this.worker.onmessage = (event) => {
-        // if it was more than one select - take only the first one
-        this.result = event.data.results[0]
-        if (!this.result) {
-          console.log(event.data.error)
-          //  return
-        }
-
-        // this.$refs.output.innerHTML = ''
-      }
-      this.worker.postMessage({ action: 'exec', sql: commands })
-      // this.$refs.output.textContent = 'Fetching results...'
+      // this.$refs.output.textContent = 'Fetching results...' */
+      this.$db.execute(commands)
+        .then(result => { this.result = result })
+        .catch(err => alert(err))
     },
     execEditorContents () {
       this.execute(this.query + ';')

src/dataBase.js

@@ -0,0 +1,46 @@
+import store from '@/store'
+import router from '@/router'
+const worker = new Worker('js/worker.sql-wasm.js')
+
+export default {
+  loadDb (file) {
+    const dbName = file.name
+    store.commit('saveDbName', dbName)
+    const f = file
+    const r = new FileReader()
+    r.onload = () => {
+      worker.onmessage = () => {
+        const getSchemaSql = `
+          SELECT name, sql
+          FROM sqlite_master
+          WHERE type='table' AND name NOT LIKE 'sqlite_%';`
+        worker.onmessage = event => {
+          store.commit('saveSchema', event.data.results[0].values)
+          if (router.currentRoute.path !== '/editor') {
+            router.push('/editor')
+          }
+        }
+        worker.postMessage({ action: 'exec', sql: getSchemaSql })
+      }
+      store.commit('saveDbFile', r.result)
+      try {
+        worker.postMessage({ action: 'open', buffer: r.result }, [r.result])
+      } catch (exception) {
+        worker.postMessage({ action: 'open', buffer: r.result })
+      }
+    }
+    r.readAsArrayBuffer(f)
+  },
+  execute (commands) {
+    return new Promise((resolve, reject) => {
+      worker.onmessage = (event) => {
+        if (event.data.error) {
+          reject(event.data.error)
+        }
+        // if it was more than one select - take only the first one
+        resolve(event.data.results[0])
+      }
+      worker.postMessage({ action: 'exec', sql: commands })
+    })
+  }
+}

src/main.js

@@ -4,6 +4,7 @@ import router from './router'
 import store from './store'
 import { VuePlugin } from 'vuera'
 import VModal from 'vue-js-modal'
+import db from '@/dataBase'
 
 import '@/assets/styles/variables.css'
 import '@/assets/styles/buttons.css'
@@ -14,6 +15,7 @@ Vue.use(VuePlugin)
 Vue.use(VModal)
 
 Vue.config.productionTip = false
+Vue.prototype.$db = db
 
 new Vue({
   router,

src/store/index.js

@@ -8,7 +8,6 @@ export default new Vuex.Store({
     schema: null,
     dbFile: null,
     dbName: null,
-    worker: new Worker('js/worker.sql-wasm.js'),
     tabs: [],
     currentTab: null,
     currentTabId: null,

src/views/DbUpload.vue

@@ -25,41 +25,13 @@
 <script>
 export default {
   name: 'DbUpload',
-  data () {
-    return {
-      worker: this.$store.state.worker
-    }
-  },
   methods: {
     loadDb () {
-      const dbName = this.$refs.file.value.substr(this.$refs.file.value.lastIndexOf('\\') + 1)
-      this.$store.commit('saveDbName', dbName)
-      const f = this.$refs.file.files[0]
-      const r = new FileReader()
-      r.onload = () => {
-        this.worker.onmessage = () => {
-          const getSchemaSql = `
-            SELECT name, sql
-            FROM sqlite_master
-            WHERE type='table' AND name NOT LIKE 'sqlite_%';`
-          this.worker.onmessage = event => {
-            this.$store.commit('saveSchema', event.data.results[0].values)
-            this.$router.push('/editor')
-          }
-          this.worker.postMessage({ action: 'exec', sql: getSchemaSql })
-        }
-        this.$store.commit('saveDbFile', r.result)
-        try {
-          this.worker.postMessage({ action: 'open', buffer: r.result }, [r.result])
-        } catch (exception) {
-          this.worker.postMessage({ action: 'open', buffer: r.result })
-        }
-      }
-      r.readAsArrayBuffer(f)
+      this.$db.loadDb(this.$refs.file.files[0])
     },
     dragover (event) {
       event.preventDefault()
-      // TODO: Add some visual fluff to show the user can drop its files
+      // TODO: Add some visual stuff to show the user can drop its files
       if (!event.currentTarget.classList.contains('bg-green-300')) {
         event.currentTarget.classList.remove('bg-gray-100')
         event.currentTarget.classList.add('bg-green-300')