Create an empty database #44

src/components/DbUploader/index.vue

@@ -1,7 +1,7 @@
 <template>
   <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 v-if="type === 'illustrated'" class="drop-area-container">
       <div
         class="drop-area"
         @dragover.prevent="state = 'dragover'"
@@ -154,9 +154,9 @@ export default {
     type: {
       type: String,
       required: false,
-      default: 'regular',
+      default: 'small',
       validator: (value) => {
-        return ['regular', 'illustrated', 'small'].includes(value)
+        return ['illustrated', 'small'].includes(value)
       }
     },
     width: {
@@ -227,11 +227,20 @@ export default {
     },
 
     async finish () {
+      console.log('finish')
       this.$store.commit('setDb', this.newDb)
       this.$store.commit('saveSchema', this.schema)
+      console.log('after saveSchema')
       if (this.importCsvCompleted) {
         this.$modal.hide('parse')
-        const tabId = await this.$store.dispatch('addTab', { query: 'select * from csv_import' })
+        const stmt = [
+          '/*',
+          ' * Your CSV file has been imported into csv_import table.',
+          ' * You can run this SQL query to make all CSV records available for charting.',
+          ' */',
+          'SELECT * FROM csv_import'
+        ].join('\n')
+        const tabId = await this.$store.dispatch('addTab', { query: stmt })
         this.$store.commit('setCurrentTabId', tabId)
         this.importCsvCompleted = false
       }
@@ -341,7 +350,7 @@ export default {
           // Create db with csv table and get schema
           const name = file.name.replace(/\.[^.]+$/, '')
           start = new Date()
-          this.schema = await this.newDb.createDb(name, parseResult.data, progressCounterId)
+          this.schema = await this.newDb.importDb(name, parseResult.data, progressCounterId)
           end = new Date()
 
           // Inform about import success
@@ -389,6 +398,7 @@ export default {
         this.delimiter = ''
         return Promise.all([this.previewCSV(), this.animationPromise])
           .then(() => {
+            console.log('show')
             this.$modal.show('parse')
           })
       } else {
@@ -432,6 +442,7 @@ export default {
   align-items: center;
   justify-content: center;
   height: 100%;
+  cursor: pointer;
 }
 
 #img-container {

src/components/svg/changeDb.vue

@@ -16,7 +16,7 @@
     />
   </svg>
   <span class="icon-tooltip" :style="tooltipStyle">
-    Change database
+    Load another database or CSV
   </span>
 </div>
 </template>

src/lib/database/index.js

@@ -50,7 +50,7 @@ class Database {
     delete this.importProgresses[id]
   }
 
-  async createDb (name, data, progressCounterId) {
+  async importDb (name, data, progressCounterId) {
     const result = await this.pw.postMessage({
       action: 'import',
       columns: data.columns,
@@ -66,14 +66,15 @@ class Database {
   }
 
   async loadDb (file) {
-    const fileContent = await fu.readAsArrayBuffer(file)
+    const fileContent = file ? await fu.readAsArrayBuffer(file) : null
     const res = await this.pw.postMessage({ action: 'open', buffer: fileContent })
 
     if (res.error) {
       throw new Error(res.error)
     }
 
-    return this.getSchema(file.name.replace(/\.[^.]+$/, ''))
+    const dbName = file ? file.name.replace(/\.[^.]+$/, '') : 'database'
+    return this.getSchema(dbName)
   }
 
   async getSchema (name) {
@@ -85,12 +86,14 @@ class Database {
     const result = await this.execute(getSchemaSql)
     // Parse DDL statements to get column names and types
     const parsedSchema = []
-    result.values.forEach(item => {
-      parsedSchema.push({
-        name: item[0],
-        columns: getColumns(item[1])
+    if (result && result.values) {
+      result.values.forEach(item => {
+        parsedSchema.push({
+          name: item[0],
+          columns: getColumns(item[1])
+        })
       })
-    })
+    }
 
     // Return db name and schema
     return {

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

@@ -5,7 +5,7 @@
     </div>
     <div id="db">
       <div @click="schemaVisible = !schemaVisible" class="db-name">
-        <tree-chevron :expanded="schemaVisible"/>
+        <tree-chevron v-show="schema.length > 0" :expanded="schemaVisible"/>
         {{ dbName }}
       </div>
       <db-uploader id="db-edit" type="small" />

src/views/Main/Editor/index.vue

@@ -6,13 +6,7 @@
       :after="{ size: 80, max: 100 }"
     >
       <template #left-pane>
-        <schema v-if="$store.state.schema"/>
-        <div v-else id="empty-schema-container">
-          <div class="warning">
-            Database is not loaded. Queries can’t be run without database.
-          </div>
-          <db-uploader id="db-uploader" width="100%"/>
-        </div>
+        <schema/>
       </template>
       <template #right-pane>
         <tabs />
@@ -25,15 +19,43 @@
 import Splitpanes from '@/components/Splitpanes'
 import Schema from './Schema'
 import Tabs from './Tabs'
-import DbUploader from '@/components/DbUploader'
+import database from '@/lib/database'
+import store from '@/store'
 
 export default {
   name: 'Editor',
   components: {
     Schema,
     Splitpanes,
-    Tabs,
-    DbUploader
+    Tabs
+  },
+  async beforeRouteEnter (to, from, next) {
+    if (!store.state.schema) {
+      const newDb = database.getNewDatabase()
+      const newSchema = await newDb.loadDb()
+      store.commit('setDb', newDb)
+      store.commit('saveSchema', newSchema)
+      const stmt = [
+        '/*',
+        ' * Your database is empty. In order to start building charts',
+        ' * you should create a table and insert data into it.',
+        ' */',
+        'CREATE TABLE house',
+        '(',
+        '  name TEXT,',
+        '  points INTEGER',
+        ');',
+        'INSERT INTO house VALUES',
+        "('Gryffindor', 100),",
+        "('Hufflepuff', 90),",
+        "('Ravenclaw', 95),",
+        "('Slytherin', 80);"
+      ].join('\n')
+
+      const tabId = await store.dispatch('addTab', { query: stmt })
+      store.commit('setCurrentTabId', tabId)
+    }
+    next()
   }
 }
 </script>
@@ -43,32 +65,4 @@ export default {
   height: 100%;
   background-color: var(--color-white);
 }
-#empty-schema-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  min-width: 200px;
-  height: 100%;
-}
-
-#db-uploader {
-  flex-grow: 1;
-  padding: 24px;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.warning {
-  padding: 12px 24px;
-  width: 100%;
-  box-sizing: border-box;
-}
-
->>>.drop-area {
-  padding: 0 15px;
-}
-
->>>.drop-area .text {
-  max-width: 200px;
-}
 </style>

src/views/Welcome.vue

@@ -4,8 +4,8 @@
     <div id="note">
       Sqliteviz is fully client-side. Your database never leaves your computer.
     </div>
-    <button id ="skip" class="secondary" @click="$router.push('/editor')">
-      Skip database loading
+    <button id="skip" class="secondary" @click="$router.push('/editor')">
+      Create empty database
     </button>
   </div>
 </template>