add import queries feature

package-lock.json

@@ -10672,6 +10672,11 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "nanoid": {
+      "version": "3.1.12",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.12.tgz",
+      "integrity": "sha512-1qstj9z5+x491jfiC4Nelk+f8XBad7LN20PmyWINJEMRSf3wcAjAWysw1qaA8z6NSKe2sjq1hRSDpBH5paCb6A=="
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "codemirror": "^5.57.0",
     "core-js": "^3.6.5",
+    "nanoid": "^3.1.12",
     "plotly.js": "^1.54.6",
     "react": "^16.13.1",
     "react-chart-editor": "^0.41.7",

src/assets/styles/buttons.css

@@ -52,6 +52,7 @@ button.toolbar {
   background: transparent;
   border: none;
   color: var(--color-text-base);
+  padding: 0;
 }
 
 button.toolbar:hover {

src/components/MainMenu.vue

@@ -19,12 +19,14 @@
 </template>
 
 <script>
+import { nanoid } from 'nanoid'
+
 export default {
   name: 'MainMenu',
   methods: {
     createNewQuery () {
       const tab = {
-        id: Number(new Date()),
+        id: nanoid(),
         name: null,
         tempName: this.$store.state.untitledLastIndex
           ? `Untitled ${this.$store.state.untitledLastIndex}`
@@ -69,6 +71,7 @@ export default {
   }
 }
 </script>
+
 <style scoped>
 nav {
   height: 68px;

src/views/MyQueries.vue

@@ -3,7 +3,18 @@
     <div id="my-queries-content">
       <div id="my-queries-toolbar">
         <div id="toolbar-buttons">
-          <button class="toolbar">Import</button>
+          <input
+            ref="importFile"
+            type="file"
+            accept=".json"
+            id="import-file"
+            @change="importQueries"
+          />
+            <button class="toolbar">
+              <label for="import-file">
+                Import
+              </label>
+            </button>
           <button class="toolbar">Export</button>
           <button class="toolbar">Delete</button>
         </div>
@@ -103,6 +114,7 @@ import ExportIcon from '@/components/svg/export'
 import DeleteIcon from '@/components/svg/delete'
 import CloseIcon from '@/components/svg/close'
 import TextField from '@/components/TextField'
+import { nanoid } from 'nanoid'
 
 export default {
   name: 'MyQueries',
@@ -179,7 +191,7 @@ export default {
     duplicateQuery (index) {
       const newQuery = JSON.parse(JSON.stringify(this.queries[index]))
       newQuery.name = newQuery.name + ' Copy'
-      newQuery.id = Number(new Date())
+      newQuery.id = nanoid()
       newQuery.createdAt = new Date()
       this.queries.push(newQuery)
       this.saveQueriesInLocalStorage()
@@ -215,6 +227,27 @@ export default {
       downloader.click()
       window.URL.revokeObjectURL(url)
     },
+    importQueries () {
+      const file = this.$refs.importFile.files[0]
+      const reader = new FileReader()
+      reader.onload = () => {
+        let importedQueries = JSON.parse(event.target.result)
+
+        if (!Array.isArray(importedQueries)) {
+          importedQueries = [importedQueries]
+        }
+
+        importedQueries.forEach(query => {
+          query.id = nanoid()
+          query.createdAt = new Date()
+        })
+
+        this.queries = this.queries.concat(importedQueries)
+        this.saveQueriesInLocalStorage()
+        this.$refs.importFile.value = null
+      }
+      reader.readAsText(file)
+    },
     saveQueriesInLocalStorage () {
       localStorage.setItem('myQueries', JSON.stringify(this.queries))
     }
@@ -292,7 +325,17 @@ tbody tr:hover .icons-container {
 .dialog input {
   width: 100%;
 }
-a {
+a, #import-file {
   display: none;
 }
+button.toolbar {
+  margin-right: 16px;
+}
+button label {
+  display: block;
+  line-height: 36px;
+}
+button label:hover {
+  cursor: pointer;
+}
 </style>