Export db #34

src/assets/styles/tooltips.css

@@ -6,7 +6,6 @@
   padding: 0 6px;
   line-height: 19px;;
   position: fixed;
-  z-index: 5;
   height: 19px;
   border-radius: var(--border-radius-medium);
   white-space: nowrap;

src/components/DbUploader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="db-uploader-container">
+  <div class="db-uploader-container" :style="{ width }">
     <change-db-icon v-if="type === 'small'" @click.native="browse"/>
     <div v-if="['regular', 'illustrated'].includes(type)" class="drop-area-container">
       <div
@@ -158,6 +158,11 @@ export default {
       validator: (value) => {
         return ['regular', 'illustrated', 'small'].includes(value)
       }
+    },
+    width: {
+      type: String,
+      required: false,
+      default: 'unset'
     }
   },
   components: {
@@ -333,8 +338,9 @@ export default {
           }, 1000)
 
           // Create db with csv table and get schema
+          const name = file.name.replace(/\.[^.]+$/, '')
           start = new Date()
-          this.schema = await this.newDb.createDb(file.name, parseResult.data, progressCounterId)
+          this.schema = await this.newDb.createDb(name, parseResult.data, progressCounterId)
           end = new Date()
 
           // Inform about import success

src/components/Schema.vue

@@ -8,7 +8,8 @@
         <tree-chevron :expanded="schemaVisible"/>
         {{ dbName }}
       </div>
-        <db-uploader id="db-edit" type="small" />
+      <db-uploader id="db-edit" type="small" />
+      <export-icon tooltip="Export database" @click="exportToFile"/>
     </div>
     <div v-show="schemaVisible" class="schema">
       <table-description
@@ -26,6 +27,7 @@ import TableDescription from '@/components/TableDescription'
 import TextField from '@/components/TextField'
 import TreeChevron from '@/components/svg/treeChevron'
 import DbUploader from '@/components/DbUploader'
+import ExportIcon from '@/components/svg/export'
 
 export default {
   name: 'Schema',
@@ -33,7 +35,8 @@ export default {
     TableDescription,
     TextField,
     TreeChevron,
-    DbUploader
+    DbUploader,
+    ExportIcon
   },
   data () {
     return {
@@ -56,6 +59,11 @@ export default {
     dbName () {
       return this.$store.state.dbName
     }
+  },
+  methods: {
+    exportToFile () {
+      this.$store.state.db.export(`${this.dbName}.sqlite`)
+    }
   }
 }
 </script>
@@ -95,6 +103,11 @@ export default {
 
 .db-name {
   cursor: pointer;
+  margin-right: 6px;
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-shrink: 0;
 }
 
 .db-name:hover .chevron-icon path,

src/components/svg/copy.vue

@@ -33,7 +33,7 @@ export default {
 
 <style scoped>
 .icon {
-  vertical-align: middle;
+  display: block;
   margin: 0 12px;
 }
 .icon:hover path {

src/components/svg/delete.vue

@@ -33,7 +33,7 @@ export default {
 
 <style scoped>
 .icon {
-  vertical-align: middle;
+  display: block;
   margin: 0 12px;
 }
 

src/components/svg/export.vue

@@ -15,10 +15,10 @@
         d="M10.5 1.5H4.5C3.675 1.5 3 2.175 3 3V15C3 15.825 3.675 16.5 4.5 16.5H13.5C14.325 16.5 15 15.825 15 15V6L10.5 1.5ZM13.5 15H4.5V3H9.75V6.75H13.5V15ZM12 8.25V13.575L10.425 12L8.325 14.1L6.225 12L8.325 9.9L6.675 8.25H12Z"
         fill="#A2B1C6"
       />
-  </svg>
-  <span class="icon-tooltip" :style="tooltipStyle">
-    Export query to file
-  </span>
+    </svg>
+    <span class="icon-tooltip" :style="tooltipStyle">
+      {{ tooltip }}
+    </span>
   </span>
 </template>
 
@@ -27,14 +27,16 @@ import tooltipMixin from '@/mixins/tooltips'
 
 export default {
   name: 'ExportIcon',
-  mixins: [tooltipMixin]
+  mixins: [tooltipMixin],
+  props: ['tooltip']
 }
 </script>
 
 <style scoped>
 .icon {
-  vertical-align: middle;
+  display: block;
   margin: 0 12px;
+  cursor: pointer;
 }
 
 .icon:hover path {

src/components/svg/rename.vue

@@ -33,7 +33,7 @@ export default {
 
 <style scoped>
 .icon {
-  vertical-align: middle;
+  display: block;
   margin: 0 12px;
 }
 

src/database.js

@@ -73,7 +73,7 @@ class Database {
       throw new Error(res.error)
     }
 
-    return this.getSchema(file.name)
+    return this.getSchema(file.name.replace(/\.[^.]+$/, ''))
   }
 
   async getSchema (name) {
@@ -108,6 +108,15 @@ class Database {
     // if it was more than one select - take only the last one
     return results[results.length - 1]
   }
+
+  async export (fileName) {
+    const data = await this.pw.postMessage({ action: 'export' })
+
+    if (data.error) {
+      throw new Error(data.error)
+    }
+    fu.exportToFile(data, fileName)
+  }
 }
 
 function getAst (sql) {

src/views/Editor.vue

@@ -11,7 +11,7 @@
           <div class="warning">
             Database is not loaded. Queries can’t be run without database.
           </div>
-          <db-uploader id="db-uploader"/>
+          <db-uploader id="db-uploader" width="100%"/>
         </div>
       </template>
       <template #right-pane>
@@ -64,10 +64,6 @@ export default {
   box-sizing: border-box;
 }
 
->>> .db-uploader-container {
-  width: 100%;
-}
-
 >>>.drop-area {
   padding: 0 15px;
 }

src/views/MyQueries.vue

@@ -81,7 +81,10 @@
                   <div class="icons-container">
                     <rename-icon v-if="!query.isPredefined" @click="showRenameDialog(query.id)" />
                     <copy-icon @click="duplicateQuery(index)"/>
-                    <export-icon @click="exportToFile([query], `${query.name}.json`)"/>
+                    <export-icon
+                      @click="exportToFile([query], `${query.name}.json`)"
+                      tooltip="Export query to file"
+                    />
                     <delete-icon
                       v-if="!query.isPredefined"
                       @click="showDeleteDialog((new Set()).add(query.id))"
@@ -520,7 +523,7 @@ tbody tr:hover td {
   text-overflow: ellipsis;
 }
 tbody tr:hover .icons-container {
-  display: block;
+  display: flex;
 }
 .dialog input {
   width: 100%;

tests/components/DbUploader.spec.js

@@ -131,7 +131,7 @@ describe('DbUploader.vue import CSV', () => {
 
   beforeEach(() => {
     // mock getting a file from user
-    sinon.stub(fu, 'getFileFromUser').resolves({ type: 'text/csv' })
+    sinon.stub(fu, 'getFileFromUser').resolves({ type: 'text/csv', name: 'foo.csv' })
 
     clock = sinon.useFakeTimers()
 
@@ -596,6 +596,7 @@ describe('DbUploader.vue import CSV', () => {
     expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(true)
     expect(wrapper.find('#csv-finish').isVisible()).to.equal(false)
     expect(wrapper.find('#csv-import').isVisible()).to.equal(true)
+    expect(newDb.createDb.getCall(0).args[0]).to.equal('foo') // file name
 
     // After resolving - loading indicator is not shown
     await resolveImport()

tests/components/Schema.spec.js

@@ -98,4 +98,18 @@ describe('Schema.vue', () => {
     expect(tables.at(1).vm.name).to.equal('bar')
     expect(tables.at(2).vm.name).to.equal('foobar')
   })
+
+  it('exports db', async () => {
+    const state = {
+      dbName: 'fooDB',
+      db: {
+        export: sinon.stub().resolves()
+      }
+    }
+    const store = new Vuex.Store({ state })
+    const wrapper = mount(Schema, { store, localVue })
+
+    await wrapper.findComponent({ name: 'export-icon' }).trigger('click')
+    expect(state.db.export.calledOnceWith('fooDB'))
+  })
 })

tests/database.spec.js

@@ -2,7 +2,9 @@ import chai from 'chai'
 import sinon from 'sinon'
 import chaiAsPromised from 'chai-as-promised'
 import initSqlJs from 'sql.js'
-import database from '@/database.js'
+import database from '@/database'
+import fu from '@/file.utils'
+
 chai.use(chaiAsPromised)
 const expect = chai.expect
 chai.should()
@@ -32,8 +34,10 @@ describe('database.js', () => {
 
     const data = tempDb.export()
     const buffer = new Blob([data])
+    buffer.name = 'foo.sqlite'
 
-    const { schema } = await db.loadDb(buffer)
+    const { schema, dbName } = await db.loadDb(buffer)
+    expect(dbName).to.equal('foo')
     expect(schema).to.have.lengthOf(1)
     expect(schema[0].name).to.equal('test')
     expect(schema[0].columns[0].name).to.equal('col1')
@@ -58,6 +62,7 @@ describe('database.js', () => {
 
     const data = tempDb.export()
     const buffer = new Blob([data])
+    buffer.name = 'foo.sqlite'
 
     const { schema } = await db.loadDb(buffer)
     expect(schema[0].name).to.equal('test_virtual')
@@ -74,6 +79,7 @@ describe('database.js', () => {
 
     const data = tempDb.export()
     const buffer = new Blob([data])
+    buffer.name = 'foo.sqlite'
 
     sinon.stub(db.pw, 'postMessage').resolves({ error: new Error('foo') })
 
@@ -97,6 +103,7 @@ describe('database.js', () => {
 
     const data = tempDb.export()
     const buffer = new Blob([data])
+    buffer.name = 'foo.sqlite'
 
     await db.loadDb(buffer)
     const result = await db.execute('SELECT * from test limit 1; SELECT * from test;')
@@ -124,6 +131,7 @@ describe('database.js', () => {
 
     const data = tempDb.export()
     const buffer = new Blob([data])
+    buffer.name = 'foo.sqlite'
     await db.loadDb(buffer)
     await expect(db.execute('SELECT * from foo')).to.be.rejectedWith(/^no such table: foo$/)
   })
@@ -204,4 +212,33 @@ describe('database.js', () => {
     db.deleteProgressCounter(firstId)
     expect(db.importProgresses[firstId]).to.equal(undefined)
   })
+  it('exports db', async () => {
+    sinon.stub(fu, 'exportToFile')
+
+    // create db with table foo
+    const stmt = `
+      CREATE TABLE foo(id, name);
+      INSERT INTO foo VALUES (1, 'Harry Potter')
+    `
+    let result = await db.execute(stmt)
+
+    // export db to a file
+    await db.export('fooDb.sqlite')
+    expect(fu.exportToFile.called).to.equal(true)
+
+    // get data from export
+    const data = fu.exportToFile.getCall(0).args[0]
+    const file = new Blob([data])
+    file.name = 'fooDb.sqlite'
+
+    // loadDb from exported data
+    const anotherDb = database.getNewDatabase()
+    await anotherDb.loadDb(file)
+
+    // check that new db works and has the same table and data
+    result = await anotherDb.execute('SELECT * from foo')
+    expect(result.columns).to.eql(['id', 'name'])
+    expect(result.values).to.have.lengthOf(1)
+    expect(result.values[0]).to.eql([1, 'Harry Potter'])
+  })
 })