From 003c02b1fbe5aba7f53f3faa5610b0c2f7706793 Mon Sep 17 00:00:00 2001
From: Fabio Di Stasio <fabio286@gmail.com>
Date: Fri, 16 Jul 2021 18:52:18 +0200
Subject: [PATCH] feat: new view setting tabs

---
 src/renderer/components/Workspace.vue         | 52 ++++++++++++-------
 .../components/WorkspaceExploreBarSchema.vue  |  5 +-
 .../WorkspaceExploreBarTableContext.vue       | 33 ++++++++++--
 src/renderer/components/WorkspacePropsTab.vue |  8 ++-
 .../components/WorkspacePropsTabView.vue      | 52 ++++++++++++-------
 .../store/modules/workspaces.store.js         | 40 +++++++-------
 6 files changed, 120 insertions(+), 70 deletions(-)

diff --git a/src/renderer/components/Workspace.vue b/src/renderer/components/Workspace.vue
index f9af20ce..c87b54e5 100644
--- a/src/renderer/components/Workspace.vue
+++ b/src/renderer/components/Workspace.vue
@@ -64,9 +64,9 @@
                   class="tab-link"
                   @dblclick="openAsDataTab(tab)"
                >
-                  <i class="mdi mdi-18px mr-1" :class="tab.element === 'view' ? 'mdi-table-eye' : 'mdi-table'" />
-                  <span :title="`${$t('word.data').toUpperCase()}: ${tab.table}`">
-                     <span class=" text-italic">{{ tab.table }}</span>
+                  <i class="mdi mdi-18px mr-1" :class="tab.elementType === 'view' ? 'mdi-table-eye' : 'mdi-table'" />
+                  <span :title="`${$t('word.data').toUpperCase()}: ${tab.elementType}`">
+                     <span class=" text-italic">{{ tab.elementName }}</span>
                      <span
                         class="btn btn-clear"
                         :title="$t('word.close')"
@@ -76,9 +76,9 @@
                </a>
 
                <a v-else-if="tab.type === 'data'" class="tab-link">
-                  <i class="mdi mdi-18px mr-1" :class="tab.element === 'view' ? 'mdi-table-eye' : 'mdi-table'" />
-                  <span :title="`${$t('word.data').toUpperCase()}: ${tab.table}`">
-                     {{ tab.table }}
+                  <i class="mdi mdi-18px mr-1" :class="tab.elementType === 'view' ? 'mdi-table-eye' : 'mdi-table'" />
+                  <span :title="`${$t('word.data').toUpperCase()}: ${tab.elementType}`">
+                     {{ tab.elementName }}
                      <span
                         class="btn btn-clear"
                         :title="$t('word.close')"
@@ -89,8 +89,20 @@
 
                <a v-else-if="tab.type === 'table-props'" class="tab-link">
                   <i class="mdi mdi-tune-vertical-variant mdi-18px mr-1" />
-                  <span :title="`${$t('word.settings').toUpperCase()}: ${tab.table}`">
-                     {{ tab.table }}
+                  <span :title="`${$t('word.settings').toUpperCase()}: ${tab.elementType}`">
+                     {{ tab.elementName }}
+                     <span
+                        class="btn btn-clear"
+                        :title="$t('word.close')"
+                        @click.stop="closeTab(tab)"
+                     />
+                  </span>
+               </a>
+
+               <a v-else-if="tab.type === 'view-props'" class="tab-link">
+                  <i class="mdi mdi-tune-vertical-variant mdi-18px mr-1" />
+                  <span :title="`${$t('word.settings').toUpperCase()}: ${tab.elementType}`">
+                     {{ tab.elementName }}
                      <span
                         class="btn btn-clear"
                         :title="$t('word.close')"
@@ -147,12 +159,6 @@
             </li>
          </Draggable>
          <!--
-         <WorkspacePropsTabView
-            v-show="selectedTab === 'prop' && workspace.breadcrumbs.view"
-            :is-selected="selectedTab === 'prop'"
-            :connection="connection"
-            :view="workspace.breadcrumbs.view"
-         />
          <WorkspacePropsTabTrigger
             v-show="selectedTab === 'prop' && workspace.breadcrumbs.trigger"
             :is-selected="selectedTab === 'prop'"
@@ -196,7 +202,7 @@
                :key="tab.uid"
                :connection="connection"
                :is-selected="selectedTab === tab.uid"
-               :table="tab.table"
+               :table="tab.elementName"
                :schema="tab.schema"
                :element-type="tab.element"
             />
@@ -205,7 +211,15 @@
                :key="tab.uid"
                :connection="connection"
                :is-selected="selectedTab === tab.uid"
-               :table="tab.table"
+               :table="tab.elementName"
+               :schema="tab.schema"
+            />
+            <WorkspacePropsTabView
+               v-else-if="tab.type === 'view-props'"
+               :key="tab.uid"
+               :is-selected="selectedTab === tab.uid"
+               :connection="connection"
+               :view="tab.elementName"
                :schema="tab.schema"
             />
          </template>
@@ -228,7 +242,7 @@ import WorkspaceEditConnectionPanel from '@/components/WorkspaceEditConnectionPa
 import WorkspaceQueryTab from '@/components/WorkspaceQueryTab';
 import WorkspaceTableTab from '@/components/WorkspaceTableTab';
 import WorkspacePropsTab from '@/components/WorkspacePropsTab';
-// import WorkspacePropsTabView from '@/components/WorkspacePropsTabView';
+import WorkspacePropsTabView from '@/components/WorkspacePropsTabView';
 // import WorkspacePropsTabTrigger from '@/components/WorkspacePropsTabTrigger';
 // import WorkspacePropsTabRoutine from '@/components/WorkspacePropsTabRoutine';
 // import WorkspacePropsTabFunction from '@/components/WorkspacePropsTabFunction';
@@ -245,7 +259,7 @@ export default {
       WorkspaceQueryTab,
       WorkspaceTableTab,
       WorkspacePropsTab,
-      // WorkspacePropsTabView,
+      WorkspacePropsTabView,
       // WorkspacePropsTabTrigger,
       // WorkspacePropsTabRoutine,
       // WorkspacePropsTabFunction,
@@ -349,7 +363,7 @@ export default {
          this.newTab({ uid: this.connection.uid, type: 'query' });
       },
       openAsDataTab (tab) {
-         this.newTab({ uid: this.connection.uid, schema: tab.schema, table: tab.table, type: 'data', element: tab.element });
+         this.newTab({ uid: this.connection.uid, schema: tab.schema, elementName: tab.elementName, type: 'data', elementType: tab.elementType });
       },
       closeTab (tab) {
          if (tab.type === 'query' && this.queryTabs.length === 1) return;
diff --git a/src/renderer/components/WorkspaceExploreBarSchema.vue b/src/renderer/components/WorkspaceExploreBarSchema.vue
index eb76f8bb..0e29e868 100644
--- a/src/renderer/components/WorkspaceExploreBarSchema.vue
+++ b/src/renderer/components/WorkspaceExploreBarSchema.vue
@@ -282,11 +282,11 @@ export default {
          this.changeBreadcrumbs({ schema, table: null });
       },
       selectTable ({ schema, table }) {
-         this.newTab({ uid: this.connection.uid, table: table.name, schema: this.database.name, type: 'temp-data', element: table.type });
+         this.newTab({ uid: this.connection.uid, elementName: table.name, schema: this.database.name, type: 'temp-data', elementType: table.type });
          this.setBreadcrumbs({ schema, [table.type]: table.name });
       },
       openDataTab ({ schema, table }) {
-         this.newTab({ uid: this.connection.uid, table: table.name, schema: this.database.name, type: 'data', element: table.type });
+         this.newTab({ uid: this.connection.uid, elementName: table.name, schema: this.database.name, type: 'data', elementType: table.type });
          this.setBreadcrumbs({ schema, [table.type]: table.name });
       },
       showSchemaContext (event, schema) {
@@ -294,7 +294,6 @@ export default {
          this.$emit('show-schema-context', { event, schema });
       },
       showTableContext (event, table) {
-         // this.setBreadcrumbs({ schema: this.database.name, [table.type]: table.name });
          this.$emit('show-table-context', { event, schema: this.database.name, table });
       },
       showMiscContext (event, misc) {
diff --git a/src/renderer/components/WorkspaceExploreBarTableContext.vue b/src/renderer/components/WorkspaceExploreBarTableContext.vue
index fe2225b1..e9e5f885 100644
--- a/src/renderer/components/WorkspaceExploreBarTableContext.vue
+++ b/src/renderer/components/WorkspaceExploreBarTableContext.vue
@@ -6,7 +6,14 @@
       <div
          v-if="selectedTable.type === 'table' && workspace.customizations.tableSettings"
          class="context-element"
-         @click="openSettingTab"
+         @click="openTableSettingTab"
+      >
+         <span class="d-flex"><i class="mdi mdi-18px mdi-tune-vertical-variant text-light pr-1" /> {{ $t('word.settings') }}</span>
+      </div>
+      <div
+         v-if="selectedTable.type === 'view' && workspace.customizations.viewSettings"
+         class="context-element"
+         @click="openViewSettingTab"
       >
          <span class="d-flex"><i class="mdi mdi-18px mdi-tune-vertical-variant text-light pr-1" /> {{ $t('word.settings') }}</span>
       </div>
@@ -121,18 +128,34 @@ export default {
       closeContext () {
          this.$emit('close-context');
       },
-      openSettingTab () {
+      openTableSettingTab () {
          this.newTab({
             uid: this.selectedWorkspace,
-            table: this.selectedTable.name,
+            elementName: this.selectedTable.name,
             schema: this.selectedSchema,
             type: 'table-props',
-            element: this.selectedTable.type
+            elementType: 'table'
+         });
+
+         this.changeBreadcrumbs({
+            schema: this.selectedSchema,
+            table: this.selectedTable.name
+         });
+
+         this.closeContext();
+      },
+      openViewSettingTab () {
+         this.newTab({
+            uid: this.selectedWorkspace,
+            elementType: 'table',
+            elementName: this.selectedTable.name,
+            schema: this.selectedSchema,
+            type: 'view-props'
          });
 
          this.changeBreadcrumbs({
             schema: this.selectedSchema,
-            [this.selectedTable.type]: this.selectedTable.name
+            view: this.selectedTable.name
          });
 
          this.closeContext();
diff --git a/src/renderer/components/WorkspacePropsTab.vue b/src/renderer/components/WorkspacePropsTab.vue
index 35a96c0a..d426e00b 100644
--- a/src/renderer/components/WorkspacePropsTab.vue
+++ b/src/renderer/components/WorkspacePropsTab.vue
@@ -237,12 +237,12 @@ export default {
          try {
             this.localOptions = JSON.parse(JSON.stringify(this.tableOptions));
          }
-         catch (error) {}
+         catch (err) {}
 
          const params = {
             uid: this.connection.uid,
             schema: this.schema,
-            table: this.workspace.breadcrumbs.table
+            table: this.table
          };
 
          try { // Columns data
@@ -426,7 +426,7 @@ export default {
          const params = {
             uid: this.connection.uid,
             schema: this.schema,
-            table: this.workspace.breadcrumbs.table,
+            table: this.table,
             additions,
             changes,
             deletions,
@@ -454,8 +454,6 @@ export default {
                   });
                   this.changeBreadcrumbs({ schema: this.schema, table: this.localOptions.name });
                }
-
-               this.getFieldsData();
             }
             else
                this.addNotification({ status: 'error', message: response });
diff --git a/src/renderer/components/WorkspacePropsTabView.vue b/src/renderer/components/WorkspacePropsTabView.vue
index 2e466e43..b29bc042 100644
--- a/src/renderer/components/WorkspacePropsTabView.vue
+++ b/src/renderer/components/WorkspacePropsTabView.vue
@@ -1,5 +1,5 @@
 <template>
-   <div class="workspace-query-tab column col-12 columns col-gapless">
+   <div v-show="isSelected" class="workspace-query-tab column col-12 columns col-gapless">
       <div class="workspace-query-runner column col-12">
          <div class="workspace-query-runner-footer">
             <div class="workspace-query-buttons">
@@ -186,6 +186,8 @@ export default {
    },
    props: {
       connection: Object,
+      isSelected: Boolean,
+      schema: String,
       view: String
    },
    data () {
@@ -208,12 +210,6 @@ export default {
       workspace () {
          return this.getWorkspace(this.connection.uid);
       },
-      isSelected () {
-         return this.workspace.selected_tab === 'prop' && this.selectedWorkspace === this.workspace.uid && this.view;
-      },
-      schema () {
-         return this.workspace.breadcrumbs.schema;
-      },
       isChanged () {
          return JSON.stringify(this.originalView) !== JSON.stringify(this.localView);
       },
@@ -222,34 +218,44 @@ export default {
       }
    },
    watch: {
-      async view () {
+      schema () {
          if (this.isSelected) {
-            await this.getViewData();
+            this.getViewData();
             this.$refs.queryEditor.editor.session.setValue(this.localView.sql);
             this.lastView = this.view;
          }
       },
-      async isSelected (val) {
-         if (val && this.lastView !== this.view) {
-            await this.getViewData();
+      view () {
+         if (this.isSelected) {
+            this.getViewData();
             this.$refs.queryEditor.editor.session.setValue(this.localView.sql);
             this.lastView = this.view;
          }
       },
+      isSelected (val) {
+         if (val) {
+            this.changeBreadcrumbs({ schema: this.schema, view: this.view });
+
+            if (this.lastView !== this.view)
+               this.getViewData();
+         }
+      },
       isChanged (val) {
          if (this.isSelected && this.lastView === this.view && this.view !== null)
             this.setUnsavedChanges(val);
       }
    },
+   async created () {
+      await this.getViewData();
+      this.$refs.queryEditor.editor.session.setValue(this.localView.sql);
+      window.addEventListener('keydown', this.onKey);
+   },
    mounted () {
       window.addEventListener('resize', this.resizeQueryEditor);
    },
    destroyed () {
       window.removeEventListener('resize', this.resizeQueryEditor);
    },
-   created () {
-      window.addEventListener('keydown', this.onKey);
-   },
    beforeDestroy () {
       window.removeEventListener('keydown', this.onKey);
    },
@@ -258,17 +264,19 @@ export default {
          addNotification: 'notifications/addNotification',
          refreshStructure: 'workspaces/refreshStructure',
          setUnsavedChanges: 'workspaces/setUnsavedChanges',
-         changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
+         changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
+         renameTabs: 'workspaces/renameTabs'
       }),
       async getViewData () {
          if (!this.view) return;
          this.isLoading = true;
          this.localView = { sql: '' };
+         this.lastView = this.view;
 
          const params = {
             uid: this.connection.uid,
             schema: this.schema,
-            view: this.workspace.breadcrumbs.view
+            view: this.view
          };
 
          try {
@@ -310,10 +318,16 @@ export default {
 
                if (oldName !== this.localView.name) {
                   this.setUnsavedChanges(false);
+
+                  this.renameTabs({
+                     uid: this.connection.uid,
+                     schema: this.schema,
+                     elementName: oldName,
+                     elementNewName: this.localView.name,
+                     elementType: 'view'
+                  });
                   this.changeBreadcrumbs({ schema: this.schema, view: this.localView.name });
                }
-
-               this.getViewData();
             }
             else
                this.addNotification({ status: 'error', message: response });
diff --git a/src/renderer/store/modules/workspaces.store.js b/src/renderer/store/modules/workspaces.store.js
index e5714bce..74b3032b 100644
--- a/src/renderer/store/modules/workspaces.store.js
+++ b/src/renderer/store/modules/workspaces.store.js
@@ -178,7 +178,7 @@ export default {
             }
             : workspace);
       },
-      NEW_TAB (state, { uid, tab, content, type, autorun, schema, table, element }) {
+      NEW_TAB (state, { uid, tab, content, type, autorun, schema, elementName, elementType }) {
          if (type === 'query')
             tabIndex[uid] = tabIndex[uid] ? ++tabIndex[uid] : 1;
 
@@ -188,8 +188,8 @@ export default {
             selected: false,
             type,
             schema,
-            table,
-            element,
+            elementName,
+            elementType,
             fields: [],
             keyUsage: [],
             content: content || '',
@@ -218,14 +218,14 @@ export default {
                return workspace;
          });
       },
-      REPLACE_TAB (state, { uid, tab: tUid, type, schema, table, element }) {
+      REPLACE_TAB (state, { uid, tab: tUid, type, schema, elementName, elementType }) {
          state.workspaces = state.workspaces.map(workspace => {
             if (workspace.uid === uid) {
                return {
                   ...workspace,
                   tabs: workspace.tabs.map(tab => {
                      if (tab.uid === tUid)
-                        return { ...tab, type, schema, table, element };
+                        return { ...tab, type, schema, elementName, elementType };
 
                      return tab;
                   })
@@ -241,10 +241,10 @@ export default {
                return {
                   ...workspace,
                   tabs: workspace.tabs.map(tab => {
-                     if (tab[elementType] === elementName && tab.schema === schema) {
+                     if (tab.elementName === elementName && tab.schema === schema) {
                         return {
                            ...tab,
-                           [elementType]: elementNewName
+                           elementName: elementNewName
                         };
                      }
 
@@ -517,7 +517,7 @@ export default {
       setSearchTerm ({ commit, getters }, term) {
          commit('SET_SEARCH_TERM', { uid: getters.getSelected, term });
       },
-      newTab ({ state, commit }, { uid, content, type, autorun, schema, table, element }) {
+      newTab ({ state, commit }, { uid, content, type, autorun, schema, elementName, elementType }) {
          let tabUid;
          const workspaceTabs = state.workspaces.find(workspace => workspace.uid === uid);
 
@@ -525,7 +525,8 @@ export default {
             const existentTab = workspaceTabs
                ? workspaceTabs.tabs.find(tab =>
                   tab.schema === schema &&
-                  tab.table === table &&
+                  tab.elementName === elementName &&
+                  tab.elementType === elementType &&
                   ['temp-data', 'data'].includes(tab.type))
                : false;
 
@@ -536,13 +537,13 @@ export default {
                const tempTabs = workspaceTabs ? workspaceTabs.tabs.filter(tab => tab.type === 'temp-data') : false;
                if (tempTabs && tempTabs.length) { // if temp table already opened
                   for (const tab of tempTabs) {
-                     commit('REPLACE_TAB', { uid, tab: tab.uid, type, schema, table, element });
+                     commit('REPLACE_TAB', { uid, tab: tab.uid, type, schema, elementName, elementType });
                      tabUid = tab.uid;
                   }
                }
                else {
                   tabUid = uidGen('T');
-                  commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, table, element });
+                  commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, elementName, elementType });
                }
             }
          }
@@ -550,39 +551,40 @@ export default {
             const existentTab = workspaceTabs
                ? workspaceTabs.tabs.find(tab =>
                   tab.schema === schema &&
-                  tab.table === table &&
+                  tab.elementName === elementName &&
+                  tab.elementType === elementType &&
                   ['temp-data', 'data'].includes(tab.type))
                : false;
 
             if (existentTab) {
-               commit('REPLACE_TAB', { uid, tab: existentTab.uid, type, schema, table, element });
+               commit('REPLACE_TAB', { uid, tab: existentTab.uid, type, schema, elementName, elementType });
                tabUid = existentTab.uid;
             }
             else {
                tabUid = uidGen('T');
-               commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, table });
+               commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, elementName, elementType });
             }
          }
          else if (type === 'table-props') {
             const existentTab = workspaceTabs
                ? workspaceTabs.tabs.find(tab =>
-                  tab.schema === schema &&
-                  tab.table === table &&
+                  tab.elementName === elementName &&
+                  tab.elementType === elementType &&
                   tab.type === type)
                : false;
 
             if (existentTab) {
-               commit('REPLACE_TAB', { uid, tab: existentTab.uid, type, schema, table, element });
+               commit('REPLACE_TAB', { uid, tab: existentTab.uid, type, schema, elementName, elementType });
                tabUid = existentTab.uid;
             }
             else {
                tabUid = uidGen('T');
-               commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, table });
+               commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, elementName, elementType });
             }
          }
          else {
             tabUid = uidGen('T');
-            commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, table });
+            commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, elementName, elementType });
          }
 
          commit('SELECT_TAB', { uid, tab: tabUid });