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%;