Merge branch 'master' of github.com:lana-k/sqliteviz into migrate_to_vue3

src/App.vue

@@ -6,10 +6,27 @@
 </template>
 
 <script>
+import storedInquiries from '@/lib/storedInquiries'
 import { ModalsContainer } from 'vue-final-modal'
 
 export default {
-  components: { ModalsContainer }
+  components: { ModalsContainer },
+  created () {
+    this.$store.commit('setInquiries', storedInquiries.getStoredInquiries())
+  },
+  computed: {
+    inquiries () {
+      return this.$store.state.inquiries
+    }
+  },
+  watch: {
+    inquiries: {
+      deep: true,
+      handler () {
+        storedInquiries.updateStorage(this.inquiries)
+      }
+    }
+  }
 }
 </script>
 

src/lib/storedInquiries/index.js

@@ -36,40 +36,6 @@ export default {
     return inquiryTab.isPredefined || !inquiryTab.name
   },
 
-  save (inquiryTab, newName) {
-    const value = {
-      id: inquiryTab.isPredefined ? nanoid() : inquiryTab.id,
-      query: inquiryTab.query,
-      viewType: inquiryTab.dataView.mode,
-      viewOptions: inquiryTab.dataView.getOptionsForSave(),
-      name: newName || inquiryTab.name
-    }
-
-    // Get inquiries from local storage
-    const myInquiries = this.getStoredInquiries()
-
-    let inquiryIndex
-    // Set createdAt
-    if (newName) {
-      value.createdAt = new Date()
-    } else {
-      inquiryIndex = myInquiries
-        .findIndex(oldInquiry => oldInquiry.id === inquiryTab.id)
-      value.createdAt = myInquiries[inquiryIndex].createdAt
-    }
-
-    // Insert in inquiries list
-    if (newName) {
-      myInquiries.push(value)
-    } else {
-      myInquiries[inquiryIndex] = value
-    }
-
-    // Save to local storage
-    this.updateStorage(myInquiries)
-    return value
-  },
-
   updateStorage (inquiries) {
     localStorage.setItem('myInquiries', JSON.stringify({ version: this.version, inquiries }))
   },

src/store/actions.js

@@ -1,4 +1,5 @@
 import Tab from '@/lib/tab'
+import { nanoid } from 'nanoid'
 
 export default {
   async addTab ({ state }, inquiry = {}) {
@@ -13,5 +14,69 @@ export default {
     }
 
     return inquiry.id
+  },
+  async saveInquiry ({ state }, { inquiryTab, newName }) {
+    const value = {
+      id: inquiryTab.isPredefined ? nanoid() : inquiryTab.id,
+      query: inquiryTab.query,
+      viewType: inquiryTab.dataView.mode,
+      viewOptions: inquiryTab.dataView.getOptionsForSave(),
+      name: newName || inquiryTab.name
+    }
+
+    // Get inquiries from local storage
+    const myInquiries = state.inquiries
+
+    // Set createdAt
+    if (newName) {
+      value.createdAt = new Date()
+    } else {
+      var inquiryIndex = myInquiries.findIndex(oldInquiry => oldInquiry.id === inquiryTab.id)
+      value.createdAt = myInquiries[inquiryIndex].createdAt
+    }
+
+    // Insert in inquiries list
+    if (newName) {
+      myInquiries.push(value)
+    } else {
+      myInquiries.splice(inquiryIndex, 1, value)
+    }
+
+    return value
+  },
+  addInquiry ({ state }, newInquiry) {
+    state.inquiries.push(newInquiry)
+  },
+  deleteInquiries ({ state, commit }, inquiryIdSet) {
+    state.inquiries = state.inquiries.filter(
+      inquiry => !inquiryIdSet.has(inquiry.id)
+    )
+
+    // Close deleted inquiries if it was opened
+    const tabs = state.tabs
+    let i = tabs.length - 1
+    while (i > -1) {
+      if (inquiryIdSet.has(tabs[i].id)) {
+        commit('deleteTab', tabs[i])
+      }
+      i--
+    }
+  },
+  renameInquiry ({ state, commit }, { inquiryId, newName }) {
+    const renamingInquiry = state.inquiries
+      .find(inquiry => inquiry.id === inquiryId)
+
+    renamingInquiry.name = newName
+
+    // update tab, if renamed inquiry is opened
+    const tab = state.tabs.find(tab => tab.id === renamingInquiry.id)
+    if (tab) {
+      commit('updateTab', {
+        tab,
+        newValues: {
+          name: newName
+        }
+      })
+    }
   }
 }

src/store/mutations.js

@@ -61,6 +61,9 @@ export default {
   setPredefinedInquiriesLoaded (state, value) {
     state.predefinedInquiriesLoaded = value
   },
+  setInquiries (state, value) {
+    state.inquiries = value
+  },
   setIsWorkspaceVisible (state, value) {
     state.isWorkspaceVisible = value
   }

src/store/state.js

@@ -3,6 +3,7 @@ export default {
   currentTab: null,
   currentTabId: null,
   untitledLastIndex: 0,
+  inquiries: [],
   predefinedInquiries: [],
   loadingPredefinedInquiries: false,
   predefinedInquiriesLoaded: false,

src/views/Main/Inquiries/index.vue

@@ -187,7 +187,6 @@ export default {
   mixins: [tooltipMixin],
   data () {
     return {
-      inquiries: [],
       filter: null,
       newName: null,
       processedInquiryId: null,
@@ -202,6 +201,9 @@ export default {
     }
   },
   computed: {
+    inquiries () {
+      return this.$store.state.inquiries
+    },
     predefinedInquiries () {
       return this.$store.state.predefinedInquiries.map(inquiry => {
         inquiry.isPredefined = true
@@ -267,7 +269,6 @@ export default {
     }
   },
   async created () {
-    this.inquiries = storedInquiries.getStoredInquiries()
     const loadingPredefinedInquiries = this.$store.state.loadingPredefinedInquiries
     const predefinedInquiriesLoaded = this.$store.state.predefinedInquiriesLoaded
     if (!predefinedInquiriesLoaded && !loadingPredefinedInquiries) {
@@ -342,31 +343,17 @@ export default {
         this.errorMsg = "Inquiry name can't be empty"
         return
       }
-      const processedInquiry = this.inquiries[this.processedInquiryIndex]
-      processedInquiry.name = this.newName
-      this.inquiries[this.processedInquiryIndex] = processedInquiry
+      this.$store.dispatch('renameInquiry', {
+        inquiryId: this.processedInquiryId,
+        newName: this.newName
+      })
 
-      // update inquiries in local storage
-      storedInquiries.updateStorage(this.inquiries)
-
-      // update tab, if renamed inquiry is opened
-      const tab = this.$store.state.tabs
-        .find(tab => tab.id === processedInquiry.id)
-      if (tab) {
-        this.$store.commit('updateTab', {
-          tab,
-          newValues: {
-            name: this.newName
-          }
-        })
-      }
       // hide dialog
       this.$modal.hide('rename')
     },
     duplicateInquiry (index) {
       const newInquiry = storedInquiries.duplicateInquiry(this.showedInquiries[index])
-      this.inquiries.push(newInquiry)
-      storedInquiries.updateStorage(this.inquiries)
+      this.$store.dispatch('addInquiry', newInquiry)
     },
     showDeleteDialog (idsSet) {
       this.deleteGroup = idsSet.size > 1
@@ -378,39 +365,19 @@ export default {
     deleteInquiry () {
       this.$modal.hide('delete')
       if (!this.deleteGroup) {
-        this.inquiries.splice(this.processedInquiryIndex, 1)
-
-        // Close deleted inquiry tab if it was opened
-        const tab = this.$store.state.tabs
-          .find(tab => tab.id === this.processedInquiryId)
-        if (tab) {
-          this.$store.commit('deleteTab', tab)
-        }
+        this.$store.dispatch('deleteInquiries', new Set().add(this.processedInquiryId))
 
         // Clear checkbox
         if (this.selectedInquiriesIds.has(this.processedInquiryId)) {
           this.selectedInquiriesIds.delete(this.processedInquiryId)
         }
       } else {
-        this.inquiries = this.inquiries.filter(
-          inquiry => !this.selectedInquiriesIds.has(inquiry.id)
-        )
-
-        // Close deleted inquiries if it was opened
-        const tabs = this.$store.state.tabs
-        let i = tabs.length - 1
-        while (i > -1) {
-          if (this.selectedInquiriesIds.has(tabs[i].id)) {
-            this.$store.commit('deleteTab', tabs[i])
-          }
-          i--
-        }
+        this.$store.dispatch('deleteInquiries', this.selectedInquiriesIds)
 
         // Clear checkboxes
         this.selectedInquiriesIds.clear()
       }
       this.selectedInquiriesCount = this.selectedInquiriesIds.size
-      storedInquiries.updateStorage(this.inquiries)
     },
     exportToFile (inquiryList, fileName) {
       storedInquiries.export(inquiryList, fileName)
@@ -426,8 +393,7 @@ export default {
     importInquiries () {
       storedInquiries.importInquiries()
         .then(importedInquiries => {
-          this.inquiries = this.inquiries.concat(importedInquiries)
-          storedInquiries.updateStorage(this.inquiries)
+          this.$store.commit('setInquiries', this.inquiries.concat(importedInquiries))
         })
     },
 

src/views/Main/MainMenu.vue

@@ -123,7 +123,7 @@ export default {
         this.saveInquiry()
       }
     },
-    saveInquiry () {
+    async saveInquiry () {
       const isNeedName = storedInquiries.isTabNeedName(this.currentInquiry)
       if (isNeedName && !this.name) {
         this.errorMsg = 'Inquiry name can\'t be empty'
@@ -133,7 +133,10 @@ export default {
       const tabView = this.currentInquiry.view
 
       // Save inquiry
-      const value = storedInquiries.save(this.currentInquiry, this.name)
+      const value = await this.$store.dispatch('saveInquiry', {
+        inquiryTab: this.currentInquiry,
+        newName: this.name
+      })
 
       // Update tab in store
       this.$store.commit('updateTab', {