From 1037185a6a5802a023f097d9c379c2ead9f37167 Mon Sep 17 00:00:00 2001
From: lana-k <skochetova89@gmail.com>
Date: Wed, 4 Nov 2020 19:13:27 +0100
Subject: [PATCH] add predefined queries

---
 public/queries.json                        |  47 +++++++
 src/assets/images/info.svg                 |   3 +
 src/components/CheckBox.vue                |   5 -
 src/components/MainMenu.vue                | 130 ++++++++++++++++---
 src/components/SqlTable.vue                |  23 ++--
 src/components/{TabContent.vue => Tab.vue} |  15 ++-
 src/components/Tabs.vue                    |  10 +-
 src/components/svg/delete.vue              |   2 +-
 src/components/svg/rename.vue              |   2 +-
 src/store/index.js                         |  35 +++--
 src/views/MainView.vue                     |  30 ++++-
 src/views/MyQueries.vue                    | 144 ++++++++++++++++-----
 12 files changed, 359 insertions(+), 87 deletions(-)
 create mode 100644 public/queries.json
 create mode 100644 src/assets/images/info.svg
 rename src/components/{TabContent.vue => Tab.vue} (93%)

diff --git a/public/queries.json b/public/queries.json
new file mode 100644
index 0000000..8d47aab
--- /dev/null
+++ b/public/queries.json
@@ -0,0 +1,47 @@
+{
+    "query": "select * from invoices",
+    "chart": {
+        "data": [
+            {
+                "type": "scatter",
+                "mode": "lines",
+                "x": null,
+                "xsrc": "InvoiceId",
+                "meta": {
+                    "columnNames": {
+                        "x": "InvoiceId",
+                        "y": "Total"
+                    }
+                },
+                "y": null,
+                "ysrc": "Total"
+            }
+        ],
+        "layout": {
+            "xaxis": {
+                "range": [
+                    1,
+                    412
+                ],
+                "autorange": true,
+                "type": "linear"
+            },
+            "yaxis": {
+                "range": [
+                    -0.39166666666666683,
+                    27.241666666666667
+                ],
+                "autorange": true,
+                "type": "linear"
+            },
+            "autosize": true,
+            "mapbox": {
+                "style": "open-street-map"
+            }
+        },
+        "frames": []
+    },
+    "name": "Invoices",
+    "id": "ieZfcITwDUTADwOmQlYyL",
+    "createdAt": "2020-11-03T14:17:49.524Z"
+}
\ No newline at end of file
diff --git a/src/assets/images/info.svg b/src/assets/images/info.svg
new file mode 100644
index 0000000..201f843
--- /dev/null
+++ b/src/assets/images/info.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 9H13V7H11V9ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2V2ZM11 17H13V11H11V17Z" fill="#A2B1C6"/>
+</svg>
diff --git a/src/components/CheckBox.vue b/src/components/CheckBox.vue
index 9df17b9..8252d43 100644
--- a/src/components/CheckBox.vue
+++ b/src/components/CheckBox.vue
@@ -35,11 +35,6 @@ export default {
       checked: this.init
     }
   },
-  watch: {
-    checked () {
-      this.$emit('change', this.checked)
-    }
-  },
   methods: {
     onClick () {
       this.checked = !this.checked
diff --git a/src/components/MainMenu.vue b/src/components/MainMenu.vue
index 98d12d4..b8c69c7 100644
--- a/src/components/MainMenu.vue
+++ b/src/components/MainMenu.vue
@@ -8,21 +8,70 @@
       <button
         v-if="$store.state.tabs.length > 0"
         class="primary"
-        :disabled="$store.state.currentTab && !$store.state.currentTab.isUnsaved"
-        @click="saveQuery"
+        :disabled="currentQuery && !currentQuery.isUnsaved"
+        @click="checkQueryBeforeSave"
       >
         Save
       </button>
       <button class="primary" @click="createNewQuery">Create</button>
     </div>
+
+    <!--Save Query dialog  -->
+    <modal name="save" classes="dialog" height="auto">
+      <div class="dialog-header">
+        Save query
+        <close-icon @click="$modal.hide('save')"/>
+      </div>
+      <div class="dialog-body">
+        <div v-show="isPredefined" id="save-note">
+          <img :src="require('@/assets/images/info.svg')">
+          Note: Predefined queries can't be edited.
+          That's why your modifications will be saved as a new query. Enter the name for it.
+        </div>
+        <text-field
+          label="Query name"
+          :error-msg="errorMsg"
+          v-model="name"
+          width="100%"
+        />
+      </div>
+      <div class="dialog-buttons-container">
+        <button class="secondary" @click="$modal.hide('save')">Cancel</button>
+        <button class="primary" @click="saveQuery">Save</button>
+      </div>
+    </modal>
   </nav>
 </template>
 
 <script>
 import { nanoid } from 'nanoid'
+import TextField from '@/components/TextField'
+import CloseIcon from '@/components/svg/close'
 
 export default {
   name: 'MainMenu',
+  components: {
+    TextField,
+    CloseIcon
+  },
+  data () {
+    return {
+      name: '',
+      errorMsg: null
+    }
+  },
+  computed: {
+    currentQuery () {
+      return this.$store.state.currentTab
+    },
+    isPredefined () {
+      if (this.currentQuery) {
+        return this.currentQuery.isPredefined
+      } else {
+        return false
+      }
+    }
+  },
   created () {
     this.$root.$on('createNewQuery', this.createNewQuery)
   },
@@ -38,38 +87,69 @@ export default {
       }
       this.$store.commit('addTab', tab)
       this.$store.commit('setCurrentTabId', tab.id)
-      this.$store.commit('updateUntitledLastIndex')
+    },
+    checkQueryBeforeSave () {
+      this.errorMsg = null
+      const isFromScratch = !this.currentQuery.initName
+
+      if (isFromScratch || this.isPredefined) {
+        this.$modal.show('save')
+      } else {
+        this.saveQuery()
+      }
     },
     saveQuery () {
-      const currentQuery = this.$store.state.currentTab
-      const isFromScratch = !this.$store.state.currentTab.initName
+      const isFromScratch = !this.currentQuery.initName
+      if ((isFromScratch || this.isPredefined) && !this.name) {
+        this.errorMsg = 'Query name can\'t be empty'
+        return
+      }
+      const dataSet = this.currentQuery.result
+      const tabView = this.currentQuery.view
+      // Prepare query
       const value = {
-        id: currentQuery.id,
-        query: currentQuery.query,
-        chart: currentQuery.getChartSatateForSave()
-      }
-
-      if (isFromScratch) {
-        value.name = prompt('query name')
-        // TODO: create dialog
-        this.$store.commit('updateTabName', { index: currentQuery.tabIndex, newName: value.name })
-        value.createdAt = new Date()
-      } else {
-        value.name = currentQuery.initName
+        id: this.isPredefined ? nanoid() : this.currentQuery.id,
+        query: this.currentQuery.query,
+        chart: this.currentQuery.getChartSatateForSave(),
+        name: (!this.isPredefined && this.currentQuery.initName) || this.name,
+        createdAt: new Date()
       }
 
+      // Save query
       let myQueries = JSON.parse(localStorage.getItem('myQueries'))
       if (!myQueries) {
         myQueries = [value]
-      } else if (isFromScratch) {
+      } else if (isFromScratch || this.isPredefined) {
         myQueries.push(value)
       } else {
-        const queryIndex = myQueries.findIndex(query => query.id === currentQuery.id)
+        const queryIndex = myQueries.findIndex(query => query.id === this.currentQuery.id)
         value.createdAt = myQueries[queryIndex].createdAt
         myQueries[queryIndex] = value
       }
       localStorage.setItem('myQueries', JSON.stringify(myQueries))
-      currentQuery.isUnsaved = false
+
+      // Update tab
+      this.$store.commit('updateTab', {
+        index: this.currentQuery.tabIndex,
+        name: value.name,
+        id: value.id,
+        query: value.query,
+        chart: value.chart,
+        isUnsaved: false
+      })
+
+      // Restore data:
+      // e.g. if we save predefined query the tab will be created again
+      // (because of new id) and
+      // it will be without sql result and has default view - table.
+      // That's why we need to restore data and view
+      this.$nextTick(() => {
+        this.currentQuery.result = dataSet
+        this.currentQuery.view = tabView
+      })
+
+      // Hide dialog
+      this.$modal.hide('save')
     }
   }
 }
@@ -89,6 +169,7 @@ nav {
   left: 0;
   width: 100vw;
   padding: 0 52px;
+  z-index: 999;
 }
 a {
   font-size: 18px;
@@ -103,4 +184,13 @@ a.router-link-active {
 button {
   margin-left: 16px;
 }
+
+#save-note {
+  margin-bottom: 24px;
+  display: flex;
+  align-items: flex-start;
+}
+#save-note img {
+  margin: -3px 6px 0 0;
+}
 </style>
diff --git a/src/components/SqlTable.vue b/src/components/SqlTable.vue
index 44c88b5..e9cf91e 100644
--- a/src/components/SqlTable.vue
+++ b/src/components/SqlTable.vue
@@ -22,7 +22,7 @@
       <table ref="table">
         <thead>
           <tr>
-            <th v-for="(th,index) in data.columns" :key="index" ref="th">
+            <th v-for="(th,index) in dataSet.columns" :key="index" ref="th">
               <div class="cell-data" :style="cellStyle">{{ th }}</div>
             </th>
           </tr>
@@ -39,7 +39,7 @@
     </div>
     <div class="table-footer">
       <div class="table-footer-count">
-        {{ data.values.length}} {{data.values.length === 1 ? 'row' : 'rows'}} retrieved
+        {{ dataSet.values.length}} {{dataSet.values.length === 1 ? 'row' : 'rows'}} retrieved
       </div>
       <pager v-show="pageCount > 1" :page-count="pageCount" v-model="currentPage" />
     </div>
@@ -52,17 +52,18 @@ import Pager from '@/components/Pager'
 export default {
   name: 'SqlTable',
   components: { Pager },
-  props: ['data', 'height'],
+  props: ['dataSet', 'height'],
   data () {
     return {
       header: null,
       tableWidth: null,
-      currentPage: 1
+      currentPage: 1,
+      resizeObserver: null
     }
   },
   computed: {
     cellStyle () {
-      const eq = this.tableWidth / this.data.columns.length
+      const eq = this.tableWidth / this.dataSet.columns.length
 
       return { maxWidth: `${Math.max(eq, 100)}px` }
     },
@@ -70,11 +71,11 @@ export default {
       return Math.max(Math.floor(this.height / 40), 20)
     },
     pageCount () {
-      return Math.ceil(this.data.values.length / this.pageSize)
+      return Math.ceil(this.dataSet.values.length / this.pageSize)
     },
     currentPageData () {
       const start = (this.currentPage - 1) * this.pageSize
-      return this.data.values.slice(start, start + this.pageSize)
+      return this.dataSet.values.slice(start, start + this.pageSize)
     }
   },
   methods: {
@@ -94,12 +95,16 @@ export default {
     }
   },
   mounted () {
-    new ResizeObserver(this.calculateHeadersWidth).observe(this.$refs.table)
+    this.resizeObserver = new ResizeObserver(this.calculateHeadersWidth)
+    this.resizeObserver.observe(this.$refs.table)
     this.calculateHeadersWidth()
   },
+  beforeDestroy () {
+    this.resizeObserver.unobserve(this.$refs.table)
+  },
   watch: {
     currentPageData: 'calculateHeadersWidth',
-    data () {
+    dataSet () {
       this.currentPage = 1
     }
   }
diff --git a/src/components/TabContent.vue b/src/components/Tab.vue
similarity index 93%
rename from src/components/TabContent.vue
rename to src/components/Tab.vue
index 5219fac..45e0e8b 100644
--- a/src/components/TabContent.vue
+++ b/src/components/Tab.vue
@@ -36,7 +36,7 @@
             <div v-show="error" class="table-preview error">
               {{ error }}
             </div>
-            <sql-table v-if="result" :data="result" :height="tableViewHeight" />
+            <sql-table v-if="result" :data-set="result" :height="tableViewHeight" />
           </div>
           <chart
             :visible="view === 'chart'"
@@ -59,8 +59,8 @@ import ViewSwitcher from '@/components/ViewSwitcher'
 import Chart from '@/components/Chart'
 
 export default {
-  name: 'TabContent',
-  props: ['id', 'initName', 'initQuery', 'initChart', 'tabIndex'],
+  name: 'Tab',
+  props: ['id', 'initName', 'initQuery', 'initChart', 'tabIndex', 'isPredefined'],
   components: {
     SqlEditor,
     SqlTable,
@@ -76,7 +76,8 @@ export default {
       tableViewHeight: 0,
       isUnsaved: !this.initName,
       isGettingResults: false,
-      error: null
+      error: null,
+      resizeObserver: null
     }
   },
   computed: {
@@ -88,9 +89,13 @@ export default {
     this.$store.commit('setCurrentTab', this)
   },
   mounted () {
-    new ResizeObserver(this.handleResize).observe(this.$refs.bottomPane)
+    this.resizeObserver = new ResizeObserver(this.handleResize)
+    this.resizeObserver.observe(this.$refs.bottomPane)
     this.calculateTableHeight()
   },
+  beforeDestroy () {
+    this.resizeObserver.unobserve(this.$refs.bottomPane)
+  },
   watch: {
     isActive () {
       if (this.isActive) {
diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
index 513ec31..c8474ac 100644
--- a/src/components/Tabs.vue
+++ b/src/components/Tabs.vue
@@ -3,7 +3,7 @@
     <div id="tabs__header" v-if="tabs.length > 0">
       <div
         v-for="(tab, index) in tabs"
-        :key="tab.id"
+        :key="index"
         @click="selectTab(tab.id)"
         :class="[{'tab__selected': (tab.id === selectedIndex)}, 'tab']"
       >
@@ -29,13 +29,14 @@
         </div>
       </div>
     </div>
-    <tab-content
+    <tab
       v-for="(tab, index) in tabs"
       :key="tab.id"
       :id="tab.id"
       :init-name="tab.name"
       :init-query="tab.query"
       :init-chart="tab.chart"
+      :is-predefined="tab.isPredefined"
       :tab-index="index"
     />
     <div v-if="tabs.length === 0" id="start-guide">
@@ -47,11 +48,11 @@
 </template>
 
 <script>
-import TabContent from '@/components/TabContent'
+import Tab from '@/components/Tab'
 
 export default {
   components: {
-    TabContent
+    Tab
   },
   data () {
     return {
@@ -153,5 +154,6 @@ export default {
   color: var(--color-accent);
   text-decoration: none;
   cursor: pointer;
+  white-space: nowrap;
 }
 </style>
diff --git a/src/components/svg/delete.vue b/src/components/svg/delete.vue
index 885c6ca..d5686e1 100644
--- a/src/components/svg/delete.vue
+++ b/src/components/svg/delete.vue
@@ -13,7 +13,7 @@ export default {
 <style scoped>
 .icon {
   vertical-align: middle;
-  margin: 0 0 0 12px;
+  margin: 0 12px;
 }
 
 .icon:hover path {
diff --git a/src/components/svg/rename.vue b/src/components/svg/rename.vue
index 742a6ce..2b643e7 100644
--- a/src/components/svg/rename.vue
+++ b/src/components/svg/rename.vue
@@ -13,7 +13,7 @@ export default {
 <style scoped>
 .icon {
   vertical-align: middle;
-  margin: 0 12px 0 6px;
+  margin: 0 12px;
 }
 
 .icon:hover path {
diff --git a/src/store/index.js b/src/store/index.js
index 861071e..f20ddf5 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -11,7 +11,8 @@ export default new Vuex.Store({
     tabs: [],
     currentTab: null,
     currentTabId: null,
-    untitledLastIndex: 0
+    untitledLastIndex: 0,
+    predefinedQueries: []
   },
   mutations: {
     saveSchema (state, schema) {
@@ -25,14 +26,29 @@ export default new Vuex.Store({
     },
     addTab (state, tab) {
       state.tabs.push(tab)
+
+      if (!tab.name) {
+        state.untitledLastIndex += 1
+      }
     },
-    updateTabName (state, { index, newName }) {
+    updateTab (state, { index, name, id, query, chart, isUnsaved }) {
       const tab = state.tabs[index]
-      tab.name = newName
+      const oldId = tab.id
+
+      if (state.currentTabId === oldId) {
+        state.currentTabId = 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 }
+      delete tab.isPredefined
+
       Vue.set(state.tabs, index, tab)
     },
     updateTabState (state, { index, newValue }) {
-      console.log(index, newValue)
       const tab = state.tabs[index]
       tab.isUnsaved = newValue
       Vue.set(state.tabs, index, tab)
@@ -45,6 +61,7 @@ export default new Vuex.Store({
         state.currentTabId = state.tabs[index - 1].id
       } else {
         state.currentTabId = null
+        state.currentTab = null
         state.untitledLastIndex = 0
       }
       state.tabs.splice(index, 1)
@@ -55,12 +72,14 @@ export default new Vuex.Store({
     setCurrentTab (state, tab) {
       state.currentTab = tab
     },
-    updateUntitledLastIndex (state) {
-      state.untitledLastIndex += 1
+    updatePredefinedQueries (state, queries) {
+      if (Array.isArray(queries)) {
+        state.predefinedQueries = queries
+      } else {
+        state.predefinedQueries = [queries]
+      }
     }
   },
   actions: {
-  },
-  modules: {
   }
 })
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index 6508856..508a5cc 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -13,7 +13,35 @@ import '@/assets/styles/scrollbars.css'
 
 export default {
   name: 'MainView',
-  components: { MainMenu }
+  components: { MainMenu },
+  created () {
+    this.readPredefinedQueries()
+      .then(queries => {
+        this.$store.commit('updatePredefinedQueries', queries)
+      })
+      .catch(console.error)
+  },
+  methods: {
+    readPredefinedQueries () {
+      return new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest()
+        xhr.open('GET', './queries.json')
+        xhr.onload = () => {
+          if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+              resolve(JSON.parse(xhr.responseText))
+            } else {
+              reject(xhr.statusText)
+            }
+          }
+        }
+        xhr.onerror = () => {
+          reject(xhr.statusText)
+        }
+        xhr.send()
+      })
+    }
+  }
 }
 </script>
 <style scoped>
diff --git a/src/views/MyQueries.vue b/src/views/MyQueries.vue
index 20f3c74..0c1c40f 100644
--- a/src/views/MyQueries.vue
+++ b/src/views/MyQueries.vue
@@ -24,7 +24,7 @@
           </button>
           <button
             class="toolbar"
-            v-show="selectedQueriesCount > 0"
+            v-show="selectedNotPredefinedCount > 0"
             @click="showDeleteDialog(selectedQueriesIds)"
           >
             Delete
@@ -52,25 +52,31 @@
       >
         <table ref="table">
           <tbody>
-            <tr v-for="(query, index) in showedQueries" :key="query.id" @click="openQuery(index)">
+            <tr
+              v-for="(query, index) in showedQueries"
+              :key="query.id"
+              :class="{ 'predefined': query.isPredefined }"
+              @click="openQuery(index)"
+            >
               <td ref="name-td">
                  <div class="cell-data">
                     <check-box
                       ref="rowCheckBox"
                       :init="selectAll || selectedQueriesIds.has(query.id)"
-                      @change="toggleRow($event, query.id)"
+                      @click="toggleRow($event, query.id)"
                     />
                     <div class="name">{{ query.name }}</div>
+                    <div class="badge">Predefined</div>
                  </div>
               </td>
               <td>
                 <div class="second-column">
                   <div class="date-container">{{ query.createdAt | date }}</div>
                   <div class="icons-container">
-                    <rename-icon @click="showRenameDialog(query.id)" />
+                    <rename-icon v-if="!query.isPredefined" @click="showRenameDialog(query.id)" />
                     <copy-icon @click="duplicateQuery(index)"/>
                     <export-icon @click="exportQuery(index)"/>
-                    <delete-icon @click="showDeleteDialog(query.id)"/>
+                    <delete-icon v-if="!query.isPredefined" @click="showDeleteDialog(query.id)"/>
                   </div>
                 </div>
               </td>
@@ -119,9 +125,13 @@
     >
       Are you sure you want to delete
       {{ deleteGroup
-        ? `${selectedQueriesCount} ${selectedQueriesCount > 1 ? 'queries' : 'query'}`
+        ? `${selectedNotPredefinedCount} ${selectedNotPredefinedCount > 1 ? 'queries' : 'query'}`
         : `"${queries[currentQueryIndex].name}"`
       }}?
+      <div v-show="selectedQueriesCount > selectedNotPredefinedCount" id="note">
+        <img :src="require('@/assets/images/info.svg')">
+        Note: Predefined queries you've selected won't be deleted
+      </div>
     </div>
     <div class="dialog-buttons-container">
       <button class="secondary" @click="$modal.hide('delete')">Cancel</button>
@@ -162,29 +172,49 @@ export default {
       errorMsg: null,
       selectedQueriesIds: new Set(),
       selectedQueriesCount: 0,
+      selectedNotPredefinedCount: 0,
       selectAll: false,
-      deleteGroup: false
+      deleteGroup: false,
+      resizeObserver: null
     }
   },
   computed: {
+    predefinedQueries () {
+      return this.$store.state.predefinedQueries.map(query => {
+        query.isPredefined = true
+        return query
+      })
+    },
+    predefinedQueriesIds () {
+      return new Set(this.predefinedQueries.map(query => query.id))
+    },
     showedQueries () {
-      if (!this.filter) {
-        return this.queries
-      } else {
-        return this.queries.filter(query => query.name.toUpperCase().indexOf(this.filter.toUpperCase()) >= 0)
+      let showedQueries = this.allQueries
+      if (this.filter) {
+        showedQueries = showedQueries.filter(
+          query => query.name.toUpperCase().indexOf(this.filter.toUpperCase()) >= 0
+        )
       }
+      return showedQueries
+    },
+    allQueries () {
+      return this.predefinedQueries.concat(this.queries)
     },
     currentQueryIndex () {
       return this.queries.findIndex(query => query.id === this.currentQueryId)
     }
   },
   created () {
-    this.queries = JSON.parse(localStorage.getItem('myQueries'))
+    this.queries = JSON.parse(localStorage.getItem('myQueries')) || []
   },
   mounted () {
-    new ResizeObserver(this.calcNameWidth).observe(this.$refs.table)
+    this.resizeObserver = new ResizeObserver(this.calcNameWidth)
+    this.resizeObserver.observe(this.$refs.table)
     this.calcNameWidth()
   },
+  beforeDestroy () {
+    this.resizeObserver.unobserve(this.$refs.table)
+  },
   filters: {
     date (value) {
       if (!value) {
@@ -205,7 +235,7 @@ export default {
       this.$refs['name-th'].style = `width: ${this.$refs['name-td'][0].offsetWidth}px`
     },
     openQuery (index) {
-      const tab = this.showedQueries[index]
+      const tab = JSON.parse(JSON.stringify(this.showedQueries[index]))
       tab.isUnsaved = false
       this.$store.commit('addTab', tab)
       this.$store.commit('setCurrentTabId', tab.id)
@@ -225,23 +255,33 @@ export default {
       const currentQuery = this.queries[this.currentQueryIndex]
       currentQuery.name = this.newName
       this.$set(this.queries, this.currentQueryIndex, currentQuery)
-      this.$modal.hide('rename')
+
+      // update queries in local storage
       this.saveQueriesInLocalStorage()
+
+      // update tab, if renamed query is opened
       const tabIndex = this.findTabIndex(currentQuery.id)
       if (tabIndex >= 0) {
-        this.$store.commit('updateTabName', { index: tabIndex, newName: this.newName })
+        this.$store.commit('updateTab', {
+          index: tabIndex,
+          name: this.newName,
+          id: currentQuery.id
+        })
       }
+      // hide dialog
+      this.$modal.hide('rename')
     },
     duplicateQuery (index) {
       const newQuery = JSON.parse(JSON.stringify(this.showedQueries[index]))
       newQuery.name = newQuery.name + ' Copy'
       newQuery.id = nanoid()
       newQuery.createdAt = new Date()
-      this.queries.push(newQuery)
+      delete newQuery.isPredefined
       if (this.selectAll) {
         this.selectedQueriesIds.add(newQuery.id)
         this.selectedQueriesCount = this.selectedQueriesIds.size
       }
+      this.queries.push(newQuery)
       this.saveQueriesInLocalStorage()
     },
     showDeleteDialog (id) {
@@ -286,22 +326,18 @@ export default {
 
       // single operation
       if (typeof index === 'number') {
-        console.log('single')
         data = JSON.parse(JSON.stringify(this.showedQueries[index]))
         name = data.name
-        delete data.id
-        delete data.createdAt
+        delete data.isPredefined
       } else {
         // group operation
         data = this.selectAll
-          ? JSON.parse(JSON.stringify(this.queries))
-          : this.queries.filter(query => this.selectedQueriesIds.has(query.id))
+          ? JSON.parse(JSON.stringify(this.allQueries))
+          : this.allQueries.filter(query => this.selectedQueriesIds.has(query.id))
         name = 'My sqliteviz queries'
-        data.forEach(query => {
-          delete query.id
-          delete query.createdAt
-        })
+        data.forEach(query => delete query.isPredefined)
       }
+
       // export data to file
       const downloader = this.$refs.downloader
       const json = JSON.stringify(data, null, 4)
@@ -323,14 +359,19 @@ export default {
         }
 
         importedQueries.forEach(query => {
-          query.id = nanoid()
-          query.createdAt = new Date()
-          if (this.selectAll) {
-            this.selectedQueriesIds.add(query.id)
-            this.selectedQueriesCount = this.selectedQueriesIds.size
+          const allQueriesIds = this.allQueries.map(query => query.id)
+          if (new Set(allQueriesIds).has(query.id)) {
+            query.id = nanoid()
           }
         })
 
+        if (this.selectAll) {
+          importedQueries.forEach(query => {
+            this.selectedQueriesIds.add(query.id)
+          })
+          this.selectedQueriesCount = this.selectedQueriesIds.size
+        }
+
         this.queries = this.queries.concat(importedQueries)
         this.saveQueriesInLocalStorage()
         this.$refs.importFile.value = null
@@ -343,18 +384,30 @@ export default {
     toggleSelectAll (checked) {
       this.selectAll = checked
       this.$refs.rowCheckBox.forEach(item => { item.checked = checked })
-      this.selectedQueriesIds = checked ? new Set(this.queries.map(query => query.id)) : new Set()
+
+      this.selectedQueriesIds = checked
+        ? new Set(this.allQueries.map(query => query.id))
+        : new Set()
+
       this.selectedQueriesCount = this.selectedQueriesIds.size
+      this.selectedNotPredefinedCount = checked ? this.queries.length : 0
     },
     toggleRow (checked, id) {
+      const isPredefined = this.predefinedQueriesIds.has(id)
       if (checked) {
         this.selectedQueriesIds.add(id)
+        if (!isPredefined) {
+          this.selectedNotPredefinedCount += 1
+        }
       } else {
-        if (this.selectedQueriesIds.size === this.queries.length) {
+        if (this.selectedQueriesIds.size === this.allQueries.length) {
           this.$refs.mainCheckBox.checked = false
           this.selectAll = false
         }
         this.selectedQueriesIds.delete(id)
+        if (!isPredefined) {
+          this.selectedNotPredefinedCount -= 1
+        }
       }
       this.selectedQueriesCount = this.selectedQueriesIds.size
     }
@@ -413,6 +466,7 @@ tbody .cell-data {
   display: flex;
   align-items: center;
   max-width: 100%;
+  width: 100%;
 }
 tbody .cell-data div.name {
   overflow: hidden;
@@ -438,6 +492,7 @@ tbody tr:hover td {
 
 .icons-container {
   display: none;
+  margin-right: -12px;
 }
 .date-container {
   flex-shrink: 1;
@@ -457,11 +512,34 @@ a, #import-file {
 button.toolbar {
   margin-right: 16px;
 }
+
 button label {
   display: block;
   line-height: 36px;
 }
+
 button label:hover {
   cursor: pointer;
 }
+
+.badge {
+  display: none;
+  background-color: var(--color-gray-light-4);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-small);
+  padding: 2px 6px;
+  font-size: 11px;
+  line-height: normal;
+  margin-left: 12px;
+}
+
+tbody tr.predefined:hover .badge {
+  display: block;
+}
+#note {
+  margin-top: 24px;
+}
+#note img {
+  vertical-align: middle;
+}
 </style>