refactor import method

src/store/index.js

@@ -72,9 +72,10 @@ export const mutations = {
 }
 
 export const actions = {
-  async addTab ({ state }, tab) {
-    // If no tab then create a new blank one...
-    if (!tab) {
+  async addTab ({ state }, data) {
+    let tab
+    // If no data then create a new blank one...
+    if (!data) {
       tab = {
         id: nanoid(),
         name: null,
@@ -83,6 +84,9 @@ export const actions = {
           : 'Untitled',
         isUnsaved: true
       }
+    } else {
+      tab = JSON.parse(JSON.stringify(data))
+      tab.isUnsaved = false
     }
 
     // add new tab only if was not already opened

src/storedQueries.js

@@ -59,7 +59,18 @@ export default {
     localStorage.setItem('myQueries', JSON.stringify(value))
   },
 
-  export (data) {
+  exportQueries (data) {
+    const preparedData = JSON.parse(JSON.stringify(data))
+
+    // Remove isPredefined mark for exported queries
+    if (Array.isArray(data)) {
+      // group operation
+      preparedData.forEach(query => delete query.isPredefined)
+    } else {
+      // single operation
+      delete preparedData.isPredefined
+    }
+
     // Create downloader
     const downloader = document.createElement('a')
     downloader.style.display = 'none'
@@ -67,7 +78,7 @@ export default {
 
     // Prepare data
     const name = data.name || 'My sqlitevis queries'
-    const json = JSON.stringify(data, null, 4)
+    const json = JSON.stringify(preparedData, null, 4)
     const blob = new Blob([json], { type: 'octet/stream' })
     const url = window.URL.createObjectURL(blob)
     downloader.href = url
@@ -79,5 +90,55 @@ export default {
     // Clear
     window.URL.revokeObjectURL(url)
     downloader.remove()
+  },
+
+  /**
+   * It calls onSuccess with imported queries as argument when
+   * file read. We can't use Promises here because we can't
+   * catch the Cancel event when a user choose a file.
+   */
+  importQueries (onSuccess) {
+    let uploader = document.getElementById('file-uploader')
+
+    // Create uploader if it doesn't exists
+    if (!uploader) {
+      uploader = document.createElement('input')
+      uploader.id = 'file-uploader'
+      uploader.type = 'file'
+      uploader.accept = '.json'
+      uploader.style.display = 'none'
+
+      uploader.addEventListener('change', () => {
+        const file = uploader.files[0]
+        const reader = new FileReader()
+        reader.onload = (e) => {
+          // Parse data
+          let importedQueries = JSON.parse(e.target.result)
+
+          // Turn data into array if they are not
+          if (!Array.isArray(importedQueries)) {
+            importedQueries = [importedQueries]
+          }
+
+          // Generate new ids if they are the same as existing queries
+          importedQueries.forEach(query => {
+            const allQueriesIds = this.getStoredQueries().map(query => query.id)
+            if (new Set(allQueriesIds).has(query.id)) {
+              query.id = nanoid()
+            }
+          })
+
+          // Clear uploader
+          uploader.value = null
+
+          // Call callback
+          onSuccess(importedQueries)
+        }
+        reader.readAsText(file)
+      })
+
+      document.body.appendChild(uploader)
+    }
+    uploader.click()
   }
 }

src/views/MyQueries.vue

@@ -9,17 +9,8 @@
     <div id="my-queries-content" ref="my-queries-content" v-show="showedQueries.length > 0">
       <div id="my-queries-toolbar">
         <div id="toolbar-buttons">
-          <input
-            ref="importFile"
-            type="file"
-            accept=".json"
-            id="import-file"
-            @change="importQueries"
-          />
-          <button class="toolbar">
-            <label for="import-file">
-              Import
-            </label>
+          <button class="toolbar" @click="importQueries">
+            Import
           </button>
           <button
             class="toolbar"
@@ -165,7 +156,6 @@ import CloseIcon from '@/components/svg/close'
 import TextField from '@/components/TextField'
 import CheckBox from '@/components/CheckBox'
 import tooltipMixin from '@/mixins/tooltips'
-import { nanoid } from 'nanoid'
 import storedQueries from '@/storedQueries'
 
 export default {
@@ -269,8 +259,7 @@ export default {
       this.$router.push('/editor')
     },
     openQuery (index) {
-      const tab = JSON.parse(JSON.stringify(this.showedQueries[index]))
-      tab.isUnsaved = false
+      const tab = this.showedQueries[index]
       this.$store.dispatch('addTab', tab).then(id => {
         this.$store.commit('setCurrentTabId', id)
         this.$router.push('/editor')
@@ -326,10 +315,14 @@ export default {
       this.$modal.hide('delete')
       if (!this.deleteGroup) {
         this.queries.splice(this.currentQueryIndex, 1)
+
+        // Close deleted query tab if it was opened
         const tabIndex = this.findTabIndex(this.currentQueryId)
         if (tabIndex >= 0) {
           this.$store.commit('deleteTab', tabIndex)
         }
+
+        // Clear checkboxes
         if (this.selectedQueriesIds.has(this.currentQueryId)) {
           this.selectedQueriesIds.delete(this.currentQueryId)
         }
@@ -337,12 +330,16 @@ export default {
         this.queries = this.selectAll
           ? []
           : this.queries.filter(query => !this.selectedQueriesIds.has(query.id))
+
+        // Close deleted queries if it was opened
         const tabs = this.$store.state.tabs
         for (let i = tabs.length - 1; i >= 0; i--) {
           if (this.selectedQueriesIds.has(tabs[i].id)) {
             this.$store.commit('deleteTab', i)
           }
         }
+
+        // Clear checkboxes
         this.selectedQueriesIds.clear()
       }
       this.selectedQueriesCount = this.selectedQueriesIds.size
@@ -354,38 +351,21 @@ export default {
     exportQuery (index) {
       let data
 
-      // single operation
       if (typeof index === 'number') {
-        data = JSON.parse(JSON.stringify(this.showedQueries[index]))
-        delete data.isPredefined
+        // single operation
+        data = this.showedQueries[index]
       } else {
         // group operation
         data = this.selectAll
-          ? JSON.parse(JSON.stringify(this.allQueries))
+          ? this.allQueries
           : this.allQueries.filter(query => this.selectedQueriesIds.has(query.id))
-        data.forEach(query => delete query.isPredefined)
       }
 
       // export data to file
-      storedQueries.export(data)
+      storedQueries.exportQueries(data)
     },
     importQueries () {
-      const file = this.$refs.importFile.files[0]
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        let importedQueries = JSON.parse(e.target.result)
-
-        if (!Array.isArray(importedQueries)) {
-          importedQueries = [importedQueries]
-        }
-
-        importedQueries.forEach(query => {
-          const allQueriesIds = this.allQueries.map(query => query.id)
-          if (new Set(allQueriesIds).has(query.id)) {
-            query.id = nanoid()
-          }
-        })
-
+      const onSuccess = (importedQueries) => {
         if (this.selectAll) {
           importedQueries.forEach(query => {
             this.selectedQueriesIds.add(query.id)
@@ -395,9 +375,8 @@ export default {
 
         this.queries = this.queries.concat(importedQueries)
         storedQueries.updateStorage(this.queries)
-        this.$refs.importFile.value = null
       }
-      reader.readAsText(file)
+      storedQueries.importQueries(onSuccess)
     },
     toggleSelectAll (checked) {
       this.selectAll = checked
@@ -540,9 +519,7 @@ tbody tr:hover .icons-container {
 .dialog input {
   width: 100%;
 }
-#import-file {
-  display: none;
-}
+
 button.toolbar {
   margin-right: 16px;
 }