change code structure

src/components/DbUploader/DelimiterSelector/index.vue

@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import ascii from '@/ascii'
+import ascii from './ascii'
 import DropDownChevron from '@/components/svg/dropDownChevron'
 import ClearIcon from '@/components/svg/clear'
 

src/components/DbUploader/index.vue

@@ -127,17 +127,17 @@
 </template>
 
 <script>
-import fu from '@/file.utils'
-import csv from '@/csv'
+import fu from '@/lib/utils/fileIo'
+import csv from './csv'
 import CloseIcon from '@/components/svg/close'
 import TextField from '@/components/TextField'
-import DelimiterSelector from '@/components/DelimiterSelector'
+import DelimiterSelector from './DelimiterSelector'
 import CheckBox from '@/components/CheckBox'
 import SqlTable from '@/components/SqlTable'
 import Logs from '@/components/Logs'
 import ChangeDbIcon from '@/components/svg/changeDb'
-import time from '@/time'
-import database from '@/database'
+import time from '@/lib/utils/time'
+import database from '@/lib/database'
 
 const csvMimeTypes = [
   'text/csv',

src/components/Splitpanes/index.vue

@@ -65,7 +65,7 @@
 </template>
 
 <script>
-import splitter from '@/splitter'
+import splitter from './splitter'
 
 export default {
   name: 'Splitpanes',

src/components/SqlTable/index.vue

@@ -48,7 +48,7 @@
 </template>
 
 <script>
-import Pager from '@/components/Pager'
+import Pager from './Pager'
 
 export default {
   name: 'SqlTable',

src/components/svg/changeDb.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import tooltipMixin from '@/mixins/tooltips'
+import tooltipMixin from '@/tooltipMixin'
 
 export default {
   name: 'changeDbIcon',

src/components/svg/export.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import tooltipMixin from '@/mixins/tooltips'
+import tooltipMixin from '@/tooltipMixin'
 
 export default {
   name: 'ExportIcon',

src/components/svg/hint.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import tooltipMixin from '@/mixins/tooltips'
+import tooltipMixin from '@/tooltipMixin'
 
 export default {
   name: 'HintIcon',

src/lib/database/_sql.js

@@ -1,5 +1,5 @@
 import initSqlJs from 'sql.js/dist/sql-wasm.js'
-import dbUtils from '@/db.utils'
+import dbUtils from './_statements'
 
 let SQL = null
 const sqlModuleReady = initSqlJs().then(sqlModule => { SQL = sqlModule })

src/lib/database/_worker.js

@@ -1,5 +1,5 @@
 import registerPromiseWorker from 'promise-worker/register'
-import Sql from '@/sql'
+import Sql from './_sql'
 
 const sqlReady = Sql.build()
 

src/lib/database/index.js

@@ -1,8 +1,8 @@
 import sqliteParser from 'sqlite-parser'
-import fu from '@/file.utils'
+import fu from '@/lib/utils/fileIo'
 // We can import workers like so because of worker-loader:
 // https://webpack.js.org/loaders/worker-loader/
-import Worker from '@/db.worker.js'
+import Worker from './_worker.js'
 
 // Use promise-worker in order to turn worker into the promise based one:
 // https://github.com/nolanlawson/promise-worker

src/lib/storedQueries.js

@@ -1,5 +1,5 @@
 import { nanoid } from 'nanoid'
-import fu from '@/file.utils'
+import fu from '@/lib/utils/fileIo'
 
 export default {
   getStoredQueries () {

src/main.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-import store from './store'
+import App from '@/App.vue'
+import router from '@/router'
+import store from '@/store'
 import { VuePlugin } from 'vuera'
 import VModal from 'vue-js-modal'
 
@@ -13,7 +13,7 @@ import '@/assets/styles/tooltips.css'
 import '@/assets/styles/messages.css'
 
 if (!['localhost', '127.0.0.1'].includes(location.hostname)) {
-  import('../registerServiceWorker') // eslint-disable-line no-unused-expressions
+  import('./registerServiceWorker') // eslint-disable-line no-unused-expressions
 }
 
 Vue.use(VuePlugin)

src/registerServiceWorker.js

@@ -0,0 +1,44 @@
+let refresh = false
+
+function invokeServiceWorkerUpdateFlow (registration) {
+  const agree = confirm('New version of the app is available. Refresh now?')
+  if (agree) {
+    if (registration.waiting) {
+      // let waiting Service Worker know it should became active
+      refresh = true
+      registration.waiting.postMessage({ type: 'SKIP_WAITING' })
+    }
+  }
+}
+
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', async () => {
+    const registration = await navigator.serviceWorker.register('service-worker.js')
+    // ensure the case when the updatefound event was missed is also handled
+    // by re-invoking the prompt when there's a waiting Service Worker
+    if (registration.waiting) {
+      invokeServiceWorkerUpdateFlow(registration)
+    }
+
+    // detect Service Worker update available and wait for it to become installed
+    registration.addEventListener('updatefound', () => {
+      const newRegestration = registration.installing
+      if (newRegestration) {
+        // wait until the new Service worker is actually installed (ready to take over)
+        newRegestration.addEventListener('statechange', () => {
+          if (registration.waiting && navigator.serviceWorker.controller) {
+            invokeServiceWorkerUpdateFlow(registration)
+          }
+        })
+      }
+    })
+
+    // detect controller change and refresh the page
+    navigator.serviceWorker.addEventListener('controllerchange', () => {
+      if (refresh) {
+        window.location.reload()
+        refresh = false
+      }
+    })
+  })
+}

src/router.js

@@ -1,9 +1,9 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Editor from '@/views/Editor'
-import MyQueries from '@/views/MyQueries'
-import Home from '@/views/Home'
-import MainView from '@/views/MainView'
+import Editor from '@/views/Main/Editor'
+import MyQueries from '@/views/Main/MyQueries'
+import Welcome from '@/views/Welcome'
+import Main from '@/views/Main'
 
 Vue.use(VueRouter)
 
@@ -11,12 +11,12 @@ const routes = [
   {
     path: '/',
     name: 'Welcome',
-    component: Home
+    component: Welcome
   },
   {
     path: '/',
-    name: 'MainView',
-    component: MainView,
+    name: 'Main',
+    component: Main,
     children: [
       {
         path: '/editor',

src/store/actions.js

@@ -0,0 +1,30 @@
+import { nanoid } from 'nanoid'
+
+export default {
+  async addTab ({ state }, data) {
+    const tab = data ? JSON.parse(JSON.stringify(data)) : {}
+    // If no data then create a new blank one...
+    // No data.id means to create new tab, but not blank,
+    // e.g. with 'select * from csv_import' query after csv import
+    if (!data || !data.id) {
+      tab.id = nanoid()
+      tab.name = null
+      tab.tempName = state.untitledLastIndex
+        ? `Untitled ${state.untitledLastIndex}`
+        : 'Untitled'
+      tab.isUnsaved = true
+    } else {
+      tab.isUnsaved = false
+    }
+
+    // add new tab only if was not already opened
+    if (!state.tabs.some(openedTab => openedTab.id === tab.id)) {
+      state.tabs.push(tab)
+      if (!tab.name) {
+        state.untitledLastIndex += 1
+      }
+    }
+
+    return tab.id
+  }
+}

src/store/index.js

@@ -1,112 +1,11 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-import { nanoid } from 'nanoid'
+import state from '@/store/state'
+import mutations from '@/store/mutations'
+import actions from '@/store/actions'
 
 Vue.use(Vuex)
 
-export const state = {
-  schema: null,
-  dbFile: null,
-  dbName: null,
-  tabs: [],
-  currentTab: null,
-  currentTabId: null,
-  untitledLastIndex: 0,
-  predefinedQueries: [],
-  db: null
-}
-
-export const mutations = {
-  setDb (state, db) {
-    if (state.db) {
-      state.db.shutDown()
-    }
-    state.db = db
-  },
-  saveSchema (state, { dbName, schema }) {
-    state.dbName = dbName
-    state.schema = schema
-  },
-
-  updateTab (state, { index, name, id, query, chart, isUnsaved }) {
-    const tab = state.tabs[index]
-    const oldId = tab.id
-
-    if (id && state.currentTabId === oldId) {
-      state.currentTabId = id
-    }
-
-    if (id) { tab.id = id }
-    if (name) { tab.name = name }
-    if (query) { tab.query = query }
-    if (chart) { tab.chart = chart }
-    if (isUnsaved !== undefined) { tab.isUnsaved = isUnsaved }
-    if (!isUnsaved) {
-      // Saved query is not predefined
-      delete tab.isPredefined
-    }
-
-    Vue.set(state.tabs, index, tab)
-  },
-  deleteTab (state, index) {
-    // If closing tab is the current opened
-    if (state.tabs[index].id === state.currentTabId) {
-      if (index < state.tabs.length - 1) {
-        state.currentTabId = state.tabs[index + 1].id
-      } else if (index > 0) {
-        state.currentTabId = state.tabs[index - 1].id
-      } else {
-        state.currentTabId = null
-        state.currentTab = null
-        state.untitledLastIndex = 0
-      }
-    }
-    state.tabs.splice(index, 1)
-  },
-  setCurrentTabId (state, id) {
-    state.currentTabId = id
-  },
-  setCurrentTab (state, tab) {
-    state.currentTab = tab
-  },
-  updatePredefinedQueries (state, queries) {
-    if (Array.isArray(queries)) {
-      state.predefinedQueries = queries
-    } else {
-      state.predefinedQueries = [queries]
-    }
-  }
-}
-
-export const actions = {
-  async addTab ({ state }, data) {
-    const tab = data ? JSON.parse(JSON.stringify(data)) : {}
-    // If no data then create a new blank one...
-    // No data.id means to create new tab, but not blank,
-    // e.g. with 'select * from csv_import' query after csv import
-    if (!data || !data.id) {
-      tab.id = nanoid()
-      tab.name = null
-      tab.tempName = state.untitledLastIndex
-        ? `Untitled ${state.untitledLastIndex}`
-        : 'Untitled'
-      tab.isUnsaved = true
-    } else {
-      tab.isUnsaved = false
-    }
-
-    // add new tab only if was not already opened
-    if (!state.tabs.some(openedTab => openedTab.id === tab.id)) {
-      state.tabs.push(tab)
-      if (!tab.name) {
-        state.untitledLastIndex += 1
-      }
-    }
-
-    return tab.id
-  }
-}
-
 export default new Vuex.Store({
   state,
   mutations,

src/store/mutations.js

@@ -0,0 +1,63 @@
+import Vue from 'vue'
+
+export default {
+  setDb (state, db) {
+    if (state.db) {
+      state.db.shutDown()
+    }
+    state.db = db
+  },
+  saveSchema (state, { dbName, schema }) {
+    state.dbName = dbName
+    state.schema = schema
+  },
+
+  updateTab (state, { index, name, id, query, chart, isUnsaved }) {
+    const tab = state.tabs[index]
+    const oldId = tab.id
+
+    if (id && state.currentTabId === oldId) {
+      state.currentTabId = id
+    }
+
+    if (id) { tab.id = id }
+    if (name) { tab.name = name }
+    if (query) { tab.query = query }
+    if (chart) { tab.chart = chart }
+    if (isUnsaved !== undefined) { tab.isUnsaved = isUnsaved }
+    if (!isUnsaved) {
+      // Saved query is not predefined
+      delete tab.isPredefined
+    }
+
+    Vue.set(state.tabs, index, tab)
+  },
+  deleteTab (state, index) {
+    // If closing tab is the current opened
+    if (state.tabs[index].id === state.currentTabId) {
+      if (index < state.tabs.length - 1) {
+        state.currentTabId = state.tabs[index + 1].id
+      } else if (index > 0) {
+        state.currentTabId = state.tabs[index - 1].id
+      } else {
+        state.currentTabId = null
+        state.currentTab = null
+        state.untitledLastIndex = 0
+      }
+    }
+    state.tabs.splice(index, 1)
+  },
+  setCurrentTabId (state, id) {
+    state.currentTabId = id
+  },
+  setCurrentTab (state, tab) {
+    state.currentTab = tab
+  },
+  updatePredefinedQueries (state, queries) {
+    if (Array.isArray(queries)) {
+      state.predefinedQueries = queries
+    } else {
+      state.predefinedQueries = [queries]
+    }
+  }
+}

src/store/state.js

@@ -0,0 +1,11 @@
+export default {
+  schema: null,
+  dbFile: null,
+  dbName: null,
+  tabs: [],
+  currentTab: null,
+  currentTabId: null,
+  untitledLastIndex: 0,
+  predefinedQueries: [],
+  db: null
+}

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

@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import TableDescription from '@/components/TableDescription'
+import TableDescription from './TableDescription'
 import TextField from '@/components/TextField'
 import TreeChevron from '@/components/svg/treeChevron'
 import DbUploader from '@/components/DbUploader'

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

@@ -28,7 +28,7 @@ import plotly from 'plotly.js/dist/plotly'
 import 'react-chart-editor/lib/react-chart-editor.min.css'
 
 import PlotlyEditor from 'react-chart-editor'
-import chart from '@/chart'
+import chartHelper from './chartHelper'
 import dereference from 'react-chart-editor/lib/lib/dereference'
 
 export default {
@@ -49,10 +49,10 @@ export default {
   },
   computed: {
     dataSources () {
-      return chart.getDataSourcesFromSqlResult(this.sqlResult)
+      return chartHelper.getDataSourcesFromSqlResult(this.sqlResult)
     },
     dataSourceOptions () {
-      return chart.getOptionsFromDataSources(this.dataSources)
+      return chartHelper.getOptionsFromDataSources(this.dataSources)
     }
   },
   watch: {
@@ -71,7 +71,7 @@ export default {
       this.$emit('update')
     },
     getChartStateForSave () {
-      return chart.getChartStateForSave(this.state, this.dataSources)
+      return chartHelper.getChartStateForSave(this.state, this.dataSources)
     }
   }
 }

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

@@ -2,7 +2,6 @@ import CM from 'codemirror'
 import 'codemirror/addon/hint/show-hint.js'
 import 'codemirror/addon/hint/sql-hint.js'
 import store from '@/store'
-import { debounce } from 'debounce'
 
 export function getHints (cm, options) {
   const token = cm.getTokenAt(cm.getCursor()).string.toUpperCase()
@@ -27,23 +26,20 @@ const hintOptions = {
   },
   get defaultTable () {
     const schema = store.state.schema
-    return schema.length === 1 ? schema[0].name : null
+    return schema && schema.length === 1 ? schema[0].name : null
   },
   completeSingle: false,
   completeOnSingleClick: true,
   alignWithWord: false
 }
 
-export default {
-  show: debounce(function (editor) {
-    // Don't show autocomplete after a space or semicolon or in string literals
-    const token = editor.getTokenAt(editor.getCursor())
-    const ch = token.string.slice(-1)
-    const tokenType = token.type
-    if (tokenType === 'string' || !ch || ch === ' ' || ch === ';') {
-      return
-    }
-
-    CM.showHint(editor, getHints, hintOptions)
-  }, 400)
+export default function showHint (editor) {
+  // Don't show autocomplete after a space or semicolon or in string literals
+  const token = editor.getTokenAt(editor.getCursor())
+  const ch = token.string.slice(-1)
+  const tokenType = token.type
+  if (tokenType === 'string' || !ch || ch === ' ' || ch === ';') {
+    return
+  }
+  CM.showHint(editor, getHints, hintOptions)
 }

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

@@ -5,7 +5,8 @@
 </template>
 
 <script>
-import hint from '@/hint'
+import showHint from './hint'
+import { debounce } from 'debounce'
 import { codemirror } from 'vue-codemirror'
 import 'codemirror/lib/codemirror.css'
 import 'codemirror/mode/sql/sql.js'
@@ -38,7 +39,7 @@ export default {
     }
   },
   methods: {
-    onChange: hint.show
+    onChange: debounce(showHint, 400)
   }
 }
 </script>

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

@@ -50,10 +50,10 @@
 
 <script>
 import SqlTable from '@/components/SqlTable'
-import SqlEditor from '@/components/SqlEditor'
 import Splitpanes from '@/components/Splitpanes'
-import ViewSwitcher from '@/components/ViewSwitcher'
-import Chart from '@/components/Chart'
+import SqlEditor from './SqlEditor'
+import ViewSwitcher from './ViewSwitcher'
+import Chart from './Chart'
 
 export default {
   name: 'Tab',

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

@@ -62,7 +62,7 @@
 </template>
 
 <script>
-import Tab from '@/components/Tab'
+import Tab from './Tab'
 import CloseIcon from '@/components/svg/close'
 
 export default {

src/views/Main/Editor/index.vue

@@ -23,8 +23,8 @@
 
 <script>
 import Splitpanes from '@/components/Splitpanes'
-import Schema from '@/components/Schema'
-import Tabs from '@/components/Tabs'
+import Schema from './Schema'
+import Tabs from './Tabs'
 import DbUploader from '@/components/DbUploader'
 
 export default {

src/views/Main/MainMenu.vue

@@ -62,7 +62,7 @@
 <script>
 import TextField from '@/components/TextField'
 import CloseIcon from '@/components/svg/close'
-import storedQueries from '@/storedQueries'
+import storedQueries from '@/lib/storedQueries'
 
 export default {
   name: 'MainMenu',

src/views/Main/MyQueries/index.vue

@@ -141,16 +141,16 @@
 </template>
 
 <script>
-import RenameIcon from '@/components/svg/rename'
-import CopyIcon from '@/components/svg/copy'
+import RenameIcon from './svg/rename'
+import CopyIcon from './svg/copy'
 import ExportIcon from '@/components/svg/export'
-import DeleteIcon from '@/components/svg/delete'
+import DeleteIcon from './svg/delete'
 import CloseIcon from '@/components/svg/close'
 import TextField from '@/components/TextField'
 import CheckBox from '@/components/CheckBox'
-import tooltipMixin from '@/mixins/tooltips'
-import storedQueries from '@/storedQueries'
-import fu from '@/file.utils'
+import tooltipMixin from '@/tooltipMixin'
+import storedQueries from '@/lib/storedQueries'
+import fu from '@/lib/utils/fileIo'
 
 export default {
   name: 'MyQueries',

src/views/Main/MyQueries/svg/copy.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import tooltipMixin from '@/mixins/tooltips'
+import tooltipMixin from '@/tooltipMixin'
 
 export default {
   name: 'CopyIcon',

src/views/Main/MyQueries/svg/delete.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import tooltipMixin from '@/mixins/tooltips'
+import tooltipMixin from '@/tooltipMixin'
 
 export default {
   name: 'DeleteIcon',

src/views/Main/MyQueries/svg/rename.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import tooltipMixin from '@/mixins/tooltips'
+import tooltipMixin from '@/tooltipMixin'
 
 export default {
   name: 'RenameIcon',

src/views/Main/index.vue

@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import MainMenu from '@/components/MainMenu'
+import MainMenu from './MainMenu'
 import '@/assets/styles/scrollbars.css'
 
 export default {
-  name: 'MainView',
+  name: 'Main',
   components: { MainMenu }
 }
 </script>

src/views/Welcome.vue

@@ -14,7 +14,7 @@
 import DbUploader from '@/components/DbUploader'
 
 export default {
-  name: 'Home',
+  name: 'Welcome',
   components: { DbUploader }
 }
 </script>