Export db #34

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