refactor(UI): improved breadcrumbs and tabs

src/renderer/components/Workspace.vue

@@ -186,6 +186,7 @@
                :is-selected="selectedTab === tab.uid"
                :table="tab.table"
                :schema="tab.schema"
+               :element-type="tab.element"
             />
          </template>
       </div>
@@ -383,15 +384,25 @@ export default {
         flex: initial;
 
         > a {
-          padding: 0.2rem 0.8rem;
+          padding: 0.2rem 0.6rem;
           cursor: pointer;
           display: flex;
           align-items: center;
           opacity: 0.7;
           transition: opacity 0.2s;
 
+          .btn-clear {
+            margin-left: 0.5rem;
+            opacity: 0;
+            transition: opacity 0.2s;
+          }
+
           &:hover {
             opacity: 1;
+
+            .btn-clear {
+              opacity: 1;
+            }
           }
 
           &.tab-add {
@@ -410,6 +421,10 @@ export default {
 
         &.active a {
           opacity: 1;
+
+          .btn-clear {
+            opacity: 1;
+          }
         }
 
         &.tools-dropdown {

src/renderer/components/WorkspaceExploreBarSchema.vue

@@ -294,7 +294,7 @@ export default {
          this.$emit('show-schema-context', { event, schema });
       },
       showTableContext (event, table) {
-         this.setBreadcrumbs({ schema: this.database.name, [table.type]: table.name });
+         // this.setBreadcrumbs({ schema: this.database.name, [table.type]: table.name });
          this.$emit('show-table-context', { event, table });
       },
       showMiscContext (event, misc) {

src/renderer/components/WorkspaceQueryTab.vue

@@ -163,8 +163,15 @@ export default {
          return this.workspace.uid === this.selectedWorkspace;
       }
    },
+   watch: {
+      isSelected (val) {
+         if (val)
+            this.changeBreadcrumbs({ schema: this.schema, query: `Query #${this.tab.index}` });
+      }
+   },
    created () {
       this.query = this.tab.content;
+      this.changeBreadcrumbs({ schema: this.schema, query: `Query #${this.tab.index}` });
 
       window.addEventListener('keydown', this.onKey);
    },
@@ -186,7 +193,8 @@ export default {
    },
    methods: {
       ...mapActions({
-         addNotification: 'notifications/addNotification'
+         addNotification: 'notifications/addNotification',
+         changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
       }),
       async runQuery (query) {
          if (!query || this.isQuering) return;

src/renderer/components/WorkspaceQueryTable.vue

@@ -71,6 +71,7 @@
                   :row="row"
                   :fields="fieldsObj"
                   :key-usage="keyUsage"
+                  :element-type="elementType"
                   :class="{'selected': selectedRows.includes(row._id)}"
                   @select-row="selectRow($event, row._id)"
                   @update-field="updateField($event, row)"
@@ -123,7 +124,8 @@ export default {
       results: Array,
       connUid: String,
       mode: String,
-      isSelected: Boolean
+      isSelected: Boolean,
+      elementType: { type: String, default: 'table' }
    },
    data () {
       return {

src/renderer/components/WorkspaceQueryTableRow.vue

@@ -260,7 +260,8 @@ export default {
    props: {
       row: Object,
       fields: Object,
-      keyUsage: Array
+      keyUsage: Array,
+      elementType: { type: String, default: 'table' }
    },
    data () {
       return {
@@ -334,6 +335,8 @@ export default {
          return this.keyUsage.map(key => key.field);
       },
       isEditable () {
+         if (this.elementType === 'view') return false;
+
          if (this.fields) {
             const nElements = Object.keys(this.fields).reduce((acc, curr) => {
                acc.add(this.fields[curr].table);

src/renderer/components/WorkspaceTableTab.vue

@@ -131,6 +131,7 @@
             :conn-uid="connection.uid"
             :is-selected="isSelected"
             mode="table"
+            :element-type="elementType"
             @update-field="updateField"
             @delete-selected="deleteSelected"
             @hard-sort="hardSort"
@@ -183,7 +184,8 @@ export default {
       connection: Object,
       isSelected: Boolean,
       table: String,
-      schema: String
+      schema: String,
+      elementType: String
    },
    data () {
       return {
@@ -261,9 +263,11 @@ export default {
          }
       },
       isSelected (val) {
-         if (val && this.lastTable !== this.table) {
+         if (val) {
-            this.getTableData();
+            this.changeBreadcrumbs({ schema: this.schema, [this.elementType]: this.table });
-            this.lastTable = this.table;
+
+            if (this.lastTable !== this.table)
+               this.getTableData();
          }
       }
    },
@@ -277,7 +281,8 @@ export default {
    },
    methods: {
       ...mapActions({
-         addNotification: 'notifications/addNotification'
+         addNotification: 'notifications/addNotification',
+         changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
       }),
       async getTableData (sortParams) {
          if (!this.table) return;
@@ -287,6 +292,8 @@ export default {
          if (this.lastTable !== this.table)
             this.results = [];
 
+         this.lastTable = this.table;
+
          const params = {
             uid: this.connection.uid,
             schema: this.schema,

src/renderer/scss/themes/dark-theme.scss

@@ -63,6 +63,12 @@
         background-color: $primary-color;
       }
     }
+
+    &.btn-clear {
+      &:hover {
+        background: rgba($light-color, 20%);
+      }
+    }
   }
 
   .modal {

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

@@ -472,7 +472,8 @@ export default {
             procedure: null,
             function: null,
             scheduler: null,
-            view: null
+            view: null,
+            query: null
          };
 
          const hasLastChildren = Object.keys(lastBreadcrumbs).filter(b => b !== 'schema').some(b => lastBreadcrumbs[b]);