add changing db in schema pane

2025-12-06 10:08:52 +08:00 · 2020-09-26 19:16:24 +02:00
parent 4b8a993921
commit 5972d535cc
4 changed files with 59 additions and 60 deletions
--- a/src/components/Schema.vue
+++ b/src/components/Schema.vue
@@ -20,17 +20,20 @@
        {{ dbName }}
      </div>
      <div class="db-edit">
-        <svg
-          class="db-edit-icon"
-          width="18"
-          height="18"
-          viewBox="0 0 18 18"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <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>
+        <input type="file" id="actual-btn"  ref="dbfile" hidden @change="changeDb"/>
+        <label for="actual-btn">
+          <svg
+            class="db-edit-icon"
+            width="18"
+            height="18"
+            viewBox="0 0 18 18"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <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)
    }
  }
 }
--- a/src/store/index.js
+++ b/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: {
--- a/src/views/DbUpload.vue
+++ b/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 })
--- a/src/views/Editor.vue
+++ b/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%;