add changing db in schema pane

src/components/Schema.vue

@@ -20,6 +20,8 @@
         {{ dbName }}
       </div>
       <div class="db-edit">
+        <input type="file" id="actual-btn"  ref="dbfile" hidden @change="changeDb"/>
+        <label for="actual-btn">
           <svg
             class="db-edit-icon"
             width="18"
@@ -31,6 +33,7 @@
             <path d="M3 10.5V12.75C3 14.25 5.2875 15.54 8.25 15.75V13.5825L8.3475 13.5C5.34 13.32 3 12.045 3 10.5ZM9 9.75C5.685 9.75 3 8.4075 3 6.75V9C3 10.6575 5.685 12 9 12C9.2925 12 9.5775 12 9.87 12L12.75 9.09C11.55 9.54 10.2825 9.75 9 9.75ZM9 2.25C5.685 2.25 3 3.5925 3 5.25C3 6.9075 5.685 8.25 9 8.25C12.315 8.25 15 6.9075 15 5.25C15 3.5925 12.315 2.25 9 2.25ZM15.75 8.3475C15.6375 8.3475 15.5325 8.3925 15.4575 8.475L14.7075 9.225L16.245 10.725L16.995 9.975C17.1525 9.825 17.16 9.57 16.995 9.3975L16.065 8.475C15.99 8.3925 15.885 8.3475 15.78 8.3475H15.75ZM14.28 9.66L9.75 14.205V15.75H11.295L15.84 11.1975L14.28 9.66Z"
             fill="#A2B1C6"/>
           </svg>
+        </label>
         <span class="db-edit-tooltip">Change database</span>
       </div>
     </div>
@@ -51,11 +54,45 @@ import TableDescription from '@/components/TableDescription'
 export default {
   name: 'Schema',
   components: { TableDescription },
-  props: ['schema', 'dbName'],
   data () {
     return {
-      schemaVisible: true
+      schemaVisible: true,
-
+      worker: this.$store.state.worker
+    }
+  },
+  computed: {
+    schema () {
+      return this.$store.state.schema
+    },
+    dbName () {
+      return this.$store.state.dbName
+    }
+  },
+  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)
     }
   }
 }

src/store/index.js

@@ -7,6 +7,7 @@ export default new Vuex.Store({
   state: {
     schema: null,
     dbFile: null,
+    dbName: null,
     worker: new Worker('/js/worker.sql-wasm.js')
   },
   mutations: {
@@ -15,6 +16,9 @@ export default new Vuex.Store({
     },
     saveDbFile (state, file) {
       state.dbFile = file
+    },
+    saveDbName (state, name) {
+      state.dbName = name
     }
   },
   actions: {

src/views/DbUpload.vue

@@ -15,12 +15,10 @@ export default {
       worker: this.$store.state.worker
     }
   },
-  created () {
-    // Open a database
-    this.$store.state.worker.postMessage({ action: 'open' })
-  },
   methods: {
     loadDb () {
+      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 = () => {
@@ -31,7 +29,6 @@ export default {
             WHERE type='table' AND name NOT LIKE 'sqlite_%';`
           this.worker.onmessage = event => {
             this.$store.commit('saveSchema', event.data.results[0].values)
-            // this.schema = event.data.results[0].values
             this.$router.push('/editor')
           }
           this.worker.postMessage({ action: 'exec', sql: getSchemaSql })

src/views/Editor.vue

@@ -6,7 +6,7 @@
       :after="{ size: 80, max: 100 }"
     >
       <div slot="left-pane">
-        <schema :schema="schema" :db-name="fileName"/>
+        <schema />
       </div>
       <div slot="right-pane">
         <splitpanes
@@ -19,9 +19,6 @@
             <div>
               <codemirror v-model="code" :options="cmOptions" @changes="onCmChange" />
               <button id="execute" class="button" @click="execEditorContents">Run</button>
-              <label class="button">
-                Load an SQLite database file: <input type='file' ref='dbfile' @change="loadDb">
-              </label>
             </div>
           </div>
           <div slot="right-pane">
@@ -97,8 +94,6 @@ export default {
         line: true
       },
       result: null,
-      schema: null,
-      fileName: null,
       view: 'table',
       worker: this.$store.state.worker
     }
@@ -124,18 +119,6 @@ export default {
       }))
     }
   },
-  created () {
-    // Open a database
-    // worker.postMessage({ action: 'open' })
-    // let dbFile = this.$store.state.dbFile
-    // console.log(dbFile)
-    /* try {
-      worker.postMessage({ action: 'open', buffer: this.$store.state.dbFile }, [this.$store.state.dbFile])
-    } catch (exception) {
-      worker.postMessage({ action: 'open', buffer: this.$store.state.dbFile })
-    } */
-    this.schema = this.$store.state.schema
-  },
   methods: {
     update (data, layout, frames) {
       this.state = { data, layout, frames }
@@ -177,33 +160,11 @@ export default {
     },
     execEditorContents () {
       this.execute(this.code + ';')
-    },
-    loadDb (filename) {
-      this.fileName = this.$refs.dbfile.value.substr(this.$refs.dbfile.value.lastIndexOf('\\') + 1)
-      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.schema = event.data.results[0].values
-          }
-          this.worker.postMessage({ action: 'exec', sql: getSchemaSql })
-        }
-        try {
-          this.worker.postMessage({ action: 'open', buffer: r.result }, [r.result])
-        } catch (exception) {
-          this.worker.postMessage({ action: 'open', buffer: r.result })
-        }
-      }
-      r.readAsArrayBuffer(f)
     }
   }
 }
 </script>
+
 <style>
 .schema-tabs-splitter {
   height: 100%;