Tab refactor

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

@@ -7,40 +7,40 @@
       :after="{ size: 50, max: 100 }"
     >
       <template #left-pane>
-        <div :id="'above-' + tabIndex" class="above" />
+        <div :id="'above-' + tab.id" class="above" />
       </template>
       <template #right-pane>
-        <div :id="'bottom-'+ tabIndex" ref="bottomPane" class="bottomPane" />
+        <div :id="'bottom-'+ tab.id" ref="bottomPane" class="bottomPane" />
       </template>
     </splitpanes>
 
-    <div :id="'hidden-'+ tabIndex" class="hidden-part" />
+    <div :id="'hidden-'+ tab.id" class="hidden-part" />
 
-    <teleport :to="`#${layout.sqlEditor}-${tabIndex}`">
+    <teleport :to="`#${tab.layout.sqlEditor}-${tab.id}`">
       <sql-editor
         ref="sqlEditor"
-        v-model="query"
-        :is-getting-results="isGettingResults"
+        v-model="tab.query"
+        :is-getting-results="tab.isGettingResults"
         @switchTo="onSwitchView('sqlEditor', $event)"
-        @run="execute"
+        @run="tab.execute()"
       />
     </teleport>
 
-    <teleport :to="`#${layout.table}-${tabIndex}`">
+    <teleport :to="`#${tab.layout.table}-${tab.id}`">
       <run-result
-        :result="result"
-        :is-getting-results="isGettingResults"
-        :error="error"
-        :time="time"
+        :result="tab.result"
+        :is-getting-results="tab.isGettingResults"
+        :error="tab.error"
+        :time="tab.time"
         @switchTo="onSwitchView('table', $event)"
       />
     </teleport>
 
-    <teleport :to="`#${layout.dataView}-${tabIndex}`">
+    <teleport :to="`#${tab.layout.dataView}-${tab.id}`">
       <data-view
-        :data-source="(result && result.values) || null"
-        :init-options="initViewOptions"
-        :init-mode="initViewType"
+        :data-source="(tab.result && tab.result.values) || null"
+        :init-options="tab.viewOptions"
+        :init-mode="tab.viewType"
         ref="dataView"
         @switchTo="onSwitchView('dataView', $event)"
         @update="onDataViewUpdate"
@@ -54,15 +54,15 @@ import Splitpanes from '@/components/Splitpanes'
 import SqlEditor from './SqlEditor'
 import DataView from './DataView'
 import RunResult from './RunResult'
-import time from '@/lib/utils/time'
+
 import Teleport from 'vue2-teleport'
 import events from '@/lib/utils/events'
 
 export default {
   name: 'Tab',
-  props: [
-    'id', 'initName', 'initQuery', 'initViewOptions', 'tabIndex', 'isPredefined', 'initViewType'
-  ],
+  props: {
+    tab: Object
+  },
   components: {
     SqlEditor,
     DataView,
@@ -70,23 +70,9 @@ export default {
     Splitpanes,
     Teleport
   },
-  data () {
-    return {
-      query: this.initQuery,
-      result: null,
-      isGettingResults: false,
-      error: null,
-      time: 0,
-      layout: {
-        sqlEditor: 'above',
-        table: 'bottom',
-        dataView: 'hidden'
-      }
-    }
-  },
   computed: {
     isActive () {
-      return this.id === this.$store.state.currentTabId
+      return this.tab.id === this.$store.state.currentTabId
     }
   },
   watch: {
@@ -94,54 +80,34 @@ export default {
       immediate: true,
       async handler () {
         if (this.isActive) {
-          this.$store.commit('setCurrentTab', this)
           await this.$nextTick()
           this.$refs.sqlEditor.focus()
         }
       }
     },
-    query () {
-      this.$store.commit('updateTab', { index: this.tabIndex, isSaved: false })
+    'tab.query' () {
+      this.$store.commit('updateTab', {
+        tab: this.tab,
+        newValues: { isSaved: false }
+      })
     }
   },
+  mounted () {
+    this.tab.dataView = this.$refs.dataView
+  },
   methods: {
     onSwitchView (from, to) {
-      const fromPosition = this.layout[from]
-      this.layout[from] = this.layout[to]
-      this.layout[to] = fromPosition
+      const fromPosition = this.tab.layout[from]
+      this.tab.layout[from] = this.tab.layout[to]
+      this.tab.layout[to] = fromPosition
 
       events.send('inquiry.panel', null, { panel: to })
     },
     onDataViewUpdate () {
-      this.$store.commit('updateTab', { index: this.tabIndex, isSaved: false })
-    },
-    async execute () {
-      this.isGettingResults = true
-      this.result = null
-      this.error = null
-      const state = this.$store.state
-      try {
-        const start = new Date()
-        this.result = await state.db.execute(this.query + ';')
-        this.time = time.getPeriod(start, new Date())
-
-        if (this.result && this.result.values) {
-          events.send('resultset.create',
-            this.result.values[this.result.columns[0]].length
-          )
-        }
-
-        events.send('query.run', parseFloat(this.time), { status: 'success' })
-      } catch (err) {
-        this.error = {
-          type: 'error',
-          message: err
-        }
-
-        events.send('query.run', 0, { status: 'error' })
-      }
-      state.db.refreshSchema()
-      this.isGettingResults = false
+      this.$store.commit('updateTab', {
+        tab: this.tab,
+        newValues: { isSaved: false }
+      })
     }
   }
 }

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

@@ -5,7 +5,7 @@
         v-for="(tab, index) in tabs"
         :key="index"
         @click="selectTab(tab.id)"
-        :class="[{'tab-selected': (tab.id === selectedIndex)}, 'tab']"
+        :class="[{'tab-selected': (tab.id === selectedTabId)}, 'tab']"
       >
         <div class="tab-name">
           <span v-show="!tab.isSaved" class="star">*</span>
@@ -13,20 +13,14 @@
           <span v-else class="tab-untitled">{{ tab.tempName }}</span>
         </div>
         <div>
-          <close-icon class="close-icon" :size="10" @click="beforeCloseTab(index)"/>
+          <close-icon class="close-icon" :size="10" @click="beforeCloseTab(tab)"/>
         </div>
       </div>
     </div>
     <tab
-      v-for="(tab, index) in tabs"
+      v-for="tab in tabs"
       :key="tab.id"
-      :id="tab.id"
-      :init-name="tab.name"
-      :init-query="tab.query"
-      :init-view-options="tab.viewOptions"
-      :init-view-type="tab.viewType"
-      :is-predefined="tab.isPredefined"
-      :tab-index="index"
+      :tab="tab"
     />
     <div v-show="tabs.length === 0" id="start-guide">
       <span class="link" @click="$root.$emit('createNewInquiry')">Create</span>
@@ -38,25 +32,25 @@
     <modal name="close-warn" classes="dialog" height="auto">
       <div class="dialog-header">
         Close tab {{
-          closingTabIndex !== null
-          ? (tabs[closingTabIndex].name || `[${tabs[closingTabIndex].tempName}]`)
+          closingTab !== null
+          ? (closingTab.name || `[${closingTab.tempName}]`)
           : ''
         }}
         <close-icon @click="$modal.hide('close-warn')"/>
       </div>
       <div class="dialog-body">
         You have unsaved changes. Save changes in {{
-          closingTabIndex !== null
-          ? (tabs[closingTabIndex].name || `[${tabs[closingTabIndex].tempName}]`)
+          closingTab !== null
+          ? (closingTab.name || `[${closingTab.tempName}]`)
           : ''
         }} before closing?
       </div>
       <div class="dialog-buttons-container">
-        <button class="secondary" @click="closeTab(closingTabIndex)">
+        <button class="secondary" @click="closeTab(closingTab)">
           Close without saving
         </button>
         <button class="secondary" @click="$modal.hide('close-warn')">Cancel</button>
-        <button class="primary" @click="saveAndClose(closingTabIndex)">Save and close</button>
+        <button class="primary" @click="saveAndClose(closingTab)">Save and close</button>
       </div>
     </modal>
   </div>
@@ -73,14 +67,14 @@ export default {
   },
   data () {
     return {
-      closingTabIndex: null
+      closingTab: null
     }
   },
   computed: {
     tabs () {
       return this.$store.state.tabs
     },
-    selectedIndex () {
+    selectedTabId () {
       return this.$store.state.currentTabId
     }
   },
@@ -97,25 +91,24 @@ export default {
     selectTab (id) {
       this.$store.commit('setCurrentTabId', id)
     },
-    beforeCloseTab (index) {
-      this.closingTabIndex = index
-      if (!this.tabs[index].isSaved) {
+    beforeCloseTab (tab) {
+      this.closingTab = tab
+      if (!tab.isSaved) {
         this.$modal.show('close-warn')
       } else {
-        this.closeTab(index)
+        this.closeTab(tab)
       }
     },
-    closeTab (index) {
+    closeTab (tab) {
       this.$modal.hide('close-warn')
-      this.closingTabIndex = null
-      this.$store.commit('deleteTab', index)
+      this.$store.commit('deleteTab', tab)
     },
-    saveAndClose (index) {
+    saveAndClose (tab) {
       this.$root.$on('inquirySaved', () => {
-        this.closeTab(index)
+        this.closeTab(tab)
         this.$root.$off('inquirySaved')
       })
-      this.selectTab(this.tabs[index].id)
+      this.selectTab(tab.id)
       this.$modal.hide('close-warn')
       this.$nextTick(() => {
         this.$root.$emit('saveInquiry')