feat(UI): new table settings tabs

src/renderer/components/Workspace.vue

@@ -86,6 +86,18 @@
                      />
                   </span>
                </a>
+
+               <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
+                        class="btn btn-clear"
+                        :title="$t('word.close')"
+                        @click.stop="closeTab(tab)"
+                     />
+                  </span>
+               </a>
             </li>
             <li slot="header" class="tab-item dropdown tools-dropdown">
                <a
@@ -134,12 +146,7 @@
                </a>
             </li>
          </Draggable>
-         <!-- <WorkspacePropsTab
-            v-show="selectedTab === 'prop' && workspace.breadcrumbs.table"
-            :is-selected="selectedTab === 'prop'"
-            :connection="connection"
-            :table="workspace.breadcrumbs.table"
-         />
+         <!--
          <WorkspacePropsTabView
             v-show="selectedTab === 'prop' && workspace.breadcrumbs.view"
             :is-selected="selectedTab === 'prop'"
@@ -193,6 +200,14 @@
                :schema="tab.schema"
                :element-type="tab.element"
             />
+            <WorkspacePropsTab
+               v-else-if="tab.type === 'table-props'"
+               :key="tab.uid"
+               :connection="connection"
+               :is-selected="selectedTab === tab.uid"
+               :table="tab.table"
+               :schema="tab.schema"
+            />
          </template>
       </div>
       <WorkspaceEditConnectionPanel v-else :connection="connection" />
@@ -212,7 +227,7 @@ import WorkspaceExploreBar from '@/components/WorkspaceExploreBar';
 import WorkspaceEditConnectionPanel from '@/components/WorkspaceEditConnectionPanel';
 import WorkspaceQueryTab from '@/components/WorkspaceQueryTab';
 import WorkspaceTableTab from '@/components/WorkspaceTableTab';
-// import WorkspacePropsTab from '@/components/WorkspacePropsTab';
+import WorkspacePropsTab from '@/components/WorkspacePropsTab';
 // import WorkspacePropsTabView from '@/components/WorkspacePropsTabView';
 // import WorkspacePropsTabTrigger from '@/components/WorkspacePropsTabTrigger';
 // import WorkspacePropsTabRoutine from '@/components/WorkspacePropsTabRoutine';
@@ -229,7 +244,7 @@ export default {
       WorkspaceEditConnectionPanel,
       WorkspaceQueryTab,
       WorkspaceTableTab,
-      // WorkspacePropsTab,
+      WorkspacePropsTab,
       // WorkspacePropsTabView,
       // WorkspacePropsTabTrigger,
       // WorkspacePropsTabRoutine,

src/renderer/components/WorkspaceExploreBarTableContext.vue

@@ -3,6 +3,13 @@
       :context-event="contextEvent"
       @close-context="closeContext"
    >
+      <div
+         v-if="selectedTable.type === 'table' && workspace.customizations.tableSettings"
+         class="context-element"
+         @click="openSettingTab"
+      >
+         <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 === 'table'"
          class="context-element"
@@ -93,6 +100,7 @@ export default {
    methods: {
       ...mapActions({
          addNotification: 'notifications/addNotification',
+         newTab: 'workspaces/newTab',
          changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
       }),
       showCreateTableModal () {
@@ -113,6 +121,22 @@ export default {
       closeContext () {
          this.$emit('close-context');
       },
+      openSettingTab () {
+         this.newTab({
+            uid: this.selectedWorkspace,
+            table: this.selectedTable.name,
+            schema: this.selectedSchema,
+            type: 'table-props',
+            element: this.selectedTable.type
+         });
+
+         this.changeBreadcrumbs({
+            schema: this.selectedSchema,
+            [this.selectedTable.type]: this.selectedTable.name
+         });
+
+         this.closeContext();
+      },
       async duplicateTable () {
          try {
             const { status, response } = await Tables.duplicateTable({

src/renderer/components/WorkspacePropsTab.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">
@@ -50,6 +50,11 @@
                   <span>{{ $t('word.options') }}</span>
                </button>
             </div>
+            <div class="workspace-query-info">
+               <div class="d-flex" :title="$t('word.schema')">
+                  <i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
+               </div>
+            </div>
          </div>
       </div>
       <div class="workspace-query-results column col-12 p-relative">
@@ -126,11 +131,13 @@ export default {
    },
    props: {
       connection: Object,
-      table: String
+      isSelected: Boolean,
+      table: String,
+      schema: String
    },
    data () {
       return {
-         tabUid: 'prop',
+         tabUid: 'prop', // ???
          isLoading: false,
          isSaving: false,
          isOptionsModal: false,
@@ -164,12 +171,6 @@ export default {
       defaultEngine () {
          return this.getDatabaseVariable(this.connection.uid, 'default_storage_engine').value || '';
       },
-      isSelected () {
-         return this.workspace.selected_tab === 'prop' && this.selectedWorkspace === this.workspace.uid && this.table;
-      },
-      schema () {
-         return this.workspace.breadcrumbs.schema;
-      },
       schemaTables () {
          const schemaTables = this.workspace.structure
             .filter(schema => schema.name === this.schema)
@@ -198,9 +199,11 @@ export default {
          }
       },
       isSelected (val) {
-         if (val && this.lastTable !== this.table) {
-            this.getFieldsData();
-            this.lastTable = this.table;
+         if (val) {
+            this.changeBreadcrumbs({ schema: this.schema, table: this.table });
+
+            if (this.lastTable !== this.table)
+               this.getFieldsData();
          }
       },
       isChanged (val) {
@@ -209,6 +212,7 @@ export default {
       }
    },
    created () {
+      this.getFieldsData();
       window.addEventListener('keydown', this.onKey);
    },
    beforeDestroy () {
@@ -219,12 +223,14 @@ export default {
          addNotification: 'notifications/addNotification',
          refreshStructure: 'workspaces/refreshStructure',
          setUnsavedChanges: 'workspaces/setUnsavedChanges',
+         newTab: 'workspaces/newTab',
          changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
       }),
       async getFieldsData () {
          if (!this.table) return;
 
          this.localFields = [];
+         this.lastTable = this.table;
          this.newFieldsCounter = 0;
          this.isLoading = true;
          this.localOptions = JSON.parse(JSON.stringify(this.tableOptions));
@@ -435,6 +441,7 @@ export default {
 
                if (oldName !== this.localOptions.name) {
                   this.setUnsavedChanges(false);
+                  this.newTab({ uid: this.connection.uid, schema: this.schema, table: this.localOptions.name, type: 'table-props' });// TODO: rename function that gets new and old name and change it on all opened tables
                   this.changeBreadcrumbs({ schema: this.schema, table: this.localOptions.name });
                }
 

src/renderer/components/WorkspaceQueryTable.vue

@@ -228,6 +228,9 @@ export default {
       },
       resultsetIndex () {
          this.setLocalResults();
+      },
+      isSelected (val) {
+         if (val) this.refreshScroller();
       }
    },
    updated () {

src/renderer/store/modules/workspaces.store.js

@@ -542,6 +542,23 @@ export default {
                commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, table });
             }
          }
+         else if (type === 'table-props') {
+            const existentTab = workspaceTabs
+               ? workspaceTabs.tabs.find(tab =>
+                  tab.schema === schema &&
+                  tab.table === table &&
+                  tab.type === type)
+               : false;
+
+            if (existentTab) {
+               commit('REPLACE_TAB', { uid, tab: existentTab.uid, type, schema, table, element });
+               tabUid = existentTab.uid;
+            }
+            else {
+               tabUid = uidGen('T');
+               commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, table });
+            }
+         }
          else {
             tabUid = uidGen('T');
             commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, table });