CSV import as a table and db connection rework

- Add csv to existing db #32
- [RFE] Simplify working with temporary tables #53

src/views/Main/Editor/Schema/index.vue

@@ -10,6 +10,7 @@
       </div>
       <db-uploader id="db-edit" type="small" />
       <export-icon tooltip="Export database" @click="exportToFile"/>
+      <add-table-icon @click="addCsv"/>
     </div>
     <div v-show="schemaVisible" class="schema">
       <table-description
@@ -19,15 +20,26 @@
         :columns="table.columns"
       />
     </div>
+
+    <!--Parse csv dialog  -->
+    <csv-import
+      ref="addCsv"
+      :file="file"
+      :db="$store.state.db"
+      dialog-name="addCsv"
+    />
   </div>
 </template>
 
 <script>
+import fIo from '@/lib/utils/fileIo'
 import TableDescription from './TableDescription'
 import TextField from '@/components/TextField'
 import TreeChevron from '@/components/svg/treeChevron'
 import DbUploader from '@/components/DbUploader'
 import ExportIcon from '@/components/svg/export'
+import AddTableIcon from '@/components/svg/addTable'
+import CsvImport from '@/components/CsvImport'
 
 export default {
   name: 'Schema',
@@ -36,33 +48,44 @@ export default {
     TextField,
     TreeChevron,
     DbUploader,
-    ExportIcon
+    ExportIcon,
+    AddTableIcon,
+    CsvImport
   },
   data () {
     return {
       schemaVisible: true,
-      filter: null
+      filter: null,
+      file: null
     }
   },
   computed: {
     schema () {
-      if (!this.$store.state.schema) {
+      if (!this.$store.state.db.schema) {
         return []
       }
 
       return !this.filter
-        ? this.$store.state.schema
-        : this.$store.state.schema.filter(
+        ? this.$store.state.db.schema
+        : this.$store.state.db.schema.filter(
           table => table.name.toUpperCase().indexOf(this.filter.toUpperCase()) !== -1
         )
     },
     dbName () {
-      return this.$store.state.dbName
+      return this.$store.state.db.dbName
     }
   },
   methods: {
     exportToFile () {
       this.$store.state.db.export(`${this.dbName}.sqlite`)
+    },
+    async addCsv () {
+      this.file = await fIo.getFileFromUser('.csv')
+      await this.$nextTick()
+      const csvImport = this.$refs.addCsv
+      csvImport.reset()
+      await csvImport.previewCsv()
+      csvImport.open()
     }
   }
 }

src/views/Main/Editor/Tabs/Tab/SqlEditor/hint.js

@@ -17,15 +17,15 @@ export function getHints (cm, options) {
 const hintOptions = {
   get tables () {
     const tables = {}
-    if (store.state.schema) {
-      store.state.schema.forEach(table => {
+    if (store.state.db.schema) {
+      store.state.db.schema.forEach(table => {
         tables[table.name] = table.columns.map(column => column.name)
       })
     }
     return tables
   },
   get defaultTable () {
-    const schema = store.state.schema
+    const schema = store.state.db.schema
     return schema && schema.length === 1 ? schema[0].name : null
   },
   completeSingle: false,

src/views/Main/Editor/Tabs/Tab/SqlEditor/index.vue

@@ -6,7 +6,7 @@
 
 <script>
 import showHint, { showHintOnDemand } from './hint'
-import { debounce } from 'debounce'
+import time from '@/lib/utils/time'
 import { codemirror } from 'vue-codemirror'
 import 'codemirror/lib/codemirror.css'
 import 'codemirror/mode/sql/sql.js'
@@ -39,7 +39,7 @@ export default {
     }
   },
   methods: {
-    onChange: debounce(showHint, 400),
+    onChange: time.debounce(showHint, 400),
     focus () {
       this.$refs.cm.codemirror.focus()
     }

src/views/Main/Editor/Tabs/Tab/index.vue

@@ -120,14 +120,13 @@ export default {
         const start = new Date()
         this.result = await state.db.execute(this.query + ';')
         this.time = time.getPeriod(start, new Date())
-        const schema = await state.db.getSchema(state.dbName)
-        this.$store.commit('saveSchema', schema)
       } catch (err) {
         this.error = {
           type: 'error',
           message: err
         }
       }
+      state.db.refreshSchema()
       this.isGettingResults = false
     },
     handleResize () {
@@ -143,12 +142,12 @@ export default {
     calculateTableHeight () {
       const bottomPane = this.$refs.bottomPane
       // 88 - view swittcher height
-      // 42 - table footer width
-      // 30 - desirable space after the table
+      // 34 - table footer width
+      // 12 - desirable space after the table
       // 5 - padding-bottom of rounded table container
-      // 40 - height of table header
-      const freeSpace = bottomPane.offsetHeight - 88 - 42 - 30 - 5 - 40
-      this.tableViewHeight = freeSpace - (freeSpace % 40)
+      // 35 - height of table header
+      const freeSpace = bottomPane.offsetHeight - 88 - 34 - 12 - 5 - 35
+      this.tableViewHeight = freeSpace - (freeSpace % 35)
     }
   }
 }

src/views/Main/Editor/index.vue

@@ -30,11 +30,10 @@ export default {
     Tabs
   },
   async beforeRouteEnter (to, from, next) {
-    if (!store.state.schema) {
+    if (!store.state.db) {
       const newDb = database.getNewDatabase()
-      const newSchema = await newDb.loadDb()
+      await newDb.loadDb()
       store.commit('setDb', newDb)
-      store.commit('saveSchema', newSchema)
       const stmt = [
         '/*',
         ' * Your database is empty. In order to start building charts',

src/views/Main/MainMenu.vue

@@ -100,7 +100,7 @@ export default {
       }
     },
     runDisabled () {
-      return this.currentQuery && (!this.$store.state.schema || !this.currentQuery.query)
+      return this.currentQuery && (!this.$store.state.db || !this.currentQuery.query)
     }
   },
   created () {