From e71e6700c175d828262f704049456004ac7c959e Mon Sep 17 00:00:00 2001
From: lana-k <skochetova89@gmail.com>
Date: Wed, 20 Jul 2022 22:47:40 +0200
Subject: [PATCH] improve events

---
 src/components/CsvImport/index.vue            |  4 ++--
 src/components/DbUploader.vue                 |  4 ++--
 src/lib/database/index.js                     |  6 +++---
 src/lib/storedInquiries/index.js              |  6 +++---
 src/lib/utils/events.js                       | 20 ++++++++++---------
 src/registerServiceWorker.js                  |  4 ++--
 src/views/Main/MainMenu.vue                   |  6 +++---
 src/views/Main/Workspace/Schema/index.vue     |  4 ++--
 .../Tabs/Tab/DataView/Chart/index.vue         |  9 ++++-----
 .../Tabs/Tab/DataView/Pivot/index.vue         |  4 ++--
 .../Workspace/Tabs/Tab/DataView/index.vue     |  6 +++---
 .../Main/Workspace/Tabs/Tab/RunResult.vue     |  6 +++---
 src/views/Main/Workspace/Tabs/Tab/index.vue   | 10 +++++-----
 src/views/Main/Workspace/index.vue            |  4 ++--
 14 files changed, 47 insertions(+), 46 deletions(-)

diff --git a/src/components/CsvImport/index.vue b/src/components/CsvImport/index.vue
index 2b979f3..a984629 100644
--- a/src/components/CsvImport/index.vue
+++ b/src/components/CsvImport/index.vue
@@ -112,7 +112,7 @@ import SqlTable from '@/components/SqlTable'
 import Logs from '@/components/Logs'
 import time from '@/lib/utils/time'
 import fIo from '@/lib/utils/fileIo'
-import { send } from '@/lib/utils/events'
+import events from '@/lib/utils/events'
 
 export default {
   name: 'CsvImport',
@@ -336,7 +336,7 @@ export default {
       this.$store.commit('setCurrentTabId', tabId)
       this.importCsvCompleted = false
       this.$emit('finish')
-      send('inquiry.create', undefined, { auto: true })
+      events.send('inquiry.create', null, { auto: true })
     }
   }
 }
diff --git a/src/components/DbUploader.vue b/src/components/DbUploader.vue
index 793f216..ade029d 100644
--- a/src/components/DbUploader.vue
+++ b/src/components/DbUploader.vue
@@ -58,7 +58,7 @@ import fIo from '@/lib/utils/fileIo'
 import ChangeDbIcon from '@/components/svg/changeDb'
 import database from '@/lib/database'
 import CsvImport from '@/components/CsvImport'
-import { send } from '@/lib/utils/events'
+import events from '@/lib/utils/events'
 
 export default {
   name: 'DbUploader',
@@ -128,7 +128,7 @@ export default {
       if (fIo.isDatabase(file)) {
         this.loadDb(file)
       } else {
-        send('database.import', file.size, {
+        events.send('database.import', file.size, {
           from: 'csv',
           new_db: true
         })
diff --git a/src/lib/database/index.js b/src/lib/database/index.js
index b38be66..bb12456 100644
--- a/src/lib/database/index.js
+++ b/src/lib/database/index.js
@@ -7,7 +7,7 @@ import Worker from './_worker.js'
 // https://github.com/nolanlawson/promise-worker
 import PromiseWorker from 'promise-worker'
 
-import { send } from '@/lib/utils/events'
+import events from '@/lib/utils/events'
 
 function getNewDatabase () {
   const worker = new Worker()
@@ -79,7 +79,7 @@ class Database {
     this.dbName = file ? fu.getFileName(file) : 'database'
     this.refreshSchema()
 
-    send('database.import', file ? file.size : 0, {
+    events.send('database.import', file ? file.size : 0, {
       from: file ? 'sqlite' : 'none',
       new_db: true
     })
@@ -121,7 +121,7 @@ class Database {
       throw new Error(data.error)
     }
     fu.exportToFile(data, fileName)
-    send('database.export', data.byteLength, { to: 'sqlite' })
+    events.send('database.export', data.byteLength, { to: 'sqlite' })
   }
 
   async validateTableName (name) {
diff --git a/src/lib/storedInquiries/index.js b/src/lib/storedInquiries/index.js
index 0a1da44..a030a54 100644
--- a/src/lib/storedInquiries/index.js
+++ b/src/lib/storedInquiries/index.js
@@ -1,6 +1,6 @@
 import { nanoid } from 'nanoid'
 import fu from '@/lib/utils/fileIo'
-import { send } from '@/lib/utils/events'
+import events from '@/lib/utils/events'
 import migration from './_migrations'
 
 const migrate = migration._migrate
@@ -106,7 +106,7 @@ export default {
       .then(str => {
         const inquires = this.deserialiseInquiries(str)
 
-        send('inquiry.import', inquires.length)
+        events.send('inquiry.import', inquires.length)
 
         return inquires
       })
@@ -115,7 +115,7 @@ export default {
     const jsonStr = this.serialiseInquiries(inquiryList)
     fu.exportToFile(jsonStr, fileName)
 
-    send('inquiry.export', inquiryList.length)
+    events.send('inquiry.export', inquiryList.length)
   },
 
   async readPredefinedInquiries () {
diff --git a/src/lib/utils/events.js b/src/lib/utils/events.js
index b695a09..7519325 100644
--- a/src/lib/utils/events.js
+++ b/src/lib/utils/events.js
@@ -1,10 +1,12 @@
-export function send (name, value, labels) {
-  const event = new CustomEvent('sqliteviz-app-event', {
-    detail: {
-      name,
-      value,
-      labels
-    }
-  })
-  window.dispatchEvent(event)
+export default {
+  send (name, value, labels) {
+    const event = new CustomEvent('sqliteviz-app-event', {
+      detail: {
+        name,
+        value,
+        labels: labels || {}
+      }
+    })
+    window.dispatchEvent(event)
+  }
 }
diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js
index 89703d0..faf3a60 100644
--- a/src/registerServiceWorker.js
+++ b/src/registerServiceWorker.js
@@ -1,4 +1,4 @@
-import { send } from '@/lib/utils/events'
+import events from '@/lib/utils/events'
 let refresh = false
 
 function invokeServiceWorkerUpdateFlow (registration) {
@@ -44,6 +44,6 @@ if ('serviceWorker' in navigator) {
   })
 
   window.addEventListener('appinstalled', () => {
-    send('pwa.install')
+    events.send('pwa.install')
   })
 }
diff --git a/src/views/Main/MainMenu.vue b/src/views/Main/MainMenu.vue
index 5c63ebd..fa97664 100644
--- a/src/views/Main/MainMenu.vue
+++ b/src/views/Main/MainMenu.vue
@@ -60,7 +60,7 @@ import TextField from '@/components/TextField'
 import CloseIcon from '@/components/svg/close'
 import storedInquiries from '@/lib/storedInquiries'
 import AppDiagnosticInfo from './AppDiagnosticInfo'
-import { send } from '@/lib/utils/events'
+import events from '@/lib/utils/events'
 
 export default {
   name: 'MainMenu',
@@ -115,7 +115,7 @@ export default {
         }
       })
 
-      send('inquiry.create', undefined, { auto: false })
+      events.send('inquiry.create', null, { auto: false })
     },
     cancelSave () {
       this.$modal.hide('save')
@@ -169,7 +169,7 @@ export default {
 
       // Signal about saving
       this.$root.$emit('inquirySaved')
-      send('inquiry.save')
+      events.send('inquiry.save')
     },
     _keyListener (e) {
       if (this.$route.path === '/workspace') {
diff --git a/src/views/Main/Workspace/Schema/index.vue b/src/views/Main/Workspace/Schema/index.vue
index 62997c3..4133ef9 100644
--- a/src/views/Main/Workspace/Schema/index.vue
+++ b/src/views/Main/Workspace/Schema/index.vue
@@ -33,7 +33,7 @@
 
 <script>
 import fIo from '@/lib/utils/fileIo'
-import { send } from '@/lib/utils/events'
+import events from '@/lib/utils/events'
 import TableDescription from './TableDescription'
 import TextField from '@/components/TextField'
 import TreeChevron from '@/components/svg/treeChevron'
@@ -88,7 +88,7 @@ export default {
       await csvImport.previewCsv()
       csvImport.open()
 
-      send('database.import', this.file.size, {
+      events.send('database.import', this.file.size, {
         from: 'csv',
         new_db: false
       })
diff --git a/src/views/Main/Workspace/Tabs/Tab/DataView/Chart/index.vue b/src/views/Main/Workspace/Tabs/Tab/DataView/Chart/index.vue
index fa096fc..c02eb9f 100644
--- a/src/views/Main/Workspace/Tabs/Tab/DataView/Chart/index.vue
+++ b/src/views/Main/Workspace/Tabs/Tab/DataView/Chart/index.vue
@@ -31,7 +31,7 @@ import PlotlyEditor from 'react-chart-editor'
 import chartHelper from '@/lib/chartHelper'
 import dereference from 'react-chart-editor/lib/lib/dereference'
 import fIo from '@/lib/utils/fileIo'
-import { send } from '@/lib/utils/events'
+import events from '@/lib/utils/events'
 
 export default {
   name: 'Chart',
@@ -66,11 +66,10 @@ export default {
       notifyOnLogging: 1
     })
     this.$watch(
-      () => JSON.stringify(
-        this.state.data.map(trace => `${trace.type}-${trace.mode}`)
-      ),
+      () => this.state.data.map(trace => `${trace.type}-${trace.mode}`)
+        .join(','),
       (value) => {
-        send('viz_plotly.render', undefined, {
+        events.send('viz_plotly.render', null, {
           type: value,
           pivot: !!this.forPivot
         })
diff --git a/src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/index.vue b/src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/index.vue
index d2f68c0..21949d0 100644
--- a/src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/index.vue
+++ b/src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/index.vue
@@ -23,7 +23,7 @@ import pivotHelper from './pivotHelper'
 import Chart from '@/views/Main/Workspace/Tabs/Tab/DataView/Chart'
 import chartHelper from '@/lib/chartHelper'
 import Vue from 'vue'
-import { send } from '@/lib/utils/events'
+import events from '@/lib/utils/events'
 const ChartClass = Vue.extend(Chart)
 
 export default {
@@ -96,7 +96,7 @@ export default {
           'update:importToSvgEnabled',
           this.viewStandartChart || this.viewCustomChart
         )
-        send('viz_pivot.render', undefined, {
+        events.send('viz_pivot.render', null, {
           type: this.pivotOptions.rendererName
         })
       }
diff --git a/src/views/Main/Workspace/Tabs/Tab/DataView/index.vue b/src/views/Main/Workspace/Tabs/Tab/DataView/index.vue
index 8b28a61..9bd7247 100644
--- a/src/views/Main/Workspace/Tabs/Tab/DataView/index.vue
+++ b/src/views/Main/Workspace/Tabs/Tab/DataView/index.vue
@@ -95,7 +95,7 @@ import ClipboardIcon from '@/components/svg/clipboard'
 import cIo from '@/lib/utils/clipboardIo'
 import loadingDialog from '@/components/LoadingDialog'
 import time from '@/lib/utils/time'
-import { send } from '@/lib/utils/events'
+import events from '@/lib/utils/events'
 
 export default {
   name: 'DataView',
@@ -207,11 +207,11 @@ export default {
         eventLabels.pivot = this.plotlyInPivot
       }
 
-      send(
+      events.send(
         this.mode === 'chart' || this.plotlyInPivot
           ? 'viz_plotly.export'
           : 'viz_pivot.export',
-        undefined,
+        null,
         eventLabels
       )
     }
diff --git a/src/views/Main/Workspace/Tabs/Tab/RunResult.vue b/src/views/Main/Workspace/Tabs/Tab/RunResult.vue
index 23ba50d..7e0ece8 100644
--- a/src/views/Main/Workspace/Tabs/Tab/RunResult.vue
+++ b/src/views/Main/Workspace/Tabs/Tab/RunResult.vue
@@ -72,7 +72,7 @@ import fIo from '@/lib/utils/fileIo'
 import cIo from '@/lib/utils/clipboardIo'
 import time from '@/lib/utils/time'
 import loadingDialog from '@/components/LoadingDialog'
-import { send } from '@/lib/utils/events'
+import events from '@/lib/utils/events'
 
 export default {
   name: 'RunResult',
@@ -119,7 +119,7 @@ export default {
 
     exportToCsv () {
       if (this.result && this.result.values) {
-        send('resultset.export',
+        events.send('resultset.export',
           this.result.values[this.result.columns[0]].length,
           { to: 'csv' }
         )
@@ -130,7 +130,7 @@ export default {
 
     async prepareCopy () {
       if (this.result && this.result.values) {
-        send('resultset.export',
+        events.send('resultset.export',
           this.result.values[this.result.columns[0]].length,
           { to: 'clipboard' }
         )
diff --git a/src/views/Main/Workspace/Tabs/Tab/index.vue b/src/views/Main/Workspace/Tabs/Tab/index.vue
index 0c905b4..4e4c71f 100644
--- a/src/views/Main/Workspace/Tabs/Tab/index.vue
+++ b/src/views/Main/Workspace/Tabs/Tab/index.vue
@@ -56,7 +56,7 @@ import DataView from './DataView'
 import RunResult from './RunResult'
 import time from '@/lib/utils/time'
 import Teleport from 'vue2-teleport'
-import { send } from '@/lib/utils/events'
+import events from '@/lib/utils/events'
 
 export default {
   name: 'Tab',
@@ -110,7 +110,7 @@ export default {
       this.layout[from] = this.layout[to]
       this.layout[to] = fromPosition
 
-      send('inquiry.panel', undefined, { panel: to })
+      events.send('inquiry.panel', null, { panel: to })
     },
     onDataViewUpdate () {
       this.$store.commit('updateTab', { index: this.tabIndex, isSaved: false })
@@ -126,19 +126,19 @@ export default {
         this.time = time.getPeriod(start, new Date())
 
         if (this.result && this.result.values) {
-          send('resultset.create',
+          events.send('resultset.create',
             this.result.values[this.result.columns[0]].length
           )
         }
 
-        send('query.run', parseFloat(this.time), { status: 'success' })
+        events.send('query.run', parseFloat(this.time), { status: 'success' })
       } catch (err) {
         this.error = {
           type: 'error',
           message: err
         }
 
-        send('query.run', 0, { status: 'error' })
+        events.send('query.run', 0, { status: 'error' })
       }
       state.db.refreshSchema()
       this.isGettingResults = false
diff --git a/src/views/Main/Workspace/index.vue b/src/views/Main/Workspace/index.vue
index 2ec0793..0d543e8 100644
--- a/src/views/Main/Workspace/index.vue
+++ b/src/views/Main/Workspace/index.vue
@@ -19,7 +19,7 @@
 import Splitpanes from '@/components/Splitpanes'
 import Schema from './Schema'
 import Tabs from './Tabs'
-import { send } from '@/lib/utils/events'
+import events from '@/lib/utils/events'
 
 export default {
   name: 'Workspace',
@@ -51,7 +51,7 @@ export default {
       const tabId = await this.$store.dispatch('addTab', { query: stmt })
       this.$store.commit('setCurrentTabId', tabId)
 
-      send('inquiry.create', undefined, { auto: true })
+      events.send('inquiry.create', null, { auto: true })
     }
   }
 }